Skip to content

Component update - Update switch item to v1.4.0 #866

@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: #864

Ressources

See internal Figma

Motivation & Context

No response

Checklist for the Core Team

  • Tokens have been updated
  • Documentations have been updated
  • Unit tests have been updated
  • UI tests have been updated
  • Design System Toolbox has been updated
  • Backward compatibility has been checked, or broken API have been flagged as deprecated with a workaround

Metadata

Metadata

Assignees

Projects

Status

In Progress

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions