Skip to content

ROU-12924: implement UI for interaction patterns #1198

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
BenOsodrac merged 9 commits into from
Aug 10, 2026
Merged

ROU-12924: implement UI for interaction patterns #1198

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
b926706
update floating-action tokens
BenOsodrac Aug 5, 2026
ca405bc
inputWithIcon improvements
BenOsodrac Aug 5, 2026
08d2633
lightbox improvements
BenOsodrac Aug 6, 2026
0662ef6
improve range slider styles
BenOsodrac Aug 6, 2026
3d9207e
fix slider focus color
BenOsodrac Aug 6, 2026
1671640
Merge remote-tracking branch 'origin/ROU-12714' into ROU-12924
BenOsodrac Aug 6, 2026
e743f41
Apply suggestions from code review
BenOsodrac Aug 10, 2026
e8c5306
fix color icon
BenOsodrac Aug 10, 2026
c55eca8
foxed items font-size
BenOsodrac Aug 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,11 @@ const config: StorybookConfig = {
{ from: path.join(repoRoot, 'node_modules/@floating-ui/core/dist'), to: '/vendor/floating-ui-core' },
{ from: path.join(repoRoot, 'node_modules/@floating-ui/dom/dist'), to: '/vendor/floating-ui-dom' },
{ from: path.join(repoRoot, 'node_modules/virtual-select-plugin/dist'), to: '/vendor/virtual-select' },
// PhotoSwipe 4.1.0 — the version the OutSystems platform ships for the Lightbox
// Image block. Not bundled by this library (the block is low-code only); OUI only
// restyles the overlay chrome. Serve the whole `dist` so `default-skin.css` can
// resolve its relative sprite URLs (default-skin.png/.svg, preloader.gif).
{ from: path.join(repoRoot, 'node_modules/photoswipe/dist'), to: '/vendor/photoswipe' },
],
};

Expand Down
12 changes: 12 additions & 0 deletions .storybook/preview-head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,15 @@
<link rel="stylesheet" href="/vendor/splide/css/splide.min.css" />
<link rel="stylesheet" href="/vendor/nouislider/nouislider.min.css" />
<link rel="stylesheet" href="/vendor/virtual-select/virtual-select.min.css" />
<!--
PhotoSwipe 4.1.0 (Lightbox Image). The vendor skin loads BEFORE the OUI theme on
purpose — that is the real platform order, and it is what lets OUI strip the
sprite backgrounds and repaint the overlay chrome with icon-font glyphs
(src/scss/01-foundations/_icon-library-odc.scss). Load it after the OUI theme and
the sprite would win, hiding the very layer the Lightbox stories exercise.
-->
<link rel="stylesheet" href="/vendor/photoswipe/photoswipe.css" />
<link rel="stylesheet" href="/vendor/photoswipe/default-skin/default-skin.css" />

<!--
Core platform base CSS — MUST load before the OUI theme. It establishes the
Expand Down Expand Up @@ -80,6 +89,9 @@
<script defer src="/vendor/floating-ui-core/floating-ui.core.umd.js"></script>
<script defer src="/vendor/floating-ui-dom/floating-ui.dom.umd.js"></script>
<script defer src="/vendor/virtual-select/virtual-select.min.js"></script>
<!-- PhotoSwipe → window.PhotoSwipe + window.PhotoSwipeUI_Default (core before UI), used by Lightbox Image -->
<script defer src="/vendor/photoswipe/photoswipe.min.js"></script>
<script defer src="/vendor/photoswipe/photoswipe-ui-default.min.js"></script>

<!-- OutSystems UI compiled bundle (exposes OutSystems.OSUI.* / OSFramework.OSUI.*) -->
<script defer src="/osui/ODC.OutSystemsUI.js"></script>
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,8 @@
"gulp-typescript": "^6.0.0-alpha.1",
"json-fixer": "^1.6.15",
"nouislider": "^15.8.1",
"outsystems-design-tokens": "^1.4.0",
"outsystems-design-tokens": "^1.4.1",
"photoswipe": "^4.1.0",
"postcss": "^8.4.38",
"postcss-discard-comments": "^5.1.2",
"postcss-discard-duplicates": "^5.1.0",
Expand Down
55 changes: 45 additions & 10 deletions src/scss/01-foundations/_icon-library-odc.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
// Lightbox
--osui-icon-arrow-next: '\f061';
--osui-icon-arrow-previous: '\f060';
--osui-icon-zoom-in: '\f00e'; // fa-search-plus

// Password Policy
--osui-icon-circle-x: '\f057';
Expand Down Expand Up @@ -103,6 +104,7 @@ body.iconLibrary-phosphor {
// Lightbox
--osui-icon-arrow-next: '\e06c';
--osui-icon-arrow-previous: '\e058';
--osui-icon-zoom-in: '\e310'; // ph-magnifying-glass-plus

// Password Policy
--osui-icon-circle-x: '\e4f8';
Expand Down Expand Up @@ -521,36 +523,69 @@ body.iconLibrary-phosphor {
}

// Lightbox
.pswp__button,
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
// Drop the vendor sprite so the glyphs below show through. On the button itself the
// `background` shorthand is fine, but NOT on the arrow pseudo-elements: default-skin.css
// paints both the sprite AND the arrows' translucent square in that one shorthand, so
// resetting it wholesale silently removes the square too (see the arrow rule below).
.pswp__button {
background: none !important;
}

.pswp__button.pswp__button--close:before {
color: variables.$token-primitives-base-white;
content: var(--osui-icon-clear);
// Top-bar buttons share one glyph box so they stay aligned with each other; only
// the `content` differs. `.pswp__button` is `position: relative` in photoswipe.css,
// which is what these absolute glyphs are positioned against.
.pswp__button.pswp__button--close:before,
.pswp__button.pswp__button--zoom:before {
color: variables.$token-icon-inverse;
font-family: var(--osui-icon-font-family);
font-size: variables.$token-font-size-500;
font-size: variables.$token-font-size-700;
position: absolute;
right: 25%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
}

.pswp__button.pswp__button--close:before {
content: var(--osui-icon-clear);
}

.pswp__button.pswp__button--zoom:before {
content: var(--osui-icon-zoom-in);
}

// The arrows' translucent square lives on the pseudo-element; the button itself is
// only a 70x100 hit area. Only the sprite is dropped here — `background-image`, not
// the shorthand, which would take the square with it. `!important` is required
// because `.pswp--svg …:before` swaps in the SVG sprite at higher specificity.
//
// Geometry is 32x32 inset 4px, replacing the vendor's 30x32 inset 6px. 32px is the
// design's icon container (an 18x18 glyph with 7px padding all round); the 4px inset is
// measured off the design frame and snapped to the ramp. Centred with
// `top: 50%`/`translateY` rather than the vendor's hardcoded `top: 35px`, so the
// square stays centred regardless of the button's height.
.pswp__button--arrow--right:before,
.pswp__button--arrow--left:before {
color: variables.$token-primitives-base-white;
align-items: center;
background-color: variables.$token-backdrop;
background-image: none !important;
color: variables.$token-icon-inverse;
display: flex;
font-family: var(--osui-icon-font-family);
font-size: variables.$token-font-size-500;
font-size: variables.$token-font-size-450;
height: variables.$token-scale-800;
justify-content: center;
top: 50%;
transform: translateY(-50%);
width: variables.$token-scale-800;
}

.pswp__button--arrow--right:before {
content: var(--osui-icon-arrow-next);
right: variables.$token-scale-100;
}

.pswp__button--arrow--left:before {
content: var(--osui-icon-arrow-previous);
left: variables.$token-scale-100;
}

// Password Policy
Expand Down
10 changes: 5 additions & 5 deletions src/scss/04-patterns/03-interaction/_floating-actions.scss
View file
Open in desktop

@OS-giulianasilva OS-giulianasilva Aug 7, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the floating action's icons are slightly smaller than in Figma.

@BenOsodrac BenOsodrac Aug 10, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image I don't have dev mode on Figma, but at least following the size seems the same. Using 32px as font-size currently.

Do you see other value on figma?

@OS-giulianasilva OS-giulianasilva Aug 10, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, the floating action items' icons in Figma have 20px height and the implemented ones have 16px.

image image

@BenOsodrac BenOsodrac Aug 10, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed: https://6a1eb7050a5a593505d96954-icmpnterci.chromatic.com/?path=/story/patterns-interaction-floatingactions--default

Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@
&-actions-wrapper {
// ─── Component CSS API ─────────────────────────────────────────────
--osui-floating-actions-button-background: var(--color-primary);
--osui-floating-actions-button-background-hover: #{variables.$token-semantics-primary-800};
--osui-floating-actions-button-background-press: #{variables.$token-bg-primary-base-press};
--osui-floating-actions-button-background-hover: var(--color-primary-hover);
--osui-floating-actions-button-background-press: var(--color-primary-selected);
--osui-floating-actions-button-color: var(--color-text-inverse);
--osui-floating-actions-button-shadow: #{variables.$token-elevation-3};
--osui-floating-actions-item-background: var(--color-background-surface);
--osui-floating-actions-item-background-hover: #{variables.$token-primitives-neutral-100};
--osui-floating-actions-item-background-hover: #{variables.$token-bg-neutral-subtlest-hover};
--osui-floating-actions-item-background-press: #{variables.$token-bg-neutral-subtlest-press};
--osui-floating-actions-item-color: var(--color-text);
--osui-floating-actions-item-shadow: #{variables.$token-elevation-2};
Expand Down Expand Up @@ -124,7 +124,7 @@
color: var(--osui-floating-actions-item-color);
cursor: pointer;
display: flex;
font-size: variables.$token-font-size-400;
font-size: variables.$token-font-size-500;
height: variables.$token-scale-1000;
justify-content: center;
margin-left: variables.$token-scale-400;
Expand Down Expand Up @@ -155,7 +155,7 @@
color: var(--osui-floating-actions-button-color);
cursor: pointer;
display: flex;
font-size: variables.$token-font-size-550;
font-size: variables.$token-font-size-800;
height: variables.$token-scale-1400;
justify-content: center;
pointer-events: auto;
Expand Down
18 changes: 17 additions & 1 deletion src/scss/04-patterns/03-interaction/_input-with-icon.scss
View file
Open in desktop
Comment thread
OS-giulianasilva marked this conversation as resolved.
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
///
.input-with-icon {
// ─── Component CSS API ─────────────────────────────────────────────
--osui-input-with-icon-icon-color: var(--color-text-subtle);
--osui-input-with-icon-icon-color: variables.$token-icon-default;
--osui-input-with-icon-icon-hover-color: var(--color-text-subtlest);
// ───────────────────────────────────────────────────────────────────

Expand All @@ -32,10 +32,26 @@
}
}

/* A trailing `.search-actions` slot is absolutely positioned over the input, so
reserve room for it or long values run underneath the icon. Matched with
`:has()` rather than a sibling combinator so it holds whichever side of
`.input-with-icon-input` the slot is authored on. Scoped away from
`.input-with-icon-right`, where `.search-actions` docks to the LEFT instead
and the padding pair is already set in that block. */
&:not(.input-with-icon-right):has(.input-with-icon-content-icon.search-actions:not(:empty)) {
.input-with-icon-input input {
padding-right: variables.$token-scale-1000;
}
}

.input-with-icon {
&-content-icon {
/* The slot is a fixed 40px box the glyph sits inside; without these the
glyph stretches full-height and hugs the slot's leading edge. */
align-items: center;
display: inline-flex;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
width: variables.$token-scale-1000;
Expand Down
33 changes: 21 additions & 12 deletions src/scss/04-patterns/03-interaction/range-slider/_rangeslider.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,10 @@
--osui-range-slider-handle-background: var(--color-background-surface);
--osui-range-slider-handle-border-color: var(--color-primary);
--osui-range-slider-handle-shadow: #{variables.$token-elevation-1};
--osui-range-slider-disabled-track-color: #{variables.$token-bg-neutral-subtle-default};
// Disabled: the track lightens from the enabled `--color-border` (#cecece), and the
// filled connect lightens further still so it recedes rather than standing out.
--osui-range-slider-disabled-track-color: var(--osui-range-slider-track-color);
--osui-range-slider-disabled-connect-color: #{variables.$token-bg-neutral-base-default};
--osui-range-slider-disabled-color: var(--color-text-disabled);
// ───────────────────────────────────────────────────────────────────

Expand Down Expand Up @@ -249,20 +252,21 @@
--osui-range-slider-handle-background: var(--color-background-input-disabled);
--osui-range-slider-disabled-color: var(--color-text-disabled);

// noUiSlider turns the provider element itself into `.noUi-target`, so the
// disabled track colour belongs HERE and not on a descendant — a nested
// `.noUi-target` rule matches nothing and silently leaves the track at its
// enabled colour.
background-color: var(--osui-range-slider-disabled-track-color);
pointer-events: none;

.noUi {
&-target {
background-color: var(--color-border);
}

&-connect {
background-color: var(--color-text-disabled);
background-color: var(--osui-range-slider-disabled-connect-color);
}

&-handle {
background-color: var(--osui-range-slider-handle-background);
border: variables.$token-border-size-025 solid var(--color-border-input);
--osui-range-slider-handle-border-color: #{variables.$token-border-input-default};

box-shadow: none;

&:before,
Expand All @@ -276,9 +280,9 @@
}
}

.noUi-tooltip {
color: var(--osui-range-slider-disabled-color);
}
// The floating value label deliberately keeps its default `--color-text` and is
// NOT dimmed: the current value stays readable while disabled. Only the scale
// (pips) recedes. Don't add a `.noUi-tooltip` colour override here.
}
}
}
Expand All @@ -293,8 +297,13 @@
border-color: var(--color-focus-outer);
}

// Keep the handle's own border colour on focus — the focus affordance is the halo
// below, not a recolour. This rule comes after the `.noUi-active` / `:hover`
// primary border at equal specificity, so hardcoding a colour here silently wins
// over it and turns the pressed handle black. Routing through the CSS API var also
// means a disabled handle (which overrides it) stays grey when focused.
.noUi-handle:focus {
border-color: var(--color-text);
border-color: var(--osui-range-slider-handle-border-color);
box-shadow: 0 0 0 variables.$token-border-size-075 var(--color-focus-outer);
}
}
Expand Down
2 changes: 1 addition & 1 deletion stories/FloatingActions.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const ACTIONS: Array<[label: string, icon: string]> = [
function itemMarkup(label: string, icon: string, delay: number): string {
return `
<div class="floating-actions-item" style="--delay: ${delay}">
<span style="background: var(--color-background-surface); border-radius: var(--border-radius-soft); box-shadow: var(--osui-floating-actions-button-shadow, none); font-size: 13px; padding: 4px 12px;">${label}</span>
<span >${label}</span>
<div class="floating-actions-item-button" role="button" tabindex="0" aria-label="${label}">
<i class="icon ph ${icon}"></i>
</div>
Expand Down
Loading