Skip to content

Commit 8472044

Browse files
taohsutaohsu
committed
update
1 parent 3ff507d commit 8472044

9 files changed

Lines changed: 161 additions & 23 deletions

File tree

‎components/control/chip/filter_chip/figma/filter_chip_changelog.md‎

Whitespace-only changes.

‎components/control/chip/filter_chip/figma/filter_chip_overview.md‎

Whitespace-only changes.

‎components/control/chip/filter_chip/filter_chip_changelog.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
| Date | Number | Notes | Designer |
2+
|------|--------|-------|----------|
3+
| Nov 12, 2025 | 1.4.0 | • Label text with bold replaced by medium. | Anton Astafev |
4+
| Jul 21, 2025 | 1.3.0 | • The name of the family to which this component belongs is changing: Input → Control. As a result, the token naming convention is being updated. • Several design token updates: [Component tokens changelog 1.3.0](https://www.figma.com/design/Co2t6wHMf4GB9NJVGs2Hes/-OUDS-Core-Lib--Design-tokens?m=auto&node-id=9280-2568&t=HLVB4jOd35DWr8Bj-1) | Maxime Tonnerre |
5+
| Jul 2, 2025 | 1.2.0 | • Modification of the typographic alignment "Label text", the alignment is now centered. | Maxime Tonnerre |
6+
| Jun 13, 2025 | 1.1.0 | • Modification of the minimum height of the frame containing the component to increase the interactive area (48px). Component token: $ouds-input-chip-size-min-height-interactive-area • Modification of the semantic token corresponding to the inline padding used when displaying an icon. Component token: $ouds-input-chip-space-padding-inline-icon Semantic token: $ouds-space-padding-inline-sm • Modification of the typographic alignment of the "Content" frame, the alignment is now centered. | Maxime Tonnerre |
7+
| Apr 9, 2025 | 1.0.0 | • Component creation | Anton Astafev |

‎components/control/chip/filter_chip/filter_chip_overview.md‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
## Definition
2+
3+
A filter chip is a compact UI element used in a design system to represent a filter option that can be selected or deselected by the user. Filter chips allow users to refine content or data by applying one or more filters in a visually accessible and interactive way.
4+
5+
Purpose: Allows users to filter content by selecting or deselecting specific categories or attributes.
6+
Behavior: Can be toggled on/off to refine displayed results. Selected chips remain visually distinct to indicate active filters.
7+
8+
---
9+
10+
## Selected
11+
12+
**`True`** Visually distinct to indicate an active filter.
13+
Changes in color and includes a tick mark to signify selection.
14+
15+
**`False`** Maintains a neutral appearance, indicating an available filter option.
16+
17+
---
18+
19+
## Layouts
20+
21+
**`Text + icon`** Combines text with an icon to enhance clarity and recognition.
22+
Ideal when a visual cue helps reinforce the filter's meaning.
23+
24+
**`Text only`** Displays only text, offering a clean and minimalistic look.
25+
Best suited for category-based filters that do not require additional visual elements.
26+
27+
**`Icon only`** Uses only an icon, making it a compact option for limited space.
28+
Works well with universally recognized symbols, such as a heart for favorites or a checkmark for selection.
29+
30+
---
31+
32+
## States
33+
34+
**`Enabled`** The chip is active and available for interaction.
35+
It is displayed in its standard style without additional effects.
36+
37+
**`Hover`** The appearance of the chip changes when the cursor hovers over it.
38+
This includes a color change for the border and the chip's content.
39+
40+
**`Pressed`** The active state when the chip is being pressed.
41+
Accompanied by a color change in the content and border.
42+
43+
**`Disabled`** The chip is unavailable for interaction.
44+
It is visually represented with a muted color change in the content and border (reduced brightness and contrast).
45+
46+
**`Focus`** The state when the chip receives focus (e.g., during keyboard navigation).
47+
It features a triple contrasting border to indicate the active element.
48+
49+
**`Skeleton`** Displays a placeholder chip while the content is loading.
50+
It appears as a semi-transparent gray block without content.
51+
52+
---

‎components/control/chip/filter_chip_expand/figma/filter_chip_expand_changelog.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
| Date | Number | Notes | Designer |
2+
|------|--------|-------|----------|
3+
| Nov 12, 2025 | 1.4.0 | • Label text with bold replaced by medium. | Anton Astafev |
4+
| Jul 21, 2025 | 1.3.0 | • The name of the family to which this component belongs is changing: Input → Control. As a result, the token naming convention is being updated. • Several design token updates: [Component tokens changelog 1.3.0](https://www.figma.com/design/Co2t6wHMf4GB9NJVGs2Hes/-OUDS-Core-Lib--Design-tokens?m=auto&node-id=9280-2568&t=HLVB4jOd35DWr8Bj-1) | Maxime Tonnerre |
5+
| Jul 2, 2025 | 1.2.0 | • Modification of the typographic alignment "Label text", the alignment is now centered. | Maxime Tonnerre |
6+
| Jun 13, 2025 | 1.1.0 | • Modification of the minimum height of the frame containing the component to increase the interactive area (48px). Component token: $ouds-input-chip-size-min-height-interactive-area • Modification of the semantic token corresponding to the inline padding used when displaying an icon. Component token: $ouds-input-chip-space-padding-inline-icon Semantic token: $ouds-space-padding-inline-sm • Modification of the typographic alignment of the "Content" frame, the alignment is now centered. | Maxime Tonnerre |
7+
| Apr 9, 2025 | 1.0.0 | • Component creation | Anton Astafev |

‎components/control/chip/filter_chip_expand/figma/filter_chip_expand_overview.md‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
## Definition
2+
3+
An Expand filter chip is a compact UI component that combines the functionality of a filter chip with a dropdown menu. It allows users to apply a filter from a predefined list of options without leaving the current context. When activated, it reveals a dropdown containing selectable values, and the chip updates to reflect the selected filter. This component is useful for filters with multiple or dynamic options, offering both clarity and space efficiency in the interface.
4+
5+
---
6+
7+
## Selection Status
8+
9+
**`Selected`** Visually differentiated to show an active filter. The chip changes color and displays a tick and counter to indicate it has been selected.
10+
11+
**`Unselected`** Maintains a neutral appearance, indicating an available filter option.
12+
13+
---
14+
15+
## Expanded
16+
17+
The "Expanded" state allows the filter chip to be dynamically edited via a dropdown component.
18+
19+
**`True`** When a Filter chip is in the "Expanded" state, it:
20+
- Displays a contextual dropdown containing a menu or controls to modify the associated filter values.
21+
- Remains visually attached to the source chip (often below or overlapping).
22+
- Allows the user to select multiple options or apply a new value.
23+
The component can remain in the "Expanded" state until a user action (click or key press) closes it. Chevron icon points up.
24+
25+
**`False`** The "Collapsed" state is the default or "resting" state of the filter chip, in which it simply displays a filter value, without any visible complex interaction. Chevron icon points down.
26+
27+
---
28+
29+
## States
30+
31+
**`Enabled`** The chip is active and available for interaction.
32+
It is displayed in its standard style without additional effects.
33+
34+
**`Hover`** The appearance of the chip changes when the cursor hovers over it.
35+
This includes a color change for the border and the chip's content.
36+
37+
**`Pressed`** The active state when the chip is being pressed.
38+
Accompanied by a color change in the content and border.
39+
40+
**`Disabled`** The chip is unavailable for interaction.
41+
It is visually represented with a muted color change in the content and border (reduced brightness and contrast).
42+
43+
**`Focus`** The state when the chip receives focus (e.g., during keyboard navigation).
44+
It features a triple contrasting border to indicate the active element.
45+
46+
**`Skeleton`** Displays a placeholder chip while the content is loading.
47+
It appears as a semi-transparent gray block without content.
48+
49+
---

‎components/control/chip/suggestion_chip/figma/suggestion_chip_changelog.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
| Date | Number | Notes | Designer |
2+
|------|--------|-------|----------|
3+
| Nov 12, 2025 | 1.4.0 | • Label text with bold replaced by medium. | Anton Astafev |
4+
| Jul 21, 2025 | 1.3.0 | • The name of the family to which this component belongs is changing: Input → Control. As a result, the token naming convention is being updated. • Several design token updates: [Component tokens changelog 1.3.0](https://www.figma.com/design/Co2t6wHMf4GB9NJVGs2Hes/-OUDS-Core-Lib--Design-tokens?m=auto&node-id=9280-2568&t=HLVB4jOd35DWr8Bj-1) | Maxime Tonnerre |
5+
| Jul 2, 2025 | 1.2.0 | • Modification of the typographic alignment "Label text", the alignment is now centered. | Maxime Tonnerre |
6+
| Jun 13, 2025 | 1.1.0 | • Modification of the minimum height of the frame containing the component to increase the interactive area (48px). Component token: $ouds-input-chip-size-min-height-interactive-area • Modification of the semantic token corresponding to the inline padding used when displaying an icon. Component token: $ouds-input-chip-space-padding-inline-icon Semantic token: $ouds-space-padding-inline-sm • Modification of the typographic alignment of the "Content" frame, the alignment is now centered. | Maxime Tonnerre |
7+
| Apr 9, 2025 | 1.0.0 | • Component creation | Anton Astafev |

‎components/control/chip/suggestion_chip/figma/suggestion_chip_overview.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
## Definition
2+
3+
A suggestion chip is a compact UI element used to present recommended or predictive options based on user input or context. Often found in search bars, forms, or messaging interfaces, suggestion chips help users quickly select from relevant suggestions. They are typically non-selected by default and can be tapped or clicked to apply the suggestion, streamlining user input and enhancing usability.
4+
5+
---
6+
7+
## Layouts
8+
9+
**`Text + icon`** Combines text with an icon to enhance clarity and recognition. Ideal when a visual cue helps reinforce the filter's meaning.
10+
11+
**`Text only`** Displays only text, offering a clean and minimalistic look. Best suited for category-based filters that do not require additional visual elements.
12+
13+
**`Icon only`** Uses only an icon, making it a compact option for limited space. Works well with universally recognized symbols, such as a heart for favorites or a checkmark for selection.
14+
15+
---
16+
17+
## States
18+
19+
**`Enabled`** The chip is active and available for interaction. It is displayed in its standard style without additional effects.
20+
21+
**`Hover`** The appearance of the chip changes when the cursor hovers over it. This includes a color change for the border and the chip's content.
22+
23+
**`Pressed`** The active state when the chip is being pressed. Accompanied by a color change in the content and border.
24+
25+
**`Disabled`** The chip is unavailable for interaction. It is visually represented with a muted color change in the content and border (reduced brightness and contrast).
26+
27+
**`Focus`** The state when the chip receives focus (e.g., during keyboard navigation). It features a triple contrasting border to indicate the active element.
28+
29+
**`Skeleton`** Displays a placeholder chip while the content is loading. It appears as a semi-transparent gray block without content.
30+
31+
---

‎components/control/switch/dsm/changelog.md‎

Lines changed: 8 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,8 @@
1-
# Changelog
2-
3-
| Date | Number | Notes | Designer |
4-
|------|--------|-------|----------|
5-
| Nov 7, 2025 | 1.5.0 | • A new Read-only variant has been added for the .Switch.Indicator component, supporting two boolean variants — Selected = True/False. This variant introduces two new color tokens: | Anton Astafev |
6-
| | | ‎ ‎ ‎ ‎ • ouds/color/action/read-only-primary | |
7-
| | | ‎ ‎ ‎ ‎ • ouds/color/action/read-only-secondary | |
8-
| | | • The new Read-only variant has been integrated into the Read-only variant of both the Switch and Switch Item components. | |
9-
| | | • We replaced the token in Error text container ouds-control-text-input-space-padding-block-top-helper-text with ouds-control-control-item-space-padding-block-top-error-text. | |
10-
| | | • "Helper text" is now called "Description". | |
11-
| Oct 20, 2025 | 1.4.0 | • The Switch item has been split into two boolean variants: → Error = True/False → Selected = True/False | Anton Astafev |
12-
| | | • The divider color is now functional in the Error state — it changes dynamically according to the component status. | |
13-
| | | • The icon in the Error state is fixed to .Component/alert/important; its color changes together with the divider depending on the component's status. → The new token $control-control-item-size-error-icon is used for the icon size. → The new token $control-text-input-space-padding-inline-error-icon is used for the error icon container. 🆕 Both tokens are now available in the latest release of the Token Library 2.1.0. | |
14-
| | | • Added Error text (from the Input component) — it follows the same padding-inline as control-item (16px) and uses → $control-text-input-space-padding-block-top-helper-text for block padding. By default, the Error text adapts automatically to match the component status: → Selected → displays the corresponding default error message for the selected state. → Unselected → displays the corresponding default error message for the unselected state. | |
15-
| | | • The "Read only" state will be updated with the goal of replacing the control items (in their "disabled" states), whether selected or unselected, with the component Tag → Text only → Muted: → Positive with a label text "Selected" if status selected=True → Negative with a label text "Unselected" if status selected=False | |
16-
| | | • Harmonisation of spacing across the control-item family We've unified sizing tokens across the entire control-item family (previously they were defined per component) to align spacing with other control items such as Text input. Replacement note: instead of the single token padding inset 12, use the following tokens: → ouds/_control/control-item/space/padding-inline → 16 → ouds/_control/control-item/space/padding-block → 12 Additionally, for the control-item family: → ouds/_control/control-item/space/column-gap → 12 → ouds/_control/control-item/size/max-width → 480 | |
17-
| Sep 19, 2025 | 1.3.0 | • In the initial settings, the 'Divider' variant is now hidden. | Maxime Tonnerre |
18-
| Jul 21, 2025 | 1.2.0 | • The name of the family to which this component belongs is changing: Input → Control. As a result, the token naming convention is being updated. | Maxime Tonnerre |
19-
| | | • Following the renaming of the 'Control' category, the name of the token sub-family 'control-item' is now becoming 'item'." | |
20-
| Jun 16, 2025 | 1.1.0 | • Modification of the minimum height of the frame containing the component "Switch" to increase the interactive area (48px). Component token: $ouds-input-switch-size-min-height-interactive-area | Maxime Tonnerre |
21-
| | | • Application of a border radius token to the "Focus" and "Focus inset" frames. The UI rendering of the focus state stroke of the component is now rounded like the rest of the component. Component token: $ouds-input-switch-border-radius-track | |
22-
| | | • Application of a border radius token to the "Content" frame. The UI rendering of the skeleton state stroke of the component is now rounded like the rest of the component. Component token: $ouds-input-switch-border-radius-track | |
23-
| Mar 6, 2025 | 1.0.0 | • Component creation | Jérôme Regnier |
1+
| Date | Number | Notes |
2+
|------|--------|-------|
3+
| Nov 7, 2025 | 1.5.0 | • A new Read-only variant has been added for the .Switch.Indicator component, supporting two boolean variants — Selected = True/False. This variant introduces two new color tokens:<br>&nbsp;&nbsp;&nbsp;&nbsp;• ouds/color/action/read-only-primary<br>&nbsp;&nbsp;&nbsp;&nbsp;• ouds/color/action/read-only-secondary<br>• The new Read-only variant has been integrated into the Read-only variant of both the Switch and Switch Item components.<br>• We replaced the token in Error text container ouds-control-text-input-space-padding-block-top-helper-text with ouds-control-control-item-space-padding-block-top-error-text.<br>• "Helper text" is now called "Description". |
4+
| Oct 20, 2025 | 1.4.0 | • The Switch item has been split into two boolean variants: Error = True/False, Selected = True/False<br>• The divider color is now functional in the Error state.<br>• The icon in the Error state is fixed to .Component/alert/important.<br>• Added Error text from the Input component.<br>• The "Read only" state updated with Tag replacements.<br>• Harmonisation of spacing across the control-item family. |
5+
| Sep 19, 2025 | 1.3.0 | • In the initial settings, the 'Divider' variant is now hidden. |
6+
| Jul 21, 2025 | 1.2.0 | • The name of the family to which this component belongs is changing: Input → Control.<br>• Following the renaming, the token sub-family 'control-item' is now becoming 'item'. |
7+
| Jun 16, 2025 | 1.1.0 | • Modification of the minimum height of the frame containing the component "Switch" to increase the interactive area (48px).<br>• Application of a border radius token to the "Focus" and "Focus inset" frames.<br>• Application of a border radius token to the "Content" frame. |
8+
| Mar 6, 2025 | 1.0.0 | • Component creation |

0 commit comments

Comments
 (0)