From ea6b825572707d1d8bfe779b6a27b6e54514f768 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Wed, 9 Jul 2025 18:17:20 +0200 Subject: [PATCH 01/78] First version of tag (without tag input) --- scss/_tag.scss | 243 +++++++ scss/_tags.scss | 141 ---- scss/_variables.scss | 38 -- scss/ouds-web.scss | 2 +- scss/tokens/_component.scss | 34 +- scss/tokens/_composite.scss | 2 +- site/data/sidebar.yml | 3 +- .../shortcodes/BootstrapCompatibility.astro | 4 +- site/src/content/docs/components/buttons.mdx | 6 +- site/src/content/docs/components/tag.mdx | 637 ++++++++++++++++++ site/src/content/docs/components/tags.mdx | 9 - .../src/content/docs/migrations/migration.mdx | 184 ++--- 12 files changed, 996 insertions(+), 307 deletions(-) create mode 100644 scss/_tag.scss delete mode 100644 scss/_tags.scss create mode 100644 site/src/content/docs/components/tag.mdx delete mode 100644 site/src/content/docs/components/tags.mdx diff --git a/scss/_tag.scss b/scss/_tag.scss new file mode 100644 index 0000000000..e1e408f539 --- /dev/null +++ b/scss/_tag.scss @@ -0,0 +1,243 @@ +.tag { + // scss-docs-start tag-css-vars + --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-default}; + --#{$prefix}tag-padding-end: #{$ouds-tag-space-padding-inline-default}; + --#{$prefix}tag-padding-y: #{$ouds-tag-space-padding-block-default}; + --#{$prefix}tag-min-width: #{$ouds-tag-size-min-width-default}; + --#{$prefix}tag-min-height: #{$ouds-tag-size-min-height-default}; + --#{$prefix}tag-color: #{$ouds-color-content-on-status-neutral-emphasized}; + --#{$prefix}tag-background-color: #{$ouds-color-surface-status-neutral-emphasized}; + --#{$prefix}tag-asset-container-size: 16px; // TODO ouds/💠_indicator/tag/size/asset-default + --#{$prefix}tag-asset-padding: 1px; // TODO replace by ouds/💠_indicator/tag/space/inset/icon-default + --#{$prefix}tag-asset-gap: #{$ouds-tag-space-column-gap-default}; + --#{$prefix}tag-asset-color: currentcolor; + --#{$prefix}btn-loading-dasharray: 96; + --#{$prefix}btn-loading-animation: 2.1875s infinite linear rotate1-indeterminate, 1.25s linear infinite rotate2-indeterminate; + // scss-docs-end tag-css-vars + + display: inline-flex; + align-items: center; + justify-content: center; + min-width: var(--#{$prefix}tag-min-width); + min-height: var(--#{$prefix}tag-min-height); + padding: var(--#{$prefix}tag-padding-y) var(--#{$prefix}tag-padding-end) var(--#{$prefix}tag-padding-y) var(--#{$prefix}tag-padding-start); + margin: 0; + font-weight: 700; + color: var(--#{$prefix}tag-color); + white-space: nowrap; + vertical-align: text-bottom; // TODO to fix + background-color: var(--#{$prefix}tag-background-color); + @include get-font-size("label-medium"); + @include border-radius(#{$ouds-tag-border-radius}); + + &:has(.tag-asset-container) { + --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-default-asset}; + } +} + +.tag-disabled { + --#{$prefix}tag-color: #{$ouds-color-content-on-action-disabled}; + --#{$prefix}tag-background-color: #{$ouds-color-action-disabled}; +} + +.tag-muted { + --#{$prefix}tag-color: #{$ouds-color-content-on-status-neutral-muted}; + --#{$prefix}tag-background-color: #{$ouds-color-surface-status-neutral-muted}; +} + +.tag-asset-container { + display: flex; + flex-shrink: 0; + align-items: center; + width: var(--#{$prefix}tag-asset-container-size); + height: var(--#{$prefix}tag-asset-container-size); + padding: var(--#{$prefix}tag-asset-padding); + margin-right: var(--#{$prefix}tag-asset-gap); + + // TODO do we keep "img"? => if not, see in badge + svg:not(.tag-loader), + img, + .icon { + width: 100%; + height: 100%; + overflow: hidden; + line-height: 1; + color: var(--#{$prefix}tag-asset-color); + } + + &:has(.tag-bullet) { + --#{$prefix}tag-asset-padding: 3px; // TODO replace by ouds/💠_indicator/tag/space/inset/bullet-default + } + + .tag-bullet { + width: 100%; + height: 100%; + background-color: var(--#{$prefix}tag-asset-color); + @include border-radius(#{$ouds-tag-border-radius}); + } + + &:has(.tag-loader) { + --#{$prefix}tag-asset-padding: 2px; // TODO replace by ouds/💠_indicator/tag/space/inset/loader-default + position: relative; + } + + .tag-loader { + --#{$prefix}tag-asset-color: currentcolor; + position: absolute; + top: 50%; + left: 50%; + display: block; + margin: 0; + font-size: var(--#{$prefix}tag-asset-container-size); + color: var(--#{$prefix}tag-asset-color); + transform: translate(-50%, -50%) rotate(-90deg); + + > .tag-loader-inner { + fill: none; + stroke: var(--#{$prefix}tag-asset-color); + stroke-dasharray: var(--#{$prefix}btn-loading-dasharray); + stroke-width: 6; + transform-origin: center; + animation: var(--#{$prefix}btn-loading-animation); + } + } +} + +.tag.text-bg-status-accent-muted:not(:has(.tag-loader)) { + --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-accent-emphasized}; +} +.tag.text-bg-status-positive-muted:not(:has(.tag-loader)) { + --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-positive-emphasized}; +} + +.tag.text-bg-status-info-muted:not(:has(.tag-loader)) { + --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-info-emphasized}; +} + +.tag.text-bg-status-warning-muted:not(:has(.tag-loader)) { + --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-warning-emphasized}; +} + +.tag.text-bg-status-negative-muted:not(:has(.tag-loader)) { + --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-negative-emphasized}; +} + +.tag-sm { + // scss-docs-start tag-sm-css-vars + --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-small}; + --#{$prefix}tag-padding-end: #{$ouds-tag-space-padding-inline-small}; + --#{$prefix}tag-padding-y: #{$ouds-tag-space-padding-block-small}; + --#{$prefix}tag-min-width: #{$ouds-tag-size-min-width-small}; + --#{$prefix}tag-min-height: #{$ouds-tag-size-min-height-small}; + --#{$prefix}tag-asset-container-size: 12px; // TODO ouds/💠_indicator/tag/size/asset-small + --#{$prefix}tag-bullet-padding: 2px; // TODO replace by ouds/💠_indicator/tag/space/inset/bullet-small + --#{$prefix}tag-icon-padding: 0; // TODO replace by ouds/💠_indicator/tag/space/inset/icon-small + --#{$prefix}tag-loader-padding: 1px; // TODO replace by ouds/💠_indicator/tag/space/inset/loader-small + --#{$prefix}tag-asset-gap: #{$ouds-tag-space-column-gap-small}; + @include get-font-size("label-small"); + + &:has(.tag-asset-container) { + --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-small-asset}; + } + // scss-docs-end tag-sm-css-vars +} + +// img, +// svg { +// width: var(--#{$prefix}tag-icon-size); +// min-width: var(--#{$prefix}tag-icon-size); // Here to avoid weird behavior on wrap +// height: var(--#{$prefix}tag-icon-size); +// margin: add(calc(-.5 * var(--#{$prefix}tag-icon-size)), var(--#{$prefix}tag-font-shift)) 0 calc(-.5 * var(--#{$prefix}tag-icon-size)) var(--#{$prefix}tag-icon-margin-start); +// } +// +// .close { +// position: relative; +// width: var(--#{$prefix}tag-close-size); +// min-width: var(--#{$prefix}tag-close-size); // Here to avoid weird behavior on wrap +// height: var(--#{$prefix}tag-close-size); +// padding: 0; // Force padding on button to have a circle on iOS - Safari and Chrome +// margin: add(calc(-.5 * var(--#{$prefix}tag-close-size)), var(--#{$prefix}tag-font-shift)) var(--#{$prefix}tag-close-margin-end) calc(-.5 * var(--#{$prefix}tag-close-size)) var(--#{$prefix}tag-close-margin-start); +// color: inherit; +// background-color: transparent; +// border: 0; +// @include border-radius(var(--#{$prefix}tag-border-radius), var(--#{$prefix}tag-border-radius)); +// +// &::before { +// position: absolute; +// top: calc(-1 * var(--#{$prefix}tag-padding-y)); +// right: calc(-1 * var(--#{$prefix}tag-padding-y)); +// bottom: calc(-1 * var(--#{$prefix}tag-padding-y)); +// left: calc(-1 * var(--#{$prefix}tag-padding-y)); +// content: ""; +// @include border-radius(var(--#{$prefix}tag-border-radius), var(--#{$prefix}tag-border-radius)); +// } +// +// &::after { +// display: block; +// min-width: subtract(var(--#{$prefix}tag-close-size), .625rem); +// min-height: subtract(var(--#{$prefix}tag-close-size), .625rem); +// content: ""; +// background-color: currentcolor; +// mask: escape-svg(var(--#{$prefix}close-icon)) no-repeat 50% / subtract(var(--#{$prefix}tag-close-size), .625rem); +// } +// +// &:hover, +// &:active { +// color: var(--#{$prefix}tag-active-color); +// background-color: var(--#{$prefix}tag-active-decoration-color); +// } +// +// &[disabled] { +// pointer-events: none; +// } +// } +// +// .btn-check:disabled + &, +// .btn-check[disabled] + &, +// &[disabled], +// &.disabled { +// color: var(--#{$prefix}tag-disabled-color); +// pointer-events: none; +// border-color: var(--#{$prefix}tag-disabled-color); +// } +// +// .btn-check:checked + & { +// color: var(--#{$prefix}tag-active-color); +// background-color: var(--#{$prefix}tag-active-decoration-color); +// border-color: var(--#{$prefix}tag-active-decoration-color); +// } + +// +//// stylelint-disable selector-no-qualifying-type +//p.tag { +// @extend .text-bg-status-neutral-emphasized; +//} +//// stylelint-enable selector-no-qualifying-type +// +// +//// stylelint-disable selector-no-qualifying-type +//a.tag, +//button.tag, +//label.tag { +// color: var(--#{$prefix}tag-color); +// text-decoration: none; +// cursor: pointer; +// +// &:hover { +// border-color: var(--#{$prefix}tag-active-decoration-color); +// } +// +// &.active, +// &:active { +// color: var(--#{$prefix}tag-active-color); +// background-color: var(--#{$prefix}tag-active-decoration-color); +// border-color: var(--#{$prefix}tag-active-decoration-color); +// +// &[disabled], +// &.disabled { +// background-color: var(--#{$prefix}tag-disabled-color); +// border-color: var(--#{$prefix}tag-disabled-color); +// } +// } +//} +//// stylelint-enable selector-no-qualifying-type diff --git a/scss/_tags.scss b/scss/_tags.scss deleted file mode 100644 index 9b9be4c52e..0000000000 --- a/scss/_tags.scss +++ /dev/null @@ -1,141 +0,0 @@ -// stylelint-disable function-disallowed-list - -.tag { - // scss-docs-start tag-css-vars - --#{$prefix}tag-color: #{$tag-color}; - --#{$prefix}tag-bg: #{$tag-bg}; - --#{$prefix}tag-gap: #{$tag-gap}; - --#{$prefix}tag-padding-x: #{$tag-padding-x}; - --#{$prefix}tag-padding-y: #{$tag-padding-y}; - @include rfs($tag-font-size, --#{$prefix}tag-font-size); - --#{$prefix}tag-font-shift: #{$tag-font-shift}; - --#{$prefix}tag-font-weight: #{$tag-font-weight}; - --#{$prefix}tag-icon-size: #{$tag-icon-size}; - --#{$prefix}tag-icon-margin-start: #{$tag-icon-margin-start}; - --#{$prefix}tag-close-size: #{add(var(--#{$prefix}tag-font-size), .375rem)}; - --#{$prefix}tag-close-margin-end: #{$tag-close-margin-end}; - --#{$prefix}tag-close-margin-start: #{$tag-close-margin-start}; - --#{$prefix}tag-border-width: #{$tag-border-width}; - --#{$prefix}tag-border-radius: #{$tag-border-radius}; - --#{$prefix}tag-border-color: #{$tag-border-color}; - --#{$prefix}tag-active-color: #{$tag-active-color}; - --#{$prefix}tag-active-decoration-color: #{$tag-active-decoration-color}; - --#{$prefix}tag-disabled-color: #{$tag-disabled-color}; - // scss-docs-end tag-css-vars - - display: inline-flex; - gap: var(--#{$prefix}tag-gap); - align-items: center; - padding: subtract(var(--#{$prefix}tag-padding-y), calc(var(--#{$prefix}tag-font-shift) * .5)) var(--#{$prefix}tag-padding-x) add(var(--#{$prefix}tag-padding-y), calc(var(--#{$prefix}tag-font-shift) * .5)); - @include font-size(var(--#{$prefix}tag-font-size)); - font-weight: var(--#{$prefix}tag-font-weight); - line-height: add(var(--#{$prefix}tag-font-size), .125rem); - color: var(--#{$prefix}tag-color); - background-color: var(--#{$prefix}tag-bg); - border: var(--#{$prefix}tag-border-width) solid var(--#{$prefix}tag-border-color); - @include border-radius(var(--#{$prefix}tag-border-radius), var(--#{$prefix}tag-border-radius)); - - img, - svg { - width: var(--#{$prefix}tag-icon-size); - min-width: var(--#{$prefix}tag-icon-size); // Here to avoid weird behavior on wrap - height: var(--#{$prefix}tag-icon-size); - margin: add(calc(-.5 * var(--#{$prefix}tag-icon-size)), var(--#{$prefix}tag-font-shift)) 0 calc(-.5 * var(--#{$prefix}tag-icon-size)) var(--#{$prefix}tag-icon-margin-start); - } - - .close { - position: relative; - width: var(--#{$prefix}tag-close-size); - min-width: var(--#{$prefix}tag-close-size); // Here to avoid weird behavior on wrap - height: var(--#{$prefix}tag-close-size); - padding: 0; // Force padding on button to have a circle on iOS - Safari and Chrome - margin: add(calc(-.5 * var(--#{$prefix}tag-close-size)), var(--#{$prefix}tag-font-shift)) var(--#{$prefix}tag-close-margin-end) calc(-.5 * var(--#{$prefix}tag-close-size)) var(--#{$prefix}tag-close-margin-start); - color: inherit; - background-color: transparent; - border: 0; - @include border-radius(var(--#{$prefix}tag-border-radius), var(--#{$prefix}tag-border-radius)); - - &::before { - position: absolute; - top: calc(-1 * var(--#{$prefix}tag-padding-y)); - right: calc(-1 * var(--#{$prefix}tag-padding-y)); - bottom: calc(-1 * var(--#{$prefix}tag-padding-y)); - left: calc(-1 * var(--#{$prefix}tag-padding-y)); - content: ""; - @include border-radius(var(--#{$prefix}tag-border-radius), var(--#{$prefix}tag-border-radius)); - } - - &::after { - display: block; - min-width: subtract(var(--#{$prefix}tag-close-size), .625rem); - min-height: subtract(var(--#{$prefix}tag-close-size), .625rem); - content: ""; - background-color: currentcolor; - mask: escape-svg(var(--#{$prefix}close-icon)) no-repeat 50% / subtract(var(--#{$prefix}tag-close-size), .625rem); - } - - &:hover, - &:active { - color: var(--#{$prefix}tag-active-color); - background-color: var(--#{$prefix}tag-active-decoration-color); - } - - &[disabled] { - pointer-events: none; - } - } - - .btn-check:disabled + &, - .btn-check[disabled] + &, - &[disabled], - &.disabled { - color: var(--#{$prefix}tag-disabled-color); - pointer-events: none; - border-color: var(--#{$prefix}tag-disabled-color); - } - - .btn-check:checked + & { - color: var(--#{$prefix}tag-active-color); - background-color: var(--#{$prefix}tag-active-decoration-color); - border-color: var(--#{$prefix}tag-active-decoration-color); - } -} - -// stylelint-disable selector-no-qualifying-type -a.tag, -button.tag, -label.tag { - color: var(--#{$prefix}tag-color); - text-decoration: none; - cursor: pointer; - - &:hover { - border-color: var(--#{$prefix}tag-active-decoration-color); - } - - &.active, - &:active { - color: var(--#{$prefix}tag-active-color); - background-color: var(--#{$prefix}tag-active-decoration-color); - border-color: var(--#{$prefix}tag-active-decoration-color); - - &[disabled], - &.disabled { - background-color: var(--#{$prefix}tag-disabled-color); - border-color: var(--#{$prefix}tag-disabled-color); - } - } -} -// stylelint-enable selector-no-qualifying-type - -.tag-sm { - // scss-docs-start tag-sm-css-vars - --#{$prefix}tag-padding-x: #{$tag-padding-x-sm}; - --#{$prefix}tag-padding-y: #{$tag-padding-y-sm}; - --#{$prefix}tag-font-size: #{$tag-font-size-sm}; - --#{$prefix}tag-icon-size: #{$tag-icon-size-sm}; - --#{$prefix}tag-icon-margin-start: #{$tag-icon-margin-start-sm}; - --#{$prefix}tag-close-margin-end: #{$tag-close-margin-end-sm}; - --#{$prefix}tag-close-margin-start: #{$tag-close-margin-start-sm}; - // scss-docs-end tag-sm-css-vars -} diff --git a/scss/_variables.scss b/scss/_variables.scss index 0efda31297..850763d521 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -2244,44 +2244,6 @@ $footer-gap: $spacer * .75 !default; $footer-gap-xl: $spacer * 1.7 !default; // scss-docs-end footer - -// Tags - -// scss-docs-start tag-variables -$tag-color: var(--#{$prefix}body-color) !default; -$tag-bg: var(--#{$prefix}body-bg) !default; - -$tag-gap: map-get($spacers, 1) !default; -$tag-font-shift: $spacer * .1 !default; -$tag-font-weight: $font-weight-bold !default; -$tag-border-width: var(--#{$prefix}border-width) !default; -$tag-border-radius: var(--#{$prefix}border-radius-pill) !default; - -$tag-padding-x: $spacer * .65 !default; -$tag-padding-y: $spacer * .45 !default; -$tag-icon-size: $spacer * 1.2 !default; -$tag-icon-margin-start: -$spacer * .35 !default; -$tag-close-margin-end: -$spacer * .3 !default; -$tag-close-margin-start: $spacer * .2 !default; -$tag-font-size: $font-size-base !default; - -$tag-active-color: var(--#{$prefix}highlight-color) !default; -$tag-disabled-color: var(--#{$prefix}color-content-disabled) !default; -$tag-border-color: var(--#{$prefix}color-border-default) !default; -$tag-active-decoration-color: var(--#{$prefix}highlight-bg) !default; -// scss-docs-end tag-variables - -// scss-docs-start tag-sm-variables -$tag-padding-x-sm: $spacer * .4 !default; -$tag-padding-y-sm: $spacer * .25 !default; -$tag-icon-size-sm: $spacer !default; -$tag-icon-margin-start-sm: -$spacer * .1 !default; -$tag-close-margin-end-sm: -$spacer * .25 !default; -$tag-close-margin-start-sm: 0 !default; -$tag-font-size-sm: $font-size-sm !default; -// scss-docs-end tag-sm-variables - - // Local navigation // scss-docs-start local-nav-variables diff --git a/scss/ouds-web.scss b/scss/ouds-web.scss index 9fc34af66c..b523a33ab1 100644 --- a/scss/ouds-web.scss +++ b/scss/ouds-web.scss @@ -39,7 +39,7 @@ @import "breadcrumb"; @import "pagination"; @import "badge"; -@import "tags"; +@import "tag"; @import "alert"; @import "progress"; @import "list-group"; diff --git a/scss/tokens/_component.scss b/scss/tokens/_component.scss index 284ade0696..e7b0616e5e 100644 --- a/scss/tokens/_component.scss +++ b/scss/tokens/_component.scss @@ -416,7 +416,7 @@ $ouds-tabs-space-row-gap-icon-label-unequal: $ouds-space-row-gap-xs !default; // Tag // scss-docs-start ouds-component-tag -$ouds-tag-border-radius: $ouds-border-radius-pill !default; +$ouds-tag-border-radius: $ouds-border-radius-pill !default; // OK $ouds-tag-input-border-width-default-interaction: $ouds-border-width-medium !default; $ouds-tag-input-border-width-default: $ouds-border-width-default !default; $ouds-tag-input-color-bg-enabled: $ouds-color-action-support-enabled !default; @@ -431,23 +431,23 @@ $ouds-tag-input-color-content-enabled: $ouds-color-action-enabled !default; $ouds-tag-input-color-content-focus: $ouds-color-action-focus !default; $ouds-tag-input-color-content-hover: $ouds-color-action-hover !default; $ouds-tag-input-color-content-pressed: $ouds-color-action-pressed !default; -$ouds-tag-size-icon-default: $ouds-size-icon-with-label-medium-size-sm !default; -$ouds-tag-size-icon-small: $ouds-size-icon-with-label-small-size-sm !default; -$ouds-tag-size-min-height-default: $ouds-dimension-xs !default; +$ouds-tag-size-icon-default: $ouds-size-icon-with-label-medium-size-sm !default; // TODO replaced by ouds/💠_indicator/tag/size/asset-default +$ouds-tag-size-icon-small: $ouds-size-icon-with-label-small-size-sm !default; // TODO replaced by ouds/💠_indicator/tag/size/asset-small +$ouds-tag-size-min-height-default: $ouds-dimension-xs !default; // OK $ouds-tag-size-min-height-interactive-area: $ouds-size-min-interactive-area !default; -$ouds-tag-size-min-height-small: $ouds-dimension-3xs !default; -$ouds-tag-size-min-width-default: $ouds-dimension-xl !default; -$ouds-tag-size-min-width-small: $ouds-dimension-lg !default; -$ouds-tag-space-column-gap-default: $ouds-space-column-gap-2xs !default; -$ouds-tag-space-column-gap-small: $ouds-space-column-gap-2xs !default; -$ouds-tag-space-inset-default-asset: $ouds-space-inset-3xs !default; -$ouds-tag-space-inset-small-asset: $ouds-space-inset-4xs !default; -$ouds-tag-space-padding-block-default: $ouds-space-padding-block-xs !default; -$ouds-tag-space-padding-block-small: $ouds-space-padding-block-2xs !default; -$ouds-tag-space-padding-inline-default-asset: $ouds-space-padding-inline-xs !default; -$ouds-tag-space-padding-inline-default: $ouds-space-padding-inline-md !default; -$ouds-tag-space-padding-inline-small-asset: $ouds-space-padding-inline-2xs !default; -$ouds-tag-space-padding-inline-small: $ouds-space-padding-inline-sm !default; +$ouds-tag-size-min-height-small: $ouds-dimension-3xs !default; // OK +$ouds-tag-size-min-width-default: $ouds-dimension-xl !default; // OK +$ouds-tag-size-min-width-small: $ouds-dimension-lg !default; // OK +$ouds-tag-space-column-gap-default: $ouds-space-column-gap-2xs !default; // OK +$ouds-tag-space-column-gap-small: $ouds-space-column-gap-2xs !default; // OK +$ouds-tag-space-inset-default-asset: $ouds-space-inset-3xs !default; // TODO split in space-inset-icon-default, space-inset-bullet-default and space-inset-loader-default +$ouds-tag-space-inset-small-asset: $ouds-space-inset-4xs !default; // TODO split in space-inset-icon-small, space-inset-bullet-small and space-inset-loader-small +$ouds-tag-space-padding-block-default: $ouds-space-padding-block-xs !default; // OK +$ouds-tag-space-padding-block-small: $ouds-space-padding-block-2xs !default; // OK +$ouds-tag-space-padding-inline-default-asset: $ouds-space-padding-inline-xs !default; // OK +$ouds-tag-space-padding-inline-default: $ouds-space-padding-inline-md !default; // OK +$ouds-tag-space-padding-inline-small-asset: $ouds-space-padding-inline-2xs !default; // OK +$ouds-tag-space-padding-inline-small: $ouds-space-padding-inline-sm !default; // OK // scss-docs-end ouds-component-tag // Typography diff --git a/scss/tokens/_composite.scss b/scss/tokens/_composite.scss index 883acc7297..44a23c9e80 100644 --- a/scss/tokens/_composite.scss +++ b/scss/tokens/_composite.scss @@ -16,7 +16,7 @@ $ouds-elevation-sticky-navigation-scrolled: $ouds-elevation-x-sticky-navigation- // stylelint-disable value-keyword-case // scss-docs-start ouds-composite-font -$ouds-font-family-sans-serif-stack: "Helvetica Neue", Helvetica, "SF Pro", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; +$ouds-font-family-sans-serif-stack: "SF Pro", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; $ouds-font-family-monospace-stack: Consolas, "SFMono-Regular", "Roboto Mono", "Liberation Mono", Menlo, monospace !default; // scss-docs-end ouds-composite-font // stylelint-enable value-keyword-case diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index b5952c243a..ae11ec1c73 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -154,8 +154,7 @@ draft: true - title: Sticker draft: true - - title: Tags - draft: true + - title: Tag - title: Title bars draft: true - title: Toasts diff --git a/site/src/components/shortcodes/BootstrapCompatibility.astro b/site/src/components/shortcodes/BootstrapCompatibility.astro index f533810b66..7ac7a55a5a 100644 --- a/site/src/components/shortcodes/BootstrapCompatibility.astro +++ b/site/src/components/shortcodes/BootstrapCompatibility.astro @@ -4,8 +4,8 @@
Bootstrap - - $enable-bootstrap-compatibility: true + + $enable-bootstrap-compatibility: true diff --git a/site/src/content/docs/components/buttons.mdx b/site/src/content/docs/components/buttons.mdx index c1534deb98..0957e5a8da 100644 --- a/site/src/content/docs/components/buttons.mdx +++ b/site/src/content/docs/components/buttons.mdx @@ -77,16 +77,14 @@ The recommended way of using an icon in a button is through an [SVG sprite file] When icons are purely decorative, they should be hidden from assistive technologies using `aria-hidden="true"`, as we’ve done in our text and icon examples. For icon only, we chose to keep the icon hidden from assistive technologies and add a visually hidden label. See [icons accessibility]([[docsref:/extend/icons#icons-accessibility]]) for more info. -### Text and icon +If really needed, you can use a font icon associated to the `.icon` class to set correct parameters for the `font-size` and `line-height`. -The recommended way of using an icon in a button is an [embedded SVG]([[docsref:/extend/icons]]). You need to fill it using `currentColor` to respect button color scheme (which can be done inside the SVG sprite file). +### Text and icon You don’t need to apply any spacing utility on the icon to get consistent spacing, as the margin is already handled by OUDS Web. Please note that if you experience a problem with a cropped SVG, we recommend using the `.overflow-visible` utility on the SVG to fix its rendering. -If really needed, you can use a font icon associated to the `.icon` class to set correct parameters for the `font-size` and `line-height`. - We strongly advise not using an ``, in particular because the icon will not benefit from dynamic color changes on states (hover, focus, active) and the color mode system won’t work. diff --git a/site/src/content/docs/components/tag.mdx b/site/src/content/docs/components/tag.mdx new file mode 100644 index 0000000000..654fbc5bbf --- /dev/null +++ b/site/src/content/docs/components/tag.mdx @@ -0,0 +1,637 @@ +--- +title: Tag +description: Use tags to show status, key details, or categories, or to filter content. +aliases: + - "/docs/components/tag/" +toc: true +--- + +import { getConfig } from '@libs/config' + + + {/* TODO: set the right url for design documentation */} + You can find here the [OUDS Tag design guidelines](https://unified-design-system.orange.com/). + + +## Standard variant + +Tag indicator can be used near some text (to show status or key details), or in a list (to indicate or filter by categories or keywords). + +OUDS Web has a basic `.tag` class that sets up default styles. + + + +
  • Roaming
    • +
  • 5G Ready
    • +
  • 4G
    • + +

    +

    Title Coming soon

    +

    +

    New Some text

    ` + } /> + +## Other variants + +### Colors + +OUDS Web [color and background utilities]([[docsref:/helpers/color-background]]) can be applied to display tag colored variants, either emphasized or muted. Each color is serving its own semantic purpose. Please follow the [Tag design specifications](https://unified-design-system.orange.com/) to choose the right badge for the right action. {/* TODO: really? OR thit's just colors? if semantic, set the right url for design documentation, otherwise remove this part */} + +For disabled color, use `.tag-disabled` class. + + +
  • Default
    • +
  • Neutral
    • +
  • Accent
    • +
  • Positive
    • +
  • Info
    • +
  • Warning
    • +
  • Negative
    • +
  • Disabled
    • + +
    +
      +
    • Neutral
      • +
    • Accent
      • +
    • Positive
      • +
    • Info
      • +
    • Warning
      • +
    • Negative
      • +
    `} /> + +### Squared + +To display tags with square corners, add the `.rounded-none` utility class to the tag. + + +
  • Neutral
    • +
  • Accent
    • +
  • Positive
    • +
  • Info
    • +
  • Warning
    • +
  • Negative
    • +
  • Disabled
    • + `} /> + +### With asset + +To add an asset (either bullet, icon or loader) inside a tag, add a `.tag-asset-container` before the tag's text. + +#### Bullet + +To display a colored bullet add `` in the `.tag-asset-container`. + + +
  • + + + + + Neutral + +
    • +
  • + + + + + Accent + +
    • +
  • + + + + + Positive + +
    • +
  • + + + + + Info + +
    • +
  • + + + + + Warning + +
    • +
  • + + + + + Negative + +
    • +
  • + + + + + Disabled + +
    • + +
    +
      + + + + + Neutral + + +
    • + + + + + Accent + +
      • +
    • + + + + + Positive + +
      • +
    • + + + + + Info + +
      • +
    • + + + + + Warning + +
      • +
    • + + + + + Negative + +
      • +
    `} /> + +#### Icon + + + The recommended way of using an icon in a tag is through an [SVG sprite file]([[docsref:/extend/icons#svg-sprite]]). + + Since icons in tags are purely decorative and adjacent text always exists, so they should be hidden from assistive technologies using `aria-hidden="true"`, as demonstrated in our tag examples. + + +To display a colored icon, just add the icon in the `.tag-asset-container`. + + +
  • + + + + + Neutral + +
    • +
  • + + + + + Accent + +
    • +
  • + + + + + Positive + +
    • +
  • + + + + + Info + +
    • +
  • + + + + + Warning + +
    • +
  • + + + + + Negative + +
    • +
  • + + + + + Disabled + +
    • + +
    +
      + + + + + Neutral + + +
    • + + + + + Accent + +
      • +
    • + + + + + Positive + +
      • +
    • + + + + + Info + +
      • +
    • + + + + + Warning + +
      • +
    • + + + + + Negative + +
      • +
    `} /> + + +If really needed, you can use a font icon associated to the `.icon` class to set correct parameters for the `line-height`. + + +
  • + + + + + Recommended + +
    • +
  • + + + + + Settings + +
    • + `} /> + +#### Loader + +// TODO : do we have use cases for loader? Do we need visually hidden label? + + +
  • + + + + + + Neutral + +
    • +
  • + + + + + + Accent + +
    • +
  • + + + + + + Positive + +
    • +
  • + + + + + + Info + +
    • +
  • + + + + + + Warning + +
    • +
  • + + + + + + Negative + +
    • +
  • + + + + + + Disabled + +
    • + +
    +
      + + + + + + Neutral + + +
    • + + + + + + Accent + +
      • +
    • + + + + + + Positive + +
      • +
    • + + + + + + Info + +
      • +
    • + + + + + + Warning + +
      • +
    • + + + + + + Negative + +
      • +
    `} /> + +## Sizes + +To display a small tag, add the class `.tag-sm` to the tag. + + +
  • Neutral
    • +
  • + + + + + Neutral + +
    • +
  • + + + + + Neutral + +
    • +
  • + + + + + + Neutral + +
    • +
  • Small neutral
    • +
  • + + + + + Small neutral + +
    • +
  • + + + + + Small neutral + +
    • +
  • + + + + + + Small neutral + +
    • + `} /> + +## Accessibility +// TODO + +Tags indicator is typically used in a list. + +otherwise, the tag should be included in a sementical tag (cf badge) + + +



    + +For tests: + +Title Coming soon +

    Title + + + + + Coming soon + +

    +

    + Title + + + + + Coming soon + +

    +

    + Title + Roaming +

    +

    + Title + + + + + Coming soon + +

    +

    + Title + + + + + Coming soon + +

    `} /> diff --git a/site/src/content/docs/components/tags.mdx b/site/src/content/docs/components/tags.mdx deleted file mode 100644 index 7438a82ea9..0000000000 --- a/site/src/content/docs/components/tags.mdx +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Tags -description: Use tags to convey information, apply filters or display a selection of items. -aliases: - - "/docs/components/tags/" -toc: true ---- - - diff --git a/site/src/content/docs/migrations/migration.mdx b/site/src/content/docs/migrations/migration.mdx index 567f652ff8..74ecbe1453 100644 --- a/site/src/content/docs/migrations/migration.mdx +++ b/site/src/content/docs/migrations/migration.mdx @@ -16,51 +16,51 @@ toc: true #### Checkboxes, radio buttons, switches -- New Read only state has been implemented. +- New Read only state has been implemented. ### Components #### Badge -- New Badge component has been implemented. +- New Badge component has been implemented. #### Breadcrumb -- New Breadcrumb component has been implemented. +- New Breadcrumb component has been implemented. #### Bullet list -- New Bullet list component has been implemented. +- New Bullet list component has been implemented. ### Extend #### Icons -- New Icons’ sizes for decorative standalone icons have been added: `.decorative-4xs-icon`, `decorative-3xs-icon`. +- New Icons’ sizes for decorative standalone icons have been added: `.decorative-4xs-icon`, `decorative-3xs-icon`. ### Utilities #### Border -- Breaking Border radius utilities sizes `short` and `tall` have been renamed to `small` and `large` respectively. +- Breaking Border radius utilities sizes `short` and `tall` have been renamed to `small` and `large` respectively. - **Short**: `.rounded-small`, `.rounded-top-small`, `.rounded-bottom-small`, `.rounded-start-small` and `.rounded-end-small`, for example `.rounded-short` → `.rounded-small`. - **Tall**: `.rounded-large`, `.rounded-top-large`, `.rounded-bottom-large`, `.rounded-start-large` and `.rounded-end-large`, for example `.rounded-tall` → `.rounded-large`. #### Colors -- New Color utilities for text on status colors have been added: +- New Color utilities for text on status colors have been added: - **Accent**: `.text-on-status-accent-emphasized`, `.text-on-status-accent-muted` - **Info**: `.text-on-status-info-emphasized`, `.text-on-status-info-muted` - **Negative**: `.text-on-status-negative-emphasized`, `.text-on-status-negative-muted` - **Neutral**: `.text-on-status-neutral-emphasized`, `.text-on-status-neutral-muted` - **Positive**: `.text-on-status-positive-emphasized`, `.text-on-status-positive-muted` - **Warning**: `.text-on-status-warning-emphasized`, `.text-on-status-warning-muted` -- Breaking Generic Color utilities for status background have been removed: `.text-on-status-emphasized`, `.text-on-status-emphasized-alt`, `.text-on-status-muted`. You should use the new color utilities related to the background or directly use our [color & background helpers]([[docsref:/helpers/color-background]]) +- Breaking Generic Color utilities for status background have been removed: `.text-on-status-emphasized`, `.text-on-status-emphasized-alt`, `.text-on-status-muted`. You should use the new color utilities related to the background or directly use our [color & background helpers]([[docsref:/helpers/color-background]]) #### Spacings -- Breaking Spacing utilities (padding, margin, gap, ...) sizes have been renamed as follows: +- Breaking Spacing utilities (padding, margin, gap, ...) sizes have been renamed as follows: - **Smash** is renamed to `3xs` : for example `.m-smash` → `.m-3xs` - **Shortest** is renamed to `2xs` : for example `.m-shortest` → `.m-2xs` - **Shorter** is renamed to `xs` : for example `.m-shorter` → `.m-xs` @@ -76,11 +76,11 @@ toc: true ### CSS and Sass variables -- Breaking Some design tokens prefix have been changed to follow the new naming convention. +- Breaking Some design tokens prefix have been changed to follow the new naming convention. - Core Raw Tokens (in file raw.scss) are now prefixed with `core-ouds` instead of `ouds`. - Orange Raw Tokens (in file raw.scss) are now prefixed with `core-orange` instead of `ouds`. -- Breaking A parameter from the `focus-visible()` mixin has been removed. If you use the `focus-visible()` mixin in your scss files with a `z-index` as a parameter, please adapt your code. +- Breaking A parameter from the `focus-visible()` mixin has been removed. If you use the `focus-visible()` mixin in your scss files with a `z-index` as a parameter, please adapt your code. ## v0.4.0 @@ -90,24 +90,24 @@ toc: true #### Checkboxes -- New Checkbox component has been implemented. +- New Checkbox component has been implemented. #### Radio buttons -- New Radio button component has been implemented. +- New Radio button component has been implemented. #### Switches -- New Switch component has been implemented. +- New Switch component has been implemented. ### Helpers #### Divider -- New Horizontal and vertical rule helpers to create dividers. +- New Horizontal and vertical rule helpers to create dividers. ### CSS and Sass variables -- New A new file containing composite tokens has been added. If you were using the Sass compilation, you must import the new Sass file between the semantic and component files. +- New A new file containing composite tokens has been added. If you were using the Sass compilation, you must import the new Sass file between the semantic and component files.
    See the new import stack @@ -121,7 +121,7 @@ toc: true
    -
    - New Sass variables: + New Sass variables:
    • $ouds-font-family-body
    • $ouds-font-family-code
      • @@ -135,7 +135,7 @@ toc: true
    -
    - Breaking Removed Sass variables: + Breaking Removed Sass variables:
    • $ouds-font-family
    • $ouds-font-weight-default
      • @@ -151,36 +151,36 @@ toc: true #### Reboot -- New Default link styles has been updated. +- New Default link styles has been updated. ### Components #### Links -- New Link component has been implemented. +- New Link component has been implemented. ### Helpers #### Icon link -- Breaking Colors links are unstyled in OUDS Web, the documentation is only kept for Bootstrap compatibility. +- Breaking Colors links are unstyled in OUDS Web, the documentation is only kept for Bootstrap compatibility. -- Warning The icon link documentation has been merged into is the new [Link component]([[docsref:/components/links]]) documentation and removed from helpers section. +- Warning The icon link documentation has been merged into is the new [Link component]([[docsref:/components/links]]) documentation and removed from helpers section. ### Utilities #### Border -- New Border color: `.border-muted`. +- New Border color: `.border-muted`. #### Link -- Breaking Link utilities are no more used in OUDS Web and the following classes have been removed: .link-opacity-{'{number}'}, .link-offset-{'{number}'}, .link-underline-{'{number}'}, .link-underline-opacity-{'{number}'} +- Breaking Link utilities are no more used in OUDS Web and the following classes have been removed: .link-opacity-{'{number}'}, .link-offset-{'{number}'}, .link-underline-{'{number}'}, .link-underline-opacity-{'{number}'} ### CSS and Sass variables -
      - New Sass variables: + New Sass variables:
      • $ouds-color-border-muted-dark
      • $ouds-color-border-muted-light
        • @@ -213,14 +213,14 @@ toc: true
      -
      - New Sass variables containing CSS variable with value depending on theme: + New Sass variables containing CSS variable with value depending on theme:
      • $ouds-color-border-muted
      -
      - New CSS variables: + New CSS variables:
      • --bs-color-border-muted
      @@ -234,22 +234,22 @@ toc: true #### Buttons -- New Button component has been implemented. +- New Button component has been implemented. ### Examples -- New New [Loading buttons live example]([[docsref:/examples/loading-buttons/]]). +- New New [Loading buttons live example]([[docsref:/examples/loading-buttons/]]). ### CSS and Sass variables -- New `$enable-button-pointers` (default true) has been introduced. It is used to add a "hand" cursor to non-disabled button elements. +- New `$enable-button-pointers` (default true) has been introduced. It is used to add a "hand" cursor to non-disabled button elements. -- New `$enable-gradients` (default false) has been introduced. It is used to enable predefined gradients via `background-image` styles on various components. +- New `$enable-gradients` (default false) has been introduced. It is used to enable predefined gradients via `background-image` styles on various components. -- New `$enable-rounded` (default true) has been introduced. It allows you to set rounded or flat corners on components. +- New `$enable-rounded` (default true) has been introduced. It allows you to set rounded or flat corners on components. -
      - New Sass variables: + New Sass variables:
      • $btn-border-radius
      • $btn-border-width
        • @@ -377,7 +377,7 @@ toc: true
      -
      - New Sass mixins: + New Sass mixins:
      • button-variant
      • button-icon
        • @@ -390,17 +390,17 @@ toc: true ### Foundations -- Warning The root selector have been tweaked for more flexibility on JS frameworks. Please don’t hesitate to contact us if you find any issue with it. +- Warning The root selector have been tweaked for more flexibility on JS frameworks. Please don’t hesitate to contact us if you find any issue with it. ### Color modes -- New We provide four brand new themes that are light, dark, root and root-inverted. See more on our [color modes page]([[docsref:/customize/color-modes]]) +- New We provide four brand new themes that are light, dark, root and root-inverted. See more on our [color modes page]([[docsref:/customize/color-modes]]) ### Content styles #### Default styles -- New Default styles have be added to HTML elements: +- New Default styles have be added to HTML elements: - Default guidelines that guide our choices like spacing units, text `max-width`, or avoiding `margin-top` - `box-sizing: border-box` set on every element - Default font parameters using native font stack @@ -408,7 +408,7 @@ toc: true #### Typography -- New All typography global settings have been set for: +- New All typography global settings have been set for: - Headings - Display headings - Regular texts @@ -421,24 +421,24 @@ toc: true ### Layout -- New Responsive flexbox grid system is now available with eight default responsive tiers defined at breakpoints `2xs`, `xs`, `sm`, `md`, `xl`, `2xl`, and `3xl`. +- New Responsive flexbox grid system is now available with eight default responsive tiers defined at breakpoints `2xs`, `xs`, `sm`, `md`, `xl`, `2xl`, and `3xl`. - Container class: `.container-fluid` - Limiting class: `.container-max-width` - Row system with `.row` - Column system with classes: `.col-{number}`, `.col-{breakpoint}-{number}`, and `.offset-{breakpoint}-{number}` - Row columns classes: `.row-cols-{number}` -New Responsive CSS grid classes: `.g-col-{breakpoint}-{number}`. +New Responsive CSS grid classes: `.g-col-{breakpoint}-{number}`. ### Helpers #### Color background -- New The new color-background color helpers are now available. Visit our [color-bg page]([[docsref:/helpers/color-background]]) to see more. +- New The new color-background color helpers are now available. Visit our [color-bg page]([[docsref:/helpers/color-background]]) to see more. #### Icon -- New Icons’ sizes utilities are now available to help choose the right icon size with a specific typography reference: +- New Icons’ sizes utilities are now available to help choose the right icon size with a specific typography reference: - Responsive icons’ sizes in headings: - `.h{size}-short-icon`, `.h{size}-medium-icon`, `.h{size}-tall-icon`, where `h` stands for heading and size is one of `s` for small, `m` for medium, `l` for large, or `xl` for x-large - `.b{size}-short-icon`, `.b{size}-medium-icon`, , `.h{size}-tall-icon`, where `b` stands for body and size is one of `m` for medium, or `l` for large @@ -447,25 +447,25 @@ toc: true #### Position -- New Responsive sticky helpers: `.sticky-{value}`, and `.sticky-{breakpoint}-{value}` where `breakpoint` is in `xs|sm|md|lg|xl|2xl|3xl`, and `value` is in `top|bottom`. +- New Responsive sticky helpers: `.sticky-{value}`, and `.sticky-{breakpoint}-{value}` where `breakpoint` is in `xs|sm|md|lg|xl|2xl|3xl`, and `value` is in `top|bottom`. ### Utilities #### API -- New The `responsive` option is now available in the API to indicate if responsive classes should be generated. +- New The `responsive` option is now available in the API to indicate if responsive classes should be generated. #### Background -- New The new background color utilities are now available. Visit our [background page]([[docsref:/utilities/background]]) to see more. +- New The new background color utilities are now available. Visit our [background page]([[docsref:/utilities/background]]) to see more. #### Border -- New Border operative utilities: `.border`, `.border-none`, `.border-top`, `.border-top-none`, `.border-bottom`, `.border-bottom-none`, `.border-start`, `.border-start-none`, `.border-end` and `.border-end-none`. +- New Border operative utilities: `.border`, `.border-none`, `.border-top`, `.border-top-none`, `.border-bottom`, `.border-bottom-none`, `.border-start`, `.border-start-none`, `.border-end` and `.border-end-none`. -- New Border width utilities: `.border-none`, `.border-thin`, `.border-medium`, `.border-thick`, and `.border-thicker`. +- New Border width utilities: `.border-none`, `.border-thin`, `.border-medium`, `.border-thick`, and `.border-thicker`. -- New Border radius utilities with all sizes: +- New Border radius utilities with all sizes: - **Default**: `.rounded`, `.rounded-top`, `.rounded-bottom`, `.rounded-start` and `.rounded-end`. - **None**: `.rounded-none`, `.rounded-top-none`, `.rounded-bottom-none`, `.rounded-start-none` and `.rounded-end-none`. - **Short**: `.rounded-short`, `.rounded-top-short`, `.rounded-bottom-short`, `.rounded-start-short` and `.rounded-end-short`. @@ -474,47 +474,47 @@ toc: true - **Circle**: `.rounded-circle`, `.rounded-top-circle`, `.rounded-bottom-circle`, `.rounded-start-circle` and `.rounded-end-circle`. - **Pill**: `.rounded-pill`, `.rounded-top-pill`, `.rounded-bottom-pill`, `.rounded-start-pill` and `.rounded-end-pill`. -- New Border style utilities: `.border-drag`. +- New Border style utilities: `.border-drag`. -- New The new border color utilities are now available. Visit our [border page]([[docsref:/utilities/borders#color]]) to see more. +- New The new border color utilities are now available. Visit our [border page]([[docsref:/utilities/borders#color]]) to see more. #### Colors -- New The new text color utilities are now available. Visit our [color page]([[docsref:/utilities/colors]]) to see more. +- New The new text color utilities are now available. Visit our [color page]([[docsref:/utilities/colors]]) to see more. #### Display -- New Responsive display utilities: `.d-{value}`, `.d-{breakpoint}-{value}` where `breakpoint` is in `xs|sm|md|lg|xl|2xl|3xl`, and `value` is in `none|inline|inline-block|block|grid|inline-grid|table|table-cell|table-row|flex|inline-flex`. +- New Responsive display utilities: `.d-{value}`, `.d-{breakpoint}-{value}` where `breakpoint` is in `xs|sm|md|lg|xl|2xl|3xl`, and `value` is in `none|inline|inline-block|block|grid|inline-grid|table|table-cell|table-row|flex|inline-flex`. #### Flex -- New Responsive flex utilities without `breakpoint` for `2xs`, and where `breakpoint` is in `xs|sm|md|lg|xl|2xl|3xl`: +- New Responsive flex utilities without `breakpoint` for `2xs`, and where `breakpoint` is in `xs|sm|md|lg|xl|2xl|3xl`: `.d-{breakpoint}-flex`, `.d-{breakpoint}-inline-flex`, `.flex-{breakpoint}-{row|column}`, `.flex-{breakpoint}-{row|column}-reverse`, `.justify-content-{breakpoint}-{start|end|center|between|around|evenly}`, `.align-items-{breakpoint}-{start|end|center|baseline|stretch}`, `.align-self-{breakpoint}-{start|end|center|baseline|stretch}`, `.flex-{breakpoint}-fill`, `.flex-{breakpoint}-{grow|shrink}-{0|1}`, `.flex-{breakpoint}-{nowrap|wrap|wrap-reverse}`, `.order-{breakpoint}-{number}`, `.order-{breakpoint}-{first|last}` and `.align-content-{breakpoint}-{start|end|center|between|around|stretch}`. #### Float -- New Responsive float utilities: `.float-{start|end|none}`, `.float-{breakpoint}-{start|end|none}` where `breakpoint` is in `xs|sm|md|lg|xl|2xl|3xl`. +- New Responsive float utilities: `.float-{start|end|none}`, `.float-{breakpoint}-{start|end|none}` where `breakpoint` is in `xs|sm|md|lg|xl|2xl|3xl`. #### Object fit -- New Responsive object fit utilities: `.object-fit-{contain|cover|fill|scale|none}`, `.object-fit-{breakpoint}-{contain|cover|fill|scale|none}` where `breakpoint` is in `xs|sm|md|lg|xl|2xl|3xl`. +- New Responsive object fit utilities: `.object-fit-{contain|cover|fill|scale|none}`, `.object-fit-{breakpoint}-{contain|cover|fill|scale|none}` where `breakpoint` is in `xs|sm|md|lg|xl|2xl|3xl`. #### Opacity -- Breaking Opacity utilities: `.opacity-emphasis` has been renamed to `.opacity-strong` and `.opacity-transparent` has been renamed `.opacity-invisible`. +- Breaking Opacity utilities: `.opacity-emphasis` has been renamed to `.opacity-strong` and `.opacity-transparent` has been renamed `.opacity-invisible`. #### Shadow -- New Shadows utilities: +- New Shadows utilities: `.shadow-none`, `.shadow-raised`, `.shadow-drag`, `.shadow-default`, `.shadow-emphasized`, `.shadow-sticky-default`, `.shadow-sticky-emphasized` and `.shadow-sticky-navigation-scrolled`. #### Sizing -- New Sizing utility `.mw-none` to set `max-width: none`. This utility is particularly useful to reset the `max-width` of our font references in some special cases. +- New Sizing utility `.mw-none` to set `max-width: none`. This utility is particularly useful to reset the `max-width` of our font references in some special cases. #### Spacings -- New Fixed margin spacing utilities: +- New Fixed margin spacing utilities: - **None**: `.m-none`, `.mx-none`, `.my-none`, `.mt-none`, `.mb-none`, `.ms-none`, `.me-none`, `.m-xs-none`, etc... - **Smash**: `.m-smash`, `.mx-smash`, `.my-smash`, `.mt-smash`, `.mb-smash`, `.ms-smash`, `.me-smash`, `.m-xs-smash`, etc... - **Shortest**: `.m-shortest`, `.mx-shortest`, `.my-shortest`, `.mt-shortest`, `.mb-shortest`, `.ms-shortest`, `.me-shortest`, `.m-xs-shortest`, etc... @@ -529,7 +529,7 @@ toc: true - **Jumbo**: `.m-jumbo`, `.mx-jumbo`, `.my-jumbo`, `.mt-jumbo`, `.mb-jumbo`, `.ms-jumbo`, `.me-jumbo`, `.m-xs-jumbo`, etc... - **Auto**: `.m-auto`, `.mx-auto`, `.my-auto`, `.mt-auto`, `.mb-auto`, `.ms-auto`, `.me-auto`, `.m-xs-auto`, etc... -- New Scaled margin spacing utilities: +- New Scaled margin spacing utilities: - **None**: `.m-scaled-none`, `.mx-scaled-none`, `.my-scaled-none`, `.mt-scaled-none`, `.mb-scaled-none`, `.ms-scaled-none`, `.me-scaled-none`, - **Smash**: `.m-scaled-smash`, `.mx-scaled-smash`, `.my-scaled-smash`, `.mt-scaled-smash`, `.mb-scaled-smash`, `.ms-scaled-smash`, `.me-scaled-smash`, - **Shortest**: `.m-scaled-shortest`, `.mx-scaled-shortest`, `.my-scaled-shortest`, `.mt-scaled-shortest`, `.mb-scaled-shortest`, `.ms-scaled-shortest`, `.me-scaled-shortest`, @@ -541,7 +541,7 @@ toc: true - **Tallest**: `.m-scaled-tallest`, `.mx-scaled-tallest`, `.my-scaled-tallest`, `.mt-scaled-tallest`, `.mb-scaled-tallest`, `.ms-scaled-tallest`, `.me-scaled-tallest`, - **Spacious**: `.m-scaled-spacious`, `.mx-scaled-spacious`, `.my-scaled-spacious`, `.mt-scaled-spacious`, `.mb-scaled-spacious`, `.ms-scaled-spacious`, `.me-scaled-spacious` -- New Fixed padding spacing utilities: +- New Fixed padding spacing utilities: - **None**: `.p-none`, `.px-none`, `.py-none`, `.pt-none`, `.pb-none`, `.ps-none`, `.pe-none`, `.p-xs-none`, etc... - **Smash**: `.p-smash`, `.px-smash`, `.py-smash`, `.pt-smash`, `.pb-smash`, `.ps-smash`, `.pe-smash`, `.p-xs-smash`, etc... - **Shortest**: `.p-shortest`, `.px-shortest`, `.py-shortest`, `.pt-shortest`, `.pb-shortest`, `.ps-shortest`, `.pe-shortest`, `.p-xs-shortest`, etc... @@ -555,7 +555,7 @@ toc: true - **Huge**: `.p-huge`, `.px-huge`, `.py-huge`, `.pt-huge`, `.pb-huge`, `.ps-huge`, `.pe-huge`, `.p-xs-huge`, etc... - **Jumbo**: `.p-jumbo`, `.px-jumbo`, `.py-jumbo`, `.pt-jumbo`, `.pb-jumbo`, `.ps-jumbo`, `.pe-jumbo`, `.p-xs-jumbo`, etc... -- New Scaled padding spacing utilities: +- New Scaled padding spacing utilities: - **None**: `.p-scaled-none`, `.px-scaled-none`, `.py-scaled-none`, `.pt-scaled-none`, `.pb-scaled-none`, `.ps-scaled-none`, `.pe-scaled-none`, - **Smash**: `.p-scaled-smash`, `.px-scaled-smash`, `.py-scaled-smash`, `.pt-scaled-smash`, `.pb-scaled-smash`, `.ps-scaled-smash`, `.pe-scaled-smash`, - **Shortest**: `.p-scaled-shortest`, `.px-scaled-shortest`, `.py-scaled-shortest`, `.pt-scaled-shortest`, `.pb-scaled-shortest`, `.ps-scaled-shortest`, `.pe-scaled-shortest`, @@ -567,7 +567,7 @@ toc: true - **Tallest**: `.p-scaled-tallest`, `.px-scaled-tallest`, `.py-scaled-tallest`, `.pt-scaled-tallest`, `.pb-scaled-tallest`, `.ps-scaled-tallest`, `.pe-scaled-tallest`, - **Spacious**: `.p-scaled-spacious`, `.px-scaled-spacious`, `.py-scaled-spacious`, `.pt-scaled-spacious`, `.pb-scaled-spacious`, `.ps-scaled-spacious`, `.pe-scaled-spacious` -- New Fixed gap spacing utilities: +- New Fixed gap spacing utilities: - **None**: `.gap-none`, `.row-gap-none`, `.column-gap-none`, `.gap-xs-none`, etc... - **Smash**: `.gap-smash`, `.row-gap-smash`, `.column-gap-smash`, `.gap-xs-smash`, etc... - **Shortest**: `.gap-shortest`, `.row-gap-shortest`, `.column-gap-shortest`, `.gap-xs-shortest`, etc... @@ -581,7 +581,7 @@ toc: true - **Huge**: `.gap-huge`, `.row-gap-huge`, `.column-gap-huge`, `.gap-xs-huge`, etc... - **Jumbo**: `.gap-jumbo`, `.row-gap-jumbo`, `.column-gap-jumbo`, `.gap-xs-jumbo`, etc... -- New Scaled gap spacing utilities: +- New Scaled gap spacing utilities: - **None**: `.gap-scaled-none`, `.row-gap-scaled-none`, `.column-gap-scaled-none` - **Smash**: `.gap-scaled-smash`, `.row-gap-scaled-smash`, `.column-gap-scaled-smash` - **Shortest**: `.gap-scaled-shortest`, `.row-gap-scaled-shortest`, `.column-gap-scaled-shortest` @@ -595,35 +595,35 @@ toc: true #### Text -- New Alignment text utilities: `.text-start`, `.text-center`, `.text-end`, and responsive versions like `.text-{breakpoint}-{start|center|end}` where `breakpoint` is in `xs|sm|md|lg|xl|2xl|3xl`. +- New Alignment text utilities: `.text-start`, `.text-center`, `.text-end`, and responsive versions like `.text-{breakpoint}-{start|center|end}` where `breakpoint` is in `xs|sm|md|lg|xl|2xl|3xl`. -- New Wrapping and overflow text utilities: `.text-wrap` and `.text-nowrap`. +- New Wrapping and overflow text utilities: `.text-wrap` and `.text-nowrap`. -- New Word break text utility: `.text-break`. +- New Word break text utility: `.text-break`. -- New Text transform text utilities: `.text-lowercase`, `.text-uppercase`, and `.text-capitalize`. +- New Text transform text utilities: `.text-lowercase`, `.text-uppercase`, and `.text-capitalize`. -- New Font size text utilities: +- New Font size text utilities: - **Display headings**: `.fs-dl`, `.fs-dm`, `.fs-ds` - **Headings**: `.fs-hxl`, `.fs-hl`, `.fs-hm`, `.fs-hs` - **Body**: `.fs-bl`, `.fs-bm`, `.fs-bs` - **Code**: `.fs-cm`, `.fs-cs` -- New Font weight text utilities: `.fw-normal` and `.fw-bold`. +- New Font weight text utilities: `.fw-normal` and `.fw-bold`. -- New Text decoration utilities: `.text-decoration-underline`, `.text-decoration-line-through`, and `.text-decoration-none`. +- New Text decoration utilities: `.text-decoration-underline`, `.text-decoration-line-through`, and `.text-decoration-none`. ### Examples -- New New [Font example]([[docsref:/examples/font]]). +- New New [Font example]([[docsref:/examples/font]]). -- New New [Grid example]([[docsref:/examples/grid/]]). +- New New [Grid example]([[docsref:/examples/grid/]]). -- New New [Grid system example]([[docsref:/examples/grid-system/]]). +- New New [Grid system example]([[docsref:/examples/grid-system/]]). ### CSS and Sass variables -- New A new file containing composite tokens has been added. If you were using the Sass compilation, you must import the new Sass file between the semantic and component files. +- New A new file containing composite tokens has been added. If you were using the Sass compilation, you must import the new Sass file between the semantic and component files.
        See the new import stack @@ -639,10 +639,10 @@ toc: true ```
        -- New `$enable-container-classes` to enable or disable the generation of CSS classes for the grid system (e.g. `.row`, `.col-md-1`, etc.). +- New `$enable-container-classes` to enable or disable the generation of CSS classes for the grid system (e.g. `.row`, `.col-md-1`, etc.). -
        - New Sass variables: + New Sass variables:
        • $enable-container-classes
        • $grid-columns
          • @@ -1550,7 +1550,7 @@ toc: true
        -
        - New Sass variables containing CSS variable with value depending on theme: + New Sass variables containing CSS variable with value depending on theme:
        • $ouds-color-action-disabled
        • $ouds-color-action-enabled
          • @@ -1667,7 +1667,7 @@ toc: true
        -
        - New Sass maps: + New Sass maps:
        • $container-fluid-margin
        • $container-max-widths
          • @@ -1692,7 +1692,7 @@ toc: true
        -
        - New Sass mixins: + New Sass mixins:
        • breakpoint-infix()
        • breakpoint-min()
          • @@ -1713,7 +1713,7 @@ toc: true
        -
        - New Keys in $utilities map: + New Keys in $utilities map:
        • border-bottom-ouds
        • border-color-ouds
          • @@ -1784,7 +1784,7 @@ toc: true
        -
        - New CSS variables: + New CSS variables:
        • --bs-body-letter-spacing
        • --bs-color-action-disabled
          • @@ -1989,7 +1989,7 @@ toc: true
        -
        - Warning Dropped Sass variables: + Warning Dropped Sass variables:
        • $ouds-opacity-100
        • $ouds-opacity-300
          • @@ -2001,9 +2001,9 @@ toc: true ### Sass mixins -- New The mixin `get-font-size({font-size-ref})` has been added, where `font-size-ref` is one of: `"code-medium"`, `"label-small"`, `"label-medium"`, `"label-large"`, `"label-xlarge"`, `"body-small"`, `"body-medium"`, `"body-large"`, `"heading-small"`, `"heading-medium"`, `"heading-large"`, `"heading-xlarge"`, `"display-small"`, `"display-medium"`, `"display-large"`. If you have/need any `font-size` in one of your SCSS classes, please consider using this mixin instead. See [Typography Sass mixins]([[docsref:/content/typography#sass-mixins]]) for more details. +- New The mixin `get-font-size({font-size-ref})` has been added, where `font-size-ref` is one of: `"code-medium"`, `"label-small"`, `"label-medium"`, `"label-large"`, `"label-xlarge"`, `"body-small"`, `"body-medium"`, `"body-large"`, `"heading-small"`, `"heading-medium"`, `"heading-large"`, `"heading-xlarge"`, `"display-small"`, `"display-medium"`, `"display-large"`. If you have/need any `font-size` in one of your SCSS classes, please consider using this mixin instead. See [Typography Sass mixins]([[docsref:/content/typography#sass-mixins]]) for more details. -- New `color-mode({mode}, {root}, {inverted-mode})` mixin. +- New `color-mode({mode}, {root}, {inverted-mode})` mixin. ## v0.0.3 @@ -2017,14 +2017,14 @@ From now on, by default, OUDS Web won’t embed Bootstrap elements (like helpers #### Opacity -- New Opacity utilities: `.opacity-transparent`, `.opacity-weaker`, `.opacity-weak`, `.opacity-medium`, `.opacity-emphasis` and `.opacity-opaque`. +- New Opacity utilities: `.opacity-transparent`, `.opacity-weaker`, `.opacity-weak`, `.opacity-medium`, `.opacity-emphasis` and `.opacity-opaque`. ### CSS and Sass variables -- New `$enable-bootstrap-compatibility` option set to `false` by default. This option allows you to compile the Sass files with a Bootstrap compatibility mode. +- New `$enable-bootstrap-compatibility` option set to `false` by default. This option allows you to compile the Sass files with a Bootstrap compatibility mode. - For instance, without the Bootstrap compatibility mode, you won’t have the opacity Bootstrap utilities such as `.opacity-0`, `.opacity-1`, `.opacity-50`, etc. You will only have the OUDS Web utilities such as `.opacity-invisible`, `.opacity-weaker`, `.opacity-weak`, etc. [Learn more about Bootstrap compatibility]([[docsref:/extend/approach#bootstrap-compatibility]]). -- New OUDS Web fully implements the design tokens. If you were using the Sass compilation, you must import the new Sass files before the variables. +- New OUDS Web fully implements the design tokens. If you were using the Sass compilation, you must import the new Sass files before the variables.
          See the new import stack @@ -2041,7 +2041,7 @@ From now on, by default, OUDS Web won’t embed Bootstrap elements (like helpers
          -
          - New Sass variables: + New Sass variables:
          • $ouds-opacity-0
          • $ouds-opacity-100
            • @@ -2053,21 +2053,21 @@ From now on, by default, OUDS Web won’t embed Bootstrap elements (like helpers
          -
          - New Sass maps: + New Sass maps:
          • $ouds-opacities
          -
          - New Keys in $utilities map: + New Keys in $utilities map:
          • opacity-ouds
          -
          - Breaking Keys in $utilities map only available when $enable-bootstrap-compatibility is on: + Breaking Keys in $utilities map only available when $enable-bootstrap-compatibility is on:
          • opacity
          From 0b1661daad9cee4766f67312e897af307b314c7b Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Thu, 10 Jul 2025 14:10:25 +0200 Subject: [PATCH 02/78] Fix
          --- site/src/content/docs/components/tag.mdx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/site/src/content/docs/components/tag.mdx b/site/src/content/docs/components/tag.mdx index 654fbc5bbf..855a3593bd 100644 --- a/site/src/content/docs/components/tag.mdx +++ b/site/src/content/docs/components/tag.mdx @@ -25,9 +25,9 @@ OUDS Web has a basic `.tag` class that sets up default styles.
        • 5G Ready
        • 4G
        -

        +

        Title Coming soon

        -

        +

        New Some text

        ` } /> @@ -49,7 +49,7 @@ For disabled color, use `.tag-disabled` class.
      • Negative
      • Disabled
      -
      +
      • Neutral
      • Accent
        • @@ -139,7 +139,7 @@ To display a colored bullet add `` in the `.tag-
      -
      +
        @@ -272,7 +272,7 @@ To display a colored icon, just add the icon in the `.tag-asset-container`.
      -
      +
        @@ -442,7 +442,7 @@ If really needed, you can use a font icon associated to the `.icon` class to set
      -
      +
        @@ -586,7 +586,7 @@ Tags indicator is typically used in a list. otherwise, the tag should be included in a sementical tag (cf badge) -



        +



        For tests: From 80d23be141dddc1f40c2372a5d653b2a9cfc7800 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Thu, 10 Jul 2025 14:15:36 +0200 Subject: [PATCH 03/78] Fix
      • --- site/src/content/docs/components/tag.mdx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/site/src/content/docs/components/tag.mdx b/site/src/content/docs/components/tag.mdx index 855a3593bd..9004337c56 100644 --- a/site/src/content/docs/components/tag.mdx +++ b/site/src/content/docs/components/tag.mdx @@ -141,6 +141,7 @@ To display a colored bullet add `` in the `.tag-

        +
      • @@ -274,6 +275,7 @@ To display a colored icon, just add the icon in the `.tag-asset-container`.

        +

        +
      • Neutral @@ -216,7 +216,7 @@ To display a colored icon, just add the icon in the `.tag-asset-container`. Accent @@ -226,7 +226,7 @@ To display a colored icon, just add the icon in the `.tag-asset-container`. Positive @@ -236,7 +236,7 @@ To display a colored icon, just add the icon in the `.tag-asset-container`. Info @@ -246,7 +246,7 @@ To display a colored icon, just add the icon in the `.tag-asset-container`. Warning @@ -256,7 +256,7 @@ To display a colored icon, just add the icon in the `.tag-asset-container`. Negative @@ -266,7 +266,7 @@ To display a colored icon, just add the icon in the `.tag-asset-container`. Disabled @@ -582,11 +582,12 @@ To display a small tag, add the class `.tag-sm` to the tag.
      `} /> ## Accessibility + // TODO Tags indicator is typically used in a list. -otherwise, the tag should be included in a sementical tag (cf badge) +otherwise, the tag should be included in a semantic tag (cf badge)



      From 5b49096b5e1644205cfd67bc583f1e946d4d8175 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Thu, 10 Jul 2025 17:26:49 +0200 Subject: [PATCH 05/78] Fix github checks, docs and some scss --- scss/_tag.scss | 8 +-- site/src/content/docs/components/tag.mdx | 66 ++---------------------- 2 files changed, 9 insertions(+), 65 deletions(-) diff --git a/scss/_tag.scss b/scss/_tag.scss index a9249d8549..5ca1d19e58 100644 --- a/scss/_tag.scss +++ b/scss/_tag.scss @@ -11,8 +11,8 @@ --#{$prefix}tag-asset-padding: 1px; // TODO replace by ouds/💠_indicator/tag/space/inset/icon-default --#{$prefix}tag-asset-gap: #{$ouds-tag-space-column-gap-default}; --#{$prefix}tag-asset-color: currentcolor; - --#{$prefix}btn-loading-dasharray: 96; - --#{$prefix}btn-loading-animation: 2.1875s infinite linear rotate1-indeterminate, 1.25s linear infinite rotate2-indeterminate; + --#{$prefix}tag-loading-dasharray: 96; + --#{$prefix}tag-loading-animation: 2.1875s infinite linear rotate1-indeterminate, 1.25s linear infinite rotate2-indeterminate; // scss-docs-end tag-css-vars display: inline-flex; @@ -90,10 +90,10 @@ > .tag-loader-inner { fill: none; stroke: var(--#{$prefix}tag-asset-color); - stroke-dasharray: var(--#{$prefix}btn-loading-dasharray); + stroke-dasharray: var(--#{$prefix}tag-loading-dasharray); stroke-width: 6; transform-origin: center; - animation: var(--#{$prefix}btn-loading-animation); + animation: var(--#{$prefix}tag-loading-animation); } } } diff --git a/site/src/content/docs/components/tag.mdx b/site/src/content/docs/components/tag.mdx index 5d70ec4fb3..b745aa8f96 100644 --- a/site/src/content/docs/components/tag.mdx +++ b/site/src/content/docs/components/tag.mdx @@ -17,8 +17,11 @@ import { getConfig } from '@libs/config' Tag indicator can be used near some text (to show status or key details), or in a list (to indicate or filter by categories or keywords). -OUDS Web has a basic `.tag` class that sets up default styles. + + For accessibility and semantics reasons, tags, like any other informative elements, must be enclosed in an ancestor or parent semantic tag. In the following examples, tag are used either in `
    • `, `

      ` or `

      `: you can use any other semantic tag depending on the usage context. + +OUDS Web has a basic `.tag` class that sets up default styles.

    • Roaming
      • @@ -196,7 +199,7 @@ To display a colored bullet add `` in the `.tag- The recommended way of using an icon in a tag is through an [SVG sprite file]([[docsref:/extend/icons#svg-sprite]]). - Since icons in tags are purely decorative and adjacent text always exists, so they should be hidden from assistive technologies using `aria-hidden="true"`, as demonstrated in our tag examples. + Since icons in tags are always next to some text, they are purely decorative and should be hidden from assistive technologies using `aria-hidden="true"`, as demonstrated in our tag examples. To display a colored icon, just add the icon in the `.tag-asset-container`. @@ -580,62 +583,3 @@ To display a small tag, add the class `.tag-sm` to the tag.

    `} /> - -## Accessibility - -// TODO - -Tags indicator is typically used in a list. - -otherwise, the tag should be included in a semantic tag (cf badge) - - -



    - -For tests: - -Title Coming soon -

    Title - - - - - Coming soon - -

    -

    - Title - - - - - Coming soon - -

    -

    - Title - Roaming -

    -

    - Title - - - - - Coming soon - -

    -

    - Title - - - - - Coming soon - -

    `} /> From bf63370c30794866eb3931456fdd5151f2fa9fb3 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Thu, 10 Jul 2025 18:24:29 +0200 Subject: [PATCH 06/78] Start tag input --- scss/_tag.scss | 46 ++++++++++++++++++- site/src/content/docs/components/tag.mdx | 25 ++++++++++ .../[version]/assets/img/ouds-web-sprite.svg | 3 ++ 3 files changed, 73 insertions(+), 1 deletion(-) diff --git a/scss/_tag.scss b/scss/_tag.scss index 5ca1d19e58..dc5cbfa7f6 100644 --- a/scss/_tag.scss +++ b/scss/_tag.scss @@ -1,4 +1,5 @@ -.tag { +.tag, +.tag-input { // scss-docs-start tag-css-vars --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-default}; --#{$prefix}tag-padding-end: #{$ouds-tag-space-padding-inline-default}; @@ -137,6 +138,49 @@ // scss-docs-end tag-sm-css-vars } +.tag-input { + --#{$prefix}tag-color: #{$ouds-tag-input-color-content-enabled}; + --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-enabled}; + --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-enabled}; + --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default}; + + border: var(--#{$prefix}tag-border-width) solid var(--#{$prefix}tag-border-color); + + &:hover { + --#{$prefix}tag-color: #{$ouds-tag-input-color-content-hover}; + --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-hover}; + --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-hover}; + --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; + } + + &:active { + --#{$prefix}tag-color: #{$ouds-tag-input-color-content-pressed}; + --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-pressed}; + --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-pressed}; + --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; + } + + &:focus { + --#{$prefix}tag-color: #{$ouds-tag-input-color-content-focus}; + --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-focus}; + --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-focus}; + --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; + } + + &:disabled, + &[aria-disabled="true"] { + --#{$prefix}tag-color: #{$ouds-color-action-disabled}; + --#{$prefix}tag-background-color: #{$ouds-color-content-on-action-disabled}; + --#{$prefix}tag-border-color: #{$ouds-color-action-disabled}; + --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; + } + + .tag-asset-container { + margin-right: 0; + margin-left: var(--#{$prefix}tag-asset-gap); + } +} + // img, // svg { // width: var(--#{$prefix}tag-icon-size); diff --git a/site/src/content/docs/components/tag.mdx b/site/src/content/docs/components/tag.mdx index b745aa8f96..a53e75e06d 100644 --- a/site/src/content/docs/components/tag.mdx +++ b/site/src/content/docs/components/tag.mdx @@ -583,3 +583,28 @@ To display a small tag, add the class `.tag-sm` to the tag. `} /> + +## Tag input + +Standard tags are used in an informative way. Tag inputs are used to edit tags, that is removing them. They are interactive and can take all the usual statuses: enabled, hover, pressed, disabled or focus. + + + Label + + + + + + `} /> + + diff --git a/site/static/docs/[version]/assets/img/ouds-web-sprite.svg b/site/static/docs/[version]/assets/img/ouds-web-sprite.svg index 9cb4aa492d..f11fd37be4 100644 --- a/site/static/docs/[version]/assets/img/ouds-web-sprite.svg +++ b/site/static/docs/[version]/assets/img/ouds-web-sprite.svg @@ -32,4 +32,7 @@ + + + From a30f6f1201f9e1c7638e55dda2db79ee147eb8b4 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Fri, 11 Jul 2025 09:34:57 +0200 Subject: [PATCH 07/78] fix ci --- scss/tokens/_component.scss | 28 ++++++++++++------------ site/src/content/docs/components/tag.mdx | 26 +++++++++++----------- 2 files changed, 27 insertions(+), 27 deletions(-) diff --git a/scss/tokens/_component.scss b/scss/tokens/_component.scss index e7b0616e5e..5fbd2d74ef 100644 --- a/scss/tokens/_component.scss +++ b/scss/tokens/_component.scss @@ -417,20 +417,20 @@ $ouds-tabs-space-row-gap-icon-label-unequal: $ouds-space-row-gap-xs !default; // scss-docs-start ouds-component-tag $ouds-tag-border-radius: $ouds-border-radius-pill !default; // OK -$ouds-tag-input-border-width-default-interaction: $ouds-border-width-medium !default; -$ouds-tag-input-border-width-default: $ouds-border-width-default !default; -$ouds-tag-input-color-bg-enabled: $ouds-color-action-support-enabled !default; -$ouds-tag-input-color-bg-focus: $ouds-color-action-support-focus !default; -$ouds-tag-input-color-bg-hover: $ouds-color-action-support-hover !default; -$ouds-tag-input-color-bg-pressed: $ouds-color-action-support-pressed !default; -$ouds-tag-input-color-border-enabled: $ouds-color-border-default !default; -$ouds-tag-input-color-border-focus: $ouds-color-action-focus !default; -$ouds-tag-input-color-border-hover: $ouds-color-action-hover !default; -$ouds-tag-input-color-border-pressed: $ouds-color-action-pressed !default; -$ouds-tag-input-color-content-enabled: $ouds-color-action-enabled !default; -$ouds-tag-input-color-content-focus: $ouds-color-action-focus !default; -$ouds-tag-input-color-content-hover: $ouds-color-action-hover !default; -$ouds-tag-input-color-content-pressed: $ouds-color-action-pressed !default; +$ouds-tag-input-border-width-default-interaction: $ouds-border-width-medium !default; // OK +$ouds-tag-input-border-width-default: $ouds-border-width-default !default; // OK +$ouds-tag-input-color-bg-enabled: $ouds-color-action-support-enabled !default; // OK +$ouds-tag-input-color-bg-focus: $ouds-color-action-support-focus !default; // OK +$ouds-tag-input-color-bg-hover: $ouds-color-action-support-hover !default; // OK +$ouds-tag-input-color-bg-pressed: $ouds-color-action-support-pressed !default; // OK +$ouds-tag-input-color-border-enabled: $ouds-color-border-default !default; // OK +$ouds-tag-input-color-border-focus: $ouds-color-action-focus !default; // OK +$ouds-tag-input-color-border-hover: $ouds-color-action-hover !default; // OK +$ouds-tag-input-color-border-pressed: $ouds-color-action-pressed !default; // OK +$ouds-tag-input-color-content-enabled: $ouds-color-action-enabled !default; // OK +$ouds-tag-input-color-content-focus: $ouds-color-action-focus !default; // OK +$ouds-tag-input-color-content-hover: $ouds-color-action-hover !default; // OK +$ouds-tag-input-color-content-pressed: $ouds-color-action-pressed !default; // OK $ouds-tag-size-icon-default: $ouds-size-icon-with-label-medium-size-sm !default; // TODO replaced by ouds/💠_indicator/tag/size/asset-default $ouds-tag-size-icon-small: $ouds-size-icon-with-label-small-size-sm !default; // TODO replaced by ouds/💠_indicator/tag/size/asset-small $ouds-tag-size-min-height-default: $ouds-dimension-xs !default; // OK diff --git a/site/src/content/docs/components/tag.mdx b/site/src/content/docs/components/tag.mdx index a53e75e06d..c1503dbf88 100644 --- a/site/src/content/docs/components/tag.mdx +++ b/site/src/content/docs/components/tag.mdx @@ -374,8 +374,8 @@ If really needed, you can use a font icon associated to the `.icon` class to set + Neutral @@ -385,8 +385,8 @@ If really needed, you can use a font icon associated to the `.icon` class to set + Accent @@ -396,8 +396,8 @@ If really needed, you can use a font icon associated to the `.icon` class to set + Positive @@ -407,8 +407,8 @@ If really needed, you can use a font icon associated to the `.icon` class to set + Info @@ -418,8 +418,8 @@ If really needed, you can use a font icon associated to the `.icon` class to set + Warning @@ -429,8 +429,8 @@ If really needed, you can use a font icon associated to the `.icon` class to set + Negative @@ -440,8 +440,8 @@ If really needed, you can use a font icon associated to the `.icon` class to set + Disabled @@ -454,8 +454,8 @@ If really needed, you can use a font icon associated to the `.icon` class to set + Neutral @@ -465,8 +465,8 @@ If really needed, you can use a font icon associated to the `.icon` class to set + Accent @@ -476,8 +476,8 @@ If really needed, you can use a font icon associated to the `.icon` class to set + Positive @@ -487,8 +487,8 @@ If really needed, you can use a font icon associated to the `.icon` class to set + Info @@ -498,8 +498,8 @@ If really needed, you can use a font icon associated to the `.icon` class to set + Warning @@ -509,8 +509,8 @@ If really needed, you can use a font icon associated to the `.icon` class to set + Negative From 85c956034d1a54fab40ef16f65b78591c3b34434 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Fri, 11 Jul 2025 11:08:15 +0200 Subject: [PATCH 08/78] fix ci --- site/src/content/docs/components/tag.mdx | 26 ++++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/site/src/content/docs/components/tag.mdx b/site/src/content/docs/components/tag.mdx index c1503dbf88..1f0022126c 100644 --- a/site/src/content/docs/components/tag.mdx +++ b/site/src/content/docs/components/tag.mdx @@ -546,8 +546,8 @@ To display a small tag, add the class `.tag-sm` to the tag. + Neutral @@ -576,8 +576,8 @@ To display a small tag, add the class `.tag-sm` to the tag. + Small neutral @@ -598,13 +598,31 @@ Standard tags are used in an informative way. Tag inputs are used to edit tags, - + + + Label + + + + + + Label - `} /> + `} /> From 560c1851fbd21bb7e85052ae643637d62b725c04 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Fri, 11 Jul 2025 17:19:45 +0200 Subject: [PATCH 09/78] first version tag input --- scss/_tag.scss | 277 ++++++++++++++++++++--- site/src/content/docs/components/tag.mdx | 133 ++++++++--- 2 files changed, 345 insertions(+), 65 deletions(-) diff --git a/scss/_tag.scss b/scss/_tag.scss index dc5cbfa7f6..551d3a7f3a 100644 --- a/scss/_tag.scss +++ b/scss/_tag.scss @@ -1,20 +1,18 @@ -.tag, -.tag-input { - // scss-docs-start tag-css-vars +.tag:not(:has(.tag-input)), +.tag .tag-input { + --#{$prefix}tag-color: #{$ouds-color-content-on-status-neutral-emphasized}; + --#{$prefix}tag-background-color: #{$ouds-color-surface-status-neutral-emphasized}; --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-default}; --#{$prefix}tag-padding-end: #{$ouds-tag-space-padding-inline-default}; --#{$prefix}tag-padding-y: #{$ouds-tag-space-padding-block-default}; --#{$prefix}tag-min-width: #{$ouds-tag-size-min-width-default}; --#{$prefix}tag-min-height: #{$ouds-tag-size-min-height-default}; - --#{$prefix}tag-color: #{$ouds-color-content-on-status-neutral-emphasized}; - --#{$prefix}tag-background-color: #{$ouds-color-surface-status-neutral-emphasized}; --#{$prefix}tag-asset-container-size: 16px; // TODO ouds/💠_indicator/tag/size/asset-default --#{$prefix}tag-asset-padding: 1px; // TODO replace by ouds/💠_indicator/tag/space/inset/icon-default --#{$prefix}tag-asset-gap: #{$ouds-tag-space-column-gap-default}; --#{$prefix}tag-asset-color: currentcolor; --#{$prefix}tag-loading-dasharray: 96; --#{$prefix}tag-loading-animation: 2.1875s infinite linear rotate1-indeterminate, 1.25s linear infinite rotate2-indeterminate; - // scss-docs-end tag-css-vars display: inline-flex; align-items: center; @@ -26,14 +24,10 @@ font-weight: 700; color: var(--#{$prefix}tag-color); white-space: nowrap; - vertical-align: text-bottom; // TODO to fix + vertical-align: text-bottom; // TODO alignment to check background-color: var(--#{$prefix}tag-background-color); @include get-font-size("label-medium"); @include border-radius(#{$ouds-tag-border-radius}); - - &:has(.tag-asset-container) { - --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-default-asset}; - } } .tag-disabled { @@ -77,7 +71,7 @@ position: relative; } - .tag-loader { + .tag-loader { // TODO copied from button loader --#{$prefix}tag-asset-color: currentcolor; position: absolute; top: 50%; @@ -119,7 +113,6 @@ } .tag-sm { - // scss-docs-start tag-sm-css-vars --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-small}; --#{$prefix}tag-padding-end: #{$ouds-tag-space-padding-inline-small}; --#{$prefix}tag-padding-y: #{$ouds-tag-space-padding-block-small}; @@ -135,52 +128,278 @@ &:has(.tag-asset-container) { --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-small-asset}; } - // scss-docs-end tag-sm-css-vars } -.tag-input { - --#{$prefix}tag-color: #{$ouds-tag-input-color-content-enabled}; - --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-enabled}; - --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-enabled}; - --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default}; - border: var(--#{$prefix}tag-border-width) solid var(--#{$prefix}tag-border-color); +.tag:has(.tag-input) { + --#{$prefix}tag-min-height: #{$ouds-tag-size-min-height-default}; + display: inline-flex; + min-height: $ouds-tag-size-min-height-interactive-area; + padding: calc(calc($ouds-tag-size-min-height-interactive-area - var(--#{$prefix}tag-min-height)) / 2) 0; // stylelint-disable-line function-disallowed-list + text-decoration: none; + background: transparent; + border: 0; - &:hover { + &:hover .tag-input { --#{$prefix}tag-color: #{$ouds-tag-input-color-content-hover}; --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-hover}; --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-hover}; --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; } - &:active { + &:active .tag-input { --#{$prefix}tag-color: #{$ouds-tag-input-color-content-pressed}; --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-pressed}; --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-pressed}; --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; } - &:focus { + &:focus-visible { --#{$prefix}tag-color: #{$ouds-tag-input-color-content-focus}; --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-focus}; --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-focus}; --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; + + outline: 0; + box-shadow: none; + + > .tag-input { + --#{$prefix}tag-color: #{$ouds-tag-input-color-content-hover}; + --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-hover}; + --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-hover}; + --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; + @include focus-visible(); + } } - &:disabled, - &[aria-disabled="true"] { + &:disabled .tag-input, + &[aria-disabled="true"] .tag-input { --#{$prefix}tag-color: #{$ouds-color-action-disabled}; --#{$prefix}tag-background-color: #{$ouds-color-content-on-action-disabled}; --#{$prefix}tag-border-color: #{$ouds-color-action-disabled}; - --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; + --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default}; } - .tag-asset-container { - margin-right: 0; - margin-left: var(--#{$prefix}tag-asset-gap); + .tag-input { + --#{$prefix}tag-color: #{$ouds-tag-input-color-content-enabled}; + --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-enabled}; + --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-enabled}; + --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default}; + + border: var(--#{$prefix}tag-border-width) solid var(--#{$prefix}tag-border-color); + + &::after { + display: inline-block; + width: var(--#{$prefix}tag-asset-container-size); + height: var(--#{$prefix}tag-asset-container-size); + margin-left: #{$ouds-tag-space-padding-inline-default-asset}; + vertical-align: bottom; + content: ""; + background-color: var(--#{$prefix}tag-color); + mask: url("data:image/svg+xml,"); + } } } + +//.tag { +// // scss-docs-start tag-css-vars +// --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-default}; +// --#{$prefix}tag-padding-end: #{$ouds-tag-space-padding-inline-default}; +// --#{$prefix}tag-padding-y: #{$ouds-tag-space-padding-block-default}; +// --#{$prefix}tag-min-width: #{$ouds-tag-size-min-width-default}; +// --#{$prefix}tag-min-height: #{$ouds-tag-size-min-height-default}; +// --#{$prefix}tag-color: #{$ouds-color-content-on-status-neutral-emphasized}; +// --#{$prefix}tag-background-color: #{$ouds-color-surface-status-neutral-emphasized}; +// --#{$prefix}tag-asset-container-size: 16px; // TODO ouds/💠_indicator/tag/size/asset-default +// --#{$prefix}tag-asset-padding: 1px; // TODO replace by ouds/💠_indicator/tag/space/inset/icon-default +// --#{$prefix}tag-asset-gap: #{$ouds-tag-space-column-gap-default}; +// --#{$prefix}tag-asset-color: currentcolor; +// --#{$prefix}tag-loading-dasharray: 96; +// --#{$prefix}tag-loading-animation: 2.1875s infinite linear rotate1-indeterminate, 1.25s linear infinite rotate2-indeterminate; +// // scss-docs-end tag-css-vars +// +// display: inline-flex; +// align-items: center; +// justify-content: center; +// min-width: var(--#{$prefix}tag-min-width); +// min-height: var(--#{$prefix}tag-min-height); +// padding: var(--#{$prefix}tag-padding-y) var(--#{$prefix}tag-padding-end) var(--#{$prefix}tag-padding-y) var(--#{$prefix}tag-padding-start); +// margin: 0; +// font-weight: 700; +// color: var(--#{$prefix}tag-color); +// white-space: nowrap; +// vertical-align: text-bottom; // TODO to fix +// background-color: var(--#{$prefix}tag-background-color); +// @include get-font-size("label-medium"); +// @include border-radius(#{$ouds-tag-border-radius}); +// +// &:has(.tag-asset-container) { +// --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-default-asset}; +// } +//} +// +//.tag-disabled { +// --#{$prefix}tag-color: #{$ouds-color-content-on-action-disabled}; +// --#{$prefix}tag-background-color: #{$ouds-color-action-disabled}; +//} +// +//.tag-asset-container { +// display: flex; +// flex-shrink: 0; +// align-items: center; +// width: var(--#{$prefix}tag-asset-container-size); +// height: var(--#{$prefix}tag-asset-container-size); +// padding: var(--#{$prefix}tag-asset-padding); +// margin-right: var(--#{$prefix}tag-asset-gap); +// +// // TODO do we keep "img"? => if not, see in badge +// svg:not(.tag-loader), +// img, +// .icon { +// width: 100%; +// height: 100%; +// overflow: hidden; +// line-height: 1; +// color: var(--#{$prefix}tag-asset-color); +// } +// +// &:has(.tag-bullet) { +// --#{$prefix}tag-asset-padding: 3px; // TODO replace by ouds/💠_indicator/tag/space/inset/bullet-default +// } +// +// .tag-bullet { +// width: 100%; +// height: 100%; +// background-color: var(--#{$prefix}tag-asset-color); +// @include border-radius(#{$ouds-tag-border-radius}); +// } +// +// &:has(.tag-loader) { +// --#{$prefix}tag-asset-padding: 2px; // TODO replace by ouds/💠_indicator/tag/space/inset/loader-default +// position: relative; +// } +// +// .tag-loader { +// --#{$prefix}tag-asset-color: currentcolor; +// position: absolute; +// top: 50%; +// left: 50%; +// display: block; +// margin: 0; +// font-size: var(--#{$prefix}tag-asset-container-size); +// color: var(--#{$prefix}tag-asset-color); +// transform: translate(-50%, -50%) rotate(-90deg); +// +// > .tag-loader-inner { +// fill: none; +// stroke: var(--#{$prefix}tag-asset-color); +// stroke-dasharray: var(--#{$prefix}tag-loading-dasharray); +// stroke-width: 6; +// transform-origin: center; +// animation: var(--#{$prefix}tag-loading-animation); +// } +// } +//} +// +//.tag.text-bg-status-accent-muted:not(:has(.tag-loader)) { +// --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-accent-emphasized}; +//} +//.tag.text-bg-status-positive-muted:not(:has(.tag-loader)) { +// --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-positive-emphasized}; +//} +// +//.tag.text-bg-status-info-muted:not(:has(.tag-loader)) { +// --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-info-emphasized}; +//} +// +//.tag.text-bg-status-warning-muted:not(:has(.tag-loader)) { +// --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-warning-emphasized}; +//} +// +//.tag.text-bg-status-negative-muted:not(:has(.tag-loader)) { +// --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-negative-emphasized}; +//} +// +//.tag-sm { +// // scss-docs-start tag-sm-css-vars +// --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-small}; +// --#{$prefix}tag-padding-end: #{$ouds-tag-space-padding-inline-small}; +// --#{$prefix}tag-padding-y: #{$ouds-tag-space-padding-block-small}; +// --#{$prefix}tag-min-width: #{$ouds-tag-size-min-width-small}; +// --#{$prefix}tag-min-height: #{$ouds-tag-size-min-height-small}; +// --#{$prefix}tag-asset-container-size: 12px; // TODO ouds/💠_indicator/tag/size/asset-small +// --#{$prefix}tag-bullet-padding: 2px; // TODO replace by ouds/💠_indicator/tag/space/inset/bullet-small +// --#{$prefix}tag-icon-padding: 0; // TODO replace by ouds/💠_indicator/tag/space/inset/icon-small +// --#{$prefix}tag-loader-padding: 1px; // TODO replace by ouds/💠_indicator/tag/space/inset/loader-small +// --#{$prefix}tag-asset-gap: #{$ouds-tag-space-column-gap-small}; +// @include get-font-size("label-small"); +// +// &:has(.tag-asset-container) { +// --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-small-asset}; +// } +// // scss-docs-end tag-sm-css-vars +//} +// +//.tag-input { +// --#{$prefix}tag-color: #{$ouds-tag-input-color-content-enabled}; +// --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-enabled}; +// --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-enabled}; +// --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default}; +// //min-height: $ouds-tag-size-min-height-interactive-area; // TODO no small version? +// //padding: calc(calc($ouds-tag-size-min-height-interactive-area - var(--#{$prefix}tag-min-height)) / 2) 0; // stylelint-disable-line function-disallowed-list +// //background: transparent; +// //border: 0; +// +// min-height: $ouds-tag-size-min-height-interactive-area; +// text-decoration: none; +// border: var(--#{$prefix}tag-border-width) solid var(--#{$prefix}tag-border-color); +// +// &::before { +// position: absolute; +// top: 0; +// left: 0; +// width: 100%; +// height: 100%; +// content: ""; +// background-color: transparent; +// } +// +// &:hover { +// --#{$prefix}tag-color: #{$ouds-tag-input-color-content-hover}; +// --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-hover}; +// --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-hover}; +// --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; +// } +// +// &:active { +// --#{$prefix}tag-color: #{$ouds-tag-input-color-content-pressed}; +// --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-pressed}; +// --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-pressed}; +// --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; +// } +// +// &:focus { +// --#{$prefix}tag-color: #{$ouds-tag-input-color-content-focus}; +// --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-focus}; +// --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-focus}; +// --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; +// } +// +// &:disabled, +// &[aria-disabled="true"] { +// --#{$prefix}tag-color: #{$ouds-color-action-disabled}; +// --#{$prefix}tag-background-color: #{$ouds-color-content-on-action-disabled}; +// --#{$prefix}tag-border-color: #{$ouds-color-action-disabled}; +// --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; +// } +// +// .tag-asset-container { +// margin-right: 0; +// margin-left: var(--#{$prefix}tag-asset-gap); +// } +//} + // img, // svg { // width: var(--#{$prefix}tag-icon-size); diff --git a/site/src/content/docs/components/tag.mdx b/site/src/content/docs/components/tag.mdx index 1f0022126c..60a62ede3e 100644 --- a/site/src/content/docs/components/tag.mdx +++ b/site/src/content/docs/components/tag.mdx @@ -586,43 +586,104 @@ To display a small tag, add the class `.tag-sm` to the tag. ## Tag input -Standard tags are used in an informative way. Tag inputs are used to edit tags, that is removing them. They are interactive and can take all the usual statuses: enabled, hover, pressed, disabled or focus. +Standard tags are used in an informative way. Tag inputs are used to edit tags, that is removing them. They are interactive and can take all the usual statuses: enabled, hover, pressed, disabled or focus. The should be used along with a ` + +
  • + +
    • +
  • + +
    • +
  • + + Label + +
    • +
  • + + Label + +
    • + `} /> + +// Test for alignments - Label - - - - - - - - - Label - - - - - - - Label - - - - `} /> + + + Label + + `} /> + +## Layout + +// Tests + + +
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
    • +
  • Consectetur adipiscing elit
    • +
  • 4G
    • + +

    +

    Title Coming soon lorem ipsum

    +

    +

    New Some text

    ` + } /> + +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit + + +
    • +
  • + + + A + + +
    • + +

    +

    Title

    +

    Title

    +`} /> From bf023b93c7f4bfb59d0c12782658c7afaf4e2af7 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Fri, 11 Jul 2025 17:20:27 +0200 Subject: [PATCH 10/78] remove comments --- scss/_tag.scss | 299 ------------------------------------------------- 1 file changed, 299 deletions(-) diff --git a/scss/_tag.scss b/scss/_tag.scss index 551d3a7f3a..c711d43309 100644 --- a/scss/_tag.scss +++ b/scss/_tag.scss @@ -200,302 +200,3 @@ } } } - - -//.tag { -// // scss-docs-start tag-css-vars -// --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-default}; -// --#{$prefix}tag-padding-end: #{$ouds-tag-space-padding-inline-default}; -// --#{$prefix}tag-padding-y: #{$ouds-tag-space-padding-block-default}; -// --#{$prefix}tag-min-width: #{$ouds-tag-size-min-width-default}; -// --#{$prefix}tag-min-height: #{$ouds-tag-size-min-height-default}; -// --#{$prefix}tag-color: #{$ouds-color-content-on-status-neutral-emphasized}; -// --#{$prefix}tag-background-color: #{$ouds-color-surface-status-neutral-emphasized}; -// --#{$prefix}tag-asset-container-size: 16px; // TODO ouds/💠_indicator/tag/size/asset-default -// --#{$prefix}tag-asset-padding: 1px; // TODO replace by ouds/💠_indicator/tag/space/inset/icon-default -// --#{$prefix}tag-asset-gap: #{$ouds-tag-space-column-gap-default}; -// --#{$prefix}tag-asset-color: currentcolor; -// --#{$prefix}tag-loading-dasharray: 96; -// --#{$prefix}tag-loading-animation: 2.1875s infinite linear rotate1-indeterminate, 1.25s linear infinite rotate2-indeterminate; -// // scss-docs-end tag-css-vars -// -// display: inline-flex; -// align-items: center; -// justify-content: center; -// min-width: var(--#{$prefix}tag-min-width); -// min-height: var(--#{$prefix}tag-min-height); -// padding: var(--#{$prefix}tag-padding-y) var(--#{$prefix}tag-padding-end) var(--#{$prefix}tag-padding-y) var(--#{$prefix}tag-padding-start); -// margin: 0; -// font-weight: 700; -// color: var(--#{$prefix}tag-color); -// white-space: nowrap; -// vertical-align: text-bottom; // TODO to fix -// background-color: var(--#{$prefix}tag-background-color); -// @include get-font-size("label-medium"); -// @include border-radius(#{$ouds-tag-border-radius}); -// -// &:has(.tag-asset-container) { -// --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-default-asset}; -// } -//} -// -//.tag-disabled { -// --#{$prefix}tag-color: #{$ouds-color-content-on-action-disabled}; -// --#{$prefix}tag-background-color: #{$ouds-color-action-disabled}; -//} -// -//.tag-asset-container { -// display: flex; -// flex-shrink: 0; -// align-items: center; -// width: var(--#{$prefix}tag-asset-container-size); -// height: var(--#{$prefix}tag-asset-container-size); -// padding: var(--#{$prefix}tag-asset-padding); -// margin-right: var(--#{$prefix}tag-asset-gap); -// -// // TODO do we keep "img"? => if not, see in badge -// svg:not(.tag-loader), -// img, -// .icon { -// width: 100%; -// height: 100%; -// overflow: hidden; -// line-height: 1; -// color: var(--#{$prefix}tag-asset-color); -// } -// -// &:has(.tag-bullet) { -// --#{$prefix}tag-asset-padding: 3px; // TODO replace by ouds/💠_indicator/tag/space/inset/bullet-default -// } -// -// .tag-bullet { -// width: 100%; -// height: 100%; -// background-color: var(--#{$prefix}tag-asset-color); -// @include border-radius(#{$ouds-tag-border-radius}); -// } -// -// &:has(.tag-loader) { -// --#{$prefix}tag-asset-padding: 2px; // TODO replace by ouds/💠_indicator/tag/space/inset/loader-default -// position: relative; -// } -// -// .tag-loader { -// --#{$prefix}tag-asset-color: currentcolor; -// position: absolute; -// top: 50%; -// left: 50%; -// display: block; -// margin: 0; -// font-size: var(--#{$prefix}tag-asset-container-size); -// color: var(--#{$prefix}tag-asset-color); -// transform: translate(-50%, -50%) rotate(-90deg); -// -// > .tag-loader-inner { -// fill: none; -// stroke: var(--#{$prefix}tag-asset-color); -// stroke-dasharray: var(--#{$prefix}tag-loading-dasharray); -// stroke-width: 6; -// transform-origin: center; -// animation: var(--#{$prefix}tag-loading-animation); -// } -// } -//} -// -//.tag.text-bg-status-accent-muted:not(:has(.tag-loader)) { -// --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-accent-emphasized}; -//} -//.tag.text-bg-status-positive-muted:not(:has(.tag-loader)) { -// --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-positive-emphasized}; -//} -// -//.tag.text-bg-status-info-muted:not(:has(.tag-loader)) { -// --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-info-emphasized}; -//} -// -//.tag.text-bg-status-warning-muted:not(:has(.tag-loader)) { -// --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-warning-emphasized}; -//} -// -//.tag.text-bg-status-negative-muted:not(:has(.tag-loader)) { -// --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-negative-emphasized}; -//} -// -//.tag-sm { -// // scss-docs-start tag-sm-css-vars -// --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-small}; -// --#{$prefix}tag-padding-end: #{$ouds-tag-space-padding-inline-small}; -// --#{$prefix}tag-padding-y: #{$ouds-tag-space-padding-block-small}; -// --#{$prefix}tag-min-width: #{$ouds-tag-size-min-width-small}; -// --#{$prefix}tag-min-height: #{$ouds-tag-size-min-height-small}; -// --#{$prefix}tag-asset-container-size: 12px; // TODO ouds/💠_indicator/tag/size/asset-small -// --#{$prefix}tag-bullet-padding: 2px; // TODO replace by ouds/💠_indicator/tag/space/inset/bullet-small -// --#{$prefix}tag-icon-padding: 0; // TODO replace by ouds/💠_indicator/tag/space/inset/icon-small -// --#{$prefix}tag-loader-padding: 1px; // TODO replace by ouds/💠_indicator/tag/space/inset/loader-small -// --#{$prefix}tag-asset-gap: #{$ouds-tag-space-column-gap-small}; -// @include get-font-size("label-small"); -// -// &:has(.tag-asset-container) { -// --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-small-asset}; -// } -// // scss-docs-end tag-sm-css-vars -//} -// -//.tag-input { -// --#{$prefix}tag-color: #{$ouds-tag-input-color-content-enabled}; -// --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-enabled}; -// --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-enabled}; -// --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default}; -// //min-height: $ouds-tag-size-min-height-interactive-area; // TODO no small version? -// //padding: calc(calc($ouds-tag-size-min-height-interactive-area - var(--#{$prefix}tag-min-height)) / 2) 0; // stylelint-disable-line function-disallowed-list -// //background: transparent; -// //border: 0; -// -// min-height: $ouds-tag-size-min-height-interactive-area; -// text-decoration: none; -// border: var(--#{$prefix}tag-border-width) solid var(--#{$prefix}tag-border-color); -// -// &::before { -// position: absolute; -// top: 0; -// left: 0; -// width: 100%; -// height: 100%; -// content: ""; -// background-color: transparent; -// } -// -// &:hover { -// --#{$prefix}tag-color: #{$ouds-tag-input-color-content-hover}; -// --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-hover}; -// --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-hover}; -// --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; -// } -// -// &:active { -// --#{$prefix}tag-color: #{$ouds-tag-input-color-content-pressed}; -// --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-pressed}; -// --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-pressed}; -// --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; -// } -// -// &:focus { -// --#{$prefix}tag-color: #{$ouds-tag-input-color-content-focus}; -// --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-focus}; -// --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-focus}; -// --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; -// } -// -// &:disabled, -// &[aria-disabled="true"] { -// --#{$prefix}tag-color: #{$ouds-color-action-disabled}; -// --#{$prefix}tag-background-color: #{$ouds-color-content-on-action-disabled}; -// --#{$prefix}tag-border-color: #{$ouds-color-action-disabled}; -// --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; -// } -// -// .tag-asset-container { -// margin-right: 0; -// margin-left: var(--#{$prefix}tag-asset-gap); -// } -//} - -// img, -// svg { -// width: var(--#{$prefix}tag-icon-size); -// min-width: var(--#{$prefix}tag-icon-size); // Here to avoid weird behavior on wrap -// height: var(--#{$prefix}tag-icon-size); -// margin: add(calc(-.5 * var(--#{$prefix}tag-icon-size)), var(--#{$prefix}tag-font-shift)) 0 calc(-.5 * var(--#{$prefix}tag-icon-size)) var(--#{$prefix}tag-icon-margin-start); -// } -// -// .close { -// position: relative; -// width: var(--#{$prefix}tag-close-size); -// min-width: var(--#{$prefix}tag-close-size); // Here to avoid weird behavior on wrap -// height: var(--#{$prefix}tag-close-size); -// padding: 0; // Force padding on button to have a circle on iOS - Safari and Chrome -// margin: add(calc(-.5 * var(--#{$prefix}tag-close-size)), var(--#{$prefix}tag-font-shift)) var(--#{$prefix}tag-close-margin-end) calc(-.5 * var(--#{$prefix}tag-close-size)) var(--#{$prefix}tag-close-margin-start); -// color: inherit; -// background-color: transparent; -// border: 0; -// @include border-radius(var(--#{$prefix}tag-border-radius), var(--#{$prefix}tag-border-radius)); -// -// &::before { -// position: absolute; -// top: calc(-1 * var(--#{$prefix}tag-padding-y)); -// right: calc(-1 * var(--#{$prefix}tag-padding-y)); -// bottom: calc(-1 * var(--#{$prefix}tag-padding-y)); -// left: calc(-1 * var(--#{$prefix}tag-padding-y)); -// content: ""; -// @include border-radius(var(--#{$prefix}tag-border-radius), var(--#{$prefix}tag-border-radius)); -// } -// -// &::after { -// display: block; -// min-width: subtract(var(--#{$prefix}tag-close-size), .625rem); -// min-height: subtract(var(--#{$prefix}tag-close-size), .625rem); -// content: ""; -// background-color: currentcolor; -// mask: escape-svg(var(--#{$prefix}close-icon)) no-repeat 50% / subtract(var(--#{$prefix}tag-close-size), .625rem); -// } -// -// &:hover, -// &:active { -// color: var(--#{$prefix}tag-active-color); -// background-color: var(--#{$prefix}tag-active-decoration-color); -// } -// -// &[disabled] { -// pointer-events: none; -// } -// } -// -// .btn-check:disabled + &, -// .btn-check[disabled] + &, -// &[disabled], -// &.disabled { -// color: var(--#{$prefix}tag-disabled-color); -// pointer-events: none; -// border-color: var(--#{$prefix}tag-disabled-color); -// } -// -// .btn-check:checked + & { -// color: var(--#{$prefix}tag-active-color); -// background-color: var(--#{$prefix}tag-active-decoration-color); -// border-color: var(--#{$prefix}tag-active-decoration-color); -// } - -// -//// stylelint-disable selector-no-qualifying-type -//p.tag { -// @extend .text-bg-status-neutral-emphasized; -//} -//// stylelint-enable selector-no-qualifying-type -// -// -//// stylelint-disable selector-no-qualifying-type -//a.tag, -//button.tag, -//label.tag { -// color: var(--#{$prefix}tag-color); -// text-decoration: none; -// cursor: pointer; -// -// &:hover { -// border-color: var(--#{$prefix}tag-active-decoration-color); -// } -// -// &.active, -// &:active { -// color: var(--#{$prefix}tag-active-color); -// background-color: var(--#{$prefix}tag-active-decoration-color); -// border-color: var(--#{$prefix}tag-active-decoration-color); -// -// &[disabled], -// &.disabled { -// background-color: var(--#{$prefix}tag-disabled-color); -// border-color: var(--#{$prefix}tag-disabled-color); -// } -// } -//} -//// stylelint-enable selector-no-qualifying-type From e3d88da9e25f8645c0c15e7a038723e7eb2c68f5 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Fri, 11 Jul 2025 17:24:58 +0200 Subject: [PATCH 11/78] fix $ouds-tag-space-column-gap-default token --- scss/_tag.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_tag.scss b/scss/_tag.scss index c711d43309..2313999836 100644 --- a/scss/_tag.scss +++ b/scss/_tag.scss @@ -192,7 +192,7 @@ display: inline-block; width: var(--#{$prefix}tag-asset-container-size); height: var(--#{$prefix}tag-asset-container-size); - margin-left: #{$ouds-tag-space-padding-inline-default-asset}; + margin-left: #{$ouds-tag-space-column-gap-default}; vertical-align: bottom; content: ""; background-color: var(--#{$prefix}tag-color); From efa03344deb9741899689101f401c738c6fbd7d0 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Fri, 11 Jul 2025 17:25:55 +0200 Subject: [PATCH 12/78] fix docs ci --- site/src/content/docs/components/tag.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/content/docs/components/tag.mdx b/site/src/content/docs/components/tag.mdx index 60a62ede3e..d9556a8c64 100644 --- a/site/src/content/docs/components/tag.mdx +++ b/site/src/content/docs/components/tag.mdx @@ -623,7 +623,7 @@ Standard tags are used in an informative way. Tag inputs are used to edit tags, - + Label -
    • `} /> + +## Tag input + +Standard tags are used in an informative way. Tag inputs are used to edit tags, that is removing them. They are interactive and can take all the usual statuses: enabled, hover, pressed, disabled or focus. + + + Label + + + + + + `} /> + + diff --git a/site/static/docs/[version]/assets/img/ouds-web-sprite.svg b/site/static/docs/[version]/assets/img/ouds-web-sprite.svg index 9cb4aa492d..f11fd37be4 100644 --- a/site/static/docs/[version]/assets/img/ouds-web-sprite.svg +++ b/site/static/docs/[version]/assets/img/ouds-web-sprite.svg @@ -32,4 +32,7 @@ + + + From 78ac3704aa770c3649f523a3757a1716451a67e7 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Fri, 11 Jul 2025 09:34:57 +0200 Subject: [PATCH 22/78] fix ci --- scss/tokens/_component.scss | 28 ++++++++++++------------ site/src/content/docs/components/tag.mdx | 26 +++++++++++----------- 2 files changed, 27 insertions(+), 27 deletions(-) diff --git a/scss/tokens/_component.scss b/scss/tokens/_component.scss index e7b0616e5e..5fbd2d74ef 100644 --- a/scss/tokens/_component.scss +++ b/scss/tokens/_component.scss @@ -417,20 +417,20 @@ $ouds-tabs-space-row-gap-icon-label-unequal: $ouds-space-row-gap-xs !default; // scss-docs-start ouds-component-tag $ouds-tag-border-radius: $ouds-border-radius-pill !default; // OK -$ouds-tag-input-border-width-default-interaction: $ouds-border-width-medium !default; -$ouds-tag-input-border-width-default: $ouds-border-width-default !default; -$ouds-tag-input-color-bg-enabled: $ouds-color-action-support-enabled !default; -$ouds-tag-input-color-bg-focus: $ouds-color-action-support-focus !default; -$ouds-tag-input-color-bg-hover: $ouds-color-action-support-hover !default; -$ouds-tag-input-color-bg-pressed: $ouds-color-action-support-pressed !default; -$ouds-tag-input-color-border-enabled: $ouds-color-border-default !default; -$ouds-tag-input-color-border-focus: $ouds-color-action-focus !default; -$ouds-tag-input-color-border-hover: $ouds-color-action-hover !default; -$ouds-tag-input-color-border-pressed: $ouds-color-action-pressed !default; -$ouds-tag-input-color-content-enabled: $ouds-color-action-enabled !default; -$ouds-tag-input-color-content-focus: $ouds-color-action-focus !default; -$ouds-tag-input-color-content-hover: $ouds-color-action-hover !default; -$ouds-tag-input-color-content-pressed: $ouds-color-action-pressed !default; +$ouds-tag-input-border-width-default-interaction: $ouds-border-width-medium !default; // OK +$ouds-tag-input-border-width-default: $ouds-border-width-default !default; // OK +$ouds-tag-input-color-bg-enabled: $ouds-color-action-support-enabled !default; // OK +$ouds-tag-input-color-bg-focus: $ouds-color-action-support-focus !default; // OK +$ouds-tag-input-color-bg-hover: $ouds-color-action-support-hover !default; // OK +$ouds-tag-input-color-bg-pressed: $ouds-color-action-support-pressed !default; // OK +$ouds-tag-input-color-border-enabled: $ouds-color-border-default !default; // OK +$ouds-tag-input-color-border-focus: $ouds-color-action-focus !default; // OK +$ouds-tag-input-color-border-hover: $ouds-color-action-hover !default; // OK +$ouds-tag-input-color-border-pressed: $ouds-color-action-pressed !default; // OK +$ouds-tag-input-color-content-enabled: $ouds-color-action-enabled !default; // OK +$ouds-tag-input-color-content-focus: $ouds-color-action-focus !default; // OK +$ouds-tag-input-color-content-hover: $ouds-color-action-hover !default; // OK +$ouds-tag-input-color-content-pressed: $ouds-color-action-pressed !default; // OK $ouds-tag-size-icon-default: $ouds-size-icon-with-label-medium-size-sm !default; // TODO replaced by ouds/💠_indicator/tag/size/asset-default $ouds-tag-size-icon-small: $ouds-size-icon-with-label-small-size-sm !default; // TODO replaced by ouds/💠_indicator/tag/size/asset-small $ouds-tag-size-min-height-default: $ouds-dimension-xs !default; // OK diff --git a/site/src/content/docs/components/tag.mdx b/site/src/content/docs/components/tag.mdx index a53e75e06d..c1503dbf88 100644 --- a/site/src/content/docs/components/tag.mdx +++ b/site/src/content/docs/components/tag.mdx @@ -374,8 +374,8 @@ If really needed, you can use a font icon associated to the `.icon` class to set + Neutral @@ -385,8 +385,8 @@ If really needed, you can use a font icon associated to the `.icon` class to set + Accent @@ -396,8 +396,8 @@ If really needed, you can use a font icon associated to the `.icon` class to set + Positive @@ -407,8 +407,8 @@ If really needed, you can use a font icon associated to the `.icon` class to set + Info @@ -418,8 +418,8 @@ If really needed, you can use a font icon associated to the `.icon` class to set + Warning @@ -429,8 +429,8 @@ If really needed, you can use a font icon associated to the `.icon` class to set + Negative @@ -440,8 +440,8 @@ If really needed, you can use a font icon associated to the `.icon` class to set + Disabled @@ -454,8 +454,8 @@ If really needed, you can use a font icon associated to the `.icon` class to set + Neutral @@ -465,8 +465,8 @@ If really needed, you can use a font icon associated to the `.icon` class to set + Accent @@ -476,8 +476,8 @@ If really needed, you can use a font icon associated to the `.icon` class to set + Positive @@ -487,8 +487,8 @@ If really needed, you can use a font icon associated to the `.icon` class to set + Info @@ -498,8 +498,8 @@ If really needed, you can use a font icon associated to the `.icon` class to set + Warning @@ -509,8 +509,8 @@ If really needed, you can use a font icon associated to the `.icon` class to set + Negative From ee907aab584e23ddb40f64e181f2cda0e1e6070c Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Fri, 11 Jul 2025 11:08:15 +0200 Subject: [PATCH 23/78] fix ci --- site/src/content/docs/components/tag.mdx | 26 ++++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/site/src/content/docs/components/tag.mdx b/site/src/content/docs/components/tag.mdx index c1503dbf88..1f0022126c 100644 --- a/site/src/content/docs/components/tag.mdx +++ b/site/src/content/docs/components/tag.mdx @@ -546,8 +546,8 @@ To display a small tag, add the class `.tag-sm` to the tag. + Neutral @@ -576,8 +576,8 @@ To display a small tag, add the class `.tag-sm` to the tag. + Small neutral @@ -598,13 +598,31 @@ Standard tags are used in an informative way. Tag inputs are used to edit tags, - + + + Label + + + + + + Label - `} /> + `} /> From fd441fadfb1e100cecf1cd75e0b767af8ad9b997 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Fri, 11 Jul 2025 17:19:45 +0200 Subject: [PATCH 24/78] first version tag input --- scss/_tag.scss | 277 ++++++++++++++++++++--- site/src/content/docs/components/tag.mdx | 133 ++++++++--- 2 files changed, 345 insertions(+), 65 deletions(-) diff --git a/scss/_tag.scss b/scss/_tag.scss index dc5cbfa7f6..551d3a7f3a 100644 --- a/scss/_tag.scss +++ b/scss/_tag.scss @@ -1,20 +1,18 @@ -.tag, -.tag-input { - // scss-docs-start tag-css-vars +.tag:not(:has(.tag-input)), +.tag .tag-input { + --#{$prefix}tag-color: #{$ouds-color-content-on-status-neutral-emphasized}; + --#{$prefix}tag-background-color: #{$ouds-color-surface-status-neutral-emphasized}; --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-default}; --#{$prefix}tag-padding-end: #{$ouds-tag-space-padding-inline-default}; --#{$prefix}tag-padding-y: #{$ouds-tag-space-padding-block-default}; --#{$prefix}tag-min-width: #{$ouds-tag-size-min-width-default}; --#{$prefix}tag-min-height: #{$ouds-tag-size-min-height-default}; - --#{$prefix}tag-color: #{$ouds-color-content-on-status-neutral-emphasized}; - --#{$prefix}tag-background-color: #{$ouds-color-surface-status-neutral-emphasized}; --#{$prefix}tag-asset-container-size: 16px; // TODO ouds/💠_indicator/tag/size/asset-default --#{$prefix}tag-asset-padding: 1px; // TODO replace by ouds/💠_indicator/tag/space/inset/icon-default --#{$prefix}tag-asset-gap: #{$ouds-tag-space-column-gap-default}; --#{$prefix}tag-asset-color: currentcolor; --#{$prefix}tag-loading-dasharray: 96; --#{$prefix}tag-loading-animation: 2.1875s infinite linear rotate1-indeterminate, 1.25s linear infinite rotate2-indeterminate; - // scss-docs-end tag-css-vars display: inline-flex; align-items: center; @@ -26,14 +24,10 @@ font-weight: 700; color: var(--#{$prefix}tag-color); white-space: nowrap; - vertical-align: text-bottom; // TODO to fix + vertical-align: text-bottom; // TODO alignment to check background-color: var(--#{$prefix}tag-background-color); @include get-font-size("label-medium"); @include border-radius(#{$ouds-tag-border-radius}); - - &:has(.tag-asset-container) { - --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-default-asset}; - } } .tag-disabled { @@ -77,7 +71,7 @@ position: relative; } - .tag-loader { + .tag-loader { // TODO copied from button loader --#{$prefix}tag-asset-color: currentcolor; position: absolute; top: 50%; @@ -119,7 +113,6 @@ } .tag-sm { - // scss-docs-start tag-sm-css-vars --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-small}; --#{$prefix}tag-padding-end: #{$ouds-tag-space-padding-inline-small}; --#{$prefix}tag-padding-y: #{$ouds-tag-space-padding-block-small}; @@ -135,52 +128,278 @@ &:has(.tag-asset-container) { --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-small-asset}; } - // scss-docs-end tag-sm-css-vars } -.tag-input { - --#{$prefix}tag-color: #{$ouds-tag-input-color-content-enabled}; - --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-enabled}; - --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-enabled}; - --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default}; - border: var(--#{$prefix}tag-border-width) solid var(--#{$prefix}tag-border-color); +.tag:has(.tag-input) { + --#{$prefix}tag-min-height: #{$ouds-tag-size-min-height-default}; + display: inline-flex; + min-height: $ouds-tag-size-min-height-interactive-area; + padding: calc(calc($ouds-tag-size-min-height-interactive-area - var(--#{$prefix}tag-min-height)) / 2) 0; // stylelint-disable-line function-disallowed-list + text-decoration: none; + background: transparent; + border: 0; - &:hover { + &:hover .tag-input { --#{$prefix}tag-color: #{$ouds-tag-input-color-content-hover}; --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-hover}; --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-hover}; --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; } - &:active { + &:active .tag-input { --#{$prefix}tag-color: #{$ouds-tag-input-color-content-pressed}; --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-pressed}; --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-pressed}; --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; } - &:focus { + &:focus-visible { --#{$prefix}tag-color: #{$ouds-tag-input-color-content-focus}; --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-focus}; --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-focus}; --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; + + outline: 0; + box-shadow: none; + + > .tag-input { + --#{$prefix}tag-color: #{$ouds-tag-input-color-content-hover}; + --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-hover}; + --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-hover}; + --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; + @include focus-visible(); + } } - &:disabled, - &[aria-disabled="true"] { + &:disabled .tag-input, + &[aria-disabled="true"] .tag-input { --#{$prefix}tag-color: #{$ouds-color-action-disabled}; --#{$prefix}tag-background-color: #{$ouds-color-content-on-action-disabled}; --#{$prefix}tag-border-color: #{$ouds-color-action-disabled}; - --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; + --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default}; } - .tag-asset-container { - margin-right: 0; - margin-left: var(--#{$prefix}tag-asset-gap); + .tag-input { + --#{$prefix}tag-color: #{$ouds-tag-input-color-content-enabled}; + --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-enabled}; + --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-enabled}; + --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default}; + + border: var(--#{$prefix}tag-border-width) solid var(--#{$prefix}tag-border-color); + + &::after { + display: inline-block; + width: var(--#{$prefix}tag-asset-container-size); + height: var(--#{$prefix}tag-asset-container-size); + margin-left: #{$ouds-tag-space-padding-inline-default-asset}; + vertical-align: bottom; + content: ""; + background-color: var(--#{$prefix}tag-color); + mask: url("data:image/svg+xml,"); + } } } + +//.tag { +// // scss-docs-start tag-css-vars +// --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-default}; +// --#{$prefix}tag-padding-end: #{$ouds-tag-space-padding-inline-default}; +// --#{$prefix}tag-padding-y: #{$ouds-tag-space-padding-block-default}; +// --#{$prefix}tag-min-width: #{$ouds-tag-size-min-width-default}; +// --#{$prefix}tag-min-height: #{$ouds-tag-size-min-height-default}; +// --#{$prefix}tag-color: #{$ouds-color-content-on-status-neutral-emphasized}; +// --#{$prefix}tag-background-color: #{$ouds-color-surface-status-neutral-emphasized}; +// --#{$prefix}tag-asset-container-size: 16px; // TODO ouds/💠_indicator/tag/size/asset-default +// --#{$prefix}tag-asset-padding: 1px; // TODO replace by ouds/💠_indicator/tag/space/inset/icon-default +// --#{$prefix}tag-asset-gap: #{$ouds-tag-space-column-gap-default}; +// --#{$prefix}tag-asset-color: currentcolor; +// --#{$prefix}tag-loading-dasharray: 96; +// --#{$prefix}tag-loading-animation: 2.1875s infinite linear rotate1-indeterminate, 1.25s linear infinite rotate2-indeterminate; +// // scss-docs-end tag-css-vars +// +// display: inline-flex; +// align-items: center; +// justify-content: center; +// min-width: var(--#{$prefix}tag-min-width); +// min-height: var(--#{$prefix}tag-min-height); +// padding: var(--#{$prefix}tag-padding-y) var(--#{$prefix}tag-padding-end) var(--#{$prefix}tag-padding-y) var(--#{$prefix}tag-padding-start); +// margin: 0; +// font-weight: 700; +// color: var(--#{$prefix}tag-color); +// white-space: nowrap; +// vertical-align: text-bottom; // TODO to fix +// background-color: var(--#{$prefix}tag-background-color); +// @include get-font-size("label-medium"); +// @include border-radius(#{$ouds-tag-border-radius}); +// +// &:has(.tag-asset-container) { +// --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-default-asset}; +// } +//} +// +//.tag-disabled { +// --#{$prefix}tag-color: #{$ouds-color-content-on-action-disabled}; +// --#{$prefix}tag-background-color: #{$ouds-color-action-disabled}; +//} +// +//.tag-asset-container { +// display: flex; +// flex-shrink: 0; +// align-items: center; +// width: var(--#{$prefix}tag-asset-container-size); +// height: var(--#{$prefix}tag-asset-container-size); +// padding: var(--#{$prefix}tag-asset-padding); +// margin-right: var(--#{$prefix}tag-asset-gap); +// +// // TODO do we keep "img"? => if not, see in badge +// svg:not(.tag-loader), +// img, +// .icon { +// width: 100%; +// height: 100%; +// overflow: hidden; +// line-height: 1; +// color: var(--#{$prefix}tag-asset-color); +// } +// +// &:has(.tag-bullet) { +// --#{$prefix}tag-asset-padding: 3px; // TODO replace by ouds/💠_indicator/tag/space/inset/bullet-default +// } +// +// .tag-bullet { +// width: 100%; +// height: 100%; +// background-color: var(--#{$prefix}tag-asset-color); +// @include border-radius(#{$ouds-tag-border-radius}); +// } +// +// &:has(.tag-loader) { +// --#{$prefix}tag-asset-padding: 2px; // TODO replace by ouds/💠_indicator/tag/space/inset/loader-default +// position: relative; +// } +// +// .tag-loader { +// --#{$prefix}tag-asset-color: currentcolor; +// position: absolute; +// top: 50%; +// left: 50%; +// display: block; +// margin: 0; +// font-size: var(--#{$prefix}tag-asset-container-size); +// color: var(--#{$prefix}tag-asset-color); +// transform: translate(-50%, -50%) rotate(-90deg); +// +// > .tag-loader-inner { +// fill: none; +// stroke: var(--#{$prefix}tag-asset-color); +// stroke-dasharray: var(--#{$prefix}tag-loading-dasharray); +// stroke-width: 6; +// transform-origin: center; +// animation: var(--#{$prefix}tag-loading-animation); +// } +// } +//} +// +//.tag.text-bg-status-accent-muted:not(:has(.tag-loader)) { +// --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-accent-emphasized}; +//} +//.tag.text-bg-status-positive-muted:not(:has(.tag-loader)) { +// --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-positive-emphasized}; +//} +// +//.tag.text-bg-status-info-muted:not(:has(.tag-loader)) { +// --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-info-emphasized}; +//} +// +//.tag.text-bg-status-warning-muted:not(:has(.tag-loader)) { +// --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-warning-emphasized}; +//} +// +//.tag.text-bg-status-negative-muted:not(:has(.tag-loader)) { +// --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-negative-emphasized}; +//} +// +//.tag-sm { +// // scss-docs-start tag-sm-css-vars +// --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-small}; +// --#{$prefix}tag-padding-end: #{$ouds-tag-space-padding-inline-small}; +// --#{$prefix}tag-padding-y: #{$ouds-tag-space-padding-block-small}; +// --#{$prefix}tag-min-width: #{$ouds-tag-size-min-width-small}; +// --#{$prefix}tag-min-height: #{$ouds-tag-size-min-height-small}; +// --#{$prefix}tag-asset-container-size: 12px; // TODO ouds/💠_indicator/tag/size/asset-small +// --#{$prefix}tag-bullet-padding: 2px; // TODO replace by ouds/💠_indicator/tag/space/inset/bullet-small +// --#{$prefix}tag-icon-padding: 0; // TODO replace by ouds/💠_indicator/tag/space/inset/icon-small +// --#{$prefix}tag-loader-padding: 1px; // TODO replace by ouds/💠_indicator/tag/space/inset/loader-small +// --#{$prefix}tag-asset-gap: #{$ouds-tag-space-column-gap-small}; +// @include get-font-size("label-small"); +// +// &:has(.tag-asset-container) { +// --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-small-asset}; +// } +// // scss-docs-end tag-sm-css-vars +//} +// +//.tag-input { +// --#{$prefix}tag-color: #{$ouds-tag-input-color-content-enabled}; +// --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-enabled}; +// --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-enabled}; +// --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default}; +// //min-height: $ouds-tag-size-min-height-interactive-area; // TODO no small version? +// //padding: calc(calc($ouds-tag-size-min-height-interactive-area - var(--#{$prefix}tag-min-height)) / 2) 0; // stylelint-disable-line function-disallowed-list +// //background: transparent; +// //border: 0; +// +// min-height: $ouds-tag-size-min-height-interactive-area; +// text-decoration: none; +// border: var(--#{$prefix}tag-border-width) solid var(--#{$prefix}tag-border-color); +// +// &::before { +// position: absolute; +// top: 0; +// left: 0; +// width: 100%; +// height: 100%; +// content: ""; +// background-color: transparent; +// } +// +// &:hover { +// --#{$prefix}tag-color: #{$ouds-tag-input-color-content-hover}; +// --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-hover}; +// --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-hover}; +// --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; +// } +// +// &:active { +// --#{$prefix}tag-color: #{$ouds-tag-input-color-content-pressed}; +// --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-pressed}; +// --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-pressed}; +// --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; +// } +// +// &:focus { +// --#{$prefix}tag-color: #{$ouds-tag-input-color-content-focus}; +// --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-focus}; +// --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-focus}; +// --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; +// } +// +// &:disabled, +// &[aria-disabled="true"] { +// --#{$prefix}tag-color: #{$ouds-color-action-disabled}; +// --#{$prefix}tag-background-color: #{$ouds-color-content-on-action-disabled}; +// --#{$prefix}tag-border-color: #{$ouds-color-action-disabled}; +// --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; +// } +// +// .tag-asset-container { +// margin-right: 0; +// margin-left: var(--#{$prefix}tag-asset-gap); +// } +//} + // img, // svg { // width: var(--#{$prefix}tag-icon-size); diff --git a/site/src/content/docs/components/tag.mdx b/site/src/content/docs/components/tag.mdx index 1f0022126c..60a62ede3e 100644 --- a/site/src/content/docs/components/tag.mdx +++ b/site/src/content/docs/components/tag.mdx @@ -586,43 +586,104 @@ To display a small tag, add the class `.tag-sm` to the tag. ## Tag input -Standard tags are used in an informative way. Tag inputs are used to edit tags, that is removing them. They are interactive and can take all the usual statuses: enabled, hover, pressed, disabled or focus. +Standard tags are used in an informative way. Tag inputs are used to edit tags, that is removing them. They are interactive and can take all the usual statuses: enabled, hover, pressed, disabled or focus. The should be used along with a ` + +
  • + +
    • +
  • + +
    • +
  • + + Label + +
    • +
  • + + Label + +
    • + `} /> + +// Test for alignments - Label - - - - - - - - - Label - - - - - - - Label - - - - `} /> + + + Label + + `} /> + +## Layout + +// Tests + + +
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
    • +
  • Consectetur adipiscing elit
    • +
  • 4G
    • + +

    +

    Title Coming soon lorem ipsum

    +

    +

    New Some text

    ` + } /> + +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit + + +
    • +
  • + + + A + + +
    • + +

    +

    Title

    +

    Title

    +`} /> From 03f775af9f5fe4b0f102ac9b312b9c8b33875d79 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Fri, 11 Jul 2025 17:20:27 +0200 Subject: [PATCH 25/78] remove comments --- scss/_tag.scss | 299 ------------------------------------------------- 1 file changed, 299 deletions(-) diff --git a/scss/_tag.scss b/scss/_tag.scss index 551d3a7f3a..c711d43309 100644 --- a/scss/_tag.scss +++ b/scss/_tag.scss @@ -200,302 +200,3 @@ } } } - - -//.tag { -// // scss-docs-start tag-css-vars -// --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-default}; -// --#{$prefix}tag-padding-end: #{$ouds-tag-space-padding-inline-default}; -// --#{$prefix}tag-padding-y: #{$ouds-tag-space-padding-block-default}; -// --#{$prefix}tag-min-width: #{$ouds-tag-size-min-width-default}; -// --#{$prefix}tag-min-height: #{$ouds-tag-size-min-height-default}; -// --#{$prefix}tag-color: #{$ouds-color-content-on-status-neutral-emphasized}; -// --#{$prefix}tag-background-color: #{$ouds-color-surface-status-neutral-emphasized}; -// --#{$prefix}tag-asset-container-size: 16px; // TODO ouds/💠_indicator/tag/size/asset-default -// --#{$prefix}tag-asset-padding: 1px; // TODO replace by ouds/💠_indicator/tag/space/inset/icon-default -// --#{$prefix}tag-asset-gap: #{$ouds-tag-space-column-gap-default}; -// --#{$prefix}tag-asset-color: currentcolor; -// --#{$prefix}tag-loading-dasharray: 96; -// --#{$prefix}tag-loading-animation: 2.1875s infinite linear rotate1-indeterminate, 1.25s linear infinite rotate2-indeterminate; -// // scss-docs-end tag-css-vars -// -// display: inline-flex; -// align-items: center; -// justify-content: center; -// min-width: var(--#{$prefix}tag-min-width); -// min-height: var(--#{$prefix}tag-min-height); -// padding: var(--#{$prefix}tag-padding-y) var(--#{$prefix}tag-padding-end) var(--#{$prefix}tag-padding-y) var(--#{$prefix}tag-padding-start); -// margin: 0; -// font-weight: 700; -// color: var(--#{$prefix}tag-color); -// white-space: nowrap; -// vertical-align: text-bottom; // TODO to fix -// background-color: var(--#{$prefix}tag-background-color); -// @include get-font-size("label-medium"); -// @include border-radius(#{$ouds-tag-border-radius}); -// -// &:has(.tag-asset-container) { -// --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-default-asset}; -// } -//} -// -//.tag-disabled { -// --#{$prefix}tag-color: #{$ouds-color-content-on-action-disabled}; -// --#{$prefix}tag-background-color: #{$ouds-color-action-disabled}; -//} -// -//.tag-asset-container { -// display: flex; -// flex-shrink: 0; -// align-items: center; -// width: var(--#{$prefix}tag-asset-container-size); -// height: var(--#{$prefix}tag-asset-container-size); -// padding: var(--#{$prefix}tag-asset-padding); -// margin-right: var(--#{$prefix}tag-asset-gap); -// -// // TODO do we keep "img"? => if not, see in badge -// svg:not(.tag-loader), -// img, -// .icon { -// width: 100%; -// height: 100%; -// overflow: hidden; -// line-height: 1; -// color: var(--#{$prefix}tag-asset-color); -// } -// -// &:has(.tag-bullet) { -// --#{$prefix}tag-asset-padding: 3px; // TODO replace by ouds/💠_indicator/tag/space/inset/bullet-default -// } -// -// .tag-bullet { -// width: 100%; -// height: 100%; -// background-color: var(--#{$prefix}tag-asset-color); -// @include border-radius(#{$ouds-tag-border-radius}); -// } -// -// &:has(.tag-loader) { -// --#{$prefix}tag-asset-padding: 2px; // TODO replace by ouds/💠_indicator/tag/space/inset/loader-default -// position: relative; -// } -// -// .tag-loader { -// --#{$prefix}tag-asset-color: currentcolor; -// position: absolute; -// top: 50%; -// left: 50%; -// display: block; -// margin: 0; -// font-size: var(--#{$prefix}tag-asset-container-size); -// color: var(--#{$prefix}tag-asset-color); -// transform: translate(-50%, -50%) rotate(-90deg); -// -// > .tag-loader-inner { -// fill: none; -// stroke: var(--#{$prefix}tag-asset-color); -// stroke-dasharray: var(--#{$prefix}tag-loading-dasharray); -// stroke-width: 6; -// transform-origin: center; -// animation: var(--#{$prefix}tag-loading-animation); -// } -// } -//} -// -//.tag.text-bg-status-accent-muted:not(:has(.tag-loader)) { -// --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-accent-emphasized}; -//} -//.tag.text-bg-status-positive-muted:not(:has(.tag-loader)) { -// --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-positive-emphasized}; -//} -// -//.tag.text-bg-status-info-muted:not(:has(.tag-loader)) { -// --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-info-emphasized}; -//} -// -//.tag.text-bg-status-warning-muted:not(:has(.tag-loader)) { -// --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-warning-emphasized}; -//} -// -//.tag.text-bg-status-negative-muted:not(:has(.tag-loader)) { -// --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-negative-emphasized}; -//} -// -//.tag-sm { -// // scss-docs-start tag-sm-css-vars -// --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-small}; -// --#{$prefix}tag-padding-end: #{$ouds-tag-space-padding-inline-small}; -// --#{$prefix}tag-padding-y: #{$ouds-tag-space-padding-block-small}; -// --#{$prefix}tag-min-width: #{$ouds-tag-size-min-width-small}; -// --#{$prefix}tag-min-height: #{$ouds-tag-size-min-height-small}; -// --#{$prefix}tag-asset-container-size: 12px; // TODO ouds/💠_indicator/tag/size/asset-small -// --#{$prefix}tag-bullet-padding: 2px; // TODO replace by ouds/💠_indicator/tag/space/inset/bullet-small -// --#{$prefix}tag-icon-padding: 0; // TODO replace by ouds/💠_indicator/tag/space/inset/icon-small -// --#{$prefix}tag-loader-padding: 1px; // TODO replace by ouds/💠_indicator/tag/space/inset/loader-small -// --#{$prefix}tag-asset-gap: #{$ouds-tag-space-column-gap-small}; -// @include get-font-size("label-small"); -// -// &:has(.tag-asset-container) { -// --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-small-asset}; -// } -// // scss-docs-end tag-sm-css-vars -//} -// -//.tag-input { -// --#{$prefix}tag-color: #{$ouds-tag-input-color-content-enabled}; -// --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-enabled}; -// --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-enabled}; -// --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default}; -// //min-height: $ouds-tag-size-min-height-interactive-area; // TODO no small version? -// //padding: calc(calc($ouds-tag-size-min-height-interactive-area - var(--#{$prefix}tag-min-height)) / 2) 0; // stylelint-disable-line function-disallowed-list -// //background: transparent; -// //border: 0; -// -// min-height: $ouds-tag-size-min-height-interactive-area; -// text-decoration: none; -// border: var(--#{$prefix}tag-border-width) solid var(--#{$prefix}tag-border-color); -// -// &::before { -// position: absolute; -// top: 0; -// left: 0; -// width: 100%; -// height: 100%; -// content: ""; -// background-color: transparent; -// } -// -// &:hover { -// --#{$prefix}tag-color: #{$ouds-tag-input-color-content-hover}; -// --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-hover}; -// --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-hover}; -// --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; -// } -// -// &:active { -// --#{$prefix}tag-color: #{$ouds-tag-input-color-content-pressed}; -// --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-pressed}; -// --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-pressed}; -// --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; -// } -// -// &:focus { -// --#{$prefix}tag-color: #{$ouds-tag-input-color-content-focus}; -// --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-focus}; -// --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-focus}; -// --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; -// } -// -// &:disabled, -// &[aria-disabled="true"] { -// --#{$prefix}tag-color: #{$ouds-color-action-disabled}; -// --#{$prefix}tag-background-color: #{$ouds-color-content-on-action-disabled}; -// --#{$prefix}tag-border-color: #{$ouds-color-action-disabled}; -// --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; -// } -// -// .tag-asset-container { -// margin-right: 0; -// margin-left: var(--#{$prefix}tag-asset-gap); -// } -//} - -// img, -// svg { -// width: var(--#{$prefix}tag-icon-size); -// min-width: var(--#{$prefix}tag-icon-size); // Here to avoid weird behavior on wrap -// height: var(--#{$prefix}tag-icon-size); -// margin: add(calc(-.5 * var(--#{$prefix}tag-icon-size)), var(--#{$prefix}tag-font-shift)) 0 calc(-.5 * var(--#{$prefix}tag-icon-size)) var(--#{$prefix}tag-icon-margin-start); -// } -// -// .close { -// position: relative; -// width: var(--#{$prefix}tag-close-size); -// min-width: var(--#{$prefix}tag-close-size); // Here to avoid weird behavior on wrap -// height: var(--#{$prefix}tag-close-size); -// padding: 0; // Force padding on button to have a circle on iOS - Safari and Chrome -// margin: add(calc(-.5 * var(--#{$prefix}tag-close-size)), var(--#{$prefix}tag-font-shift)) var(--#{$prefix}tag-close-margin-end) calc(-.5 * var(--#{$prefix}tag-close-size)) var(--#{$prefix}tag-close-margin-start); -// color: inherit; -// background-color: transparent; -// border: 0; -// @include border-radius(var(--#{$prefix}tag-border-radius), var(--#{$prefix}tag-border-radius)); -// -// &::before { -// position: absolute; -// top: calc(-1 * var(--#{$prefix}tag-padding-y)); -// right: calc(-1 * var(--#{$prefix}tag-padding-y)); -// bottom: calc(-1 * var(--#{$prefix}tag-padding-y)); -// left: calc(-1 * var(--#{$prefix}tag-padding-y)); -// content: ""; -// @include border-radius(var(--#{$prefix}tag-border-radius), var(--#{$prefix}tag-border-radius)); -// } -// -// &::after { -// display: block; -// min-width: subtract(var(--#{$prefix}tag-close-size), .625rem); -// min-height: subtract(var(--#{$prefix}tag-close-size), .625rem); -// content: ""; -// background-color: currentcolor; -// mask: escape-svg(var(--#{$prefix}close-icon)) no-repeat 50% / subtract(var(--#{$prefix}tag-close-size), .625rem); -// } -// -// &:hover, -// &:active { -// color: var(--#{$prefix}tag-active-color); -// background-color: var(--#{$prefix}tag-active-decoration-color); -// } -// -// &[disabled] { -// pointer-events: none; -// } -// } -// -// .btn-check:disabled + &, -// .btn-check[disabled] + &, -// &[disabled], -// &.disabled { -// color: var(--#{$prefix}tag-disabled-color); -// pointer-events: none; -// border-color: var(--#{$prefix}tag-disabled-color); -// } -// -// .btn-check:checked + & { -// color: var(--#{$prefix}tag-active-color); -// background-color: var(--#{$prefix}tag-active-decoration-color); -// border-color: var(--#{$prefix}tag-active-decoration-color); -// } - -// -//// stylelint-disable selector-no-qualifying-type -//p.tag { -// @extend .text-bg-status-neutral-emphasized; -//} -//// stylelint-enable selector-no-qualifying-type -// -// -//// stylelint-disable selector-no-qualifying-type -//a.tag, -//button.tag, -//label.tag { -// color: var(--#{$prefix}tag-color); -// text-decoration: none; -// cursor: pointer; -// -// &:hover { -// border-color: var(--#{$prefix}tag-active-decoration-color); -// } -// -// &.active, -// &:active { -// color: var(--#{$prefix}tag-active-color); -// background-color: var(--#{$prefix}tag-active-decoration-color); -// border-color: var(--#{$prefix}tag-active-decoration-color); -// -// &[disabled], -// &.disabled { -// background-color: var(--#{$prefix}tag-disabled-color); -// border-color: var(--#{$prefix}tag-disabled-color); -// } -// } -//} -//// stylelint-enable selector-no-qualifying-type From 9a897aa8b96d25f2c061454ced15205c926812af Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Fri, 11 Jul 2025 17:24:58 +0200 Subject: [PATCH 26/78] fix $ouds-tag-space-column-gap-default token --- scss/_tag.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_tag.scss b/scss/_tag.scss index c711d43309..2313999836 100644 --- a/scss/_tag.scss +++ b/scss/_tag.scss @@ -192,7 +192,7 @@ display: inline-block; width: var(--#{$prefix}tag-asset-container-size); height: var(--#{$prefix}tag-asset-container-size); - margin-left: #{$ouds-tag-space-padding-inline-default-asset}; + margin-left: #{$ouds-tag-space-column-gap-default}; vertical-align: bottom; content: ""; background-color: var(--#{$prefix}tag-color); From 3b698a0b26e7b389eee7c898571d08a8c8ec8c61 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Fri, 11 Jul 2025 17:25:55 +0200 Subject: [PATCH 27/78] fix docs ci --- site/src/content/docs/components/tag.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/content/docs/components/tag.mdx b/site/src/content/docs/components/tag.mdx index 60a62ede3e..d9556a8c64 100644 --- a/site/src/content/docs/components/tag.mdx +++ b/site/src/content/docs/components/tag.mdx @@ -623,7 +623,7 @@ Standard tags are used in an informative way. Tag inputs are used to edit tags, - + Label -
  • `} /> + ## Standard variant Tag indicator can be used near some text (to show status or key details), or in a list (to indicate or filter by categories or keywords). @@ -586,7 +597,7 @@ To display a small tag, add the class `.tag-sm` to the tag. ## Tag input -Standard tags are used in an informative way. Tag inputs are used to edit tags, that is removing them. They are interactive and can take all the usual statuses: enabled, hover, pressed, disabled or focus. The should be used along with a `
    • -
  • - - Label - -
    • -
  • - - Label - -
    • `} /> // Test for alignments @@ -618,9 +619,6 @@ Standard tags are used in an informative way. Tag inputs are used to edit tags, - - Label - `} /> From f3bfe21c58acffa80b311046ad89a4cbdd91283a Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Wed, 30 Jul 2025 09:48:34 +0200 Subject: [PATCH 37/78] wip --- .vscode/settings.json | 2 +- scss/_tag.scss | 212 ++++++++++++++++++++---------------------- 2 files changed, 100 insertions(+), 114 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 9c6ae2d622..4f7eac18f2 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -5,6 +5,6 @@ }, "editor.renderWhitespace": "all", "scss.validate": false, - "stylelint.enable": true, + "stylelint.enable": false, "stylelint.validate": ["scss"] } diff --git a/scss/_tag.scss b/scss/_tag.scss index fe8b40ddfd..61ea042140 100644 --- a/scss/_tag.scss +++ b/scss/_tag.scss @@ -1,9 +1,10 @@ -.tag, -.tag .tag-input { +.tag { --#{$prefix}tag-color: #{$ouds-color-content-on-status-neutral-emphasized}; + --#{$prefix}tag-border-width: 0px; --#{$prefix}tag-background-color: #{$ouds-color-surface-status-neutral-emphasized}; --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-default}; --#{$prefix}tag-padding-end: #{$ouds-tag-space-padding-inline-default}; + --#{$prefix}tag-padding-asset: #{$ouds-tag-space-padding-inline-asset-default}; --#{$prefix}tag-padding-y: #{$ouds-tag-space-padding-block-default}; --#{$prefix}tag-min-width: #{$ouds-tag-size-min-width-default}; --#{$prefix}tag-min-height: #{$ouds-tag-size-min-height-default}; @@ -14,12 +15,14 @@ --#{$prefix}tag-loading-dasharray: 92; --#{$prefix}tag-loading-animation: 2.1875s infinite linear rotate1-indeterminate, 1.25s linear infinite rotate2-indeterminate; + position: relative; display: inline-flex; + gap: var(--#{$prefix}tag-asset-gap); align-items: center; justify-content: center; min-width: var(--#{$prefix}tag-min-width); min-height: var(--#{$prefix}tag-min-height); - padding: var(--#{$prefix}tag-padding-y) var(--#{$prefix}tag-padding-end) var(--#{$prefix}tag-padding-y) var(--#{$prefix}tag-padding-start); + padding: subtract(var(--#{$prefix}tag-padding-y), var(--#{$prefix}tag-border-width)) subtract(var(--#{$prefix}tag-padding-end), var(--#{$prefix}tag-border-width)) subtract(var(--#{$prefix}tag-padding-y), var(--#{$prefix}tag-border-width)) subtract(var(--#{$prefix}tag-padding-start), var(--#{$prefix}tag-border-width)); margin: 0; font-weight: 700; color: var(--#{$prefix}tag-color); @@ -28,76 +31,74 @@ background-color: var(--#{$prefix}tag-background-color); @include get-font-size("label-medium"); @include border-radius($ouds-tag-border-radius); + + &:has(.tag-asset-container) { + --#{$prefix}tag-padding-start: var(--#{$prefix}tag-padding-asset); + } } -.tag { - &.tag-disabled { // TODO: [aria-disabled="true"] ? - --#{$prefix}tag-color: #{$ouds-color-content-on-action-disabled}; - --#{$prefix}tag-background-color: #{$ouds-color-action-disabled}; +.tag-asset-container { + display: flex; + flex-shrink: 0; + align-items: center; + width: var(--#{$prefix}tag-asset-container-size); + height: var(--#{$prefix}tag-asset-container-size); + padding: var(--#{$prefix}tag-asset-padding); + + // TODO do we keep "img"? => if not, see in button + svg, + img, + .icon { + width: 100%; + height: 100%; + overflow: hidden; + line-height: 1; + color: var(--#{$prefix}tag-asset-color); } - &:has(.tag-asset-container) { - --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-asset-default}; + &:has(.tag-bullet) { + --#{$prefix}tag-asset-padding: #{$ouds-tag-space-inset-bullet-default}; } - .tag-asset-container { - display: flex; - flex-shrink: 0; - align-items: center; - width: var(--#{$prefix}tag-asset-container-size); - height: var(--#{$prefix}tag-asset-container-size); - padding: var(--#{$prefix}tag-asset-padding); - margin-right: var(--#{$prefix}tag-asset-gap); - - // TODO do we keep "img"? => if not, see in button - svg, - img, - .icon { - width: 100%; - height: 100%; - overflow: hidden; - line-height: 1; - color: var(--#{$prefix}tag-asset-color); - } - - &:has(.tag-bullet) { - --#{$prefix}tag-asset-padding: #{$ouds-tag-space-inset-bullet-default}; - } - - .tag-bullet { - width: 100%; - height: 100%; - background-color: var(--#{$prefix}tag-asset-color); - @include border-radius(#{$ouds-tag-border-radius}); - } - - &:has(.tag-loader) { - --#{$prefix}tag-asset-padding: #{$ouds-tag-space-inset-loader-default}; - position: relative; - } - - .tag-loader { // TODO copied from button loader, should be factorized - display: block; - margin: 0; - font-size: var(--#{$prefix}tag-asset-container-size); - color: currentcolor; - transform: rotate(-90deg); - - > .tag-loader-inner { - fill: none; - stroke: var(--#{$prefix}tag-asset-color); - stroke-dasharray: var(--#{$prefix}tag-loading-dasharray); - stroke-width: 8; - transform-origin: center; - animation: var(--#{$prefix}tag-loading-animation); - } - } + &:has(.tag-loader) { + --#{$prefix}tag-asset-padding: #{$ouds-tag-space-inset-loader-default}; + position: relative; + } +} + +.tag-bullet { + width: 100%; + height: 100%; + background-color: var(--#{$prefix}tag-asset-color); + @include border-radius(#{$ouds-tag-border-radius}); +} + +.tag-loader { // TODO copied from button loader, should be factorized + display: block; + margin: 0; + font-size: var(--#{$prefix}tag-asset-container-size); + color: currentcolor; + transform: rotate(-90deg); + + > .tag-loader-inner { + fill: none; + stroke: var(--#{$prefix}tag-asset-color); + stroke-dasharray: var(--#{$prefix}tag-loading-dasharray); + stroke-width: 8; + transform-origin: center; + animation: var(--#{$prefix}tag-loading-animation); } } +.tag-disabled { // TODO: [aria-disabled="true"] ? + --#{$prefix}tag-color: #{$ouds-color-content-on-action-disabled}; + --#{$prefix}tag-background-color: #{$ouds-color-action-disabled}; +} + .tag.text-bg-status-accent-muted { --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-accent-emphasized}; } + .tag.text-bg-status-positive-muted { --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-positive-emphasized}; } @@ -117,6 +118,7 @@ .tag-sm { --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-small}; --#{$prefix}tag-padding-end: #{$ouds-tag-space-padding-inline-small}; + --#{$prefix}tag-padding-start-asset: #{$ouds-tag-space-padding-inline-asset-small}; --#{$prefix}tag-padding-y: #{$ouds-tag-space-padding-block-small}; --#{$prefix}tag-min-width: #{$ouds-tag-size-min-width-small}; --#{$prefix}tag-min-height: #{$ouds-tag-size-min-height-small}; @@ -126,29 +128,45 @@ --#{$prefix}tag-loader-padding: #{$ouds-tag-space-inset-loader-small}; --#{$prefix}tag-asset-gap: #{$ouds-tag-space-column-gap-small}; @include get-font-size("label-small"); +} - &:has(.tag-asset-container) { - --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-asset-small}; +.tag-input { + --#{$prefix}tag-color: #{$ouds-tag-input-color-content-enabled}; + --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-enabled}; + --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-enabled}; + --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default}; + --#{$prefix}tag-padding-end: var(--#{$prefix}tag-padding-asset); + + margin: calc(($ouds-tag-size-min-height-interactive-area - var(--#{$prefix}tag-min-height)) / 2) 0; // stylelint-disable-line function-disallowed-list + border: var(--#{$prefix}tag-border-width) solid var(--#{$prefix}tag-border-color); + + &::before { + position: absolute; + top: calc(-.5 * ($ouds-tag-size-min-height-interactive-area - var(--bs-tag-min-height)) - var(--#{$prefix}tag-border-width)); // stylelint-disable-line function-disallowed-list + right: calc(-1 * var(--#{$prefix}tag-border-width)); // stylelint-disable-line function-disallowed-list + bottom: calc(-.5 * ($ouds-tag-size-min-height-interactive-area - var(--bs-tag-min-height)) - var(--#{$prefix}tag-border-width)); // stylelint-disable-line function-disallowed-list + left: calc(-1 * var(--#{$prefix}tag-border-width)); // stylelint-disable-line function-disallowed-list + content: ""; } -} -.tag:has(.tag-input) { - --#{$prefix}tag-min-height: #{$ouds-tag-size-min-height-default}; - display: inline-flex; - min-height: $ouds-tag-size-min-height-interactive-area; - padding: calc(calc($ouds-tag-size-min-height-interactive-area - var(--#{$prefix}tag-min-height)) / 2) 0; // stylelint-disable-line function-disallowed-list - text-decoration: none; - background: transparent; - border: 0; + &::after { + display: inline-block; + width: var(--#{$prefix}tag-asset-container-size); + height: var(--#{$prefix}tag-asset-container-size); + vertical-align: bottom; + content: ""; + background-color: currentcolor; + mask: url("data:image/svg+xml,"); + } - &:hover .tag-input { + &:hover { --#{$prefix}tag-color: #{$ouds-tag-input-color-content-hover}; --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-hover}; --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-hover}; --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; } - &:active .tag-input { + &:active { --#{$prefix}tag-color: #{$ouds-tag-input-color-content-pressed}; --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-pressed}; --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-pressed}; @@ -156,51 +174,19 @@ } &:focus-visible { - outline: 0; - box-shadow: none; - - > .tag-input { - --#{$prefix}tag-color: #{$ouds-tag-input-color-content-focus}; - --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-focus}; - --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-focus}; - --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; - @include focus-visible(); - } + --#{$prefix}tag-color: #{$ouds-tag-input-color-content-focus}; + --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-focus}; + --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-focus}; + --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; } - &:disabled .tag-input, - &[aria-disabled="true"] .tag-input { + &:disabled, + &[aria-disabled="true"] { --#{$prefix}tag-color: #{$ouds-color-action-disabled}; --#{$prefix}tag-background-color: #{$ouds-color-content-on-action-disabled}; --#{$prefix}tag-border-color: #{$ouds-color-action-disabled}; --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default}; - } - - &:hover:not(&:disabled):not(&[aria-disabled="true"]) .tag-input, - &:focus-visible:not(&:disabled):not(&[aria-disabled="true"]) .tag-input, - &:focus[data-focus-visible-added]:not(&:disabled):not(&[aria-disabled="true"]) .tag-input, - &:active:not(&:disabled):not(&[aria-disabled="true"]) .tag-input, - &.active:not(&:disabled):not(&[aria-disabled="true"]) .tag-input { - padding: subtract(var(--#{$prefix}tag-padding-y), subtract($ouds-tag-input-border-width-default-interaction, $ouds-tag-input-border-width-default)) subtract(var(--#{$prefix}tag-padding-end), subtract($ouds-tag-input-border-width-default-interaction, $ouds-tag-input-border-width-default)) subtract(var(--#{$prefix}tag-padding-y), subtract($ouds-tag-input-border-width-default-interaction, $ouds-tag-input-border-width-default)) subtract(var(--#{$prefix}tag-padding-start), subtract($ouds-tag-input-border-width-default-interaction, $ouds-tag-input-border-width-default)); - } - - .tag-input { - --#{$prefix}tag-color: #{$ouds-tag-input-color-content-enabled}; - --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-enabled}; - --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-enabled}; - --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default}; - border: var(--#{$prefix}tag-border-width) solid var(--#{$prefix}tag-border-color); - - &::after { - display: inline-block; - width: var(--#{$prefix}tag-asset-container-size); - height: var(--#{$prefix}tag-asset-container-size); - margin-left: #{$ouds-tag-space-column-gap-default}; - vertical-align: bottom; - content: ""; - background-color: var(--#{$prefix}tag-color); - mask: url("data:image/svg+xml,"); - } + pointer-events: none; } } From e0ea1313df18d33e5ef210ff0ccc14401934f141 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Wed, 30 Jul 2025 11:57:23 +0200 Subject: [PATCH 38/78] Another version of the component --- .bundlewatch.config.json | 2 +- scss/_tag.scss | 13 +- site/src/content/docs/components/tag.mdx | 248 ++++++++--------------- 3 files changed, 90 insertions(+), 173 deletions(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 8a4333342e..7fdc8bfa56 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -6,7 +6,7 @@ }, { "path": "./dist/css/ouds-web-bootstrap.min.css", - "maxSize": "63.0 kB" + "maxSize": "63.25 kB" }, { "path": "./dist/css/ouds-web-grid.css", diff --git a/scss/_tag.scss b/scss/_tag.scss index 61ea042140..4025692b5b 100644 --- a/scss/_tag.scss +++ b/scss/_tag.scss @@ -1,4 +1,6 @@ .tag { + --#{$prefix}tag-min-width: #{$ouds-tag-size-min-width-default}; + --#{$prefix}tag-min-height: #{$ouds-tag-size-min-height-default}; --#{$prefix}tag-color: #{$ouds-color-content-on-status-neutral-emphasized}; --#{$prefix}tag-border-width: 0px; --#{$prefix}tag-background-color: #{$ouds-color-surface-status-neutral-emphasized}; @@ -6,8 +8,6 @@ --#{$prefix}tag-padding-end: #{$ouds-tag-space-padding-inline-default}; --#{$prefix}tag-padding-asset: #{$ouds-tag-space-padding-inline-asset-default}; --#{$prefix}tag-padding-y: #{$ouds-tag-space-padding-block-default}; - --#{$prefix}tag-min-width: #{$ouds-tag-size-min-width-default}; - --#{$prefix}tag-min-height: #{$ouds-tag-size-min-height-default}; --#{$prefix}tag-asset-container-size: #{$ouds-tag-size-asset-default}; --#{$prefix}tag-asset-padding: #{$ouds-tag-space-inset-icon-default}; --#{$prefix}tag-asset-gap: #{$ouds-tag-space-column-gap-default}; @@ -45,7 +45,6 @@ height: var(--#{$prefix}tag-asset-container-size); padding: var(--#{$prefix}tag-asset-padding); - // TODO do we keep "img"? => if not, see in button svg, img, .icon { @@ -62,7 +61,6 @@ &:has(.tag-loader) { --#{$prefix}tag-asset-padding: #{$ouds-tag-space-inset-loader-default}; - position: relative; } } @@ -74,10 +72,11 @@ } .tag-loader { // TODO copied from button loader, should be factorized + --#{$prefix}tag-asset-color: currentcolor; + display: block; margin: 0; font-size: var(--#{$prefix}tag-asset-container-size); - color: currentcolor; transform: rotate(-90deg); > .tag-loader-inner { @@ -150,13 +149,11 @@ } &::after { - display: inline-block; width: var(--#{$prefix}tag-asset-container-size); height: var(--#{$prefix}tag-asset-container-size); - vertical-align: bottom; content: ""; background-color: currentcolor; - mask: url("data:image/svg+xml,"); + mask: url("data:image/svg+xml,"); } &:hover { diff --git a/site/src/content/docs/components/tag.mdx b/site/src/content/docs/components/tag.mdx index 876698bfba..a94f987423 100644 --- a/site/src/content/docs/components/tag.mdx +++ b/site/src/content/docs/components/tag.mdx @@ -13,18 +13,7 @@ import { getConfig } from '@libs/config' You can find here the [OUDS Tag design guidelines](https://unified-design-system.orange.com/). - -
  • Roaming
    • -
  • 5G Ready
    • -
  • 4G
    • - -

    -

    Title Coming soon

    -

    -

    New Some text

    - `} /> - -## Standard variant +## Tag Tag indicator can be used near some text (to show status or key details), or in a list (to indicate or filter by categories or keywords). @@ -34,26 +23,22 @@ Tag indicator can be used near some text (to show status or key details), or in OUDS Web has a basic `.tag` class that sets up default styles. - -
  • Roaming
    • + +
  • Roaming
  • 5G Ready
  • 4G
    • -

    Title Coming soon

    -

    New Some text

    ` } /> -## Other variants +### Color variants -### Colors - -OUDS Web [color and background utilities]([[docsref:/helpers/color-background]]) can be applied to display tag colored variants, either emphasized or muted. Each color is serving its own semantic purpose. Please follow the [Tag design specifications](https://unified-design-system.orange.com/) to choose the right badge for the right action. {/* TODO: really? OR thit's just colors? if semantic, set the right url for design documentation, otherwise remove this part */} +OUDS Web [color and background utilities]([[docsref:/helpers/color-background]]) can be applied to display tag colored variants, either emphasized or muted. Each color is serving its own semantic purpose. Please follow the [Tag design specifications](https://unified-design-system.orange.com/) to choose the right badge for the right category. {/* TODO: really? OR thit's just colors? if semantic, set the right url for design documentation, otherwise remove this part */} For disabled color, use `.tag-disabled` class. - +
  • Default
  • Neutral
  • Accent
    • @@ -63,8 +48,7 @@ For disabled color, use `.tag-disabled` class.
  • Negative
  • Disabled
    • -
    -
      +
      • Neutral
      • Accent
      • Positive
        • @@ -77,25 +61,21 @@ For disabled color, use `.tag-disabled` class. To display tags with square corners, add the `.rounded-none` utility class to the tag. - -
      • Neutral
        • +
      • Accent
        • -
      • Positive
        • -
      • Info
        • -
      • Warning
        • -
      • Negative
        • +
      • Accent
      • Disabled
      `} /> ### With asset -To add an asset (either bullet, icon or loader) inside a tag, add a `.tag-asset-container` before the tag's text. +To add an asset (either bullet, icon or loader) inside a tag, add a `.tag-asset-container` before the tag's text. #### Bullet -To display a colored bullet add `` in the `.tag-asset-container`. +To display a colored bullet add `` inside the `.tag-asset-container`. - +
    • @@ -153,8 +133,7 @@ To display a colored bullet add `` in the `.tag-
    -
    -
      +
      • @@ -205,6 +184,13 @@ To display a colored bullet add `` in the `.tag-
      `} /> + + + + + Negative + `} /> + #### Icon @@ -213,9 +199,9 @@ To display a colored bullet add `` in the `.tag- Since icons in tags are always next to some text, they are purely decorative and should be hidden from assistive technologies using `aria-hidden="true"`, as demonstrated in our tag examples. -To display a colored icon, just add the icon in the `.tag-asset-container`. +To display a colored icon, just add the icon inside the `.tag-asset-container`. - +
    • @@ -287,8 +273,7 @@ To display a colored icon, just add the icon in the `.tag-asset-container`.
    -
    -
      +
      • @@ -351,20 +336,18 @@ To display a colored icon, just add the icon in the `.tag-asset-container`.
      `} /> + + + + + Neutral + `} /> If really needed, you can use a font icon associated to the `.icon` class to set correct parameters for the `line-height`. - -
    • - - - - - Recommended - -
      • +
    • @@ -377,9 +360,11 @@ If really needed, you can use a font icon associated to the `.icon` class to set #### Loader -// TODO : do we have use cases for loader? Do we need visually hidden label? +{/* TODO : do we have use cases for loader? Do we need visually hidden label? */} + +To display a loader, just add the provided svg and a `.visually-hidden` text aside inside the `.tag-asset-container`. - +
    • @@ -458,8 +443,7 @@ If really needed, you can use a font icon associated to the `.icon` class to set
    -
    -
      +
      • @@ -528,41 +512,21 @@ If really needed, you can use a font icon associated to the `.icon` class to set
      `} /> -## Sizes + + + + + + Neutral + `} /> + +### Sizes To display a small tag, add the class `.tag-sm` to the tag. - -
    • Neutral
      • -
    • - - - - - Neutral - -
      • -
    • - - - - - Neutral - -
      • -
    • - - - - - - Neutral - -
      • +
    • Small neutral
    • @@ -597,86 +561,42 @@ To display a small tag, add the class `.tag-sm` to the tag. ## Tag input -Standard tags are used in an informative way. Tag inputs are used to edit tags, that is removing them. They are interactive and can take all the usual statuses: enabled, hover, pressed, disabled or focus. The Tag should be used along with a ` -
      • -
    • - -
      • -
    `} /> - -// Test for alignments - - - Label - - `} /> - -## Layout + + Please note that all the variants above shouldn't be applied on this version of the component. + -// Tests +Standard tags are used in an informative way. Tag inputs are interactive and can take all the usual statuses: enabled, hover, pressed, disabled or focus. The Tag input should be used along with a ` +
    • + `} /> - -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit - - -
    • -
  • - - - A - - -
    • - -

    -

    Title

    -

    Title

    -`} /> +{/* Here is the expected rendering when there is a bunch of them. + + +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • + `} /> */} + +### Disabled + +To disable a Tag input, just add `disabled` attribute to the `.tag` + + +
    • +
    • + `} /> From d422603d5d6515e12263a94b5fe0d9dbd484f03d Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Wed, 30 Jul 2025 12:28:38 +0200 Subject: [PATCH 39/78] Migration + tags in doc changes + small issues --- .bundlewatch.config.json | 4 +- .vscode/settings.json | 2 +- .../shortcodes/BootstrapCompatibility.astro | 4 +- .../migrations/migration-from-boosted.mdx | 262 +++++++++--------- .../src/content/docs/migrations/migration.mdx | 10 +- site/src/layouts/partials/ExamplesMain.astro | 2 +- site/src/pages/index.astro | 2 +- 7 files changed, 147 insertions(+), 139 deletions(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 7fdc8bfa56..0aea251e67 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -34,11 +34,11 @@ }, { "path": "./dist/css/ouds-web.css", - "maxSize": "58.5 kB" + "maxSize": "58.0 kB" }, { "path": "./dist/css/ouds-web.min.css", - "maxSize": "55.0 kB" + "maxSize": "54.5 kB" }, { "path": "./dist/js/ouds-web.bundle.js", diff --git a/.vscode/settings.json b/.vscode/settings.json index 4f7eac18f2..9c6ae2d622 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -5,6 +5,6 @@ }, "editor.renderWhitespace": "all", "scss.validate": false, - "stylelint.enable": false, + "stylelint.enable": true, "stylelint.validate": ["scss"] } diff --git a/site/src/components/shortcodes/BootstrapCompatibility.astro b/site/src/components/shortcodes/BootstrapCompatibility.astro index 39a67eb42e..cadf719dd7 100644 --- a/site/src/components/shortcodes/BootstrapCompatibility.astro +++ b/site/src/components/shortcodes/BootstrapCompatibility.astro @@ -5,8 +5,8 @@
    Bootstrap - - $enable-bootstrap-compatibility: true + + $enable-bootstrap-compatibility: true diff --git a/site/src/content/docs/migrations/migration-from-boosted.mdx b/site/src/content/docs/migrations/migration-from-boosted.mdx index 4123e8f4d1..51b440b465 100644 --- a/site/src/content/docs/migrations/migration-from-boosted.mdx +++ b/site/src/content/docs/migrations/migration-from-boosted.mdx @@ -32,13 +32,13 @@ From now on, OUDS Web won’t embed Bootstrap elements that are not part of Oran ## Foundations -- Warning Orange color has been modified from `#f16e00` to `#f15e00`. It means that under certain circumstances, you might be able to use Orange and light gray items together. +- Warning Orange color has been modified from `#f16e00` to `#f15e00`. It means that under certain circumstances, you might be able to use Orange and light gray items together. -- New We provide two brand new themes that are root and root-inverted. They are complementary to `light` and `dark`. See more on our [color modes page]([[docsref:/customize/color-modes]]) +- New We provide two brand new themes that are root and root-inverted. They are complementary to `light` and `dark`. See more on our [color modes page]([[docsref:/customize/color-modes]]) -- Warning The root selector have been tweaked for more flexibility on JS frameworks. Please don’t hesitate to contact us if you find any issue with it. +- Warning The root selector have been tweaked for more flexibility on JS frameworks. Please don’t hesitate to contact us if you find any issue with it. -- Breaking The focus-visible polyfill has been removed. So you no longer need it on your side, and you should replace all the calls to `:focus[data-focus-visible-added]` by `:focus-visible`. +- Breaking The focus-visible polyfill has been removed. So you no longer need it on your side, and you should replace all the calls to `:focus[data-focus-visible-added]` by `:focus-visible`. ## Fonts @@ -53,21 +53,21 @@ Technically, it means that you can get rid of the following things: ### Typography -- New Body fonts’ sizes are now responsive and can change depending on the screen size. See [Typography]([[docsref:/content/typography]]) for more details. +- New Body fonts’ sizes are now responsive and can change depending on the screen size. See [Typography]([[docsref:/content/typography]]) for more details. -- New A `max-width` has been added on all font references for readability reasons. If you want to get rid of the `max-width`, please use our `.mw-none` width utility. +- New A `max-width` has been added on all font references for readability reasons. If you want to get rid of the `max-width`, please use our `.mw-none` width utility. -- New Selected text is now styled with a specific text `color` and `background-color`, making it easier to spot and to read. +- New Selected text is now styled with a specific text `color` and `background-color`, making it easier to spot and to read. -- Breaking Display headings classes `.display-{1|2|3|4|5|6}` have been removed and replaced by `.display-{small|medium|large}`. You can still have them using `$enable-bootstrap-compatibility`. +- Breaking Display headings classes `.display-{1|2|3|4|5|6}` have been removed and replaced by `.display-{small|medium|large}`. You can still have them using `$enable-bootstrap-compatibility`. -- Breaking Abbreviation class `.initialism` has been removed. +- Breaking Abbreviation class `.initialism` has been removed. -- Warning Default spacing values now use `px`s instead of `em`s for fixed component spacing, to keep as much space as possible for meaningful content on zoom. +- Warning Default spacing values now use `px`s instead of `em`s for fixed component spacing, to keep as much space as possible for meaningful content on zoom. ## Layout -- Breaking Responsive breakpoints have changed: +- Breaking Responsive breakpoints have changed: - `2xs` and `3xl` have been added. - `xxl` has been renamed to `2xl`. - The breakpoints values have changed. Please refer to the [breakpoints’ documentation]([[docsref:/layout/breakpoints]]). @@ -77,45 +77,45 @@ Technically, it means that you can get rid of the following things: All responsive classes, helpers, and utilities have been updated accordingly to match the new breakpoints. -- Info `.container` and `.container-{breakpoint}` have been removed from the default build but you can still have them using `$enable-bootstrap-compatibility`. -- Info `xxl` breakpoint and thus all related classes (like `.container-xxl`, `.col-xxl-*`) can still be available when `$enable-bootstrap-compatibility` is enabled. +- Info `.container` and `.container-{breakpoint}` have been removed from the default build but you can still have them using `$enable-bootstrap-compatibility`. +- Info `xxl` breakpoint and thus all related classes (like `.container-xxl`, `.col-xxl-*`) can still be available when `$enable-bootstrap-compatibility` is enabled. ## Components ### Badge -- Breaking `.badge` is now rounded by default. -- New `.badge-disabled` has been added. -- New `.badge-xs`, `.badge-sm`, `.badge-lg` have been added to size the badge. -- New `.badge-count` has been added to display a numerical value in the badge. +- Breaking `.badge` is now rounded by default. +- New `.badge-disabled` has been added. +- New `.badge-xs`, `.badge-sm`, `.badge-lg` have been added to size the badge. +- New `.badge-count` has been added to display a numerical value in the badge. ### Breadcrumb -- Breaking the last element of a Breadcrumb must now contain a `span` element to handle behavior on smaller viewport. +- Breaking the last element of a Breadcrumb must now contain a `span` element to handle behavior on smaller viewport. ### Bullet list -- New `.bullet-list`, `.bullet-list-default-color`, `.bullet-list-tick` and `.bullet-list-bare` classes have been added. -- Breaking `.bullet-list` is mandatory for a full Bullet list component as defined in OUDS. +- New `.bullet-list`, `.bullet-list-default-color`, `.bullet-list-tick` and `.bullet-list-bare` classes have been added. +- Breaking `.bullet-list` is mandatory for a full Bullet list component as defined in OUDS. ### Close button -- Warning `.btn-close-white` class has been removed as it was deprecated in Boosted v5.3.3. +- Warning `.btn-close-white` class has been removed as it was deprecated in Boosted v5.3.3. ### Buttons -- New `.btn-default`, `.btn-strong`, `.btn-minimal`, and `.btn-negative` have been added. -- New `.btn-on-colored-bg` has been added; it can be used with `.btn-default`, `.btn-strong` and `.btn-minimal` to get variants on colored backgrounds (neither primary, nor secondary, nor tertiary, nor emphasized backgrounds). -- Breaking `.btn-primary`, `.btn-secondary`, `.btn-success`, `.btn-danger`, `.btn-warning`, `.btn-info`, `.btn-light`, `.btn-dark` and `btn-dropdown` have been removed. You can still have them using `$enable-bootstrap-compatibility`. Here is the visual correspondence: +- New `.btn-default`, `.btn-strong`, `.btn-minimal`, and `.btn-negative` have been added. +- New `.btn-on-colored-bg` has been added; it can be used with `.btn-default`, `.btn-strong` and `.btn-minimal` to get variants on colored backgrounds (neither primary, nor secondary, nor tertiary, nor emphasized backgrounds). +- Breaking `.btn-primary`, `.btn-secondary`, `.btn-success`, `.btn-danger`, `.btn-warning`, `.btn-info`, `.btn-light`, `.btn-dark` and `btn-dropdown` have been removed. You can still have them using `$enable-bootstrap-compatibility`. Here is the visual correspondence: - `.btn-primary` and `.btn-dark` will look as `.btn-strong` - `.btn-secondary` and `.btn-success` will look as `.btn-default` - `.btn-danger` and `.btn-warning` will look as `.btn-negative` - `.btn-info` and `.btn-light` will look as `.btn-minimal` -- Breaking `.btn-no-outline` has been removed. You can use `.btn-minimal` instead. -- Breaking `.btn-social` and all its variants have been removed. -- Breaking `.btn-outline-*` have been removed. You can still have them using `$enable-bootstrap-compatibility`. They all look like `.btn-default`. -- Warning `.btn-sm` and `.btn-lg` have been removed. -- Breaking Loading buttons implementation has changed. You should now use the classes `.loading-indeterminate` and `.loading-determinate` and no more spinner borders. +- Breaking `.btn-no-outline` has been removed. You can use `.btn-minimal` instead. +- Breaking `.btn-social` and all its variants have been removed. +- Breaking `.btn-outline-*` have been removed. You can still have them using `$enable-bootstrap-compatibility`. They all look like `.btn-default`. +- Warning `.btn-sm` and `.btn-lg` have been removed. +- Breaking Loading buttons implementation has changed. You should now use the classes `.loading-indeterminate` and `.loading-determinate` and no more spinner borders.
    For example, if you used to write: @@ -142,30 +142,34 @@ You will have to make some extra Javascript to change the styles and update the
    -- Breaking Button plugin (button with a toggle behavior) has been removed. +- Breaking Button plugin (button with a toggle behavior) has been removed. ### Links -- New New standalone link component has been added. Use `.link` class to get it. -- New Use `.link-sm` class to get small standalone link. -- New `.link-on-colored-bg` has been added; it can be used to get variants on colored backgrounds. -- Warning A `.link` class should be added to existing links with `.link-chevron` class to comply with the OUDS Web documentation and ensure future compatibility. +- New New standalone link component has been added. Use `.link` class to get it. +- New Use `.link-sm` class to get small standalone link. +- New `.link-on-colored-bg` has been added; it can be used to get variants on colored backgrounds. +- Warning A `.link` class should be added to existing links with `.link-chevron` class to comply with the OUDS Web documentation and ensure future compatibility. + +### Tags + +- Breaking Tag has changed a lot in its meaning and usages. The Informative tag has changed to be the basic Tag. The Filter tag has changed to the Filter chip. The Navigation tag has been removed. The Input tag has changed to the Tag input. Be careful, either the meaning or the markup changed, or both. ## Forms ### Checks & radios -- New `.control-item-assets-container`, `.control-item-text-container`, `.control-item-label`, `.control-item-indicator`, `.control-item-helper`, `.control-item-divider` and `.control-item-inverse` have been added. +- New `.control-item-assets-container`, `.control-item-text-container`, `.control-item-label`, `.control-item-indicator`, `.control-item-helper`, `.control-item-divider` and `.control-item-inverse` have been added. -- Breaking `.form-check`, `.form-check-input`, `.form-check-label`, `.form-check-inline`, `.form-check-reverse` and `.form-switch` have been removed. +- Breaking `.form-check`, `.form-check-input`, `.form-check-label`, `.form-check-inline`, `.form-check-reverse` and `.form-switch` have been removed. -- Warning `form-star-rating()` mixin has been removed as it was deprecated in Boosted v5.3.2. +- Warning `form-star-rating()` mixin has been removed as it was deprecated in Boosted v5.3.2. #### Checkbox -- New `.checkbox-item` and `.checkbox-standalone` have been added. +- New `.checkbox-item` and `.checkbox-standalone` have been added. -- Breaking Checkbox is a new component compared to Boosted’s Check, the DOM is therefore very different. +- Breaking Checkbox is a new component compared to Boosted’s Check, the DOM is therefore very different.
    For example, if you used to write: @@ -192,13 +196,13 @@ Now you should write: See [our new Checkbox page]([[docsref:/forms/checkbox]]) for more information.
    -- Warning Links in checkboxes’ labels are now forbidden (they won’t be interactive anyway). +- Warning Links in checkboxes’ labels are now forbidden (they won’t be interactive anyway). #### Radio button -- New `.radio-button-item`, `.radio-button-standalone`, `.radio-button-additional-label` and `.radio-button-item-outlined` have been added. +- New `.radio-button-item`, `.radio-button-standalone`, `.radio-button-additional-label` and `.radio-button-item-outlined` have been added. -- Breaking Radio button is a new component compared to Boosted’s radio, the DOM is therefore very different. +- Breaking Radio button is a new component compared to Boosted’s radio, the DOM is therefore very different.
    For example, if you used to write: @@ -225,13 +229,13 @@ Now you should write: See [our new Radio button page]([[docsref:/forms/radio-button]]) for more information.
    -- Warning Links in radio buttons’ labels are now forbidden (they won’t be interactive anyway). +- Warning Links in radio buttons’ labels are now forbidden (they won’t be interactive anyway). #### Switch -- New `.switch-item` and `.switch-standalone` have been added. +- New `.switch-item` and `.switch-standalone` have been added. -- Breaking Switch is a new component compared to Boosted’s Check, the DOM is therefore very different. +- Breaking Switch is a new component compared to Boosted’s Check, the DOM is therefore very different.
    For example, if you used to write: @@ -258,18 +262,18 @@ Now you should write: See [our new Switch page]([[docsref:/forms/switch]]) for more information.
    -- Warning Links in switches’ labels are now forbidden (they won’t be interactive anyway). +- Warning Links in switches’ labels are now forbidden (they won’t be interactive anyway). ## Helpers ### Color background -- Breaking Most color-background color helpers have been removed or changed. +- Breaking Most color-background color helpers have been removed or changed. -- New The new color-background color helpers are now available. Visit our [color-bg page]([[docsref:/helpers/color-background]]) to see more. +- New The new color-background color helpers are now available. Visit our [color-bg page]([[docsref:/helpers/color-background]]) to see more. -
    - Info Here are the modifications to apply in the exact same order to your websites. Please make sure to adapt the [data-bs-theme] to your context: + Info Here are the modifications to apply in the exact same order to your websites. Please make sure to adapt the [data-bs-theme] to your context: See more details about [`[data-bs-theme]`]([[docsref:/customize/color-modes]]). @@ -288,19 +292,19 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information. ### Colored links -- Breaking All colored links helpers are unstyled in OUDS Web. Classes still exist for Bootstrap compatibility. +- Breaking All colored links helpers are unstyled in OUDS Web. Classes still exist for Bootstrap compatibility. ### Divider -- New Horizontal or vertical rule helpers to create dividers. +- New Horizontal or vertical rule helpers to create dividers. ### Icon link -- Info `.icon-link` and `.link-chevron` are now documented in link component. See [icon link]([[docsref:/components/links#icon-link]]) and [link chevron]([[docsref:/components/links#link-chevron]]). +- Info `.icon-link` and `.link-chevron` are now documented in link component. See [icon link]([[docsref:/components/links#icon-link]]) and [link chevron]([[docsref:/components/links#link-chevron]]). ### Icon -- New Icons’ sizes helpers have been added to help choose the right icon size with a specific typography reference. If you need these helpers, and you are using a custom import stack for helpers, don’t forget to add the needed file `helpers/_icon.scss`: +- New Icons’ sizes helpers have been added to help choose the right icon size with a specific typography reference. If you need these helpers, and you are using a custom import stack for helpers, don’t forget to add the needed file `helpers/_icon.scss`: - Responsive icons’ sizes in headings: - `.h{size}-short-icon`, `.h{size}-medium-icon`, `.h{size}-tall-icon`, where `h` stands for heading and size is one of `s` for small, `m` for medium, `l` for large, or `xl` for x-large - `.b{size}-short-icon`, `.b{size}-medium-icon`, , `.h{size}-tall-icon`, where `b` stands for body and size is one of `m` for medium, or `l` for large @@ -309,26 +313,26 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information. ### Position -- Breaking Responsive sticky helpers `.sticky-xxl-{top|bottom}` have been removed and replaced by their equivalent `.sticky-2xl-{top|bottom}`. You can still have them using `$enable-bootstrap-compatibility`. +- Breaking Responsive sticky helpers `.sticky-xxl-{top|bottom}` have been removed and replaced by their equivalent `.sticky-2xl-{top|bottom}`. You can still have them using `$enable-bootstrap-compatibility`. -- New Responsive sticky helpers: `.sticky-xs-{top|bottom}`, `.sticky-2xl-{top|bottom}` and `.sticky-3xl-{top|bottom}`. +- New Responsive sticky helpers: `.sticky-xs-{top|bottom}`, `.sticky-2xl-{top|bottom}` and `.sticky-3xl-{top|bottom}`. ### Vertical rule -- Warning The vertical rule documentation has been merged into the new [Divider helper]([[docsref:/helpers/divider]]) documentation. +- Warning The vertical rule documentation has been merged into the new [Divider helper]([[docsref:/helpers/divider]]) documentation. ## Utilities ### Background -- Breaking Most background color utilities have been removed or changed. +- Breaking Most background color utilities have been removed or changed. -- Breaking Background opacity utilities have been removed. +- Breaking Background opacity utilities have been removed. -- New The new background color utilities are now available. Visit our [background page]([[docsref:/utilities/background]]) to see more. +- New The new background color utilities are now available. Visit our [background page]([[docsref:/utilities/background]]) to see more. -
    - Info Here are the modifications to apply in the exact same order to your websites. Please make sure to adapt the [data-bs-theme] to your context: + Info Here are the modifications to apply in the exact same order to your websites. Please make sure to adapt the [data-bs-theme] to your context: See more details about [`[data-bs-theme]`]([[docsref:/customize/color-modes]]). @@ -362,15 +366,15 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information. ### Border -- Breaking Border operative utilities have been removed: `.border-0`, `.border-top-0`, `.border-bottom-0`, `.border-start-0`, and `.border-end-0`. Please check the new [border values]([[docsref:/utilities/borders#border]]) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`. +- Breaking Border operative utilities have been removed: `.border-0`, `.border-top-0`, `.border-bottom-0`, `.border-start-0`, and `.border-end-0`. Please check the new [border values]([[docsref:/utilities/borders#border]]) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`. -- New Border operative utilities: `.border-none`, `.border-top-none`, `.border-bottom-none`, `.border-start-none`, and `.border-end-none`. +- New Border operative utilities: `.border-none`, `.border-top-none`, `.border-bottom-none`, `.border-start-none`, and `.border-end-none`. -- Breaking Border width utilities have been removed: `.border-0`, `.border-1`, `.border-2`, `.border-3`, `.border-4` and `.border-5`. Please check the new [border values]([[docsref:/utilities/borders#width]]) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`. +- Breaking Border width utilities have been removed: `.border-0`, `.border-1`, `.border-2`, `.border-3`, `.border-4` and `.border-5`. Please check the new [border values]([[docsref:/utilities/borders#width]]) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`. -- New Border width utilities: `.border-none`, `.border-thin`, `.border-medium`, `.border-thick`, and `.border-thicker`. +- New Border width utilities: `.border-none`, `.border-thin`, `.border-medium`, `.border-thick`, and `.border-thicker`. -- Breaking Border radius utilities with many sizes have been removed. Please check the new [border values]([[docsref:/utilities/borders#radius]]) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`: +- Breaking Border radius utilities with many sizes have been removed. Please check the new [border values]([[docsref:/utilities/borders#radius]]) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`: - **0**: `.rounded-0`, `.rounded-top-0`, `.rounded-bottom-0`, `.rounded-start-0` and `.rounded-end-0`. - **1**: `.rounded-1`, `.rounded-top-1`, `.rounded-bottom-1`, `.rounded-start-1` and `.rounded-end-1`. - **2**: `.rounded-2`, `.rounded-top-2`, `.rounded-bottom-2`, `.rounded-start-2` and `.rounded-end-2`. @@ -378,22 +382,22 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information. - **4**: `.rounded-4`, `.rounded-top-4`, `.rounded-bottom-4`, `.rounded-start-4` and `.rounded-end-4`. - **5**: `.rounded-5`, `.rounded-top-5`, `.rounded-bottom-5`, `.rounded-start-5` and `.rounded-end-5`. -- New Border radius utilities with all sizes: +- New Border radius utilities with all sizes: - **None**: `.rounded-none`, `.rounded-top-none`, `.rounded-bottom-none`, `.rounded-start-none` and `.rounded-end-none`. - **Small**: `.rounded-small`, `.rounded-top-small`, `.rounded-bottom-small`, `.rounded-start-small` and `.rounded-end-small`. - **Medium**: `.rounded-medium`, `.rounded-top-medium`, `.rounded-bottom-medium`, `.rounded-start-medium` and `.rounded-end-medium`. - **Large**: `.rounded-large`, `.rounded-top-large`, `.rounded-bottom-large`, `.rounded-start-large` and `.rounded-end-large`. -- New Border style utilities: `.border-drag`. +- New Border style utilities: `.border-drag`. -- Breaking All border color utilities have been removed or changed. +- Breaking All border color utilities have been removed or changed. -- Breaking Border opacity utilities have been removed. +- Breaking Border opacity utilities have been removed. -- New The new border color utilities are now available. Visit our [border page]([[docsref:/utilities/borders#color]]) to see more. +- New The new border color utilities are now available. Visit our [border page]([[docsref:/utilities/borders#color]]) to see more. -
    - Info Here are the modifications to apply in your websites: + Info Here are the modifications to apply in your websites: 1. `.border-primary` → `.border-brand-primary` 2. `.border-black` → `.border-always-black` or `.border-always-on-white` or `.border-on-brand-primary` @@ -405,14 +409,14 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information. ### Colors -- Breaking Most text color utilities have been removed or changed. +- Breaking Most text color utilities have been removed or changed. -- Breaking Text opacity utilities have been removed. +- Breaking Text opacity utilities have been removed. -- New The new text color utilities are now available. Visit our [color page]([[docsref:/utilities/colors]]) to see more. +- New The new text color utilities are now available. Visit our [color page]([[docsref:/utilities/colors]]) to see more. -
    - Info Here are the modifications to apply in your websites: + Info Here are the modifications to apply in your websites: 1. `.text-primary(-emphasis)` → `.text-brand-primary` 2. `.text-secondary(-emphasis)` → `.text-muted` @@ -435,47 +439,47 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information. ### Display -- Breaking `.d-xxl-{value}` responsive display utility has been replaced by `.d-2xl-{value}`. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). You can still have it using `$enable-bootstrap-compatibility`. -- New `.d-xs-{value}` and `.d-3xl-{value}` responsive display utilities have been added. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). +- Breaking `.d-xxl-{value}` responsive display utility has been replaced by `.d-2xl-{value}`. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). You can still have it using `$enable-bootstrap-compatibility`. +- New `.d-xs-{value}` and `.d-3xl-{value}` responsive display utilities have been added. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). ### Flex -- Breaking `xxl` responsive flex utilities have been replaced by `2xl` utilities: `.d-xxl-flex`, `.d-xxl-inline-flex`, `.flex-xxl-{row|column}`, `.flex-xxl-{row|column}-reverse`, `.justify-content-xxl-{start|end|center|between|around|evenly}`, `.align-items-xxl-{start|end|center|baseline|stretch}`, `.align-self-xxl-{start|end|center|baseline|stretch}`, `.flex-xxl-fill`, `.flex-xxl-{grow|shrink}-{0|1}`, `.flex-xxl-{nowrap|wrap|wrap-reverse}`, `.order-xxl-{number}`, `.order-xxl-{first|last}` and `.align-content-xxl-{start|end|center|between|around|stretch}` utilities have been replaced by `.d-2xl-flex`, `.d-2xl-inline-flex`, `.flex-2xl-{row|column}`, `.flex-2xl-{row|column}-reverse`, `.justify-content-2xl-{start|end|center|between|around|evenly}`, `.align-items-2xl-{start|end|center|baseline|stretch}`, `.align-self-2xl-{start|end|center|baseline|stretch}`, `.flex-2xl-fill`, `.flex-2xl-{grow|shrink}-{0|1}`, `.flex-2xl-{nowrap|wrap|wrap-reverse}`, `.order-2xl-{number}`, `.order-2xl-{first|last}` and `.align-content-2xl-{start|end|center|between|around|stretch}`. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). You can still have them using `$enable-bootstrap-compatibility`. -- New `xs` and `3xl` responsive flex utilities have been added: `.d-xs-flex`, `.d-xs-inline-flex`, `.flex-xs-{row|column}`, `.flex-xs-{row|column}-reverse`, `.justify-content-xs-{start|end|center|between|around|evenly}`, `.align-items-xs-{start|end|center|baseline|stretch}`, `.align-self-xs-{start|end|center|baseline|stretch}`, `.flex-xs-fill`, `.flex-xs-{grow|shrink}-{0|1}`, `.flex-xs-{nowrap|wrap|wrap-reverse}`, `.order-xs-{number}`, `.order-xs-{first|last}`, `.align-content-xs-{start|end|center|between|around|stretch}`, `.d-3xl-flex`, `.d-3xl-inline-flex`, `.flex-3xl-{row|column}`, `.flex-3xl-{row|column}-reverse`, `.justify-content-3xl-{start|end|center|between|around|evenly}`, `.align-items-3xl-{start|end|center|baseline|stretch}`, `.align-self-3xl-{start|end|center|baseline|stretch}`, `.flex-3xl-fill`, `.flex-3xl-{grow|shrink}-{0|1}`, `.flex-3xl-{nowrap|wrap|wrap-reverse}`, `.order-3xl-{number}`, `.order-3xl-{first|last}` and `.align-content-3xl-{start|end|center|between|around|stretch}`. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). +- Breaking `xxl` responsive flex utilities have been replaced by `2xl` utilities: `.d-xxl-flex`, `.d-xxl-inline-flex`, `.flex-xxl-{row|column}`, `.flex-xxl-{row|column}-reverse`, `.justify-content-xxl-{start|end|center|between|around|evenly}`, `.align-items-xxl-{start|end|center|baseline|stretch}`, `.align-self-xxl-{start|end|center|baseline|stretch}`, `.flex-xxl-fill`, `.flex-xxl-{grow|shrink}-{0|1}`, `.flex-xxl-{nowrap|wrap|wrap-reverse}`, `.order-xxl-{number}`, `.order-xxl-{first|last}` and `.align-content-xxl-{start|end|center|between|around|stretch}` utilities have been replaced by `.d-2xl-flex`, `.d-2xl-inline-flex`, `.flex-2xl-{row|column}`, `.flex-2xl-{row|column}-reverse`, `.justify-content-2xl-{start|end|center|between|around|evenly}`, `.align-items-2xl-{start|end|center|baseline|stretch}`, `.align-self-2xl-{start|end|center|baseline|stretch}`, `.flex-2xl-fill`, `.flex-2xl-{grow|shrink}-{0|1}`, `.flex-2xl-{nowrap|wrap|wrap-reverse}`, `.order-2xl-{number}`, `.order-2xl-{first|last}` and `.align-content-2xl-{start|end|center|between|around|stretch}`. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). You can still have them using `$enable-bootstrap-compatibility`. +- New `xs` and `3xl` responsive flex utilities have been added: `.d-xs-flex`, `.d-xs-inline-flex`, `.flex-xs-{row|column}`, `.flex-xs-{row|column}-reverse`, `.justify-content-xs-{start|end|center|between|around|evenly}`, `.align-items-xs-{start|end|center|baseline|stretch}`, `.align-self-xs-{start|end|center|baseline|stretch}`, `.flex-xs-fill`, `.flex-xs-{grow|shrink}-{0|1}`, `.flex-xs-{nowrap|wrap|wrap-reverse}`, `.order-xs-{number}`, `.order-xs-{first|last}`, `.align-content-xs-{start|end|center|between|around|stretch}`, `.d-3xl-flex`, `.d-3xl-inline-flex`, `.flex-3xl-{row|column}`, `.flex-3xl-{row|column}-reverse`, `.justify-content-3xl-{start|end|center|between|around|evenly}`, `.align-items-3xl-{start|end|center|baseline|stretch}`, `.align-self-3xl-{start|end|center|baseline|stretch}`, `.flex-3xl-fill`, `.flex-3xl-{grow|shrink}-{0|1}`, `.flex-3xl-{nowrap|wrap|wrap-reverse}`, `.order-3xl-{number}`, `.order-3xl-{first|last}` and `.align-content-3xl-{start|end|center|between|around|stretch}`. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). ### Float -- Breaking `xxl` responsive float utilities have been replaced by `2xl` utilities: `.float-xxl-{start|end|none}` utilities have been replaced by `.float-2xl-{start|end|none}`. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). You can still have it using `$enable-bootstrap-compatibility`. -- New `xs` and `3xl` responsive float utilities have been added: `.float-xs-{start|end|none}` and `.float-3xl-{start|end|none}`. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). +- Breaking `xxl` responsive float utilities have been replaced by `2xl` utilities: `.float-xxl-{start|end|none}` utilities have been replaced by `.float-2xl-{start|end|none}`. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). You can still have it using `$enable-bootstrap-compatibility`. +- New `xs` and `3xl` responsive float utilities have been added: `.float-xs-{start|end|none}` and `.float-3xl-{start|end|none}`. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). ### Link -- Breaking `.link-opacity`, `.link-offset`, `.link-underline`, `.link-underline-opacity` and `.opacity-100` have been removed from the build and from the documentation. They are useless in OUDS web. +- Breaking `.link-opacity`, `.link-offset`, `.link-underline`, `.link-underline-opacity` and `.opacity-100` have been removed from the build and from the documentation. They are useless in OUDS web. ### Object fit -- Breaking `xxl` responsive object fit utilities have been replaced by `2xl` utilities: `.object-fit-xxl-{contain|cover|fill|scale|none}` utilities have been replaced by ``.object-fit-2xl-{contain|cover|fill|scale|none}``. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). You can still have them using `$enable-bootstrap-compatibility`. -- New `xs` and `3xl` responsive object fit utilities have been added: `.object-fit-xs-{contain|cover|fill|scale|none}` and `.object-fit-3xl-{contain|cover|fill|scale|none}`. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). -- Info `xxl` responsive object fit utilities can still be available when $enable-bootstrap-compatibility is on. +- Breaking `xxl` responsive object fit utilities have been replaced by `2xl` utilities: `.object-fit-xxl-{contain|cover|fill|scale|none}` utilities have been replaced by ``.object-fit-2xl-{contain|cover|fill|scale|none}``. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). You can still have them using `$enable-bootstrap-compatibility`. +- New `xs` and `3xl` responsive object fit utilities have been added: `.object-fit-xs-{contain|cover|fill|scale|none}` and `.object-fit-3xl-{contain|cover|fill|scale|none}`. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). +- Info `xxl` responsive object fit utilities can still be available when $enable-bootstrap-compatibility is on. ### Opacity -- Breaking `.opacity-0`, `.opacity-25`, `.opacity-50`, `.opacity-75` and `.opacity-100` have been removed from the default build. Please check the new [opacity values]([[docsref:/utilities/opacity]]) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`. -- New Opacity utilities: `.opacity-invisible`, `.opacity-weaker`, `.opacity-weak`, `.opacity-medium`, `.opacity-strong` and `.opacity-opaque`. +- Breaking `.opacity-0`, `.opacity-25`, `.opacity-50`, `.opacity-75` and `.opacity-100` have been removed from the default build. Please check the new [opacity values]([[docsref:/utilities/opacity]]) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`. +- New Opacity utilities: `.opacity-invisible`, `.opacity-weaker`, `.opacity-weak`, `.opacity-medium`, `.opacity-strong` and `.opacity-opaque`. ### Shadow -- Breaking `.shadow`, `.shadow-sm` and `.shadow-lg` have been removed from the default build. Please check the new [shadows values]([[docsref:/utilities/shadows]]) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`. -- New Shadows utilities: +- Breaking `.shadow`, `.shadow-sm` and `.shadow-lg` have been removed from the default build. Please check the new [shadows values]([[docsref:/utilities/shadows]]) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`. +- New Shadows utilities: `.shadow-none`, `.shadow-raised`, `.shadow-drag`, `.shadow-default`, `.shadow-emphasized`, `.shadow-sticky-default`, `.shadow-sticky-emphasized` and `.shadow-sticky-navigation-scrolled`. ### Sizing -- New Sizing utility `.mw-none` to set `max-width: none`. This utility is particularly useful now that a `max-width` has been added on all font references (for readability reasons), if you want to omit it in some special cases. +- New Sizing utility `.mw-none` to set `max-width: none`. This utility is particularly useful now that a `max-width` has been added on all font references (for readability reasons), if you want to omit it in some special cases. ### Spacings -- Breaking The following margin spacing utilities have been removed from the default build (`.m{position}-{breakpoint}-{negative}{value}`). Please check the new [spacing values]([[docsref:/utilities/spacing]]) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`: +- Breaking The following margin spacing utilities have been removed from the default build (`.m{position}-{breakpoint}-{negative}{value}`). Please check the new [spacing values]([[docsref:/utilities/spacing]]) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`: - **0**: `.m-0`, `.mx-0`, `.my-0`, `.mt-0`, `.mb-0`, `.ms-0`, `.me-0`, `.m-sm-0`, etc... - **1**: `.m-1`, `.mx-1`, `.my-1`, `.mt-1`, `.mb-1`, `.ms-1`, `.me-1`, `.m-sm-1`, etc... - **2**: `.m-2`, `.mx-2`, `.my-2`, `.mt-2`, `.mb-2`, `.ms-2`, `.me-2`, `.m-sm-2`, etc... @@ -484,7 +488,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information. - **5**: `.m-5`, `.mx-5`, `.my-5`, `.mt-5`, `.mb-5`, `.ms-5`, `.me-5`, `.m-sm-5`, etc... - **Negative**: `.m-n1`, `.m-n2`, `.m-n3`, `.m-n4`, `.m-n5`, `.mx-n1`, etc... -- Breaking The following padding spacing utilities have been removed from the default build (`.p{position}-{breakpoint}-{value}`). Please check the new [spacing values]([[docsref:/utilities/spacing]]) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`: +- Breaking The following padding spacing utilities have been removed from the default build (`.p{position}-{breakpoint}-{value}`). Please check the new [spacing values]([[docsref:/utilities/spacing]]) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`: - **0**: `.p-0`, `.px-0`, `.py-0`, `.pt-0`, `.pb-0`, `.ps-0`, `.pe-0`, `.p-sm-0`, etc... - **1**: `.p-1`, `.px-1`, `.py-1`, `.pt-1`, `.pb-1`, `.ps-1`, `.pe-1`, `.p-sm-1`, etc... - **2**: `.p-2`, `.px-2`, `.py-2`, `.pt-2`, `.pb-2`, `.ps-2`, `.pe-2`, `.p-sm-2`, etc... @@ -492,7 +496,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information. - **4**: `.p-4`, `.px-4`, `.py-4`, `.pt-4`, `.pb-4`, `.ps-4`, `.pe-4`, `.p-sm-4`, etc... - **5**: `.p-5`, `.px-5`, `.py-5`, `.pt-5`, `.pb-5`, `.ps-5`, `.pe-5`, `.p-sm-5`, etc... -- Breaking The following gap spacing utilities have been removed from the default build (`.{row-|column-|}gap-{breakpoint}-{value}`). Please check the new [spacing values]([[docsref:/utilities/spacing]]) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`: +- Breaking The following gap spacing utilities have been removed from the default build (`.{row-|column-|}gap-{breakpoint}-{value}`). Please check the new [spacing values]([[docsref:/utilities/spacing]]) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`: - **0**: `.gap-0`, `.row-gap-0`, `.column-gap-0`, `.gap-sm-0`, etc... - **1**: `.gap-1`, `.row-gap-1`, `.column-gap-1`, `.gap-sm-1`, etc... - **2**: `.gap-2`, `.row-gap-2`, `.column-gap-2`, `.gap-sm-2`, etc... @@ -500,7 +504,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information. - **4**: `.gap-4`, `.row-gap-4`, `.column-gap-4`, `.gap-sm-4`, etc... - **5**: `.gap-5`, `.row-gap-5`, `.column-gap-5`, `.gap-sm-5`, etc... -- New fixed margin spacing utilities: +- New fixed margin spacing utilities: - **None**: `.m-none`, `.mx-none`, `.my-none`, `.mt-none`, `.mb-none`, `.ms-none`, `.me-none`, `.m-xs-none`, etc... - **3xs**: `.m-3xs`, `.mx-3xs`, `.my-3xs`, `.mt-3xs`, `.mb-3xs`, `.ms-3xs`, `.me-3xs`, `.m-xs-3xs`, etc... - **2xs**: `.m-2xs`, `.mx-2xs`, `.my-2xs`, `.mt-2xs`, `.mb-2xs`, `.ms-2xs`, `.me-2xs`, `.m-xs-2xs`, etc... @@ -516,7 +520,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information. - **Auto**: `.m-xs-auto`, `.mx-xs-auto`, `.my-xs-auto`, `.mt-xs-auto`, `.mb-xs-auto`, `.ms-xs-auto`, `.me-xs-auto`, `.m-2xl-auto`, etc... - **Negative**: `.m-n3xs`, `.m-n2xs`, `.m-nxs`, `.m-nsm`, `.m-nmd`, `.m-nlg`, `.m-nxl`, `.m-n2xl`, `.m-n3xl`, `.m-n4xl`, `.m-n5xl`, `.mx-n3xs`, etc... -- New scaled margin spacing utilities: +- New scaled margin spacing utilities: - **None**: `.m-scaled-none`, `.mx-scaled-none`, `.my-scaled-none`, `.mt-scaled-none`, `.mb-scaled-none`, `.ms-scaled-none`, `.me-scaled-none`, - **3xs**: `.m-scaled-3xs`, `.mx-scaled-3xs`, `.my-scaled-3xs`, `.mt-scaled-3xs`, `.mb-scaled-3xs`, `.ms-scaled-3xs`, `.me-scaled-3xs`, - **2xs**: `.m-scaled-2xs`, `.mx-scaled-2xs`, `.my-scaled-2xs`, `.mt-scaled-2xs`, `.mb-scaled-2xs`, `.ms-scaled-2xs`, `.me-scaled-2xs`, @@ -528,7 +532,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information. - **2xl**: `.m-scaled-2xl`, `.mx-scaled-2xl`, `.my-scaled-2xl`, `.mt-scaled-2xl`, `.mb-scaled-2xl`, `.ms-scaled-2xl`, `.me-scaled-2xl`, - **3xl**: `.m-scaled-3xl`, `.mx-scaled-3xl`, `.my-scaled-3xl`, `.mt-scaled-3xl`, `.mb-scaled-3xl`, `.ms-scaled-3xl`, `.me-scaled-3xl` -- New fixed padding spacing utilities: +- New fixed padding spacing utilities: - **None**: `.p-none`, `.px-none`, `.py-none`, `.pt-none`, `.pb-none`, `.ps-none`, `.pe-none`, `.p-xs-none`, etc... - **3xs**: `.p-3xs`, `.px-3xs`, `.py-3xs`, `.pt-3xs`, `.pb-3xs`, `.ps-3xs`, `.pe-3xs`, `.p-xs-3xs`, etc... - **2xs**: `.p-2xs`, `.px-2xs`, `.py-2xs`, `.pt-2xs`, `.pb-2xs`, `.ps-2xs`, `.pe-2xs`, `.p-xs-2xs`, etc... @@ -542,7 +546,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information. - **4xl**: `.p-4xl`, `.px-4xl`, `.py-4xl`, `.pt-4xl`, `.pb-4xl`, `.ps-4xl`, `.pe-4xl`, `.p-xs-4xl`, etc... - **5xl**: `.p-5xl`, `.px-5xl`, `.py-5xl`, `.pt-5xl`, `.pb-5xl`, `.ps-5xl`, `.pe-5xl`, `.p-xs-5xl`, etc... -- New scaled padding spacing utilities: +- New scaled padding spacing utilities: - **None**: `.p-scaled-none`, `.px-scaled-none`, `.py-scaled-none`, `.pt-scaled-none`, `.pb-scaled-none`, `.ps-scaled-none`, `.pe-scaled-none`, - **3xs**: `.p-scaled-3xs`, `.px-scaled-3xs`, `.py-scaled-3xs`, `.pt-scaled-3xs`, `.pb-scaled-3xs`, `.ps-scaled-3xs`, `.pe-scaled-3xs`, - **2xs**: `.p-scaled-2xs`, `.px-scaled-2xs`, `.py-scaled-2xs`, `.pt-scaled-2xs`, `.pb-scaled-2xs`, `.ps-scaled-2xs`, `.pe-scaled-2xs`, @@ -554,7 +558,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information. - **2xl**: `.p-scaled-2xl`, `.px-scaled-2xl`, `.py-scaled-2xl`, `.pt-scaled-2xl`, `.pb-scaled-2xl`, `.ps-scaled-2xl`, `.pe-scaled-2xl`, - **3xl**: `.p-scaled-3xl`, `.px-scaled-3xl`, `.py-scaled-3xl`, `.pt-scaled-3xl`, `.pb-scaled-3xl`, `.ps-scaled-3xl`, `.pe-scaled-3xl` -- New fixed gap spacing utilities: +- New fixed gap spacing utilities: - **None**: `.gap-none`, `.row-gap-none`, `.column-gap-none`, `.gap-xs-none`, etc... - **3xs**: `.gap-3xs`, `.row-gap-3xs`, `.column-gap-3xs`, `.gap-xs-3xs`, etc... - **2xs**: `.gap-2xs`, `.row-gap-2xs`, `.column-gap-2xs`, `.gap-xs-2xs`, etc... @@ -568,7 +572,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information. - **4xl**: `.gap-4xl`, `.row-gap-4xl`, `.column-gap-4xl`, `.gap-xs-4xl`, etc... - **5xl**: `.gap-5xl`, `.row-gap-5xl`, `.column-gap-5xl`, `.gap-xs-5xl`, etc... -- New scaled gap spacing utilities: +- New scaled gap spacing utilities: - **None**: `.gap-scaled-none`, `.row-gap-scaled-none`, `.column-gap-scaled-none` - **3xs**: `.gap-scaled-3xs`, `.row-gap-scaled-3xs`, `.column-gap-scaled-3xs` - **2xs**: `.gap-scaled-2xs`, `.row-gap-scaled-2xs`, `.column-gap-scaled-2xs` @@ -580,7 +584,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information. - **2xl**: `.gap-scaled-2xl`, `.row-gap-scaled-2xl`, `.column-gap-scaled-2xl` - **3xl**: `.gap-scaled-3xl`, `.row-gap-scaled-3xl`, `.column-gap-scaled-3xl` -- Warning You might be able to transfer your spacing utilities following one of the two proposed methods (while keeping almost the rendering and at least the same proportion between spacings): +- Warning You might be able to transfer your spacing utilities following one of the two proposed methods (while keeping almost the rendering and at least the same proportion between spacings): - Keep the previous behavior and getting one utility for another. 1. **0**: `(([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?)0` → `$1none` 2. **1**: `(([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?)1` → `$12xs` @@ -596,40 +600,40 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information. ### Text -- Breaking `.text-xxl-{start|end|none}` responsive alignment text utility has been replaced by `.text-2xl-{start|end|none}`. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). You can still have it using `$enable-bootstrap-compatibility`. +- Breaking `.text-xxl-{start|end|none}` responsive alignment text utility has been replaced by `.text-2xl-{start|end|none}`. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). You can still have it using `$enable-bootstrap-compatibility`. -- New `.text-xs-{start|end|none}` and `.text-3xl-{start|end|none}` responsive alignment text utilities have been added. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). +- New `.text-xs-{start|end|none}` and `.text-3xl-{start|end|none}` responsive alignment text utilities have been added. Please refer to the [new breakpoints’ names]([[docsref:/layout/breakpoints#available-breakpoints]]). -- Breaking Font size text utilities `.fs-{1|2|3|4|5|6}` have been removed and replaced by new ones. You can still have them using `$enable-bootstrap-compatibility`: +- Breaking Font size text utilities `.fs-{1|2|3|4|5|6}` have been removed and replaced by new ones. You can still have them using `$enable-bootstrap-compatibility`: - **Display headings**: `.fs-dl`, `.fs-dm`, `.fs-ds` - **Headings**: `.fs-hxl`, `.fs-hl`, `.fs-hm`, `.fs-hs` - **Body**: `.fs-bl`, `.fs-bm`, `.fs-bs` - **Code**: `.fs-cm`, `.fs-cs` -- Breaking Font weight text utilities `.fw-semibold` and `.fw-medium` have been removed. +- Breaking Font weight text utilities `.fw-semibold` and `.fw-medium` have been removed. -- Breaking Line height text utilities `.lh-1`, `.lh-sm`, `.lh-base`, and `.lh-lg` have been removed, since our font references already have defined `line-height`s. You can still have them using `$enable-bootstrap-compatibility`. +- Breaking Line height text utilities `.lh-1`, `.lh-sm`, `.lh-base`, and `.lh-lg` have been removed, since our font references already have defined `line-height`s. You can still have them using `$enable-bootstrap-compatibility`. -- Breaking Line length text utilities `.ll-sm` and `.ll-md` have been removed, since there is already a default `max-width`. +- Breaking Line length text utilities `.ll-sm` and `.ll-md` have been removed, since there is already a default `max-width`. ## Examples -- New New [Font example]([[docsref:/examples/font]]). +- New New [Font example]([[docsref:/examples/font]]). -- New New [Grid system example]([[docsref:/examples/grid-system/]]). +- New New [Grid system example]([[docsref:/examples/grid-system/]]). -- New New [Loading buttons live example]([[docsref:/examples/loading-buttons/]]). +- New New [Loading buttons live example]([[docsref:/examples/loading-buttons/]]). ## CSS and Sass variables -- New `$enable-bootstrap-compatibility` option set to `false` by default. This option allows you to compile the Sass files with a Bootstrap compatibility mode. +- New `$enable-bootstrap-compatibility` option set to `false` by default. This option allows you to compile the Sass files with a Bootstrap compatibility mode. - For instance, without the Bootstrap compatibility mode, you won’t have the opacity Bootstrap utilities such as `.opacity-0`, `.opacity-1`, `.opacity-50`, etc. You will only have the semantic OUDS Web utilities such as `.opacity-invisible`, `.opacity-weaker`, `.opacity-weak`, etc. -- Warning `$enable-rounded` option have been set to `true` by default. This option allows you to set rounded corner on components. Please check that it doesn’t impact your website. +- Warning `$enable-rounded` option have been set to `true` by default. This option allows you to set rounded corner on components. Please check that it doesn’t impact your website. -- Warning `scss/_color-palette.scss` doesn’t exist anymore. If you were importing it in your project, please make sure to remove it. +- Warning `scss/_color-palette.scss` doesn’t exist anymore. If you were importing it in your project, please make sure to remove it. -- New OUDS Web fully implements the design tokens. If you were using the Sass compilation, you must import the new Sass files before the variables. +- New OUDS Web fully implements the design tokens. If you were using the Sass compilation, you must import the new Sass files before the variables.
    See the new import stack @@ -650,7 +654,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information.
    -
    - New Sass variables: + New Sass variables:
    • $core-orange-color-decorative-amber-500
    • $core-orange-color-decorative-amethyst-100
      • @@ -1618,7 +1622,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information.
    -
    - New Sass variables containing CSS variable with value depending on theme: + New Sass variables containing CSS variable with value depending on theme:
    • $ouds-color-action-disabled
    • $ouds-color-action-enabled
      • @@ -1754,7 +1758,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information.
    -
    - New Sass maps: + New Sass maps:
    • $grid-gutter-widths
    • $ouds-backgrounds
      • @@ -1776,14 +1780,14 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information.
    -
    - New Sass mixins: + New Sass mixins:
    • get-font-size()
    -
    - New Keys in $utilities map: + New Keys in $utilities map:
    • border-bottom-ouds
    • border-color-ouds
      • @@ -1855,7 +1859,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information.
    -
    - New CSS variables: + New CSS variables:
    • --bs-body-letter-spacing
    • --bs-color-action-disabled
      • @@ -2061,7 +2065,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information.
    -
    - Warning Dropped Sass variables: + Warning Dropped Sass variables:
    • $blockquote-font-size
    • $blockquote-footer-font-size
      • @@ -2226,7 +2230,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information.
    -
    - Warning Dropped CSS variables: + Warning Dropped CSS variables:
    • --bs-border-color-subtle
    • --bs-btn-close-active-border-color
      • @@ -2251,7 +2255,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information.
    -
    - Breaking CSS variables only available when $enable-bootstrap-compatibility is on: + Breaking CSS variables only available when $enable-bootstrap-compatibility is on:
    • --bs-black
    • --bs-black-rgb
      • @@ -2351,14 +2355,14 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information.
    -
    - Warning Dropped Sass mixins: + Warning Dropped Sass mixins:
    • make-container-fluid-margin()
    -
    - Breaking Keys in $utilities map only available when $enable-bootstrap-compatibility is on: + Breaking Keys in $utilities map only available when $enable-bootstrap-compatibility is on:
    • background-color
    • border
      • @@ -2412,7 +2416,7 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information.
    -
    - Warning Dropped keys in $utilities map: + Warning Dropped keys in $utilities map:
    • bg-opacity
    • border-opacity
      • @@ -2421,12 +2425,12 @@ See [our new Switch page]([[docsref:/forms/switch]]) for more information.
    -- Warning Signature of `make-row($gutter, $gutter-sm)` is now `make-row($gutter)`. +- Warning Signature of `make-row($gutter, $gutter-sm)` is now `make-row($gutter)`. ## Sass mixins -- New The mixin `get-font-size({font-size-ref})` has been added, where `font-size-ref` is one of: `"code-medium"`, `"label-small"`, `"label-medium"`, `"label-large"`, `"label-xlarge"`, `"body-small"`, `"body-medium"`, `"body-large"`, `"heading-small"`, `"heading-medium"`, `"heading-large"`, `"heading-xlarge"`, `"display-small"`, `"display-medium"`, `"display-large"`. If you have/need any `font-size` in one of your SCSS classes, please consider using this mixin instead. See [Typography Sass mixins]([[docsref:/content/typography#sass-mixins]]) for more details. +- New The mixin `get-font-size({font-size-ref})` has been added, where `font-size-ref` is one of: `"code-medium"`, `"label-small"`, `"label-medium"`, `"label-large"`, `"label-xlarge"`, `"body-small"`, `"body-medium"`, `"body-large"`, `"heading-small"`, `"heading-medium"`, `"heading-large"`, `"heading-xlarge"`, `"display-small"`, `"display-medium"`, `"display-large"`. If you have/need any `font-size` in one of your SCSS classes, please consider using this mixin instead. See [Typography Sass mixins]([[docsref:/content/typography#sass-mixins]]) for more details. -- Warning `color-mode({mode}, {root}, {inverted-mode})` mixin signature has changed. We now provide an `$inverted-mode` parameter that is set by default to `light` or `dark` depending on the `$mode`. It allows you to precise another mode to be the inverse of a certain mode. +- Warning `color-mode({mode}, {root}, {inverted-mode})` mixin signature has changed. We now provide an `$inverted-mode` parameter that is set by default to `light` or `dark` depending on the `$mode`. It allows you to precise another mode to be the inverse of a certain mode. -- Warning `button-variant` mixin signature has changed. We now provide extra parameters for focus and loading states colors. We keep it as a warning because we provide default values for these parameters. See more in [our Button documentation]([[docsref:/components/buttons#sass-mixins]]). +- Warning `button-variant` mixin signature has changed. We now provide extra parameters for focus and loading states colors. We keep it as a warning because we provide default values for these parameters. See more in [our Button documentation]([[docsref:/components/buttons#sass-mixins]]). diff --git a/site/src/content/docs/migrations/migration.mdx b/site/src/content/docs/migrations/migration.mdx index e9809e7716..9772b90682 100644 --- a/site/src/content/docs/migrations/migration.mdx +++ b/site/src/content/docs/migrations/migration.mdx @@ -12,19 +12,23 @@ toc: true ### Contents -- Breaking The focus-visible polyfill has been removed. So you no longer need it on your side, and you should replace all the calls to `:focus[data-focus-visible-added]` by `:focus-visible`. +- Breaking The focus-visible polyfill has been removed. So you no longer need it on your side, and you should replace all the calls to `:focus[data-focus-visible-added]` by `:focus-visible`. ### Components #### Link --Breaking Link CSS variables have been changed. All the variables containing `arrow` have been renamed the same with `chevron` instead. +-Breaking Link CSS variables have been changed. All the variables containing `arrow` have been renamed the same with `chevron` instead. + +#### Tag + +- New Tag component has been implemented. ### Utilities #### Colors --Warning Dark mode values of our `.text-status-info`, `.text-status-positive`, `.text-status-warning` and `.text-status-danger` have been tweaked. It shouldn’t bother you too much since it's handled on OUDS Web side. +-Warning Dark mode values of our `.text-status-info`, `.text-status-positive`, `.text-status-warning` and `.text-status-danger` have been tweaked. It shouldn’t bother you too much since it's handled on OUDS Web side. ## v0.5.0 diff --git a/site/src/layouts/partials/ExamplesMain.astro b/site/src/layouts/partials/ExamplesMain.astro index f916e19d56..dd22af842c 100644 --- a/site/src/layouts/partials/ExamplesMain.astro +++ b/site/src/layouts/partials/ExamplesMain.astro @@ -104,7 +104,7 @@ import GitHubIcon from '@components/icons/GitHubIcon.astro'
    Bootstrap{' '} - + $enable-bootstrap-compatibility: true diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro index 443c4ca63c..27d2ea2b74 100644 --- a/site/src/pages/index.astro +++ b/site/src/pages/index.astro @@ -11,7 +11,7 @@ import { getConfig } from '@libs/config'

    - New in v0.5 + New in v0.5 Breadcrumb, Bullet list, Badge, and many more

    From 3f43694e3f9cf5a0caa25a1450458e96bb991d32 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Tue, 5 Aug 2025 08:57:37 +0200 Subject: [PATCH 40/78] fix(review) --- site/src/content/docs/components/tag.mdx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/site/src/content/docs/components/tag.mdx b/site/src/content/docs/components/tag.mdx index a94f987423..0ce79629a2 100644 --- a/site/src/content/docs/components/tag.mdx +++ b/site/src/content/docs/components/tag.mdx @@ -10,7 +10,7 @@ import { getConfig } from '@libs/config' {/* TODO: set the right url for design documentation */} - You can find here the [OUDS Tag design guidelines](https://unified-design-system.orange.com/). + You can find here the [OUDS tag design guidelines](https://unified-design-system.orange.com/). ## Tag @@ -34,7 +34,7 @@ OUDS Web has a basic `.tag` class that sets up default styles. ### Color variants -OUDS Web [color and background utilities]([[docsref:/helpers/color-background]]) can be applied to display tag colored variants, either emphasized or muted. Each color is serving its own semantic purpose. Please follow the [Tag design specifications](https://unified-design-system.orange.com/) to choose the right badge for the right category. {/* TODO: really? OR thit's just colors? if semantic, set the right url for design documentation, otherwise remove this part */} +OUDS Web [color and background utilities]([[docsref:/helpers/color-background]]) can be applied to display colored tags variants, either emphasized or muted. Each color has its own semantic purpose. Please follow the [tag design specifications](https://unified-design-system.orange.com/) to choose the right badge for the right category. {/* TODO: really? OR thit's just colors? if semantic, set the right url for design documentation, otherwise remove this part */} For disabled color, use `.tag-disabled` class. @@ -59,7 +59,7 @@ For disabled color, use `.tag-disabled` class. ### Squared -To display tags with square corners, add the `.rounded-none` utility class to the tag. +To display tags with squared corners, add the `.rounded-none` utility class to the tag.
  • Accent
    • @@ -196,7 +196,7 @@ To display a colored bullet add `` inside the `. The recommended way of using an icon in a tag is through an [SVG sprite file]([[docsref:/extend/icons#svg-sprite]]). - Since icons in tags are always next to some text, they are purely decorative and should be hidden from assistive technologies using `aria-hidden="true"`, as demonstrated in our tag examples. + Since icons in tags are always next to some text, they are purely decorative and should be hidden from assistive technologies using `aria-hidden="true"`, as demonstrated in our examples. To display a colored icon, just add the icon inside the `.tag-asset-container`. @@ -362,7 +362,7 @@ If really needed, you can use a font icon associated to the `.icon` class to set {/* TODO : do we have use cases for loader? Do we need visually hidden label? */} -To display a loader, just add the provided svg and a `.visually-hidden` text aside inside the `.tag-asset-container`. +To display a loader, just add the following SVG and a `.visually-hidden` text inside the `.tag-asset-container`.
  • @@ -565,9 +565,9 @@ To display a small tag, add the class `.tag-sm` to the tag. Please note that all the variants above shouldn't be applied on this version of the component. -Standard tags are used in an informative way. Tag inputs are interactive and can take all the usual statuses: enabled, hover, pressed, disabled or focus. The Tag input should be used along with a `
    • @@ -594,7 +594,7 @@ They aren't auto removed at the moment, so you need to implement this behavior b ### Disabled -To disable a Tag input, just add `disabled` attribute to the `.tag` +To disable a tag input, just add `disabled` attribute to the `.tag`
    • From e4d5793414286ec1b2c94e1ea455c175658560a3 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Tue, 12 Aug 2025 13:55:02 +0200 Subject: [PATCH 41/78] fix(review) --- scss/_tag.scss | 7 +++---- site/src/content/docs/components/tag.mdx | 18 +++++++----------- site/src/pages/index.astro | 4 ++-- 3 files changed, 12 insertions(+), 17 deletions(-) diff --git a/scss/_tag.scss b/scss/_tag.scss index 4025692b5b..fcd3a733c2 100644 --- a/scss/_tag.scss +++ b/scss/_tag.scss @@ -8,7 +8,7 @@ --#{$prefix}tag-padding-end: #{$ouds-tag-space-padding-inline-default}; --#{$prefix}tag-padding-asset: #{$ouds-tag-space-padding-inline-asset-default}; --#{$prefix}tag-padding-y: #{$ouds-tag-space-padding-block-default}; - --#{$prefix}tag-asset-container-size: #{$ouds-tag-size-asset-default}; + --#{$prefix}tag-asset-container-size: #{px-to-rem($ouds-tag-size-asset-default)}; --#{$prefix}tag-asset-padding: #{$ouds-tag-space-inset-icon-default}; --#{$prefix}tag-asset-gap: #{$ouds-tag-space-column-gap-default}; --#{$prefix}tag-asset-color: currentcolor; @@ -27,7 +27,6 @@ font-weight: 700; color: var(--#{$prefix}tag-color); white-space: nowrap; - vertical-align: text-bottom; // TODO alignment to check with text in

    background-color: var(--#{$prefix}tag-background-color); @include get-font-size("label-medium"); @include border-radius($ouds-tag-border-radius); @@ -68,7 +67,7 @@ width: 100%; height: 100%; background-color: var(--#{$prefix}tag-asset-color); - @include border-radius(#{$ouds-tag-border-radius}); + @include border-radius(#{$ouds-border-radius-pill}); } .tag-loader { // TODO copied from button loader, should be factorized @@ -121,7 +120,7 @@ --#{$prefix}tag-padding-y: #{$ouds-tag-space-padding-block-small}; --#{$prefix}tag-min-width: #{$ouds-tag-size-min-width-small}; --#{$prefix}tag-min-height: #{$ouds-tag-size-min-height-small}; - --#{$prefix}tag-asset-container-size: #{$ouds-tag-size-asset-small}; + --#{$prefix}tag-asset-container-size: #{px-to-rem($ouds-tag-size-asset-small)}; --#{$prefix}tag-bullet-padding: #{$ouds-tag-space-inset-bullet-small}; --#{$prefix}tag-icon-padding: #{$ouds-tag-space-inset-icon-small}; --#{$prefix}tag-loader-padding: #{$ouds-tag-space-inset-loader-small}; diff --git a/site/src/content/docs/components/tag.mdx b/site/src/content/docs/components/tag.mdx index 0ce79629a2..c325468197 100644 --- a/site/src/content/docs/components/tag.mdx +++ b/site/src/content/docs/components/tag.mdx @@ -347,16 +347,12 @@ To display a colored icon, just add the icon inside the `.tag-asset-container`. If really needed, you can use a font icon associated to the `.icon` class to set correct parameters for the `line-height`. - -

  • - - - - - Settings - -
    • - `} /> + + + + + Settings + `} /> #### Loader @@ -562,7 +558,7 @@ To display a small tag, add the class `.tag-sm` to the tag. ## Tag input - Please note that all the variants above shouldn't be applied on this version of the component. + Please note that all the variants above must not be applied on this version of the component. Standard tags are used in an informative way. Tag inputs are interactive and can take all the usual states: enabled, hover, pressed, disabled or focused. The tag input should be used along with a `` +} /> + +
      +
    • +
      +
      + +
      +
      + Tag indicator is used in an informative way, to show short info like a label, keyword, or category. +
      +
      +
      • +
    • +
      +
      + +
      +
      + Tag input is interactive and can take all the usual states: enabled, hover, pressed, disabled or focused. +
      +
      +
      • +
    -Tag indicator can be used near some text (to show status or key details), or in a list (to indicate or filter by categories or keywords). +## Tag For accessibility and semantics reasons, tags, like any other informative elements, must be enclosed in an ancestor or parent semantic tag. In the following examples, tag are used either in `
  • `, `

    ` or `

    `: you can use any other semantic tag depending on the usage context. -OUDS Web has a basic `.tag` class that sets up default styles. - -

  • Roaming
    • -
  • 5G Ready
    • -
  • 4G
    • - -

    Title Coming soon

    -

    New Some text

    ` - } /> +
  • Roaming
    • +
  • 5G Ready
    • +
  • 4G
    • + ` +} /> -### Color variants - -OUDS Web [color and background utilities]([[docsref:/helpers/color-background]]) can be applied to display colored tags variants, either emphasized or muted. Each color has its own semantic purpose. Please follow the [tag design specifications](https://unified-design-system.orange.com/) to choose the right badge for the right category. {/* TODO: really? OR thit's just colors? if semantic, set the right url for design documentation, otherwise remove this part */} +OUDS Web [color and background utilities]([[docsref:/helpers/color-background]]) can be applied to display colored tag variants, either emphasized or muted. Each color has its own semantic purpose. Please follow the [tag design specifications](https://unified-design-system.orange.com/) to choose the right badge for the right category. {/* TODO: really? Or it's just colors? if semantic, set the right url for design documentation (see Tag status), otherwise remove this part */} For disabled color, use `.tag-disabled` class. -
  • Default
  • Neutral
  • Accent
  • Positive
    • @@ -57,21 +79,47 @@ For disabled color, use `.tag-disabled` class.
  • Negative
    • `} /> -### Squared +### Layout + +Tag indicator can be used near some text or some title (to show status or key details), or in a list (to indicate categories or keywords). + + +
  • Roaming
    • +
  • 5G Ready
    • +
  • 4G
    • + +

    Title Coming soon

    +

    New Some text

    ` +} /> + +Tags can be added side by side. They require horizontal and vertical spacing between each other. You can use [flexbox utilities]([[docsref:/utilities/spacing#gap]]) to manage the horizontal space (default value is obtained thanks to `.column-gap-xs`) the and vertical space (default value is obtained thanks to `.row-gap-md`). + + +
  • Label
    • +
  • Label
    • +
  • Label
    • +
  • Label
    • +
  • Label
    • +
  • Label
    • + `} /> + +### Variants + +#### Squared To display tags with squared corners, add the `.rounded-none` utility class to the tag. -
  • Accent
    • -
  • Accent
    • +
  • Accent emphasized
    • +
  • Accent muted
  • Disabled
    • `} /> -### With asset +#### With asset To add an asset (either bullet, icon or loader) inside a tag, add a `.tag-asset-container` before the tag's text. -#### Bullet +##### Bullet To display a colored bullet add `` inside the `.tag-asset-container`. @@ -191,7 +239,7 @@ To display a colored bullet add `` inside the `. Negative `} /> -#### Icon +##### Icon The recommended way of using an icon in a tag is through an [SVG sprite file]([[docsref:/extend/icons#svg-sprite]]). @@ -354,7 +402,7 @@ If really needed, you can use a font icon associated to the `.icon` class to set Settings `} /> -#### Loader +##### Loader {/* TODO : do we have use cases for loader? Do we need visually hidden label? */} @@ -555,44 +603,76 @@ To display a small tag, add the class `.tag-sm` to the tag. `} /> + + +
  • Small neutral
    • +
  • + + + + + Small neutral + +
    • +
  • + + + + + Small neutral + +
    • +
  • + + + + + + Small neutral + +
    • + `} /> + ## Tag input - Please note that all the variants above must not be applied on this version of the component. + Please note that all the variants of tag above must not be applied on this version of the component. -Standard tags are used in an informative way. Tag inputs are interactive and can take all the usual states: enabled, hover, pressed, disabled or focused. The tag input should be used along with a ` -
    • +
    • +
    • +
    • `} /> -{/* Here is the expected rendering when there is a bunch of them. +### Layout - -
    • -
    • -
    • -
    • -
    • -
    • -
    • + +Tag inputs are typically intended to be added side by side. They require horizontal and vertical spacing between each other. You can use flexbox utilities to manage the horizontal space (default value is obtained thanks to `.column-gap-xs`). Vertical space is automatically created by the extended touch target heights. + +
    • - `} /> */} + `} /> + +### States -### Disabled +#### Disabled -To disable a tag input, just add `disabled` attribute to the `.tag` +To disable a tag input, just add the `disabled` attribute to the `.tag`. -
    • -
    • +
    • +
    • +
    • `} /> diff --git a/site/static/docs/[version]/assets/img/components/Tag-input.png b/site/static/docs/[version]/assets/img/components/Tag-input.png new file mode 100644 index 0000000000000000000000000000000000000000..a44bdfc4b13ec926d554bf497c527c2ba9d67a87 GIT binary patch literal 9424 zcmeHtdo+}P`|gxN5gm~R-y#)~G>$oZD<#SySDgvNxN8K)$~ zI3@-|avTgX#(94C^xM04x7Pcvwb%Y@@3r=7l04>l?$7oeiH+UmP@^6x|- z5W6%ktLY&STagIFmRszs@DpVE5n1?Wi>IFY`7OPT5?J`pHivUs=MadzXpVK8?ePD< zY%l9+ArO9|2*lm{2*fJ<=mu9aj;-7rJeO8&is2y$4YhLyzI`(Tj*s_` z+c4&>=w5W>*|TTLJ*V&eefP1oz~9m_HNNfF;&)nUsM#6qSO27u6{9(-HJJWWEY2sZ zB2rvCeed`K0n!PLZzb=KuKZmjYK9&;MNB zOxLgH*kSCQWV1@rQQc6wB$==P%XMc-L~cbO{&t5jgIQpyL-5TuHi%FjzG3J3AD4DR z4u4-l)NJ{8mwvtDe_r}^v)}Lfed+gen3w+b9Ok=zU;6!=KSTHh_n{#>U*h_@kWeA zA<3mQSDd(D$H%&7>uzMpLE$hRRycLfQ#QVYmGyS~pUF?}s^C%sYchB0SwDiN(&L>{I)M%%dXM8o@ z{=u=3n*~{hIo+o@Ra8~(Iz>kQC4IHiKxFR|7gD~&mG)Z(8IDc#K)5m7QZxN^V&cK; zVsUdt9FV-`$K!XVW@ioE-0(4tZ}x`YKl0?Cq?U{+S{ZyzYPl)jFTjam>Dec+AS|;t z+*~$kOg;+YRwC--4D}05ySuucYNqdH+r5qLeg7pHWWzPd1bxxiYf6F%HhkGV6dUtx z^iGSOT{`=#BmGo0spOk^E@lwWysr|{CH4)(b0hCNrwMPm z5(B>hIepe1eV~4!LP}BO#0%{(>K*27w?XA?Y;5Gan2mZQeye^sT9ym9H;~}5H;K>h zedp)rColDv{M|z>MJ}Tr3P<m0v=Wd25@6z9=c4cgLD z(}I$gwsy8D&cpiscSu}IYinri3Vf$eFAtf1&4Kk4EYbNpODJg;nL!q6% z9JyR_BCXsMm#vp|Uk8oBU`{u|ql~W(3=B+7P3;sqU?(iw|0sam15blKfMV0jdV1su zI~!{={YK1%yXhi(!`~Jc8)Z0Vn@gVRQ@ci{ci%$sd?-z(t^syDY#6!XXG~g9>ZZ`< zmh|V8$(;MR0?9_@1M&7I;$t-aP-bVt%UB{q?Z}>4DGpc!=HaC@O_9Anm2^5gJ0q4b zv5jv8{U#2NdX#bpoZqRkY!yhm{zBQ`yOGO@n~Q78R%q>6Sy`D#CF4Wg0#Oy8n3#BA zBgIiRSu?YfpP#=YeBUtx$poV>P76vpkWwTqqG7~&mK9d{NW4t#$l>PvE_7iR1U>r0 zl`r(?N`(r&l;~I&x{HH9{aJFdenD^7=g*&GIJwC5LYq3)z|DnJBiZD*#m($@nL4S4 zdB)~X=$o*nobHYWm8H`gHA3t602K)Hk!}+&d7V(fq-H1+Ctq%3Eahf?k74OCu#gCMrYM z6zzmy{P1Hjjdt=Eu&0kj6p>u6iyZ*$iQ2=}i5ivH<~vNF=JYyS7QJ>%*E9Kfwo^8_ zWlly@uhiVK?RnhjOTDa#`39k$I&Rf>-8n|hsFsV7=Xx-Owhdg$o693jcG7?=Y+T3^ z=f&CuCEDWR1d*{$EDT)p7EtyxfQ6=|rA6=yK!TtUp@_bW0Le*wI<6))iMPa`>bqVF zK=JHZTLDoeM_4`T{;`Z9v6T@aMu{QL^eCBr9p6KvSTRi1qXlQ=@4==Eob{G?^wPWh zBypjZ+Aj6TU4EnZ#c}{Sfl@Y1mD5@%J9ZXI(P!|E`Wl_etsV}^X?<~)ZWcWfM@YRa z^7Edn^1wemi^)$lkK!yVO&^>;7jJ(O{T$viJZ!^UQQ1Q4S!jF0`sgWfo`}hE@`kIg zk}^@>$S6V3fBJObtY@mel~wBM>gta>DJj0+cT~~`{Uf9sze#Zd+ykjL=i8B%9wG|? zw*zkN4Od$pF8gLQ2AQy0>+3NPi&NZW3|9IV-dPx%3mL#zyioAGgr)mndsevX^J@pr zmY0_^vv*+Uc7>>YDb5k~ucHK&vty6xSYmEf^*W0sw@jt@&+ahNJINE_w=$X_qo@ci z-*tL250BT08Zqy53Rs&d#!R%miekt~N$qy^9CR&~k(K>=y8>=~{rG;b@fSYXRaI6% zDX=SUgp~~K=kj|56IP5iVXuaTDF0hz&^{)$q#@i{E?sRYk1dFOmP_n4n&}u6N1sFCMqEh zAG~KwaaL89z>}dix1cLmV^vr70plpsy7WDe>Xnt1e$#mki(%O1uqg^9)`m}P|IV_F zB~l!595dCGb5o-s`?&FU&-w>S+_xnIw{yZuc7KK8*^c*6&crJEy}$o^BM&8 zL1X}|PEWrhtajt4K8EiDyn~v+FU=0**h!!0!C-#=(5RfN5%x(66C*o0cS*)duXkI?l9E6HvST)2ZI;}RktsH%Qbby8kaT_=kEpWV_)p4sg&WeT=Skd$E0C)Hqd1p`^_8Wl3R}6rtv)g9QRN$nXJ4UH zoj7@=*g+%J_s&y?%n(8Q@WLK;?=3F%#;qG zPGD*2#IBiQaxRAQ^@0B=Qo%zl!!fjGPei>J1y>w8f53Ubl~lya%8Ejvyn2OOfv%a) zPit?RA89xcuEw(;2@Mn}H>g|C3$5ih@hYr#qGYCs^Z}CULMqZa>pea3PvjYg)?19t zjlL=@wuHOs27xz(bg5=WGJcH>;M0BEk!Q<3le#N;1a1 zn()yO^F~0z%OZQVohugUM8=&?R3UT^6Da{MXnq!XXA+lsMljxnRODJoGn^T$G_$p}T^*zoc%!DaEvSJKmuQ}nS75`^ z6I#P}1huTwo8ks9M4Y~ddbV%j<363Y1Fn=asVk2_2t&0&VaNcAvBrzMPzf~EQJTM> z61dcRF*}d*wDE&t#2dQXc*V~qaYe6*$G{o0gf-UzA9CQ- zj7QS`RYR0Vvf~@X3DtZc?14C!=Buscr-g;I2x9+xlj;J3l$U>-l9D1N0^_ar3&nH@IjmTEFpzGs z@twD-4LJVL>{I_V7~3j=krXjgPeDM#G~Al1O3wRq!JT6iP1Y$j|2kY3hWY+6eC{Ko zim_G&PxuPk3}7Ilp{%StH8W%Jl*xPA1el&k5Q1DOSfkV~OW>rLF^tIJ08y zl>ilU`Dx87rp2ZwL4+NDa{0b0wJaCLzJ?JzNKcVWn0UG|Lz&?~kF-vB1rFwhdnN0iQ6lPj3As*P@k| zo*^6BJ9ShmCp;C#h$Q2OvDq-#G;6xsmpr5JO0W_a7S|xzeU<(`%b%UH3_23eIC#x} zzZe-A2}XzV&(FdD`!5*P5?27fX1vR7Yg1iF0#~fmk35MYNj5)lAvKLJ4D;`)A=@em zQjPZ%bfW`b*7qYDR&dmim7EI6r5*CIjkky?%BxTc-}W40!r4-B70$@=&c$ez)we1u zjXK_H4ZMW8?O>}YuT2*~jv{zkYj7tuhSTbpdRG@`2m`SP(xLH@`!WGfAQ0xVBCNIk zN!^%sSRIqA%JLja=Y6*JJW!WFdv!Y-AxAvyzkj+REvA80&xM<0CW{7{@k)N*)Alo zFA^f#wh3$3^jNTWqG&)52Fz9D_d4^TcqPr-u%25NnMeSrCE z5W)iv-o+U=tQk>h;c5wb%FL}Yov}$}#5*RHF*et_A;;*#?8(W=i`W}S*|}f>X_sd5 zkL~?Bj0JcvzDfi;LnO{XY`F2H@msX7uQ7O8qaG%d9()gQ!C6r&)`)xC$qXlaWkxxb zUx&{K1KSi&o^L}rcGdU*tKid#wXm^uDS_d&3Y+L8l6sw-kgXA zVPhFEe~~G;Ir?H77L+!CAoOsComQKpR@uO948Y)Y5Tjnxe8_M$ul42IffO@xj16C3 zkxMd@RW_j2$^jM!#I=uDP8>ILj|d-P7Wh`;f&tEOR6Yt|acpcXXk6$W@Yeduf}+Qd zf4=5g9BLiDEE)@BZY1Ati8H*OWl($Ax8Zhep@cK(D-5(UDAXIUGGG{PL}@XnNW$7I z#kh=g`}y2btw$TW5bhq=a+6lg!hQeP=OL;KfN0fn{i(&y)J=nK^!0dqNASc>5td&w zGk8Ba1-1jK;TGtk;U4CWoP2u)s3-E#qqnBG(6tefSPdpXp=FbkUc892H{lrE)&^h! z!qwx~Tn!?4`k%;^_W4hT+$NIA>ls`Eif^DvnIsgU!hOPc^nAAIVJm zAzA0PBpD|ZXaF!g@z@Ot*d~3Yo|(|LK&N#U*BU;3TKw633P{sJz-UPbr6d`6(rC4m zyl9Fg^^`0wx3siO&JEWwYY4{XbQn4&H%Ou*BO`vaZX?ut7FN(*4{_tuL@Oi6y zoTT;bUdXq*P^_3X7bpvW3(o5{KU8_qg2wo#JyLe#6WD)3VMbHRdNgF ztbnc(P;kKKOce>c2VPO!RZ;l*OG9}I2lp%#;sdonL4JivV}Eo5T#^A3vo4JLl&{xF z2mNy)`#2mf7i$)lkdMB9v6Nh6Nt1dv>I(s#P|<$*~6)t{79 zHa!mdzyRMPbLLFvZ9O3*a$26J=6=@|vT&)nYp+&yWfA~4_@|&WC;Ll1LDL23-rWNp z)^^W>FcAQ$0K6FFbh~~_bs!ZP;w=MRFs^*iehIk3J^wU}7_FNESOV@s=j%%*a2(ql z@MvaAJwtHzVSt5^?zNrt!Pd!VkVSuLrB91dLDb0lr=FjrpiNV3OPm)5^Wc?Ni_uvI z-Pq;GlalYmW3i3ys4+AQE-)y^A6TOv=8qH;jBb|Vyq71=tb$Cagf&UGhsn$2^I~y& zVBMv)>z102d4qLleHv)9<;$1jJP~kofCf|A#HtqtHYga%63NX7yhT6`JCpd=?GyHg z2+&fM@&U{5gO=-rLSv66@N4_YStO@8D1lCnQxz}e$N`>>FRX(z zF9+)ad|GrJt(a%D2n~SI{>at3*S6z$yhtYsY@0fb1hA9Zc@s~@?*N>GWE$@1uNgBpGMhkWUF=+sT+01$MUtnr z$OXs+EdLyHNhdoyH8A>L*5x;xJRrd&SAYQk7T7$nUSY2Jo=+}mLTT0C$P=Hf%>RMc z<@qAl-L`79M%RFAgDz& z8r@5rtkw#scSvHMg1ypZx3%^1GJrLQumrO#TbxK}<`)o%1E<+edf0Fd%y|!s1pfhJ zOCdr$ruXxwm4)$Bq*zu6nS5_(XB+dh1Q-Ea7EpI-0>(c%>vSb}^mTNiVN4ML;*EN; z>)kqCh2n0l0D6^$g#{)ZkaX8TLBg8=aZGVM@V*$Z27H908b*L)LH#LWHx#%;@C=~=p~Jx5(8~fu1dao1>^=8(6$1iQ9MZ%e*>oET=Oa)H z%_uGCFYv=*R>;!J+FcJT9$gw1{4xm^h>b5QSqmKJZgioPQt*z98t$Po6*a~wJFQOe zZNT*gh%Og68zubf*a0HGF2Ms}-WVVZCm$Z%(cqxM)>U?gTA<+x*k^AqN!6Zn zAMy*a4f-1<2*VuE3I_-K#1oqDvo6bBaJN1hrtVHtP*wWnuj~w~R@gD*H)wnALlJ4l zT}_xh(%R8u&=yg1FIhq**kx#(@t2~za^9Z)6sKa+Po-1H(<92;y>1Mj>POluQ|qvs z>$|M;$X54R!L&0{)<7U!CA=fx!w<}(=s%C~|2W|X(*Jj#bNJsm!2aWe|6kAf;~4+X z6aN4IAp_`KDyNXYV)u*Cp)e^CVq$(>V)n~j2gS7Ant$P6eam7p+X_v}R80z1_2)<=(g3D9z}&(eJ1K>Uk-x{i*3d$amS#_{9mO z-u;*%hAqbSnWOmtrtpT`58a-+&z|i*qt1-Ik#+Z)jP=)MF&DGkj{C`aJW$=h^$=E6 z1KNsm%-o;n^%}c-JWt*ZiX7+Q$JtTiMp!IX1BK%Kac3_I)g*@6EA`Leau5pn^k0Tp z@xOn9;VX#bzYH;xC}a{Dc1!%X;iUH8Cy@ab_}Agz%l)4O^BUYX5-)GkrxjrDbKis2m#clyQ=$pPv%E z{F6BCjCxS)J5Om+*7O$?`|!PHM-^|ettdW<=nW_jqF>gwuJ+w<93S#9YT>~YMtl!eh+Rd`8v zFJXuGTXM2$PR+TP$(ZX!w&%SVb@wRz@d)+~>`M8M{?oi8C(}*8g;VR`m^WMq+iOCm zBD#HLx>fzV@1`D!#fon@M~g|ul{-_^;ITk?JTt|QQKtdBa&5EOKj5R0sp@JG7#Qdh zEtrwj4mw$4N$Tn9`b}})Ua84UgFiD&i^jqxq6FMbdM<++hTYy=Q&HF^RY}Xqb^BH} zWZ1jlzpbq2nyR?eXN`Z@M@-33VRN)e5Cx9mC4)o?PF>crRr2kA= zSNX&02E;%!U@R*?KVQj}rhiPuxvjDBvX76mg9L0j&fQ~iq()GU-l`U|0(ZP$`3RcGEHVy&mF%+t7=SM8Hr&$_iOUU0pX>M-5XC~9i)s^Hw z`l`EoU&CtOO-lIMv!8#y{`%aJENtyWbi~f&!JU%_4L96!h{OYJSSzKY)$T37mOE5^ z0}+_za7a$SNbZ%|FgkyD-|+JvuSSdb1az|D<{uw7WD7l@*rBGohpVx{J3{<}T?sKZ z=Pz11Iyv#?={xg+%^~{Ir4Dxat5=%T(8Z3=pYQCEkmw&8!kSAct!hceqgbsyd3wCh zg~{H-FTD167>+9seDH)k;Dsx#{qNqnUA`RDc=_7z=&WT*cA{xqMOxkq10{x$FWDfMTz z=MgX?wTBBo8v>m!b+S~dOP*zf!4yt@rvlp_sP+-m9Atv-g5Inb_I0_IBzjkNC&pLO~H9V zsrQYI<+it*SON(?4~d=5a0+Pu^~eR*+IK3Ly2nrm^c^!-Y-^I-%}v{@HI4`cBG3XZ zVRdDz=RZNhem1jnc6QbTi)Gi#cS*(>0iw7m{eMYIOVbHvnR$DArwTbsL~f zuC2|einyx0&G|}2lfeoMk-k|*@5oSgvQ~1TtJK%j+-uLb5Ih0OR&si!)Z+gB+ZV|0 zcDIhy_*VN2Ji|xj8WsF4BO~LImKK4zqNu27qms!sw6nL*gyR%bsavO-R+^-fhKGlN zeIrk&?u#=5Dn)ZC3ha@cQ|YEN1Xo)hAJ$Rd=={*?HJ=-#i)G?h5AT^S`(fa}ROAWpX?VTW=F(co*p03wM2dI@;Q9oKNogqlW3@HEFk_G1h%E2#D*jzqA#0TyXeI#gUYGw?%L@1Y7 zEwMSl#aK8 z)`9*zmhMH38r(V|ExIo(VAs>;Zj3kY3R19n!|*I5$ijVm;M z0|yh@AD;TV$rOWAsK80uJ2gwL&(0F+q z=48_Ytr@KH;eDl*m7=(#v|X{{N9$Wcl2dV%+$|0rjesBA0H7tHVQr8yoB-J^F}N35I*4GlJPY zjK`!}2cat^(PV)_j$Bch1;Pt#U({4C3hn2M!Fs@^{kJ)eSHW0^}w)Fpoh3&zf6WVu7~b z%YLk2?5=>^J$UdyCw%peOVrwcZ~==(L>BU;uBo~Hh=l&`yPp{6GT_*Nj^xBN`1ixm z(8Np9Jshr2UKT<2pW$nBzkiwJQP-cIuMQ=7GC8b`-?G#YyThv^`DBUtU zatCL7oa42%zIgkU-)%UPnt?$cL6AuhyqWxiOl}AmbPo^LJ#^?0h?v4KE((X^7RxOI z3&H~26oc=<%_dkEShWFu5k`e$e4*F>lYeuiy=#;P7$S=*hpr?!J+3if)flOQ6DLl9 zXyFz!_L&Rtl`aiAASl{JyCnbW z`*yNgxa&v);E#US-aRsB^0q)fdMbbWnp2V4xa02k*mG($h8D)!X2e2yOkjY1kIPJuHK6I(9w_a}coye|%r<;@vy!1KDbDkal>`9=__($dm) z|5`?d9;aTtp`jr=H@6EYsK2i-^`SzvHjpZ!9MK!i3arMT#i8)(&Y|a95{?D0e7fEQ zzB3~pm^|T_D(iKeq_lzpnBL~t-;&^vM=scTj=u62tRxe1PtVTJciLDQq$3;z1jT9K zyKHW4^$!nc131krEPC>CHlBb-ru!9DxRtV)I zi-XJP%vQ(ZKr+Eud-WHa3)XAtdB7z4kj>%RKv!4@$7QxJj8TG@R4Uij*6^gMftNVkcvYG&Ufqobh}iC!FvR+iE9yHQ|u18gn^!!X_fvBDrm6cp2Mg0@}v#qSsF%G;v& zj7%_AGu)X@O3;)M(zBd~QnN;?7j&|x#SCCYTS*M`gmdTwO3 zAuL2)o12?^f#>0uy2_@Om_ z+&Q(NDMcu1d7`YWOq$!;UbbT@*q%=Ze7(D12;TU2u?6FkE=+4>U7-F0)hT{<0g=C4r;# zX_sGsXk@6m=FfCyf>IkGb&$$zS0r_vO4d(>q&PQ(YjEm$7SYQO6qwK_n51H;p+zMn ziZeL;_|X9u>NNqVCb(bP)D%QFE9~CAd-$~h`(W7V7_L)UA%c)n^u+3{Cp1=qzD(NV zs}H5T+}uu@aC=3<-eEd{a6(1~X_c$7y*=FlNUwx66Po@bmnwa=!6NsKjuMAl2?jvu z`H!DBK8Bx*USDivTX8frq@|_X*B3{ThT~hk&iC)${q2V`JBanSt;q@`Dz+U&3MuN9 zPc4*ftvV`|*Gdq!3dj?inSOman|@2f_3VMT>XAbmSj zN?t$9DS$F#LoRbLgD8PdLme?mh*G1H1Q^}$N+G1$XcMco0-J;E zX<}z_B4eTaYo$j+l2=irO4ykY02&c3oL0cPyT6Xh#E)v*mp1An0SA>rnueq#DGm*d1;-`W z;nPU~2?8!n^DEiq77aZ;B8VZ<%tO-Qbcf_fY0$Q?SVOprLyd@3-fI&@Sqz_KeVE8x6~C=?yv!EzH1kHRn}{b`wf zrMGBj8^1YQ!UKWOO9z{>@dR1tW0eQeg3S$-^^cADrA(I~gbB6>>E$ia+acqTJo75# z=HR)nx*Ss6$UeXVXJj083KH!CUxRe}4H0}6;@bL0M}4i}&PQY)0({L%)EY8(k3t zi{9MatP}FtDnDv{Sbyzg@qqH9z86+05lA~@-d*v8;4Uf>4T;XM-j&9HXcoA zftwaKh$=z=`FK`#B%eCb{qEhn)CMv6$SD_|uAW|5yjVa*dwV-HFMdlZ)kt%b13c^n zY*Jc!yN>UWo0r%9=FK&b?G&x?`=a0HFekhBEj&xF#|J#~aifts@x+ zp5rN%s%KzeFkFuh2BY8i{(TB!2dk^q!46AqPCAqAY)WkrOA7^u&_` z(6Alk76_yRXb3U1J_DTx_e#0_DB|w){vbCbH6pnWy literal 0 HcmV?d00001 From 213e254ca943c6ff864b02dbff9cccddd8e07a95 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Tue, 2 Sep 2025 18:33:54 +0200 Subject: [PATCH 45/78] align tag with title --- site/src/content/docs/components/tag.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/content/docs/components/tag.mdx b/site/src/content/docs/components/tag.mdx index 1be79db440..2181f04f46 100644 --- a/site/src/content/docs/components/tag.mdx +++ b/site/src/content/docs/components/tag.mdx @@ -81,14 +81,14 @@ For disabled color, use `.tag-disabled` class. ### Layout -Tag indicator can be used near some text or some title (to show status or key details), or in a list (to indicate categories or keywords). +Tag indicator can be used near some text or some title (to show status or key details), or in a list (to indicate categories or keywords). If needed, you can use the [vertical alignment utilities]([[docsref:/utilities/vertical-align]]) to vertically center inline content.
  • Roaming
  • 5G Ready
  • 4G
    • -

    Title Coming soon

    +

    Title Coming soon

    New Some text

    ` } /> From 44dedeb03076ee17e9ed5e9b53b0690df7ac83ec Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Thu, 4 Sep 2025 10:31:31 +0200 Subject: [PATCH 46/78] increase bundlewatch --- .bundlewatch.config.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 0aea251e67..26a3fdbb7b 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -38,7 +38,7 @@ }, { "path": "./dist/css/ouds-web.min.css", - "maxSize": "54.5 kB" + "maxSize": "54.75 kB" }, { "path": "./dist/js/ouds-web.bundle.js", From 8cfb428ecf2ce623d820b1d64a5be51314c91d13 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Mon, 8 Sep 2025 15:31:30 +0200 Subject: [PATCH 47/78] Modify full examples (with toolbars and/or preview) not to have the right padding in the code and possibility to not display the toolbar + some doc enhancements --- site/src/components/shortcodes/Code.astro | 2 +- site/src/components/shortcodes/Example.astro | 12 +++- site/src/content/docs/components/tag.mdx | 59 +++++++++++--------- 3 files changed, 43 insertions(+), 30 deletions(-) diff --git a/site/src/components/shortcodes/Code.astro b/site/src/components/shortcodes/Code.astro index dc83717468..63a03a45ac 100644 --- a/site/src/components/shortcodes/Code.astro +++ b/site/src/components/shortcodes/Code.astro @@ -132,7 +132,7 @@ if (filePath && fileMatch && codeToDisplay) {
    {Astro.slots.has('bar') ? : null} -
    +
    { codeToDisplay && lang ? ( diff --git a/site/src/components/shortcodes/Example.astro b/site/src/components/shortcodes/Example.astro index a6c9c9bccb..6159eb4860 100644 --- a/site/src/components/shortcodes/Example.astro +++ b/site/src/components/shortcodes/Example.astro @@ -36,6 +36,11 @@ interface Props { * @default true */ showPreview?: boolean + /** + * Defines if the toolbar with Stackblitz and copy buttons should be visible or not. + * @default true + */ + showToolbar?: boolean } const { @@ -45,7 +50,8 @@ const { id, lang = 'html', showMarkup = true, - showPreview = true + showPreview = true, + showToolbar = true } = Astro.props let markup = Array.isArray(code) ? code.join('\n') : code @@ -74,10 +80,10 @@ const simplifiedMarkup = markup { showMarkup && ( <> -
    +
    - {showPreview && ( + {showPreview && showToolbar && (
    {lang}
    diff --git a/site/src/content/docs/components/tag.mdx b/site/src/content/docs/components/tag.mdx index 2181f04f46..798b93c29c 100644 --- a/site/src/content/docs/components/tag.mdx +++ b/site/src/content/docs/components/tag.mdx @@ -15,49 +15,56 @@ import { getConfig } from '@libs/config' ## Overview -There are two versions of tags: standard tags and tag inputs. For both, OUDS Web has a basic `.tag` class that sets up default styles. - -Tag

    -` -} /> - -
      +
      • -
        - + -
        +
        Tag indicator is used in an informative way, to show short info like a label, keyword, or category.
      • -
        - + -
        + +
        Tag input is interactive and can take all the usual states: enabled, hover, pressed, disabled or focused.
      +For both versions of tag, OUDS Web has a basic `.tag` class that sets up default styles. + +Tag

      ` +} /> + +Tag input` +} /> + ## Tag - For accessibility and semantics reasons, tags, like any other informative elements, must be enclosed in an ancestor or parent semantic tag. In the following examples, tag are used either in `
    • `, `

      ` or `

      `: you can use any other semantic tag depending on the usage context. + For accessibility and semantics reasons, tags, like any other informative elements, must be enclosed in an ancestor or parent semantic HTML tag. In the following examples, tag are used either in `

    • `, `

      ` or `

      `: you can use any other semantic tag depending on the usage context. -

    • Roaming
      • -
    • 5G Ready
      • -
    • 4G
      • +
    • Roaming
      • +
    • 5G Ready
      • +
    • 4G

    ` } /> -OUDS Web [color and background utilities]([[docsref:/helpers/color-background]]) can be applied to display colored tag variants, either emphasized or muted. Each color has its own semantic purpose. Please follow the [tag design specifications](https://unified-design-system.orange.com/) to choose the right badge for the right category. {/* TODO: really? Or it's just colors? if semantic, set the right url for design documentation (see Tag status), otherwise remove this part */} +OUDS Web [color and background utilities]([[docsref:/helpers/color-background]]) can be applied to display colored tag variants, either emphasized or muted. Each color has its own semantic purpose. Please follow the [tag design specifications](https://unified-design-system.orange.com/) to choose the right color for the right semantic. {/* TODO: set the right url for design documentation */} For disabled color, use `.tag-disabled` class. @@ -645,18 +652,18 @@ To display a small tag, add the class `.tag-sm` to the tag. Tag inputs are interactive and may be associated to an input field to be added dynamically. The tag input should be used along with a `
    • `} /> -### Layout + ### Layout -Tag inputs are typically intended to be added side by side. They require horizontal and vertical spacing between each other. You can use flexbox utilities to manage the horizontal space (default value is obtained thanks to `.column-gap-xs`). Vertical space is automatically created by the extended touch target heights. + Tag inputs are typically intended to be added side by side. They require horizontal and vertical spacing between each other. You can use flexbox utilities to manage the horizontal space (default value is obtained thanks to `.column-gap-xs`). Vertical space is automatically created by the extended touch target heights. - +
    • @@ -665,13 +672,13 @@ Tag inputs are typically intended to be added side by side. They require horizon
    • `} /> -### States + ### States -#### Disabled + #### Disabled -To disable a tag input, just add the `disabled` attribute to the `.tag`. + To disable a tag input, just add the `disabled` attribute to the `.tag`. - +
    • From 45f6825405c4105b1d76b6bd7495db1c353f2ea8 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Tue, 9 Sep 2025 18:58:39 +0200 Subject: [PATCH 48/78] doc + loader v1.2 --- scss/_tag.scss | 48 +++-- site/src/content/docs/components/tag.mdx | 248 ++++------------------- 2 files changed, 70 insertions(+), 226 deletions(-) diff --git a/scss/_tag.scss b/scss/_tag.scss index fcd3a733c2..7d4233b61b 100644 --- a/scss/_tag.scss +++ b/scss/_tag.scss @@ -70,25 +70,7 @@ @include border-radius(#{$ouds-border-radius-pill}); } -.tag-loader { // TODO copied from button loader, should be factorized - --#{$prefix}tag-asset-color: currentcolor; - - display: block; - margin: 0; - font-size: var(--#{$prefix}tag-asset-container-size); - transform: rotate(-90deg); - - > .tag-loader-inner { - fill: none; - stroke: var(--#{$prefix}tag-asset-color); - stroke-dasharray: var(--#{$prefix}tag-loading-dasharray); - stroke-width: 8; - transform-origin: center; - animation: var(--#{$prefix}tag-loading-animation); - } -} - -.tag-disabled { // TODO: [aria-disabled="true"] ? +.tag-disabled { --#{$prefix}tag-color: #{$ouds-color-content-on-action-disabled}; --#{$prefix}tag-background-color: #{$ouds-color-action-disabled}; } @@ -113,6 +95,34 @@ --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-negative-emphasized}; } + +.tag-loader { // TODO partially copied from button loader, should be factorized as much as possible + --#{$prefix}tag-asset-color: currentcolor; + + display: block; + margin: 0; + font-size: var(--#{$prefix}tag-asset-container-size); + transform: rotate(-90deg); + + > .tag-loader-inner { + fill: none; + stroke: var(--#{$prefix}tag-asset-color); + stroke-dasharray: var(--#{$prefix}tag-loading-dasharray); + stroke-width: 8; + transform-origin: center; + animation: var(--#{$prefix}tag-loading-animation); + } + + .tag:not(.loading) .tag-asset-container:has(&) { + display: none; + } + + .tag.loading:has(&) { + color: #{$ouds-color-content-default} if($enable-important-utilities, !important, null); + background-color: #{$ouds-color-surface-status-neutral-muted} if($enable-important-utilities, !important, null); + } +} + .tag-sm { --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-small}; --#{$prefix}tag-padding-end: #{$ouds-tag-space-padding-inline-small}; diff --git a/site/src/content/docs/components/tag.mdx b/site/src/content/docs/components/tag.mdx index 798b93c29c..682ba46454 100644 --- a/site/src/content/docs/components/tag.mdx +++ b/site/src/content/docs/components/tag.mdx @@ -66,7 +66,11 @@ For both versions of tag, OUDS Web has a basic `.tag` class that sets up default OUDS Web [color and background utilities]([[docsref:/helpers/color-background]]) can be applied to display colored tag variants, either emphasized or muted. Each color has its own semantic purpose. Please follow the [tag design specifications](https://unified-design-system.orange.com/) to choose the right color for the right semantic. {/* TODO: set the right url for design documentation */} -For disabled color, use `.tag-disabled` class. +For disabled color, use the `.tag-disabled` class. + + + Disabled tag should be used only in a disabled context,inside a disabled clickable element (a card for example). +
  • Neutral
    • @@ -239,12 +243,35 @@ To display a colored bullet add `` inside the `. `} /> - - - - - Negative - `} /> + + ... +
  • + + + + + Neutral + +
    • + ... +
  • + + + + + Disabled + +
    • + ... +
  • + + + + + Neutral + +
    • + `} /> ##### Icon @@ -256,7 +283,7 @@ To display a colored bullet add `` inside the `. To display a colored icon, just add the icon inside the `.tag-asset-container`. - +
  • @@ -391,187 +418,28 @@ To display a colored icon, just add the icon inside the `.tag-asset-container`.
    • `} /> - - - - - Neutral - `} /> - If really needed, you can use a font icon associated to the `.icon` class to set correct parameters for the `line-height`. - + Settings - `} /> +

    `} /> ##### Loader -{/* TODO : do we have use cases for loader? Do we need visually hidden label? */} - -To display a loader, just add the following SVG and a `.visually-hidden` text inside the `.tag-asset-container`. - - -
  • - - - - - - Neutral - -
    • -
  • - - - - - - Accent - -
    • -
  • - - - - - - Positive - -
    • -
  • - - - - - - Info - -
    • -
  • - - - - - - Warning - -
    • -
  • - - - - - - Negative - -
    • -
  • - - - - - - Disabled - -
    • - -
      -
    • - - - - - - Neutral - -
      • -
    • - - - - - - Accent - -
      • -
    • - - - - - - Positive - -
      • -
    • - - - - - - Info - -
      • -
    • - - - - - - Warning - -
      • -
    • - - - - - - Negative - -
      • -
    `} /> +To display a loader, add the following SVG and a `.visually-hidden` text inside the `.tag-asset-container`. - + - Neutral - `} /> + Label +

    `} /> ### Sizes @@ -610,40 +478,6 @@ To display a small tag, add the class `.tag-sm` to the tag. `} /> - - -
  • Small neutral
    • -
  • - - - - - Small neutral - -
    • -
  • - - - - - Small neutral - -
    • -
  • - - - - - - Small neutral - -
    • - `} /> - ## Tag input From 4875fec6ba7ea637139ee7edc5085c871b3b6086 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Tue, 9 Sep 2025 19:07:56 +0200 Subject: [PATCH 49/78] Update .bundlewatch.config.json --- .bundlewatch.config.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 26a3fdbb7b..3f1ff18a38 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -2,7 +2,7 @@ "files": [ { "path": "./dist/css/ouds-web-bootstrap.css", - "maxSize": "66.5 kB" + "maxSize": "66.75 kB" }, { "path": "./dist/css/ouds-web-bootstrap.min.css", @@ -34,7 +34,7 @@ }, { "path": "./dist/css/ouds-web.css", - "maxSize": "58.0 kB" + "maxSize": "58.25 kB" }, { "path": "./dist/css/ouds-web.min.css", From 1d5acd8b01860d5b256a1651d505536d5dae53ec Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Wed, 17 Sep 2025 11:33:29 +0200 Subject: [PATCH 50/78] doc update + icon in mask-image --- scss/_tag.scss | 14 ++ site/src/content/docs/components/tag.mdx | 185 +++++++++++------------ 2 files changed, 105 insertions(+), 94 deletions(-) diff --git a/scss/_tag.scss b/scss/_tag.scss index 7d4233b61b..9473543b80 100644 --- a/scss/_tag.scss +++ b/scss/_tag.scss @@ -83,6 +83,20 @@ --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-positive-emphasized}; } +.tag.text-bg-status-positive-emphasized, +.tag.text-bg-status-positive-muted { + + > .tag-asset-container > .tag-status-icon { + width: 100%; + height: 100%; + color: #000; + vertical-align: middle; + background-color: #000; + background-size: contain; + mask-image: escape-svg(url("data:image/svg+xml,")); + } +} + .tag.text-bg-status-info-muted { --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-info-emphasized}; } diff --git a/site/src/content/docs/components/tag.mdx b/site/src/content/docs/components/tag.mdx index 682ba46454..c19b419dc3 100644 --- a/site/src/content/docs/components/tag.mdx +++ b/site/src/content/docs/components/tag.mdx @@ -24,7 +24,7 @@ import { getConfig } from '@libs/config'
    - Tag indicator is used in an informative way, to show short info like a label, keyword, or category. + Tag indicator is used in an informative way, to show short info like a label, keyword, or category.
    @@ -51,7 +51,7 @@ For both versions of tag, OUDS Web has a basic `.tag` class that sets up default Tag input` } /> -## Tag +## Tag (indicator) For accessibility and semantics reasons, tags, like any other informative elements, must be enclosed in an ancestor or parent semantic HTML tag. In the following examples, tag are used either in `
  • `, `

    ` or `

    `: you can use any other semantic tag depending on the usage context. @@ -69,7 +69,7 @@ OUDS Web [color and background utilities]([[docsref:/helpers/color-background]]) For disabled color, use the `.tag-disabled` class. - Disabled tag should be used only in a disabled context,inside a disabled clickable element (a card for example). + The disabled tag should only be used in a disabled context, inside an interactive element that has been disabled, such as a card. @@ -90,30 +90,6 @@ For disabled color, use the `.tag-disabled` class.

  • Negative
    • `} /> -### Layout - -Tag indicator can be used near some text or some title (to show status or key details), or in a list (to indicate categories or keywords). If needed, you can use the [vertical alignment utilities]([[docsref:/utilities/vertical-align]]) to vertically center inline content. - - -
  • Roaming
    • -
  • 5G Ready
    • -
  • 4G
    • - -

    Title Coming soon

    -

    New Some text

    ` -} /> - -Tags can be added side by side. They require horizontal and vertical spacing between each other. You can use [flexbox utilities]([[docsref:/utilities/spacing#gap]]) to manage the horizontal space (default value is obtained thanks to `.column-gap-xs`) the and vertical space (default value is obtained thanks to `.row-gap-md`). - - -
  • Label
    • -
  • Label
    • -
  • Label
    • -
  • Label
    • -
  • Label
    • -
  • Label
    • - `} /> - ### Variants #### Squared @@ -273,147 +249,138 @@ To display a colored bullet add `` inside the `.

    • `} /> -##### Icon - - - The recommended way of using an icon in a tag is through an [SVG sprite file]([[docsref:/extend/icons#svg-sprite]]). - - Since icons in tags are always next to some text, they are purely decorative and should be hidden from assistive technologies using `aria-hidden="true"`, as demonstrated in our examples. - +##### Status icon -To display a colored icon, just add the icon inside the `.tag-asset-container`. +Icons are predefined in SCSS for statuses positive, info, warning and negative.
  • - + - + - Neutral + Positive
  • - + - + - Accent + Info
  • - + - + - Positive + Warning
  • - + - + - Info + Negative
  • - + - + - Warning + Positive
  • - + - + - Negative + Info
  • - + - + - Disabled + Warning
    • - -
    • - + - + - Neutral + Negative
      • +
    `} /> + +##### Other icon + + + The recommended way of using an icon in a tag is through an [SVG sprite file]([[docsref:/extend/icons#svg-sprite]]). + + + + Since icons in tags are always next to some text, they are purely decorative and should be hidden from assistive technologies using `aria-hidden="true"`, as demonstrated in our examples. + + +To display a colored icon, just add the icon inside the `.tag-asset-container`. + +
  • - + - Accent + Neutral
  • - + - Positive + Accent
  • - + - Info + Neutral
  • - + - Warning + Accent
  • - + - Negative + Disabled
    • `} /> @@ -478,13 +445,43 @@ To display a small tag, add the class `.tag-sm` to the tag. `} /> + +### Layout + +Tag indicator can be used near some text or some title (to show status or key details), or in a list (to indicate categories or keywords). If needed, you can use the [vertical alignment utilities]([[docsref:/utilities/vertical-align]]) to vertically center inline content. + + +
  • Roaming
    • +
  • 5G Ready
    • +
  • 4G
    • +
  • Roaming
    • +
  • 5G Ready
    • + +

    Title Coming soon

    +

    Title Coming soon

    +

    New Some text

    +

    New Some text

    `} /> + +Tags can be added side by side. They require horizontal and vertical spacing between each other. You can use [flexbox utilities]([[docsref:/utilities/spacing#gap]]) to manage the horizontal space (default value is obtained thanks to `.column-gap-xs`) the and vertical space (default value is obtained thanks to `.row-gap-md`). + + +
  • Label
    • +
  • Label
    • +
  • Label
    • +
  • Label
    • +
  • Label
    • +
  • Label
    • + `} /> + ## Tag input - Please note that all the variants of tag above must not be applied on this version of the component. + Please note that all the variants of tag (indicator) above must not be applied on tag input. -Tag inputs are interactive and may be associated to an input field to be added dynamically. The tag input should be used along with a ` From 250f93f38b20023de9ecd558008219e766bd945e Mon Sep 17 00:00:00 2001 From: Maxime Lardenois Date: Wed, 17 Sep 2025 11:52:01 +0200 Subject: [PATCH 51/78] fix: bundlewatch --- .bundlewatch.config.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index fb0eee64dd..f1ba48fb90 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -2,11 +2,11 @@ "files": [ { "path": "./dist/css/ouds-web-bootstrap.css", - "maxSize": "67.25 kB" + "maxSize": "67.75 kB" }, { "path": "./dist/css/ouds-web-bootstrap.min.css", - "maxSize": "63.75 kB" + "maxSize": "64.25 kB" }, { "path": "./dist/css/ouds-web-grid.css", @@ -34,11 +34,11 @@ }, { "path": "./dist/css/ouds-web.css", - "maxSize": "58.5 kB" + "maxSize": "59.0 kB" }, { "path": "./dist/css/ouds-web.min.css", - "maxSize": "55.0 kB" + "maxSize": "55.75 kB" }, { "path": "./dist/js/ouds-web.bundle.js", From df8a4d9564ac325b8d517ea8461c08e95ff3d746 Mon Sep 17 00:00:00 2001 From: Maxime Lardenois Date: Wed, 17 Sep 2025 15:38:03 +0200 Subject: [PATCH 52/78] fix(doc): use li directly for tags to avoid alignment issue --- site/src/content/docs/components/tag.mdx | 440 ++++++++++------------- 1 file changed, 189 insertions(+), 251 deletions(-) diff --git a/site/src/content/docs/components/tag.mdx b/site/src/content/docs/components/tag.mdx index c19b419dc3..99151704bf 100644 --- a/site/src/content/docs/components/tag.mdx +++ b/site/src/content/docs/components/tag.mdx @@ -54,13 +54,13 @@ For both versions of tag, OUDS Web has a basic `.tag` class that sets up default ## Tag (indicator) - For accessibility and semantics reasons, tags, like any other informative elements, must be enclosed in an ancestor or parent semantic HTML tag. In the following examples, tag are used either in `
  • `, `

    ` or `

    `: you can use any other semantic tag depending on the usage context. + For accessibility and semantics reasons, tags, like any other informative elements, must be on or be enclosed in a semantic HTML tag. In the following examples, tag are used either as `

  • ` or in `

    ` or `

    `: you can use any other semantic tag depending on the usage context. -

  • Roaming
    • -
  • 5G Ready
    • -
  • 4G
    • +
  • Roaming
    • +
  • 5G Ready
    • +
  • 4G
    • ` } /> @@ -73,21 +73,21 @@ For disabled color, use the `.tag-disabled` class. -
  • Neutral
    • -
  • Accent
    • -
  • Positive
    • -
  • Info
    • -
  • Warning
    • -
  • Negative
    • -
  • Disabled
    • +
  • Neutral
    • +
  • Accent
    • +
  • Positive
    • +
  • Info
    • +
  • Warning
    • +
  • Negative
    • +
  • Disabled
      • -
    • Neutral
      • -
    • Accent
      • -
    • Positive
      • -
    • Info
      • -
    • Warning
      • -
    • Negative
      • +
    • Neutral
      • +
    • Accent
      • +
    • Positive
      • +
    • Info
      • +
    • Warning
      • +
    • Negative
    `} /> ### Variants @@ -97,9 +97,9 @@ For disabled color, use the `.tag-disabled` class. To display tags with squared corners, add the `.rounded-none` utility class to the tag. -
  • Accent emphasized
    • -
  • Accent muted
    • -
  • Disabled
    • +
  • Accent emphasized
    • +
  • Accent muted
    • +
  • Disabled
    • `} /> #### With asset @@ -111,141 +111,109 @@ To add an asset (either bullet, icon or loader) inside a tag, add a `.tag-asset- To display a colored bullet add `` inside the `.tag-asset-container`. -
  • - - - - - Neutral +
  • + + + Neutral
    • -
  • - - - - - Accent +
  • + + + Accent
    • -
  • - - - - - Positive +
  • + + + Positive
    • -
  • - - - - - Info +
  • + + + Info
    • -
  • - - - - - Warning +
  • + + + Warning
    • -
  • - - - - - Negative +
  • + + + Negative
    • -
  • - - - - - Disabled +
  • + + + Disabled
      • -
    • - - - - - Neutral +
    • + + + Neutral
      • -
    • - - - - - Accent +
    • + + + Accent
      • -
    • - - - - - Positive +
    • + + + Positive
      • -
    • - - - - - Info +
    • + + + Info
      • -
    • - - - - - Warning +
    • + + + Warning
      • -
    • - - - - - Negative +
    • + + + Negative
    `} /> ... -
  • - - - - - Neutral +
  • + + + Neutral
    • ... -
  • - - - - - Disabled +
  • + + + Disabled
    • ... -
  • - - - - - Neutral +
  • + + + Neutral
    • `} /> @@ -254,69 +222,53 @@ To display a colored bullet add `` inside the `. Icons are predefined in SCSS for statuses positive, info, warning and negative. -
  • - - - - - Positive +
  • + + + Positive
    • -
  • - - - - - Info +
  • + + + Info
    • -
  • - - - - - Warning +
  • + + + Warning
    • -
  • - - - - - Negative +
  • + + + Negative
    • -
  • - - - - - Positive +
  • + + + Positive
    • -
  • - - - - - Info +
  • + + + Info
    • -
  • - - - - - Warning +
  • + + + Warning
    • -
  • - - - - - Negative +
  • + + + Negative
    • `} /> @@ -333,55 +285,45 @@ Icons are predefined in SCSS for statuses positive, info, warning and negative. To display a colored icon, just add the icon inside the `.tag-asset-container`. -
  • - - - - - Neutral - -
    • -
  • - - - - - Accent - -
    • -
  • - - - - - Neutral - -
    • -
  • - - - - - Accent - -
    • -
  • - - - - - Disabled +
  • + + + Neutral +
    • +
  • + + + + Accent +
    • +
  • + + + + Neutral +
    • +
  • + + + + Accent +
    • +
  • + + + + Disabled
    • `} /> @@ -413,35 +355,29 @@ To display a loader, add the following SVG and a `.visually-hidden` text inside To display a small tag, add the class `.tag-sm` to the tag. -
  • Small neutral
    • -
  • - - - - - Small neutral - -
    • -
  • - - - - - Small neutral - -
    • -
  • - - - - - - Small neutral +
  • Small neutral
    • +
  • + + + + Small neutral +
    • +
  • + + + Small neutral +
    • +
  • + + + + + Small neutral
    • `} /> @@ -451,11 +387,13 @@ To display a small tag, add the class `.tag-sm` to the tag. Tag indicator can be used near some text or some title (to show status or key details), or in a list (to indicate categories or keywords). If needed, you can use the [vertical alignment utilities]([[docsref:/utilities/vertical-align]]) to vertically center inline content. -
  • Roaming
    • -
  • 5G Ready
    • -
  • 4G
    • -
  • Roaming
    • -
  • 5G Ready
    • +
  • Roaming
    • +
  • 5G Ready
    • +
  • 4G
    • + +
      +
    • Roaming
      • +
    • 5G Ready

    Title Coming soon

    Title Coming soon

    @@ -465,12 +403,12 @@ Tag indicator can be used near some text or some title (to show status or key de Tags can be added side by side. They require horizontal and vertical spacing between each other. You can use [flexbox utilities]([[docsref:/utilities/spacing#gap]]) to manage the horizontal space (default value is obtained thanks to `.column-gap-xs`) the and vertical space (default value is obtained thanks to `.row-gap-md`). -
  • Label
    • -
  • Label
    • -
  • Label
    • -
  • Label
    • -
  • Label
    • -
  • Label
    • +
  • Label
    • +
  • Label
    • +
  • Label
    • +
  • Label
    • +
  • Label
    • +
  • Label
    • `} /> ## Tag input From efe088c672b1806c575aeae0bb0ee416a0e32291 Mon Sep 17 00:00:00 2001 From: Maxime Lardenois Date: Wed, 17 Sep 2025 15:54:02 +0200 Subject: [PATCH 53/78] refactor(doc): markdown indentation --- site/src/content/docs/components/tag.mdx | 47 ++++++++++++------------ 1 file changed, 23 insertions(+), 24 deletions(-) diff --git a/site/src/content/docs/components/tag.mdx b/site/src/content/docs/components/tag.mdx index 99151704bf..1ed87c423d 100644 --- a/site/src/content/docs/components/tag.mdx +++ b/site/src/content/docs/components/tag.mdx @@ -421,34 +421,33 @@ Tag inputs are interactive and may be associated to an input field to be added d It can be removed on click, but you have to implement this behavior by yourself, with some JavaScript specific to your project. - -
    • -
    • -
    • - `} /> + +
    • +
    • +
    • +`} /> - ### Layout +### Layout +Tag inputs are typically intended to be added side by side. They require horizontal and vertical spacing between each other. You can use flexbox utilities to manage the horizontal space (default value is obtained thanks to `.column-gap-xs`). Vertical space is automatically created by the extended touch target heights. - Tag inputs are typically intended to be added side by side. They require horizontal and vertical spacing between each other. You can use flexbox utilities to manage the horizontal space (default value is obtained thanks to `.column-gap-xs`). Vertical space is automatically created by the extended touch target heights. + +
    • +
    • +
    • +
    • +
    • +
    • +`} /> - -
    • -
    • -
    • -
    • -
    • -
    • - `} /> +### States - ### States +#### Disabled - #### Disabled +To disable a tag input, just add the `disabled` attribute to the `.tag`. - To disable a tag input, just add the `disabled` attribute to the `.tag`. - - -
    • -
    • -
    • - `} /> + +
    • +
    • +
    • +`} /> From 01cabb9dc1971ab8ead8ea27b0b38180334af0a9 Mon Sep 17 00:00:00 2001 From: Maxime Lardenois Date: Wed, 17 Sep 2025 16:36:09 +0200 Subject: [PATCH 54/78] fix(doc): add loading class to show loading state on tag loader --- site/src/content/docs/components/tag.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/site/src/content/docs/components/tag.mdx b/site/src/content/docs/components/tag.mdx index 1ed87c423d..e59e72f90f 100644 --- a/site/src/content/docs/components/tag.mdx +++ b/site/src/content/docs/components/tag.mdx @@ -340,7 +340,7 @@ If really needed, you can use a font icon associated to the `.icon` class to set To display a loader, add the following SVG and a `.visually-hidden` text inside the `.tag-asset-container`. - + Small neutral

    • -
  • +
  • - Small neutral + Small loader
    • `} /> From bda0511c19059ca14763b7350f830283f879a619 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Mon, 22 Sep 2025 18:27:01 +0200 Subject: [PATCH 55/78] tags v1.3.0 and all changes of doc... --- scss/_tag.scss | 212 ---------- scss/_tags.scss | 224 +++++++++++ scss/ouds-web.scss | 2 +- site/data/sidebar.yml | 2 +- site/src/content/docs/components/tag.mdx | 453 ---------------------- site/src/content/docs/components/tags.mdx | 449 +++++++++++++++++++++ 6 files changed, 675 insertions(+), 667 deletions(-) delete mode 100644 scss/_tag.scss create mode 100644 scss/_tags.scss delete mode 100644 site/src/content/docs/components/tag.mdx create mode 100644 site/src/content/docs/components/tags.mdx diff --git a/scss/_tag.scss b/scss/_tag.scss deleted file mode 100644 index 9473543b80..0000000000 --- a/scss/_tag.scss +++ /dev/null @@ -1,212 +0,0 @@ -.tag { - --#{$prefix}tag-min-width: #{$ouds-tag-size-min-width-default}; - --#{$prefix}tag-min-height: #{$ouds-tag-size-min-height-default}; - --#{$prefix}tag-color: #{$ouds-color-content-on-status-neutral-emphasized}; - --#{$prefix}tag-border-width: 0px; - --#{$prefix}tag-background-color: #{$ouds-color-surface-status-neutral-emphasized}; - --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-default}; - --#{$prefix}tag-padding-end: #{$ouds-tag-space-padding-inline-default}; - --#{$prefix}tag-padding-asset: #{$ouds-tag-space-padding-inline-asset-default}; - --#{$prefix}tag-padding-y: #{$ouds-tag-space-padding-block-default}; - --#{$prefix}tag-asset-container-size: #{px-to-rem($ouds-tag-size-asset-default)}; - --#{$prefix}tag-asset-padding: #{$ouds-tag-space-inset-icon-default}; - --#{$prefix}tag-asset-gap: #{$ouds-tag-space-column-gap-default}; - --#{$prefix}tag-asset-color: currentcolor; - --#{$prefix}tag-loading-dasharray: 92; - --#{$prefix}tag-loading-animation: 2.1875s infinite linear rotate1-indeterminate, 1.25s linear infinite rotate2-indeterminate; - - position: relative; - display: inline-flex; - gap: var(--#{$prefix}tag-asset-gap); - align-items: center; - justify-content: center; - min-width: var(--#{$prefix}tag-min-width); - min-height: var(--#{$prefix}tag-min-height); - padding: subtract(var(--#{$prefix}tag-padding-y), var(--#{$prefix}tag-border-width)) subtract(var(--#{$prefix}tag-padding-end), var(--#{$prefix}tag-border-width)) subtract(var(--#{$prefix}tag-padding-y), var(--#{$prefix}tag-border-width)) subtract(var(--#{$prefix}tag-padding-start), var(--#{$prefix}tag-border-width)); - margin: 0; - font-weight: 700; - color: var(--#{$prefix}tag-color); - white-space: nowrap; - background-color: var(--#{$prefix}tag-background-color); - @include get-font-size("label-medium"); - @include border-radius($ouds-tag-border-radius); - - &:has(.tag-asset-container) { - --#{$prefix}tag-padding-start: var(--#{$prefix}tag-padding-asset); - } -} - -.tag-asset-container { - display: flex; - flex-shrink: 0; - align-items: center; - width: var(--#{$prefix}tag-asset-container-size); - height: var(--#{$prefix}tag-asset-container-size); - padding: var(--#{$prefix}tag-asset-padding); - - svg, - img, - .icon { - width: 100%; - height: 100%; - overflow: hidden; - line-height: 1; - color: var(--#{$prefix}tag-asset-color); - } - - &:has(.tag-bullet) { - --#{$prefix}tag-asset-padding: #{$ouds-tag-space-inset-bullet-default}; - } - - &:has(.tag-loader) { - --#{$prefix}tag-asset-padding: #{$ouds-tag-space-inset-loader-default}; - } -} - -.tag-bullet { - width: 100%; - height: 100%; - background-color: var(--#{$prefix}tag-asset-color); - @include border-radius(#{$ouds-border-radius-pill}); -} - -.tag-disabled { - --#{$prefix}tag-color: #{$ouds-color-content-on-action-disabled}; - --#{$prefix}tag-background-color: #{$ouds-color-action-disabled}; -} - -.tag.text-bg-status-accent-muted { - --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-accent-emphasized}; -} - -.tag.text-bg-status-positive-muted { - --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-positive-emphasized}; -} - -.tag.text-bg-status-positive-emphasized, -.tag.text-bg-status-positive-muted { - - > .tag-asset-container > .tag-status-icon { - width: 100%; - height: 100%; - color: #000; - vertical-align: middle; - background-color: #000; - background-size: contain; - mask-image: escape-svg(url("data:image/svg+xml,")); - } -} - -.tag.text-bg-status-info-muted { - --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-info-emphasized}; -} - -.tag.text-bg-status-warning-muted { - --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-warning-emphasized}; -} - -.tag.text-bg-status-negative-muted { - --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-negative-emphasized}; -} - - -.tag-loader { // TODO partially copied from button loader, should be factorized as much as possible - --#{$prefix}tag-asset-color: currentcolor; - - display: block; - margin: 0; - font-size: var(--#{$prefix}tag-asset-container-size); - transform: rotate(-90deg); - - > .tag-loader-inner { - fill: none; - stroke: var(--#{$prefix}tag-asset-color); - stroke-dasharray: var(--#{$prefix}tag-loading-dasharray); - stroke-width: 8; - transform-origin: center; - animation: var(--#{$prefix}tag-loading-animation); - } - - .tag:not(.loading) .tag-asset-container:has(&) { - display: none; - } - - .tag.loading:has(&) { - color: #{$ouds-color-content-default} if($enable-important-utilities, !important, null); - background-color: #{$ouds-color-surface-status-neutral-muted} if($enable-important-utilities, !important, null); - } -} - -.tag-sm { - --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-small}; - --#{$prefix}tag-padding-end: #{$ouds-tag-space-padding-inline-small}; - --#{$prefix}tag-padding-start-asset: #{$ouds-tag-space-padding-inline-asset-small}; - --#{$prefix}tag-padding-y: #{$ouds-tag-space-padding-block-small}; - --#{$prefix}tag-min-width: #{$ouds-tag-size-min-width-small}; - --#{$prefix}tag-min-height: #{$ouds-tag-size-min-height-small}; - --#{$prefix}tag-asset-container-size: #{px-to-rem($ouds-tag-size-asset-small)}; - --#{$prefix}tag-bullet-padding: #{$ouds-tag-space-inset-bullet-small}; - --#{$prefix}tag-icon-padding: #{$ouds-tag-space-inset-icon-small}; - --#{$prefix}tag-loader-padding: #{$ouds-tag-space-inset-loader-small}; - --#{$prefix}tag-asset-gap: #{$ouds-tag-space-column-gap-small}; - @include get-font-size("label-small"); -} - -.tag-input { - --#{$prefix}tag-color: #{$ouds-tag-input-color-content-enabled}; - --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-enabled}; - --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-enabled}; - --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default}; - --#{$prefix}tag-padding-end: var(--#{$prefix}tag-padding-asset); - - margin: calc(($ouds-tag-size-min-height-interactive-area - var(--#{$prefix}tag-min-height)) / 2) 0; // stylelint-disable-line function-disallowed-list - border: var(--#{$prefix}tag-border-width) solid var(--#{$prefix}tag-border-color); - - &::before { - position: absolute; - top: calc(-.5 * ($ouds-tag-size-min-height-interactive-area - var(--bs-tag-min-height)) - var(--#{$prefix}tag-border-width)); // stylelint-disable-line function-disallowed-list - right: calc(-1 * var(--#{$prefix}tag-border-width)); // stylelint-disable-line function-disallowed-list - bottom: calc(-.5 * ($ouds-tag-size-min-height-interactive-area - var(--bs-tag-min-height)) - var(--#{$prefix}tag-border-width)); // stylelint-disable-line function-disallowed-list - left: calc(-1 * var(--#{$prefix}tag-border-width)); // stylelint-disable-line function-disallowed-list - content: ""; - } - - &::after { - width: var(--#{$prefix}tag-asset-container-size); - height: var(--#{$prefix}tag-asset-container-size); - content: ""; - background-color: currentcolor; - mask: url("data:image/svg+xml,"); - } - - &:hover { - --#{$prefix}tag-color: #{$ouds-tag-input-color-content-hover}; - --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-hover}; - --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-hover}; - --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; - } - - &:active { - --#{$prefix}tag-color: #{$ouds-tag-input-color-content-pressed}; - --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-pressed}; - --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-pressed}; - --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; - } - - &:focus-visible { - --#{$prefix}tag-color: #{$ouds-tag-input-color-content-focus}; - --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-focus}; - --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-focus}; - --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; - } - - &:disabled, - &[aria-disabled="true"] { - --#{$prefix}tag-color: #{$ouds-color-action-disabled}; - --#{$prefix}tag-background-color: #{$ouds-color-content-on-action-disabled}; - --#{$prefix}tag-border-color: #{$ouds-color-action-disabled}; - --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default}; - - pointer-events: none; - } -} diff --git a/scss/_tags.scss b/scss/_tags.scss new file mode 100644 index 0000000000..76181368e6 --- /dev/null +++ b/scss/_tags.scss @@ -0,0 +1,224 @@ +.tag { + --#{$prefix}tag-min-width: #{$ouds-tag-size-min-width-default}; + --#{$prefix}tag-min-height: #{$ouds-tag-size-min-height-default}; + --#{$prefix}tag-color: #{$ouds-color-content-on-status-neutral-emphasized}; + --#{$prefix}tag-border-width: 0px; + --#{$prefix}tag-background-color: #{$ouds-color-surface-status-neutral-emphasized}; + --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-default}; + --#{$prefix}tag-padding-end: #{$ouds-tag-space-padding-inline-default}; + --#{$prefix}tag-padding-asset: #{$ouds-tag-space-padding-inline-asset-default}; + --#{$prefix}tag-padding-y: #{$ouds-tag-space-padding-block-default}; + --#{$prefix}tag-size-asset: #{px-to-rem($ouds-tag-size-asset-default)}; + --#{$prefix}tag-asset-gap: #{$ouds-tag-space-column-gap-default}; + --#{$prefix}tag-asset-color: currentcolor; + --#{$prefix}tag-loading-dasharray: 92; + --#{$prefix}tag-loading-animation: 2.1875s infinite linear rotate1-indeterminate, 1.25s linear infinite rotate2-indeterminate; + --#{$prefix}tag-positive-icon: url("data:image/svg+xml,"); + --#{$prefix}tag-info-icon: url("data:image/svg+xml,"); + --#{$prefix}tag-warning-icon: url("data:image/svg+xml,"); + --#{$prefix}tag-negative-icon: url("data:image/svg+xml,"); + + position: relative; + display: inline-flex; + gap: var(--#{$prefix}tag-asset-gap); + align-items: center; + justify-content: center; + min-width: var(--#{$prefix}tag-min-width); + min-height: var(--#{$prefix}tag-min-height); + padding: subtract(var(--#{$prefix}tag-padding-y), var(--#{$prefix}tag-border-width)) subtract(var(--#{$prefix}tag-padding-end), var(--#{$prefix}tag-border-width)) subtract(var(--#{$prefix}tag-padding-y), var(--#{$prefix}tag-border-width)) subtract(var(--#{$prefix}tag-padding-start), var(--#{$prefix}tag-border-width)); + margin: 0; + font-weight: 700; + color: var(--#{$prefix}tag-color); + white-space: nowrap; + background-color: var(--#{$prefix}tag-background-color); + @include get-font-size("label-medium"); + @include border-radius($ouds-tag-border-radius); + + &.text-bg-status-accent-muted { + --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-accent-emphasized}; + } + + &.text-bg-status-positive-muted { + --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-positive-emphasized}; + } + + &.text-bg-status-info-muted { + --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-info-emphasized}; + } + + &.text-bg-status-warning-muted { + --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-warning-emphasized}; + } + + &.text-bg-status-negative-muted { + --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-negative-emphasized}; + } + + &:has(.tag-asset-container) { + --#{$prefix}tag-padding-start: var(--#{$prefix}tag-padding-asset); + } + + .tag-icon, + .tag-status-icon, + .tag-bullet, + .tag-loader { + display: flex; + flex-shrink: 0; + align-items: center; + width: var(--#{$prefix}tag-size-asset); + height: var(--#{$prefix}tag-size-asset); + padding: #{$ouds-tag-space-inset-icon-default}; + overflow: hidden; + line-height: 1; + color: var(--#{$prefix}tag-asset-color); + } + + .tag-status-icon { + vertical-align: middle; + background-color: var(--#{$prefix}tag-asset-color); + background-size: contain; + } + + .tag-bullet { + width: calc(var(--#{$prefix}tag-size-asset) - (2 * #{$ouds-tag-space-inset-bullet-default})); // stylelint-disable-line function-disallowed-list + height: calc(var(--#{$prefix}tag-size-asset) - (2 * #{$ouds-tag-space-inset-bullet-default})); // stylelint-disable-line function-disallowed-list + padding: 0; + margin: #{$ouds-tag-space-inset-bullet-default}; + background-color: var(--#{$prefix}tag-asset-color); + @include border-radius(#{$ouds-border-radius-pill}); + } + + &.text-bg-status-positive-emphasized, + &.text-bg-status-positive-muted { + .tag-status-icon { + mask-image: escape-svg(var(--#{$prefix}tag-positive-icon)); + } + } + + &.text-bg-status-info-emphasized, + &.text-bg-status-info-muted { + .tag-status-icon { + mask-image: escape-svg(var(--#{$prefix}tag-info-icon)); + } + } + + &.text-bg-status-warning-emphasized, + &.text-bg-status-warning-muted { + .tag-status-icon { + mask-image: escape-svg(var(--#{$prefix}tag-warning-icon)); + } + } + + &.text-bg-status-negative-emphasized, + &.text-bg-status-negative-muted { + .tag-status-icon { + mask-image: escape-svg(var(--#{$prefix}tag-negative-icon)); + } + } + + &:not(.loading) .tag-loader { + display: none; + } + + &.loading:has(.tag-loader) { + color: #{$ouds-color-content-default} if($enable-important-utilities, !important, null); + background-color: #{$ouds-color-surface-status-neutral-muted} if($enable-important-utilities, !important, null); + } + + .tag-loader { // TODO partially copied from button loader, should be factorized as much as possible + --#{$prefix}tag-asset-color: currentcolor; + display: block; + margin: 0; + font-size: var(--#{$prefix}tag-size-asset); + transform: rotate(-90deg); + + > .tag-loader-inner { + fill: none; + stroke: var(--#{$prefix}tag-asset-color); + stroke-dasharray: var(--#{$prefix}tag-loading-dasharray); + stroke-width: 8; + transform-origin: center; + animation: var(--#{$prefix}tag-loading-animation); + } + } + + .disabled &, + &.disabled { + color: #{$ouds-color-content-on-action-disabled} if($enable-important-utilities, !important, null); + background-color:#{$ouds-color-action-disabled} if($enable-important-utilities, !important, null); + } +} + +.tag-sm { + --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-small}; + --#{$prefix}tag-padding-end: #{$ouds-tag-space-padding-inline-small}; + --#{$prefix}tag-padding-start-asset: #{$ouds-tag-space-padding-inline-asset-small}; + --#{$prefix}tag-padding-y: #{$ouds-tag-space-padding-block-small}; + --#{$prefix}tag-min-width: #{$ouds-tag-size-min-width-small}; + --#{$prefix}tag-min-height: #{$ouds-tag-size-min-height-small}; + --#{$prefix}tag-size-asset: #{px-to-rem($ouds-tag-size-asset-small)}; + --#{$prefix}tag-bullet-padding: #{$ouds-tag-space-inset-bullet-small}; + --#{$prefix}tag-icon-padding: #{$ouds-tag-space-inset-icon-small}; + --#{$prefix}tag-loader-padding: #{$ouds-tag-space-inset-loader-small}; + --#{$prefix}tag-asset-gap: #{$ouds-tag-space-column-gap-small}; + @include get-font-size("label-small"); +} + +.tag-input { + --#{$prefix}tag-color: #{$ouds-tag-input-color-content-enabled}; + --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-enabled}; + --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-enabled}; + --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default}; + --#{$prefix}tag-padding-end: var(--#{$prefix}tag-padding-asset); + + margin: calc(($ouds-tag-size-min-height-interactive-area - var(--#{$prefix}tag-min-height)) / 2) 0; // stylelint-disable-line function-disallowed-list + border: var(--#{$prefix}tag-border-width) solid var(--#{$prefix}tag-border-color); + + &::before { + position: absolute; + top: calc(-.5 * ($ouds-tag-size-min-height-interactive-area - var(--bs-tag-min-height)) - var(--#{$prefix}tag-border-width)); // stylelint-disable-line function-disallowed-list + right: calc(-1 * var(--#{$prefix}tag-border-width)); // stylelint-disable-line function-disallowed-list + bottom: calc(-.5 * ($ouds-tag-size-min-height-interactive-area - var(--bs-tag-min-height)) - var(--#{$prefix}tag-border-width)); // stylelint-disable-line function-disallowed-list + left: calc(-1 * var(--#{$prefix}tag-border-width)); // stylelint-disable-line function-disallowed-list + content: ""; + } + + &::after { + width: var(--#{$prefix}tag-size-asset); + height: var(--#{$prefix}tag-size-asset); + content: ""; + background-color: currentcolor; + mask: url("data:image/svg+xml,"); + } + + &:hover { + --#{$prefix}tag-color: #{$ouds-tag-input-color-content-hover}; + --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-hover}; + --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-hover}; + --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; + } + + &:active { + --#{$prefix}tag-color: #{$ouds-tag-input-color-content-pressed}; + --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-pressed}; + --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-pressed}; + --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; + } + + &:focus-visible { + --#{$prefix}tag-color: #{$ouds-tag-input-color-content-focus}; + --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-focus}; + --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-focus}; + --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction}; + } + + &:disabled, + &[aria-disabled="true"] { + --#{$prefix}tag-color: #{$ouds-color-action-disabled}; + --#{$prefix}tag-background-color: #{$ouds-color-content-on-action-disabled}; + --#{$prefix}tag-border-color: #{$ouds-color-action-disabled}; + --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default}; + + pointer-events: none; + } +} diff --git a/scss/ouds-web.scss b/scss/ouds-web.scss index 1695b90500..4f124e85a7 100644 --- a/scss/ouds-web.scss +++ b/scss/ouds-web.scss @@ -40,7 +40,7 @@ @import "breadcrumb"; @import "pagination"; @import "badge"; -@import "tag"; +@import "tags"; @import "alert"; @import "progress"; @import "list-group"; diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index b0182e7566..82eba4ce4d 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -155,7 +155,7 @@ draft: true - title: Sticker draft: true - - title: Tag + - title: Tags - title: Title bars draft: true - title: Toasts diff --git a/site/src/content/docs/components/tag.mdx b/site/src/content/docs/components/tag.mdx deleted file mode 100644 index e59e72f90f..0000000000 --- a/site/src/content/docs/components/tag.mdx +++ /dev/null @@ -1,453 +0,0 @@ ---- -title: Tag -description: A tag is a small element that shows short info like a label, keyword, or category. It helps users quickly find, group, or understand content. -aliases: - - "/docs/components/tag/" -toc: true ---- - -import { getConfig } from '@libs/config' - - - {/* TODO: set the right url for design documentation */} - You can find here the [OUDS tag design guidelines](https://unified-design-system.orange.com/). - - -## Overview - -
      -
    • -
      - -
      - Tag indicator is used in an informative way, to show short info like a label, keyword, or category. -
      -
      -
      • -
    • -
      - - -
      - Tag input is interactive and can take all the usual states: enabled, hover, pressed, disabled or focused. -
      -
      -
      • -
    - -For both versions of tag, OUDS Web has a basic `.tag` class that sets up default styles. - -Tag

    ` -} /> - -Tag input` -} /> - -## Tag (indicator) - - - For accessibility and semantics reasons, tags, like any other informative elements, must be on or be enclosed in a semantic HTML tag. In the following examples, tag are used either as `
  • ` or in `

    ` or `

    `: you can use any other semantic tag depending on the usage context. - - - -

  • Roaming
    • -
  • 5G Ready
    • -
  • 4G
    • - ` -} /> - -OUDS Web [color and background utilities]([[docsref:/helpers/color-background]]) can be applied to display colored tag variants, either emphasized or muted. Each color has its own semantic purpose. Please follow the [tag design specifications](https://unified-design-system.orange.com/) to choose the right color for the right semantic. {/* TODO: set the right url for design documentation */} - -For disabled color, use the `.tag-disabled` class. - - - The disabled tag should only be used in a disabled context, inside an interactive element that has been disabled, such as a card. - - - -
  • Neutral
    • -
  • Accent
    • -
  • Positive
    • -
  • Info
    • -
  • Warning
    • -
  • Negative
    • -
  • Disabled
    • - -
      -
    • Neutral
      • -
    • Accent
      • -
    • Positive
      • -
    • Info
      • -
    • Warning
      • -
    • Negative
      • -
    `} /> - -### Variants - -#### Squared - -To display tags with squared corners, add the `.rounded-none` utility class to the tag. - - -
  • Accent emphasized
    • -
  • Accent muted
    • -
  • Disabled
    • - `} /> - -#### With asset - -To add an asset (either bullet, icon or loader) inside a tag, add a `.tag-asset-container` before the tag's text. - -##### Bullet - -To display a colored bullet add `` inside the `.tag-asset-container`. - - -
  • - - - - Neutral -
    • -
  • - - - - Accent -
    • -
  • - - - - Positive -
    • -
  • - - - - Info -
    • -
  • - - - - Warning -
    • -
  • - - - - Negative -
    • -
  • - - - - Disabled -
    • - -
      -
    • - - - - Neutral -
      • -
    • - - - - Accent -
      • -
    • - - - - Positive -
      • -
    • - - - - Info -
      • -
    • - - - - Warning -
      • -
    • - - - - Negative -
      • -
    `} /> - - - ... -
  • - - - - Neutral -
    • - ... -
  • - - - - Disabled -
    • - ... -
  • - - - - Neutral -
    • - `} /> - -##### Status icon - -Icons are predefined in SCSS for statuses positive, info, warning and negative. - - -
  • - - - - Positive -
    • -
  • - - - - Info -
    • -
  • - - - - Warning -
    • -
  • - - - - Negative -
    • -
  • - - - - Positive -
    • -
  • - - - - Info -
    • -
  • - - - - Warning -
    • -
  • - - - - Negative -
    • - `} /> - -##### Other icon - - - The recommended way of using an icon in a tag is through an [SVG sprite file]([[docsref:/extend/icons#svg-sprite]]). - - - - Since icons in tags are always next to some text, they are purely decorative and should be hidden from assistive technologies using `aria-hidden="true"`, as demonstrated in our examples. - - -To display a colored icon, just add the icon inside the `.tag-asset-container`. - - -
  • - - - - Neutral -
    • -
  • - - - - Accent -
    • -
  • - - - - Neutral -
    • -
  • - - - - Accent -
    • -
  • - - - - Disabled -
    • - `} /> - -If really needed, you can use a font icon associated to the `.icon` class to set correct parameters for the `line-height`. - - - - - - Settings -

    `} /> - -##### Loader - -To display a loader, add the following SVG and a `.visually-hidden` text inside the `.tag-asset-container`. - - - - - - - Label -

    `} /> - -### Sizes - -To display a small tag, add the class `.tag-sm` to the tag. - - -
  • Small neutral
    • -
  • - - - - Small neutral -
    • -
  • - - - - Small neutral -
    • -
  • - - - - - Small loader -
    • - `} /> - - -### Layout - -Tag indicator can be used near some text or some title (to show status or key details), or in a list (to indicate categories or keywords). If needed, you can use the [vertical alignment utilities]([[docsref:/utilities/vertical-align]]) to vertically center inline content. - - -
  • Roaming
    • -
  • 5G Ready
    • -
  • 4G
    • - -
      -
    • Roaming
      • -
    • 5G Ready
      • -
    -

    Title Coming soon

    -

    Title Coming soon

    -

    New Some text

    -

    New Some text

    `} /> - -Tags can be added side by side. They require horizontal and vertical spacing between each other. You can use [flexbox utilities]([[docsref:/utilities/spacing#gap]]) to manage the horizontal space (default value is obtained thanks to `.column-gap-xs`) the and vertical space (default value is obtained thanks to `.row-gap-md`). - - -
  • Label
    • -
  • Label
    • -
  • Label
    • -
  • Label
    • -
  • Label
    • -
  • Label
    • - `} /> - -## Tag input - - - Please note that all the variants of tag (indicator) above must not be applied on tag input. - - -Tag inputs are interactive and may be associated to an input field to be added dynamically. The tag input should be used along with a `

    • -
    • -
    • -`} /> - -### Layout - -Tag inputs are typically intended to be added side by side. They require horizontal and vertical spacing between each other. You can use flexbox utilities to manage the horizontal space (default value is obtained thanks to `.column-gap-xs`). Vertical space is automatically created by the extended touch target heights. - - -
    • -
    • -
    • -
    • -
    • -
    • -`} /> - -### States - -#### Disabled - -To disable a tag input, just add the `disabled` attribute to the `.tag`. - - -
    • -
    • -
    • -`} /> diff --git a/site/src/content/docs/components/tags.mdx b/site/src/content/docs/components/tags.mdx new file mode 100644 index 0000000000..65bc23bb7f --- /dev/null +++ b/site/src/content/docs/components/tags.mdx @@ -0,0 +1,449 @@ +--- +title: Tag +description: A tag is a small element that shows short info like a label, keyword, or category. It helps users quickly find, group, or understand content. +aliases: + - "/docs/components/tags/" +toc: true +--- + +import { getConfig } from '@libs/config' + + + You can find here the [OUDS tag design guidelines](https://unified-design-system.orange.com/472794e18/p/7565ce-tag). + + +## Overview + +### Component types + +
      +
    • +
      + +
      + Tag is used in an informative way, to show short info like a label, keyword, or category. +
      +
      +
      • +
    • +
      + + +
      + Input tag is interactive and can take all the usual states: enabled, hover, pressed, disabled or focused. +
      +
      +
      • +
    + +For both types of tag, OUDS Web has a basic `.tag` class that sets up default styles. + +Tag

    ` +} /> + +Input tag` +} /> + +## Tag + +### Overview + + +For accessibility and semantics reasons, a tag -like any other informative element- must either be semantic element itself or be wrapped in appropriate semantic HTML element. In the examples below, tags appear as `
  • ` elements or inside of `

    ` and `

    ` elements. You may use any other semantic element that best fits the context. + + + +

  • Roaming
    • +
  • 5G Ready
    • +
  • 4G
    • + ` +} /> + +OUDS Web [color and background utilities]([[docsref:/helpers/color-background]]) can be applied to display colored tag variants, either emphasized or muted. Each color has its own semantic purpose. Please follow the [tag design specifications](https://unified-design-system.orange.com/472794e18/p/7565ce-tag/t/a9c2192f98) to choose the right color for the right semantic. + + +
  • Neutral
    • +
  • Accent
    • +
  • Positive
    • +
  • Info
    • +
  • Warning
    • +
  • Negative
    • + +
      +
    • Neutral
      • +
    • Accent
      • +
    • Positive
      • +
    • Info
      • +
    • Warning
      • +
    • Negative
      • +
    `} /> + + + + Keep in mind that color alone should not be the only way to convey information, so if the color as a strong meaning, it should be reflected in the tag's text, or you should add a `.visually-hidden` additional text. + + +### Variants + +#### Squared + +To display tags with squared corners, add the `.rounded-none` utility class to the tag. + + +
  • Accent muted
    • +
  • Accent emphasized
    • + `} /> + +#### Bullet + +To add a colored bullet in the tag, add ``. + + +
  • + + Neutral +
    • +
  • + + Accent +
    • +
  • + + Positive +
    • +
  • + + Info +
    • +
  • + + Warning +
    • +
  • + + Negative +
    • + +
      +
    • + + Neutral +
      • +
    • + + Accent +
      • +
    • + + Positive +
      • +
    • + + Info +
      • +
    • + + Warning +
      • +
    • + + Negative +
      • +
    `} /> + + + ... +
  • + + Neutral +
    • + ... +
  • + + Neutral +
    • + `} /> + +#### Tag status + +##### Functional + +Status icons are predefined in SCSS for positive, info, warning and negative functional statuses. To display a status icon, just add `.tag-status-icon` inside the tag, the icon will change depending on the text utility used. + + +If the functional meaning of the text is not sufficiently clear, add additional text with the `.visually-hidden` class to ensure accessibility for all users. + + + +
  • + + Activated +
    • +
  • + + Coming soon +
    • +
  • + + Under maintenance +
    • +
  • + + Error +
    • + +
      +
    • + + + Tested +
      • +
    • + + + Manually tested +
      • +
    • + + + Not tested +
      • +
    • + + + Tested +
      • +
    `} /> + +In case you need to use a different icon than the predefined ones, you can confirgure your own icons by overriding the custom properties (CSS varibales) `--#{$prefix}tag-positive-icon`, `--#{$prefix}tag-info-icon` `--#{$prefix}tag-warning-icon` and `--#{$prefix}tag-error-icon`. + +##### Non-functional + + + +To display a colored icon, add the icon inside the tag, with a `.tag-icon` class. + + +Since icons in tags are always next to some text, they are purely decorative and should be hidden from assistive technologies using `aria-hidden="true"`, as demonstrated in our examples. + + + +
  • + + Neutral +
    • +
  • + + Accent +
    • + +
      +
    • + + Neutral +
      • +
    • + + Accent +
      • +
    +

    + + Settings +

    `} /> + +### States + +#### Disabled + +The disabled tag should only be used in a disabled context, inside an interactive element that has been disabled, such as a card. If the tag has been added a `.disabled` class, or is inside an element with a `.disabled` class it will look dimmed, whatever the text utility you used. + + +

    Disabled Some text

    +

    • +

    Disabled Some text

    +

    Disabled Some text

    `} /> + +#### Loading + +The loading state of a tag indicates that an action is currently processing or taking place. This state provides feedback to users, enhancing user experience. + +To make an animated loading state tag, you will add in your standard tag: +- An animated ``, with the class `.tag-loader`. +- A status message ``: the message must be updated regularly in order to be vocalized by screen readers. + +For example, before loading, your tag could be like this: + + + + + Label +

    `} /> + +When the loading starts, you will have to: + - Add the class `.loading` to the tag to provide the appropriate styles and animation. + - Remove the `.d-none` from the status message ``. + - Update regularly the status message `` containing the loading message. + +At the end of the loading, you should: + - Remove the class `.loading` to restore the tag’s look. + - Set a final status message in ``, indicating the loading has ended (so we don’t add again `.d-none` on this status message). + +You can see a similar live example with buttons with the full JavaScript code on our [loading buttons live example]([[docsref:/examples/loading-buttons/]]). + + + + + Label +

    `} /> + +### Sizes + +To display a small tag, add the class `.tag-sm` to the tag. + + +
  • Small neutral
    • +
  • + + Small neutral +
    • +
  • + + Small neutral +
    • +
  • + + + Small loader +
    • + `} /> + +### Layout + +A tag can be used near some text or some title (to show status or key details), or in a list (to indicate categories or keywords). If needed, you can use the [vertical alignment utilities]([[docsref:/utilities/vertical-align]]) to vertically center inline content. + + +
  • Roaming
    • +
  • 5G Ready
    • +
  • 4G
    • + +
      +
    • Roaming
      • +
    • 5G Ready
      • +
    +

    Title Coming soon

    +

    Title Coming soon

    +

    New Some text

    +

    New Some text

    `} /> + +Tags can be added side by side. They require horizontal and vertical spacing between each other. You can use [flexbox utilities]([[docsref:/utilities/spacing#gap]]) to manage the horizontal space (default value is obtained thanks to `.column-gap-xs`) the and vertical space (default value is obtained thanks to `.row-gap-md`). + + +
  • Label
    • +
  • Label
    • +
  • Label
    • +
  • Label
    • +
  • Label
    • +
  • Label
    • + `} /> + +## Input tag + +### Overview + + + Please note that all the variants of tag above must not be applied on input tag. + + +Input tags are interactive and may be associated to an input field to be added dynamically. The input tag should be used along with a ` + +
  • + +
    • +
  • + +
    • +`} /> + +### States + +#### Disabled + +To disable an input tag, just add the `disabled` attribute to the `.tag`. + + +
  • + +
    • +
  • + +
    • +
  • + +
    • +`} /> + +### Layout + +Input tags are typically intended to be added side by side. They require horizontal and vertical spacing between each other. You can use flexbox utilities to manage the horizontal space (default value is obtained thanks to `.column-gap-xs`). Vertical space is automatically created by the extended touch target heights. + + +
    • +
    • +
    • +
    • +
    • +
    • + `} /> From 6dac73b8431eb994e0389d02e944512810436cb0 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Mon, 22 Sep 2025 18:28:04 +0200 Subject: [PATCH 56/78] fix stylelint --- scss/_tags.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_tags.scss b/scss/_tags.scss index 76181368e6..54d757578f 100644 --- a/scss/_tags.scss +++ b/scss/_tags.scss @@ -145,7 +145,7 @@ .disabled &, &.disabled { color: #{$ouds-color-content-on-action-disabled} if($enable-important-utilities, !important, null); - background-color:#{$ouds-color-action-disabled} if($enable-important-utilities, !important, null); + background-color: #{$ouds-color-action-disabled} if($enable-important-utilities, !important, null); } } From 7c425df0d4dcb4ed8b7e3e6e6ae320516445779a Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Mon, 22 Sep 2025 18:35:57 +0200 Subject: [PATCH 57/78] remove unused icon + bundlewatch fix + self closing tag --- .bundlewatch.config.json | 8 ++++---- site/src/content/docs/components/tags.mdx | 8 ++++---- site/static/docs/[version]/assets/img/ouds-web-sprite.svg | 3 --- 3 files changed, 8 insertions(+), 11 deletions(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index f1ba48fb90..ecdec228c6 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -2,11 +2,11 @@ "files": [ { "path": "./dist/css/ouds-web-bootstrap.css", - "maxSize": "67.75 kB" + "maxSize": "69 kB" }, { "path": "./dist/css/ouds-web-bootstrap.min.css", - "maxSize": "64.25 kB" + "maxSize": "65.5 kB" }, { "path": "./dist/css/ouds-web-grid.css", @@ -34,11 +34,11 @@ }, { "path": "./dist/css/ouds-web.css", - "maxSize": "59.0 kB" + "maxSize": "60.0 kB" }, { "path": "./dist/css/ouds-web.min.css", - "maxSize": "55.75 kB" + "maxSize": "56.25 kB" }, { "path": "./dist/js/ouds-web.bundle.js", diff --git a/site/src/content/docs/components/tags.mdx b/site/src/content/docs/components/tags.mdx index 65bc23bb7f..62e1fbf68f 100644 --- a/site/src/content/docs/components/tags.mdx +++ b/site/src/content/docs/components/tags.mdx @@ -238,13 +238,13 @@ Since icons in tags are always next to some text, they are purely decorative and
  • Neutral
  • Accent
    • @@ -266,7 +266,7 @@ Since icons in tags are always next to some text, they are purely decorative and

    Settings -

    `} /> +

    `} /> ### States @@ -329,7 +329,7 @@ To display a small tag, add the class `.tag-sm` to the tag.
  • Small neutral
    • diff --git a/site/static/docs/[version]/assets/img/ouds-web-sprite.svg b/site/static/docs/[version]/assets/img/ouds-web-sprite.svg index f11fd37be4..9cb4aa492d 100644 --- a/site/static/docs/[version]/assets/img/ouds-web-sprite.svg +++ b/site/static/docs/[version]/assets/img/ouds-web-sprite.svg @@ -32,7 +32,4 @@ - - - From 726262165e7e7f74aeacaa1d78c8c2a7819d7c7c Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Mon, 22 Sep 2025 18:52:20 +0200 Subject: [PATCH 58/78] change title ! --- site/src/content/docs/components/tags.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/content/docs/components/tags.mdx b/site/src/content/docs/components/tags.mdx index 62e1fbf68f..6c118d1ec2 100644 --- a/site/src/content/docs/components/tags.mdx +++ b/site/src/content/docs/components/tags.mdx @@ -1,5 +1,5 @@ --- -title: Tag +title: Tags description: A tag is a small element that shows short info like a label, keyword, or category. It helps users quickly find, group, or understand content. aliases: - "/docs/components/tags/" From e04cf7dd421df2dc09248cf0517b561b7dc7a6c7 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Tue, 23 Sep 2025 17:25:58 +0200 Subject: [PATCH 59/78] Update scss/_tags.scss (calc) Co-authored-by: Maxime Lardenois --- scss/_tags.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_tags.scss b/scss/_tags.scss index 54d757578f..b2170f7cc0 100644 --- a/scss/_tags.scss +++ b/scss/_tags.scss @@ -25,7 +25,7 @@ justify-content: center; min-width: var(--#{$prefix}tag-min-width); min-height: var(--#{$prefix}tag-min-height); - padding: subtract(var(--#{$prefix}tag-padding-y), var(--#{$prefix}tag-border-width)) subtract(var(--#{$prefix}tag-padding-end), var(--#{$prefix}tag-border-width)) subtract(var(--#{$prefix}tag-padding-y), var(--#{$prefix}tag-border-width)) subtract(var(--#{$prefix}tag-padding-start), var(--#{$prefix}tag-border-width)); + padding: calc(var(--#{$prefix}tag-padding-y) - var(--#{$prefix}tag-border-width)) calc(var(--#{$prefix}tag-padding-end) - var(--#{$prefix}tag-border-width)) calc(var(--#{$prefix}tag-padding-y) - var(--#{$prefix}tag-border-width)) calc(var(--#{$prefix}tag-padding-start) - var(--#{$prefix}tag-border-width)); // stylelint-disable-line function-disallowed-list margin: 0; font-weight: 700; color: var(--#{$prefix}tag-color); From 2b9911f45c2a12d7dcbc64a169d1ddecaa134f7d Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Tue, 23 Sep 2025 17:27:07 +0200 Subject: [PATCH 60/78] Update scss/_tags.scss Co-authored-by: Maxime Lardenois --- scss/_tags.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/scss/_tags.scss b/scss/_tags.scss index b2170f7cc0..1df757cf73 100644 --- a/scss/_tags.scss +++ b/scss/_tags.scss @@ -54,9 +54,6 @@ --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-negative-emphasized}; } - &:has(.tag-asset-container) { - --#{$prefix}tag-padding-start: var(--#{$prefix}tag-padding-asset); - } .tag-icon, .tag-status-icon, From 12400a9d1ae6a93f52671a36aa7d7cc6b324ccf7 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Tue, 23 Sep 2025 17:32:48 +0200 Subject: [PATCH 61/78] Update site/src/content/docs/components/tags.mdx Co-authored-by: Maxime Lardenois --- site/src/content/docs/components/tags.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/site/src/content/docs/components/tags.mdx b/site/src/content/docs/components/tags.mdx index 6c118d1ec2..1dd711d659 100644 --- a/site/src/content/docs/components/tags.mdx +++ b/site/src/content/docs/components/tags.mdx @@ -3,6 +3,8 @@ title: Tags description: A tag is a small element that shows short info like a label, keyword, or category. It helps users quickly find, group, or understand content. aliases: - "/docs/components/tags/" + - "/docs/components/tag/" + - "/docs/[[config:docs_version]]/components/tag/" toc: true --- From 381461a3b7266208ac24b087787360337130dce1 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Tue, 23 Sep 2025 17:33:10 +0200 Subject: [PATCH 62/78] Update site/src/content/docs/components/tags.mdx Co-authored-by: Maxime Lardenois --- site/src/content/docs/components/tags.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/content/docs/components/tags.mdx b/site/src/content/docs/components/tags.mdx index 1dd711d659..151b976c3a 100644 --- a/site/src/content/docs/components/tags.mdx +++ b/site/src/content/docs/components/tags.mdx @@ -35,7 +35,7 @@ import { getConfig } from '@libs/config'
    From 094b2d077f12e713e07ae925c4d6337cf2243903 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Tue, 23 Sep 2025 17:33:40 +0200 Subject: [PATCH 63/78] Update site/src/content/docs/components/tags.mdx Co-authored-by: Maxime Lardenois --- site/src/content/docs/components/tags.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/content/docs/components/tags.mdx b/site/src/content/docs/components/tags.mdx index 151b976c3a..a737441957 100644 --- a/site/src/content/docs/components/tags.mdx +++ b/site/src/content/docs/components/tags.mdx @@ -59,7 +59,7 @@ For both types of tag, OUDS Web has a basic `.tag` class that sets up default st ### Overview -For accessibility and semantics reasons, a tag -like any other informative element- must either be semantic element itself or be wrapped in appropriate semantic HTML element. In the examples below, tags appear as `
  • ` elements or inside of `

    ` and `

    ` elements. You may use any other semantic element that best fits the context. +For accessibility and semantics reasons, a tag—like any other informative element—must either be a semantic element itself or be wrapped in an appropriate semantic HTML element. In the examples below, tags appear as `

  • ` elements or inside of `

    ` and `

    ` elements. You may use any other semantic element that best fits the context. From cc9e1b7f1a89d5b444ee8930faaa1ef7b931cf9f Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Tue, 23 Sep 2025 17:34:37 +0200 Subject: [PATCH 64/78] Update site/src/content/docs/components/tags.mdx Co-authored-by: Maxime Lardenois --- site/src/content/docs/components/tags.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/content/docs/components/tags.mdx b/site/src/content/docs/components/tags.mdx index a737441957..f24caf6b61 100644 --- a/site/src/content/docs/components/tags.mdx +++ b/site/src/content/docs/components/tags.mdx @@ -90,7 +90,7 @@ OUDS Web [color and background utilities]([[docsref:/helpers/color-background]]) - Keep in mind that color alone should not be the only way to convey information, so if the color as a strong meaning, it should be reflected in the tag's text, or you should add a `.visually-hidden` additional text. + Keep in mind that color should not be the only way to convey information, so if the color has a strong meaning, it should be reflected in the tag's text, or you should add a `.visually-hidden` additional text. ### Variants From f67f9a9a0d8946f308d5c8492d5bba74fa969708 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Tue, 23 Sep 2025 17:36:22 +0200 Subject: [PATCH 65/78] Update site/src/content/docs/components/tags.mdx Co-authored-by: Maxime Lardenois --- site/src/content/docs/components/tags.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/content/docs/components/tags.mdx b/site/src/content/docs/components/tags.mdx index f24caf6b61..aa0f9f5cf9 100644 --- a/site/src/content/docs/components/tags.mdx +++ b/site/src/content/docs/components/tags.mdx @@ -225,7 +225,7 @@ If the functional meaning of the text is not sufficiently clear, add additional

    • `} /> -In case you need to use a different icon than the predefined ones, you can confirgure your own icons by overriding the custom properties (CSS varibales) `--#{$prefix}tag-positive-icon`, `--#{$prefix}tag-info-icon` `--#{$prefix}tag-warning-icon` and `--#{$prefix}tag-error-icon`. +In case you need to use a different icon than the predefined ones, you can confirgure your own icons by overriding the custom properties (CSS variables) `--#{$prefix}tag-positive-icon`, `--#{$prefix}tag-info-icon` `--#{$prefix}tag-warning-icon` and `--#{$prefix}tag-error-icon`. ##### Non-functional From 91313b0c9fbd4058c65a6231058bcd491c10bcd3 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Tue, 23 Sep 2025 17:38:42 +0200 Subject: [PATCH 66/78] typo + use computed variables names --- site/src/content/docs/components/tags.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/content/docs/components/tags.mdx b/site/src/content/docs/components/tags.mdx index aa0f9f5cf9..8c8bfafd91 100644 --- a/site/src/content/docs/components/tags.mdx +++ b/site/src/content/docs/components/tags.mdx @@ -225,7 +225,7 @@ If the functional meaning of the text is not sufficiently clear, add additional

    • `} /> -In case you need to use a different icon than the predefined ones, you can confirgure your own icons by overriding the custom properties (CSS variables) `--#{$prefix}tag-positive-icon`, `--#{$prefix}tag-info-icon` `--#{$prefix}tag-warning-icon` and `--#{$prefix}tag-error-icon`. +In case you need to use a different icon than the predefined ones, you can configure your own icons by overriding the custom properties (CSS variables) `--bs-tag-positive-icon`, `--bs-tag-info-icon` `--bs-tag-warning-icon` and `--bs-tag-error-icon`. ##### Non-functional From a310b75dc9915e2d2aacacdfc31cfab674d688d3 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Tue, 23 Sep 2025 17:39:23 +0200 Subject: [PATCH 67/78] Update site/src/content/docs/components/tags.mdx Co-authored-by: Maxime Lardenois --- site/src/content/docs/components/tags.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/content/docs/components/tags.mdx b/site/src/content/docs/components/tags.mdx index aa0f9f5cf9..276e0ea8e3 100644 --- a/site/src/content/docs/components/tags.mdx +++ b/site/src/content/docs/components/tags.mdx @@ -362,7 +362,7 @@ A tag can be used near some text or some title (to show status or key details),

    New Some text

    New Some text

    `} /> -Tags can be added side by side. They require horizontal and vertical spacing between each other. You can use [flexbox utilities]([[docsref:/utilities/spacing#gap]]) to manage the horizontal space (default value is obtained thanks to `.column-gap-xs`) the and vertical space (default value is obtained thanks to `.row-gap-md`). +Tags can be added side by side. They require horizontal and vertical spacing between each other. You can use [flexbox utilities]([[docsref:/utilities/spacing#gap]]) to manage the horizontal space (default value is obtained thanks to `.column-gap-xs`) and the vertical space (default value is obtained thanks to `.row-gap-md`).
  • Label
    • From f3abaf008bac67699fc1981af59fbce3d4f06cc1 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Tue, 23 Sep 2025 17:39:38 +0200 Subject: [PATCH 68/78] Update site/src/content/docs/components/tags.mdx Co-authored-by: Maxime Lardenois --- site/src/content/docs/components/tags.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/content/docs/components/tags.mdx b/site/src/content/docs/components/tags.mdx index 276e0ea8e3..2cb2197ad1 100644 --- a/site/src/content/docs/components/tags.mdx +++ b/site/src/content/docs/components/tags.mdx @@ -378,7 +378,7 @@ Tags can be added side by side. They require horizontal and vertical spacing bet ### Overview - Please note that all the variants of tag above must not be applied on input tag. + Please note that all the variants of tag above *must not* be applied on input tag. Input tags are interactive and may be associated to an input field to be added dynamically. The input tag should be used along with a ` - -
  • - -
    • -
  • - -
    • -`} /> + Roaming + + +
  • + +
    • +
  • + +
    • + `} /> ### States @@ -417,31 +417,31 @@ It can be removed on click, but you have to implement this behavior by yourself, To disable an input tag, just add the `disabled` attribute to the `.tag`. -
  • - -
    • -
  • - -
    • -
  • - -
    • -`} /> +
  • + +
    • +
  • + +
    • +
  • + +
    • + `} /> ### Layout Input tags are typically intended to be added side by side. They require horizontal and vertical spacing between each other. You can use flexbox utilities to manage the horizontal space (default value is obtained thanks to `.column-gap-xs`). Vertical space is automatically created by the extended touch target heights. - +
    • From 1b1da29aae7ae7a85d1120fea1847510913f5637 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Wed, 24 Sep 2025 16:03:19 +0200 Subject: [PATCH 71/78] Example without toolbar for overview + accessibility labels and texts --- site/src/components/shortcodes/Example.astro | 7 +- site/src/content/docs/components/tags.mdx | 101 ++++++++++--------- 2 files changed, 53 insertions(+), 55 deletions(-) diff --git a/site/src/components/shortcodes/Example.astro b/site/src/components/shortcodes/Example.astro index 4a6b6e4196..b262350b1e 100644 --- a/site/src/components/shortcodes/Example.astro +++ b/site/src/components/shortcodes/Example.astro @@ -71,7 +71,7 @@ const simplifiedMarkup = markup
    { showPreview && ( -
    +
    ) @@ -81,10 +81,7 @@ const simplifiedMarkup = markup showMarkup && ( <> - - {showPreview && ( + {showPreview && showToolbar && (
    {lang} diff --git a/site/src/content/docs/components/tags.mdx b/site/src/content/docs/components/tags.mdx index 19e6e72ba0..72145df4b8 100644 --- a/site/src/content/docs/components/tags.mdx +++ b/site/src/content/docs/components/tags.mdx @@ -51,7 +51,7 @@ For both types of tag, OUDS Web has a basic `.tag` class that sets up default st Tag

    ` } /> -Input tag` +Input tag` } /> ## Tag @@ -59,19 +59,25 @@ For both types of tag, OUDS Web has a basic `.tag` class that sets up default st ### Overview -For accessibility and semantics reasons, a tag—like any other informative element—must either be a semantic element itself or be wrapped in an appropriate semantic HTML element. In the examples below, tags appear as `
  • ` elements or inside of `

    ` and `

    ` elements. You may use any other semantic element that best fits the context. +For accessibility reasons, a tag, like any other informative element, must either be a semantic element itself or be wrapped in an appropriate semantic HTML element. In the examples below, the tags appear as `

  • ` elements or inside of `

    ` and `

    ` elements. You may use any other semantic element that best fits the context. + +When inserting tags into a list, wrap the list in a container (probably a `

      ` or `
        `), with an appropriate `aria-label` to describe the group of tags. - +
      1. Roaming
      2. 5G Ready
      3. 4G
    ` } /> -OUDS Web [color and background utilities]([[docsref:/helpers/color-background]]) can be applied to display colored tag variants, either emphasized or muted. Each color has its own semantic purpose. Please follow the [tag design specifications](https://unified-design-system.orange.com/472794e18/p/7565ce-tag/t/a9c2192f98) to choose the right color for the right semantic. +OUDS Web [color and background utilities]([[docsref:/helpers/color-background]]) can be applied to display colored tag variants. Colors are classified in two hierarchies, emphasized (for key tags) or muted (for secondary tags), and each color has its own semantic purpose. Please follow the tag design guidelines to choose the right color for the right usage. - + +Keep in mind that color should not be the only way to convey information. If the color has strong meaning, reflect it in the tag's text or add additional text with the class `.visually-hidden`. + + +
  • Neutral
  • Accent
  • Positive
    • @@ -79,7 +85,7 @@ OUDS Web [color and background utilities]([[docsref:/helpers/color-background]])
  • Warning
  • Negative
    • -
      +
      • Neutral
      • Accent
      • Positive
        • @@ -88,18 +94,13 @@ OUDS Web [color and background utilities]([[docsref:/helpers/color-background]])
      • Negative
      `} /> - - - Keep in mind that color should not be the only way to convey information, so if the color has a strong meaning, it should be reflected in the tag's text, or you should add a `.visually-hidden` additional text. - - ### Variants #### Squared To display tags with squared corners, add the `.rounded-none` utility class to the tag. - +
    • Accent muted
    • Accent emphasized
    `} /> @@ -108,7 +109,7 @@ To display tags with squared corners, add the `.rounded-none` utility class to t To add a colored bullet in the tag, add ``. - +
  • Neutral @@ -134,7 +135,7 @@ To add a colored bullet in the tag, add ``. Negative
    • -
      +
      • Neutral @@ -161,16 +162,16 @@ To add a colored bullet in the tag, add ``.
      `} /> - + ...
    • - Neutral + Neutral muted
      • ...
    • - Neutral + Neutral emphasized
    `} /> @@ -184,7 +185,7 @@ Status icons are predefined in SCSS for positive, info, warning and negative fun If the functional meaning of the text is not sufficiently clear, add additional text with the `.visually-hidden` class to ensure accessibility for all users. - +
  • Activated @@ -202,7 +203,7 @@ If the functional meaning of the text is not sufficiently clear, add additional Error
    • -
      +
      • @@ -237,7 +238,7 @@ To display a colored icon, add the icon inside the tag, with a `.tag-icon` class Since icons in tags are always next to some text, they are purely decorative and should be hidden from assistive technologies using `aria-hidden="true"`, as demonstrated in our examples. - +
      -
        +
        • Small neutral
        • - Small neutral + Roaming
        • - Small neutral + 5G Ready
        • - Small loader + ...
        `} /> @@ -348,12 +349,12 @@ To display a small tag, add the class `.tag-sm` to the tag. A tag can be used near some text or some title (to show status or key details), or in a list (to indicate categories or keywords). If needed, you can use the [vertical alignment utilities]([[docsref:/utilities/vertical-align]]) to vertically center inline content. - +
      • Roaming
      • 5G Ready
      • 4G
      -
        +
        • Roaming
        • 5G Ready
        @@ -364,13 +365,13 @@ A tag can be used near some text or some title (to show status or key details), Tags can be added side by side. They require horizontal and vertical spacing between each other. You can use [flexbox utilities]([[docsref:/utilities/spacing#gap]]) to manage the horizontal space (default value is obtained thanks to `.column-gap-xs`) and the vertical space (default value is obtained thanks to `.row-gap-md`). - -
      • Label
        • -
      • Label
        • -
      • Label
        • -
      • Label
        • -
      • Label
        • -
      • Label
        • + +
      • Label 1
        • +
      • Label 2
        • +
      • Label 3
        • +
      • Label 4
        • +
      • Label 5
        • +
      • Label 6
      `} /> ## Input tag @@ -386,25 +387,25 @@ Input tags are interactive and may be associated to an input field to be added d It can be removed on click, but you have to implement this behavior by yourself, with some JavaScript specific to your project. - For accessibility reasons, input tags should be wrapped in a container with an appropriate `aria-label` to describe the group of tags. Each input tag should contain a `.visually-hidden` text to indicate the action that will be performed when the tag is clicked. + For accessibility reasons, a list of input tags should be wrapped in a container with an appropriate `aria-label` to describe the group of input tags. Each input tag should contain a `.visually-hidden` text to indicate the action that will be performed when the tag is clicked. - +
      • @@ -416,22 +417,22 @@ It can be removed on click, but you have to implement this behavior by yourself, To disable an input tag, just add the `disabled` attribute to the `.tag`. - +
      • @@ -441,11 +442,11 @@ To disable an input tag, just add the `disabled` attribute to the `.tag`. Input tags are typically intended to be added side by side. They require horizontal and vertical spacing between each other. You can use flexbox utilities to manage the horizontal space (default value is obtained thanks to `.column-gap-xs`). Vertical space is automatically created by the extended touch target heights. - -
      • -
      • -
      • -
      • -
      • -
      • + +
      • +
      • +
      • +
      • +
      • +
    `} /> From df6076e91e657605693706c9e316d53636ca383c Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Wed, 24 Sep 2025 16:16:47 +0200 Subject: [PATCH 72/78] suppress ":" --- site/src/content/docs/components/tags.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/site/src/content/docs/components/tags.mdx b/site/src/content/docs/components/tags.mdx index 72145df4b8..7385a257e3 100644 --- a/site/src/content/docs/components/tags.mdx +++ b/site/src/content/docs/components/tags.mdx @@ -206,22 +206,22 @@ If the functional meaning of the text is not sufficiently clear, add additional
    • - + Tested
    • - + Manually tested
    • - + Not tested
    • - + Tested
    `} /> From 4a984822f7b4dc0cbe3d6d8c097dfae320f40694 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Wed, 1 Oct 2025 14:00:17 +0200 Subject: [PATCH 73/78] a11y fix --- site/src/content/docs/components/tags.mdx | 26 +++++++++++------------ 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/site/src/content/docs/components/tags.mdx b/site/src/content/docs/components/tags.mdx index 7385a257e3..51cf114621 100644 --- a/site/src/content/docs/components/tags.mdx +++ b/site/src/content/docs/components/tags.mdx @@ -61,7 +61,7 @@ For both types of tag, OUDS Web has a basic `.tag` class that sets up default st For accessibility reasons, a tag, like any other informative element, must either be a semantic element itself or be wrapped in an appropriate semantic HTML element. In the examples below, the tags appear as `
  • ` elements or inside of `

    ` and `

    ` elements. You may use any other semantic element that best fits the context. -When inserting tags into a list, wrap the list in a container (probably a `

      ` or `
        `), with an appropriate `aria-label` to describe the group of tags. +When inserting tags into a list, wrap the list in a semantic container (usually a `
          ` or `
            `). If the purpose of the tags is not clear enough (especially without visually context), an `aria-label` must be added to the container to explain the function of the tags. @@ -393,20 +393,20 @@ It can be removed on click, but you have to implement this behavior by yourself,
        `} /> @@ -420,20 +420,20 @@ To disable an input tag, just add the `disabled` attribute to the `.tag`.
    `} /> @@ -443,10 +443,10 @@ To disable an input tag, just add the `disabled` attribute to the `.tag`. Input tags are typically intended to be added side by side. They require horizontal and vertical spacing between each other. You can use flexbox utilities to manage the horizontal space (default value is obtained thanks to `.column-gap-xs`). Vertical space is automatically created by the extended touch target heights. -
    • -
    • -
    • -
    • -
    • -
    • +

    • +

    • +

    • +
    • +
    • +
    • `} /> From d94380fb26b351d55a1bd288fb1fe7ed428fe88b Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Wed, 1 Oct 2025 14:13:55 +0200 Subject: [PATCH 74/78] a11y fix + li --- site/src/content/docs/components/tags.mdx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/site/src/content/docs/components/tags.mdx b/site/src/content/docs/components/tags.mdx index 51cf114621..b2b085a5a4 100644 --- a/site/src/content/docs/components/tags.mdx +++ b/site/src/content/docs/components/tags.mdx @@ -443,10 +443,10 @@ To disable an input tag, just add the `disabled` attribute to the `.tag`. Input tags are typically intended to be added side by side. They require horizontal and vertical spacing between each other. You can use flexbox utilities to manage the horizontal space (default value is obtained thanks to `.column-gap-xs`). Vertical space is automatically created by the extended touch target heights. -
    • -
    • -
    • -
    • -
    • -
    • +
    • +
    • +
    • +
    • +
    • +
    • `} /> From 3671fee65395819d2704e80f5fb08c15adea00a2 Mon Sep 17 00:00:00 2001 From: Maxime Lardenois Date: Thu, 2 Oct 2025 15:59:48 +0200 Subject: [PATCH 75/78] use tag in migration on chips Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- site/src/content/docs/migrations/migration.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/content/docs/migrations/migration.mdx b/site/src/content/docs/migrations/migration.mdx index bceb6f1232..c4e130f6e9 100644 --- a/site/src/content/docs/migrations/migration.mdx +++ b/site/src/content/docs/migrations/migration.mdx @@ -24,7 +24,7 @@ toc: true #### Chips -- New Chips components have been implemented. See more in our [Chips page]([[docsref:/components/chips]]). +- New Chips components have been implemented. See more in our [Chips page]([[docsref:/components/chips]]). #### Link From 1d4a00dfd851024e2226f97aed0d8ff483f4e8d5 Mon Sep 17 00:00:00 2001 From: Maxime Lardenois Date: Thu, 2 Oct 2025 16:00:12 +0200 Subject: [PATCH 76/78] fix typo Co-authored-by: Vincent Prothais --- site/src/content/docs/components/tags.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/content/docs/components/tags.mdx b/site/src/content/docs/components/tags.mdx index b2b085a5a4..80e69305ed 100644 --- a/site/src/content/docs/components/tags.mdx +++ b/site/src/content/docs/components/tags.mdx @@ -61,7 +61,7 @@ For both types of tag, OUDS Web has a basic `.tag` class that sets up default st For accessibility reasons, a tag, like any other informative element, must either be a semantic element itself or be wrapped in an appropriate semantic HTML element. In the examples below, the tags appear as `
  • ` elements or inside of `

    ` and `

    ` elements. You may use any other semantic element that best fits the context. -When inserting tags into a list, wrap the list in a semantic container (usually a `

      ` or `
        `). If the purpose of the tags is not clear enough (especially without visually context), an `aria-label` must be added to the container to explain the function of the tags. +When inserting tags into a list, wrap the list in a semantic container (usually a `
          ` or `
            `). If the purpose of the tags is not clear enough (especially without visual context), an `aria-label` must be added to the container to explain the function of the tags. From 3e7ceed8a314dee9a8b6d128b7b2a0e760715b82 Mon Sep 17 00:00:00 2001 From: Maxime Lardenois Date: Thu, 2 Oct 2025 16:17:11 +0200 Subject: [PATCH 77/78] reword tag color callout --- site/src/content/docs/components/tags.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/content/docs/components/tags.mdx b/site/src/content/docs/components/tags.mdx index 80e69305ed..a8287da26a 100644 --- a/site/src/content/docs/components/tags.mdx +++ b/site/src/content/docs/components/tags.mdx @@ -74,7 +74,7 @@ When inserting tags into a list, wrap the list in a semantic container (usually OUDS Web [color and background utilities]([[docsref:/helpers/color-background]]) can be applied to display colored tag variants. Colors are classified in two hierarchies, emphasized (for key tags) or muted (for secondary tags), and each color has its own semantic purpose. Please follow the tag design guidelines to choose the right color for the right usage. -Keep in mind that color should not be the only way to convey information. If the color has strong meaning, reflect it in the tag's text or add additional text with the class `.visually-hidden`. +Keep in mind that color should not be the only way to convey information. If the color has strong meaning, reflect it in the tag's text and if necessary add additional text with the class `.visually-hidden`. From 85023378745e176e387e5e2989e390bfee34876d Mon Sep 17 00:00:00 2001 From: Maxime Lardenois Date: Fri, 3 Oct 2025 11:23:56 +0200 Subject: [PATCH 78/78] feat: improve a11y documentation --- site/src/content/docs/components/tags.mdx | 23 ++++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/site/src/content/docs/components/tags.mdx b/site/src/content/docs/components/tags.mdx index a8287da26a..3eb43055a7 100644 --- a/site/src/content/docs/components/tags.mdx +++ b/site/src/content/docs/components/tags.mdx @@ -51,17 +51,26 @@ For both types of tag, OUDS Web has a basic `.tag` class that sets up default st Tag

            ` } /> -Input tag` +Input tag` } /> + +### Accessibility + +For accessibility reasons, a tag, like any other informative element, must either be a semantic element itself or be wrapped in an appropriate semantic HTML element. In the examples below, the tags appear as `
          1. ` elements or inside of `

            ` and `

            ` elements. You may use any other semantic element that best fits the context. + +Visually impaired and blind users will lack the visual context that permits to understand the tags purpose on the page if tags' labels are not self-explanatory. Thus it's mandatory to add textual information to explain what it represents, especially if the tags are in a list. + +*For tags lists: add a semantically informative text to describe the tags' list purpose* if possible, otherwise an `aria-label` on the containing `ul` must be added. + +Several examples are provided below but they will need to be adapted for actual use cases. + ## Tag ### Overview -For accessibility reasons, a tag, like any other informative element, must either be a semantic element itself or be wrapped in an appropriate semantic HTML element. In the examples below, the tags appear as `

          2. ` elements or inside of `

            ` and `

            ` elements. You may use any other semantic element that best fits the context. - -When inserting tags into a list, wrap the list in a semantic container (usually a `

              ` or `
                `). If the purpose of the tags is not clear enough (especially without visual context), an `aria-label` must be added to the container to explain the function of the tags. +Tags lists must be wrapped in a semantic container (usually a `
                  ` or `
                    `). *If possible, display a semantically informative text to describe the tags' list purpose*, otherwise an `aria-label` must be added to the container to explain the function of the tags, [more information here](#accessibility). @@ -387,7 +396,11 @@ Input tags are interactive and may be associated to an input field to be added d It can be removed on click, but you have to implement this behavior by yourself, with some JavaScript specific to your project. - For accessibility reasons, a list of input tags should be wrapped in a container with an appropriate `aria-label` to describe the group of input tags. Each input tag should contain a `.visually-hidden` text to indicate the action that will be performed when the tag is clicked. +Input tags lists must be wrapped in a semantic container (usually a `
                      ` or `
                        `). *If possible, display a semantically informative text to describe the tags' list purpose*, otherwise an `aria-label` must be added to the container to explain the function of the tags, [more information here](#accessibility). + + + +Each input tag should contain a `.visually-hidden` text *after the button text* to indicate the action that will be performed when the tag is clicked.