Skip to content

Commit 9e3a6c9

Browse files
aweellaweell
authored
Merge pull request #613 from dxc-technology/component-toggle
Toggle design review
2 parents bc2f67e + 0bcb3c1 commit 9e3a6c9

File tree

13 files changed

+58
-31
lines changed

13 files changed

+58
-31
lines changed

‎Halstack UI-Kit/UI_kit_Halstack_v3.12.0.xd‎

6.28 MB
Binary file not shown.

‎contributing/assets/components/toggle_images.xd‎

67.3 KB
Binary file not shown.

‎guidelines/components/toggle/README.md‎

Lines changed: 58 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ Toggles should be used in place of radio buttons whenever the options are:
1313

1414
## Variants
1515

16-
![Toggle component single and multiple variants](images/toggle_variants.png)
16+
![Toggle component single and multiple variants](images/toggle_group_variants.png)
1717

1818
_Toggle component single and multiple variants_
1919

@@ -24,17 +24,21 @@ The selection of the toggle group can be mutually exclusive (single variant) or
2424
Different states are defined in the life cycle of the component:
2525
**Unselected enabled**, **unselected hover**, **unselected focus**, **unselected active**, **unselected disabled**, **selected enabled**, **selected hover**, **selected focus**, **selected active** and **selected disabled**
2626

27-
![Toggle button states example](images/toggle_states.png)
27+
![Toggle button states example](images/toggle_group_states.png)
2828

2929
_Toggle button states example_
3030

3131

3232
## Anatomy
3333

34-
![Toggle component anatomy](images/toggle_anatomy.png)
34+
![Toggle component anatomy](images/toggle_group_anatomy.png)
3535

36-
1. Container
37-
2. Label/Icon
36+
1. Label
37+
2. Helper text
38+
3. Container
39+
4. Button
40+
5. Button icon
41+
6. Button label
3842

3943

4044
## Icon Usage
@@ -44,54 +48,77 @@ Inside the toggle button, it is possible to use icons to represent recognizable
4448

4549
## Design Specifications
4650

47-
![Toggle design specifications](images/toggle_specs.png)
51+
![Toggle design specifications](images/toggle_group_specs.png)
4852

4953
_Toggle design specifications_
54+
5055
### Color
5156

5257
| Component token | Element | Token | Value |
5358
| :---------------------------------- | :-------------------------- | :----------------------- | :---------- |
54-
| `unselectedBackgroundColor` | Container fill:enabled | `color-grey-200` | #e6e6e6 |
55-
| `unselectedHoverBackgroundColor` | Container fill:hover | `color-grey-300` | #cccccc |
56-
| `unselectedActiveBackgroundColor` | Container fill:active | `color-purple-700` | #5f249f |
57-
| `unselectedDisabledBackgroundColor` | Container fill:disabled | `color-grey-100` | #f2f2f2 |
58-
| `unselectedFontColor` | Label | `color-black` | #000000 |
59-
| `unselectedDisabledFontColor` | Label:disabled | `color-grey-500` | #999999 |
60-
| `selectedBackgroundColor` | Container fill:enabled | `color-purple-700` | #5f249f |
61-
| `selectedHoverBackgroundColor` | Container fill:hover | `color-purple-800` | #4b1c7d |
62-
| `selectedActiveBackgroundColor` | Container fill:active | `color-purple-900` | #321353 |
63-
| `selectedDisabledBackgroundColor` | Container fill:disabled | `color-purple-100` | #f2eafa |
64-
| `selectedFontColor` | Label | `color-white` | #ffffff |
65-
| `selectedDisabledFontColor` | Label:disabled | `color-purple-300` | #cbacec |
66-
| `focusColor` | Border:focus | `color-blue-600` | #0095ff |
59+
| `labelFontColor` | Label | `color-black` | #000000 |
60+
| `disabledLabelFontColor` | Label:disabled | `color-grey-500` | #999999 |
61+
| `helperTextFontColor` | Helper text | `color-black` | #000000 |
62+
| `disabledHelperTextFontColor` | Helper text:disabled | `color-grey-500` | #999999 |
63+
| `containerBackgroundColor` | Container | `color-grey-50` | #fafafa |
64+
| `containerBorderColor` | Container | `color-grey-500` | #999999 |
65+
| `unselectedBackgroundColor` | Button fill:enabled | `color-grey-200` | #e6e6e6 |
66+
| `unselectedHoverBackgroundColor` | Button fill:hover | `color-grey-300` | #cccccc |
67+
| `unselectedActiveBackgroundColor` | Button fill:active | `color-purple-700` | #5f249f |
68+
| `unselectedDisabledBackgroundColor` | Button fill:disabled | `color-grey-100` | #f2f2f2 |
69+
| `unselectedFontColor` | Button label | `color-black` | #000000 |
70+
| `unselectedDisabledFontColor` | Button label:disabled | `color-grey-500` | #999999 |
71+
| `selectedBackgroundColor` | Button fill:enabled | `color-purple-700` | #5f249f |
72+
| `selectedHoverBackgroundColor` | Button fill:hover | `color-purple-800` | #4b1c7d |
73+
| `selectedActiveBackgroundColor` | Button fill:active | `color-purple-900` | #321353 |
74+
| `selectedDisabledBackgroundColor` | Button fill:disabled | `color-purple-100` | #f2eafa |
75+
| `selectedFontColor` | Button label | `color-white` | #ffffff |
76+
| `selectedDisabledFontColor` | Button label:disabled | `color-purple-300` | #cbacec |
77+
| `focusColor` | Focus indicator | `color-blue-600` | #0095ff |
6778

6879
### Typography
6980

81+
82+
7083
| Component token | Element | Token | Value |
7184
| :---------------------------------- | :------------------- | :------------------------------ | :-------------------------- |
72-
| `fontFamily` | Label | `font-family` | 'Open Sans', sans-serif |
73-
| `fontSize` | Label | `font-scale-03` | 1rem / 16px |
74-
| `fontStyle` | Label | `font-style-normal` | normal |
75-
| `fontWeight` | Label | `font-weight-regular` | 400 |
85+
| `labelFontFamily` | Label | `font-family` | 'Open Sans', sans-serif |
86+
| `labelFontSize` | Label | `font-scale-02` | 0.875rem / 14px |
87+
| `labelFontStyle` | Label | `font-style-normal` | normal |
88+
| `labelFontWeight` | Label | `font-weight-semibold` | 600 |
89+
| `labelLineHeight` | Label | `font-leading-loose-01` | 1.75em |
90+
| `helperTextFontFamily` | Helper text | `font-family` | 'Open Sans', sans-serif |
91+
| `helperTextFontSize` | Helper text | `font-scale-01` | 0.75rem / 12px |
92+
| `helperTextFontStyle` | Helper text | `font-style-normal` | normal |
93+
| `helperTextFontWeight` | Helper text | `font-weight-regular` | 400 |
94+
| `helperTextLineHeight` | Helper text | `font-leading-normal` | 1.5em |
95+
| `optionLabelFontFamily` | Button label | `font-family` | 'Open Sans', sans-serif |
96+
| `optionLabelFontSize` | Button label | `font-scale-03` | 1rem / 16px |
97+
| `optionLabelFontStyle` | Button label | `font-style-normal` | normal |
98+
| `optionLabelFontWeight` | Button label | `font-weight-regular` | 400 |
7699

77100

78101
### Spacing
79102

80103
| Component token | Element | Token | Value |
81104
| :---------------------------------- | :------------------- | :------------------------------ | :-------------------------- |
82-
| `iconPaddingRight` | Icon | `spacing-03` | 0.5rem / 8px |
83-
| `iconPaddingLeft` | Icon | `spacing-03` | 0.5rem / 8px |
84-
| `labelPaddingLeft` | Label | `spacing-06` | 1.5rem / 24px |
85-
| `labelPaddingRight` | Label | `spacing-06` | 1.5rem / 24px |
86-
105+
| `iconPaddingRight` | Icon | `spacing-03` | 0.5rem / 8px |
106+
| `iconPaddingLeft` | Icon | `spacing-03` | 0.5rem / 8px |
107+
| `labelPaddingLeft` | Label (Label + icon) | `spacing-06` | 1.5rem / 24px |
108+
| `labelPaddingRight` | Label (Label + icon) | `spacing-06` | 1.5rem / 24px |
109+
| `iconMarginRight` | Icon (Label + icon) | `spacing-03` | 0.5rem / 8px |
110+
| `containerMarginTop` | Container | `spacing-02` | 0.25rem / 4px |
87111

88112
### Border
89113

90114
| Property | Element | Core token | Value |
91115
| :----------------------- | :--------------- | :------------------------- | :--------------- |
92-
| `border-width` | Container | `border-width-0` | 0 |
93-
| `border-style` | Container | `border-style-none` | none |
94-
| `border-radius` | Container | `border-radius-medium` | 0.25rem / 4px |
116+
| `border-width` | Button | `border-width-0` | 0 |
117+
| `border-style` | Button | `border-style-none` | none |
118+
| `border-radius` | Button | `border-radius-medium` | 0.25rem / 4px |
119+
| `border-width` | Container | `border-width-1` | 1px |
120+
| `border-style` | Container | `border-style-solid` | solid |
121+
| `border-radius` | Container | - | 0.375rem / 6px |
95122
| `border-width` | Focus border | `border-width-2` | 2 |
96123
| `border-style` | Focus border | `border-style-solid` | solid |
97124
| `border-radius` | Focus border | `border-radius-medium` | 0.25rem / 4px |

‎guidelines/components/toggle/images/toggle_anatomy.png‎

-11.8 KB
Binary file not shown.

‎guidelines/components/toggle/images/toggle_group_anatomy.png‎

16.5 KB
Loading

‎guidelines/components/toggle/images/toggle_group_specs.png‎

25.7 KB
Loading

‎guidelines/components/toggle/images/toggle_group_states.png‎

33.8 KB
Loading

‎guidelines/components/toggle/images/toggle_group_variants.png‎

18.6 KB
Loading

‎guidelines/components/toggle/images/toggle_specs.png‎

-14.4 KB
Binary file not shown.

‎guidelines/components/toggle/images/toggle_states.png‎

-33 KB
Binary file not shown.

0 commit comments

Comments
 (0)