Refactor components and apply contextual tokens

[RoaldBoerema]

Actions

Button (ready to test in Figma)

• [Contextual Tokens] Refactoring Button components in Figma #1716 | Figma
• Refactor component in code | Storybook

Button Bar

• [Contextual Tokens] Refactoring Button bar in Figma #1715 | Figma
• Refactor component in code | Storybook

Menu

• [Contextual Tokens] Refactoring menu in Figma #1743 | Figma
• Create a folder underneath actions which is called 'menu' #1888
• Refactor menu in code

Toggle Button

• [Contextual Tokens] Refactoring Toggle button in Figma #1718 | Figma
• Finetune toggle button #1876
• Refactor component in code | Storybook

Toggle Group

• [Contextual Tokens] Refactoring Toggle Group in Figma #1719 | Figma
• Finetune toggle group in Figma #1877
• Refactor component in code | Storybook

---

Feedback & Status

Badge (Ready to test in Figma)

• [Contextual Tokens] Refactoring Badge in Figma #1720 | Figma
• [Contextual Tokens] Refactoring badge in code #1751 | Storybook

Inline Message (Ready to test)

• [Contextual Tokens] Refactoring Inline Message in Figma #1721 | Figma
• [Contextual Tokens] Refactoring inline message in code #1752 | Storybook

Progress bar

• [Contextual Tokens] Refactoring progress bar in Figma #1722 | Figma
• [Contextual Tokens] Refactoring progress bar in code #1753 | Storybook

Skeleton

• [Contextual Tokens] Refactoring skeleton in code #1754 | Storybook

Spinner

• [Contextual Tokens] Refactoring spinner in Figma #1723 | Figma
• [Contextual Tokens] Refactoring spinner in code #1755 | Storybook

Tag

• [Contextual Tokens] Refactoring Tag in Figma #1724 | Figma
• place border in the inside (instead of the outside) of the tag in Figma and fix the paddings #1879
• Refactor component in code | Storybook

Tag list

• Refactor component in Figma | Figma
• [Contextual Tokens] Refactoring tag/tag list in code #1756 | Storybook

---

Form

Checkbox (make available to test in figma for first batch)

• Refactor component in Figma | Figma
• Refactor component in code | Storybook
• finetuning checkbox, checkbox group and radio group in Figma #1880
• Create a folder for checkbox in storybook where we show checkbox and checkboxGroup #1885

Checkbox Group (make available to test in figma for first batch)

• Refactor component in Figma | Figma
• Refactor component in code | Storybook
• finetuning checkbox, checkbox group and radio group in Figma #1880
• Can we create a folder for checkbox in storybook where we show checkbox and checkbox list? (same as figma and documentation website)

Combobox

• [Contextual Tokens] Refactoring combo box in Figma #1726 | Figma
• Refactor component in code | Storybook

Editor

• Hide editor on Storybook #1886

Examples

• Create example category in Storybook #1887

Form

• Refactor component in code | Storybook

Form Field

• [Contextual Tokens] Finetune base components for labels, hints and validation text #1727
• [Contextual Tokens] Refactoring form field in code #1758 | Storybook

Number Field

• Place new number field component in figma file

Radio group (make available to test in figma for first batch)

• [Contextual Tokens] Refactoring radio in Figma #1728 | Figma
• finetuning checkbox, checkbox group and radio group in Figma #1880
• [Contextual Tokens] Refactoring radio (group) in code #1759 Storybook

Searchfield

• [Contextual Tokens] Refactoring search field in Figma #1729 | Figma
• What has to be done here? I can remember there was something with a clear button, discuss during refinement
• [Contextual Tokens] Refactoring search field in code #1760 | Storybook

Select

• [Contextual Tokens] Refactoring select in Figma #1730 | Figma
• In figma the thumbnail doesn't load in the library, you can drag and drop it in your file but let's see if we can fix it
• right now the component in figma sais 'simple prototype' do I need to create an issue for the extended version, do we need that?
• [Contextual Tokens] Finetune select component in Figma #1914
• [Contextual Tokens] Refactoring select in code #1761 | Storybook

Switch

• [Contextual Tokens] Refactoring switch in Figma #1731 | Figma
• [Contextual Tokens] Refactoring switch in code #1762 | Storybook

Text area

• [Contextual Tokens] Refactoring text area in Figma #1732 | Figma
• [Contextual Tokens] Refactoring text area in code #1763 | Development

Text field

• [Contextual Tokens] Refactoring text field in Figma #1733 | Figma
• Thumbnail doesn't load in Figma library
• [Contextual Tokens] Refactoring text field in code #1764 | Storybook

---

Layout

Accordion

• [Contextual Tokens] Refactoring accordion in Figma #1734 | Figma
• [Contextual Tokens] Refactoring accordion in code #1765 | Storybook

Card

• [Contextual Tokens] Refactoring card in Figma #1735 | Figma
• [Contextual Tokens] Refactor card in code  #1870 | Storybook

Panel

• [Contextual Tokens] Refactoring panel in Figma #1736 | Figma
• [Contextual tokens] Refactor panel in code #1871 | Storybook

---

Media

Avatar

• [Contextual Tokens] Refactoring avatar in Figma #1737 | Figma
• [Contextual Tokens] Refactor avatar in code #1872 | Storybook

Icon

• Refactor icon in figma | Figma
• Refactor icon in code | Storybook

---

Navigation

Breadcrumbs

• [Contextual Tokens] Refactoring breadcrumbs in Figma #1739 | Figma
• Refactor breadcrumbs in code | Storybook

Paginator

• [Contextual Tokens] Refactoring paginator in Figma #1740 | Figma
• Clean up Figma file (only show current paginator, put new properties that arn't released in another file
• Refactor paginator | Storybook

Tabs

• [Contextual Tokens] Refactoring tabs in Figma #1801 | Figma
• Clean up Figma file
• [Contextual Tokens] Refactoring tabs in code #1802 | Storybook

Tree

• [Tree view] UI Design #1702 | Figma
• [Tree] Development #1703 | Storybook

---

Overlay

Dialog

• [Contextual Tokens] Refactoring dialog in Figma #1742 | Figma
• Add subtitle in Figma
• [Contextual Tokens] Refactor Dialog in code #1859 | Storybook

Drawer

• Out of scope in this feature

Popover

• [Contextual Tokens] Refactoring popover in Figma #1744 | Figma
• [Contextual Tokens] Refactoring popover and tooltip in code #1839 | Storybook

Tooltip

• [Contextual Tokens] Refactoring tooltip in Figma #1745 | Figma
• [Contextual Tokens] Refactoring popover and tooltip in code #1839 | Storybook

---

Utilities

List box

• Figma
• Development

Scrollbar

• Figma
• Development

---

Others

Grid

• [Contextual Tokens] Refactor Grid in Figma #1889

• [Contextual Tokens] Refactor grid in code #1890

• [Breadcrumbs] Label in breadcrumbs is truncated by default #1533

• select component doesn´t rescale #1701

Opacity tokens

• [Contextual Tokens] Light and dark in system.json moved to the themes but are still used #1873