Skip to content

[OUDS] [Component update] Update switch item to v1.4.0 #3192

@pylapp

Description

@pylapp

Description

Verbatims of @TonyAntonyHello

The Switch item has been split into two boolean variants:
→ Error = True/False
→ Selected = True/False

The divider color is now functional in the Error state — it changes dynamically according to the component status.

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 (v2.1.0).

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.

The “Read only” state has been updated to replace disabled control items with the Tag → Text only → Mutedcomponent:
→ Positive with label “Selected” if selected = True
→ Negative with label “Unselected” if selected = False

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

Notes

Implement before new tokens library: #3190

Ressources

See internal Figma

Metadata

Metadata

Assignees

No one assigned

    Projects

    Status

    Triage

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions