Skip to content

Commit c0d4582

Browse files
adamkudrnaadamkudrna
committed
Improve the default theming of secondary and selected buttons
1 parent 60f86bb commit c0d4582

File tree

8 files changed

+172
-155
lines changed

8 files changed

+172
-155
lines changed

‎src/lib/components/ButtonGroup/README.mdx

Lines changed: 68 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,13 @@ See [API](#api) for all available options.
4343
- Use button group to group **related actions** that a user can take. Buttons
4444
should not be grouped just to save space on the screen.
4545

46+
- **Mixing multiple button priorities** and some other properties within a
47+
button group is [not allowed](#shared-properties). The priority can only be
48+
set for all buttons in the group at once.
49+
50+
- In most use cases, **secondary action color** is probably the best option for
51+
buttons in a group as it works good with the colors of the selected state.
52+
4653
- Use **short labels or icons** so the buttons can fit small screens.
4754

4855
- For toggling between on/off states, use rather the
@@ -58,11 +65,17 @@ See [API](#api) for all available options.
5865
### Shared Properties
5966

6067
You can set the following properties directly on ButtonGroup to be shared for
61-
all buttons inside the group: size, priority, disabled state, and block width.
68+
all buttons inside the group:
69+
70+
- `size`,
71+
- `priority`,
72+
- `disabled` state,
73+
- and `block` width.
74+
6275
These properties are then passed over to individual buttons. At the same time,
63-
they **cannot be overridden** on the buttons' level. While technically possible,
64-
from the design point of view it's undesirable to group buttons of totally
65-
different types or sizes.
76+
they **cannot be overridden** on the buttons' level. While (in theory)
77+
technically possible, from the design point of view it's undesirable to group
78+
buttons of totally different types or sizes.
6679

6780
## Priorities
6881

@@ -73,16 +86,19 @@ priorities of the [Button](/components/button) component:
7386
2. outline
7487
3. flat
7588

89+
👉 To avoid undesired combinations, the visual priority of the button group
90+
**cannot be overridden** on the Button level.
91+
7692
### Filled
7793

7894
The default, high-emphasis priority should be used for primary actions of your
7995
app.
8096

8197
<Playground>
8298
<ButtonGroup>
83-
<Button label="Week" />
84-
<Button label="Month" />
85-
<Button label="Year" />
99+
<Button color="secondary" label="Week" />
100+
<Button color="secondary" label="Month" />
101+
<Button color="secondary" label="Year" />
86102
</ButtonGroup>
87103
</Playground>
88104

@@ -93,9 +109,9 @@ in your app.
93109

94110
<Playground>
95111
<ButtonGroup priority="outline">
96-
<Button label="Week" />
97-
<Button label="Month" />
98-
<Button label="Year" />
112+
<Button color="secondary" label="Week" />
113+
<Button color="secondary" label="Month" />
114+
<Button color="secondary" label="Year" />
99115
</ButtonGroup>
100116
</Playground>
101117

@@ -106,9 +122,9 @@ the content.
106122

107123
<Playground>
108124
<ButtonGroup priority="flat">
109-
<Button label="Week" />
110-
<Button label="Month" />
111-
<Button label="Year" />
125+
<Button color="secondary" label="Week" />
126+
<Button color="secondary" label="Month" />
127+
<Button color="secondary" label="Year" />
112128
</ButtonGroup>
113129
</Playground>
114130

@@ -119,29 +135,29 @@ medium, and large.
119135

120136
<Playground>
121137
<ButtonGroup size="small">
122-
<Button label="Week" />
123-
<Button label="Month" />
124-
<Button label="Year" />
138+
<Button color="secondary" label="Week" />
139+
<Button color="secondary" label="Month" />
140+
<Button color="secondary" label="Year" />
125141
</ButtonGroup>
126142
<ButtonGroup>
127-
<Button label="Week" />
128-
<Button label="Month" />
129-
<Button label="Year" />
143+
<Button color="secondary" label="Week" />
144+
<Button color="secondary" label="Month" />
145+
<Button color="secondary" label="Year" />
130146
</ButtonGroup>
131147
<ButtonGroup size="large">
132-
<Button label="Week" />
133-
<Button label="Month" />
134-
<Button label="Year" />
148+
<Button color="secondary" label="Week" />
149+
<Button color="secondary" label="Month" />
150+
<Button color="secondary" label="Year" />
135151
</ButtonGroup>
136152
</Playground>
137153

138154
Block button groups span the full width of a parent:
139155

140156
<Playground>
141157
<ButtonGroup block>
142-
<Button label="Week" />
143-
<Button label="Month" />
144-
<Button label="Year" />
158+
<Button color="secondary" label="Week" />
159+
<Button color="secondary" label="Month" />
160+
<Button color="secondary" label="Year" />
145161
</ButtonGroup>
146162
</Playground>
147163

@@ -153,19 +169,19 @@ Disables all buttons inside the group.
153169

154170
<Playground>
155171
<ButtonGroup disabled>
156-
<Button label="Week" />
157-
<Button label="Month" />
158-
<Button label="Year" />
172+
<Button color="secondary" label="Week" />
173+
<Button color="secondary" label="Month" />
174+
<Button color="secondary" label="Year" />
159175
</ButtonGroup>
160176
<ButtonGroup priority="outline" disabled>
161-
<Button label="Week" />
162-
<Button label="Month" />
163-
<Button label="Year" />
177+
<Button color="secondary" label="Week" />
178+
<Button color="secondary" label="Month" />
179+
<Button color="secondary" label="Year" />
164180
</ButtonGroup>
165181
<ButtonGroup priority="flat" disabled>
166-
<Button label="Week" />
167-
<Button label="Month" />
168-
<Button label="Year" />
182+
<Button color="secondary" label="Week" />
183+
<Button color="secondary" label="Month" />
184+
<Button color="secondary" label="Year" />
169185
</ButtonGroup>
170186
</Playground>
171187

@@ -176,19 +192,19 @@ state of individual buttons can be indicated by showing an icon.
176192

177193
<Playground>
178194
<ButtonGroup>
179-
<Button label="Week" color="success" feedbackIcon={<Icon icon="success" />} />
180-
<Button label="Month" />
181-
<Button label="Year" />
195+
<Button color="success" label="Week" feedbackIcon={<Icon icon="success" />} />
196+
<Button color="secondary" label="Month" />
197+
<Button color="secondary" label="Year" />
182198
</ButtonGroup>
183199
<ButtonGroup priority="outline">
184-
<Button label="Week" color="success" feedbackIcon={<Icon icon="success" />} />
185-
<Button label="Month" />
186-
<Button label="Year" />
200+
<Button color="success" label="Week" feedbackIcon={<Icon icon="success" />} />
201+
<Button color="secondary" label="Month" />
202+
<Button color="secondary" label="Year" />
187203
</ButtonGroup>
188204
<ButtonGroup priority="flat">
189-
<Button label="Week" color="success" feedbackIcon={<Icon icon="success" />} />
190-
<Button label="Month" />
191-
<Button label="Year" />
205+
<Button color="success" label="Week" feedbackIcon={<Icon icon="success" />} />
206+
<Button color="secondary" label="Month" />
207+
<Button color="secondary" label="Year" />
192208
</ButtonGroup>
193209
</Playground>
194210

@@ -200,18 +216,18 @@ the desired item.
200216
<Playground>
201217
<ButtonGroup>
202218
<Button color="selected" label="Week" />
203-
<Button label="Month" />
204-
<Button label="Year" />
219+
<Button color="secondary" label="Month" />
220+
<Button color="secondary" label="Year" />
205221
</ButtonGroup>
206222
<ButtonGroup priority="outline">
207223
<Button color="selected" label="Week" />
208-
<Button label="Month" />
209-
<Button label="Year" />
224+
<Button color="secondary" label="Month" />
225+
<Button color="secondary" label="Year" />
210226
</ButtonGroup>
211227
<ButtonGroup priority="flat">
212228
<Button color="selected" label="Week" />
213-
<Button label="Month" />
214-
<Button label="Year" />
229+
<Button color="secondary" label="Month" />
230+
<Button color="secondary" label="Year" />
215231
</ButtonGroup>
216232
</Playground>
217233

@@ -224,9 +240,9 @@ and communicating the state of individual options.
224240
<>
225241
<span id="period-label">Period:</span>
226242
<ButtonGroup aria-labelledby="period-label">
227-
<Button label="Week" aria-pressed color="selected" />
228-
<Button label="Month" aria-pressed={false} />
229-
<Button label="Year" aria-pressed={false} />
243+
<Button color="selected" label="Week" aria-pressed />
244+
<Button color="secondary" label="Month" aria-pressed={false} />
245+
<Button color="secondary" label="Year" aria-pressed={false} />
230246
</ButtonGroup>
231247
</>
232248
</Playground>

‎src/lib/components/FormLayout/README.mdx

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -144,24 +144,31 @@ with CSS custom properties.
144144
<span id="label-width-options-label">Label width:</span>
145145
</ToolbarItem>
146146
<ToolbarItem>
147-
<ButtonGroup aria-labelledby="label-width-options-label">
147+
<ButtonGroup
148+
aria-labelledby="label-width-options-label"
149+
priority="outline"
150+
>
148151
<Button
149-
color={labelWidth === 'default' ? 'selected' : 'primary'}
152+
aria-pressed={labelWidth === 'default'}
153+
color={labelWidth === 'default' ? 'selected' : 'secondary'}
150154
label="default"
151155
onClick={() => setLabelWidth('default')}
152156
/>
153157
<Button
154-
color={labelWidth === 'auto' ? 'selected' : 'primary'}
158+
aria-pressed={labelWidth === 'auto'}
159+
color={labelWidth === 'auto' ? 'selected' : 'secondary'}
155160
label="auto"
156161
onClick={() => setLabelWidth('auto')}
157162
/>
158163
<Button
159-
color={labelWidth === 'limited' ? 'selected' : 'primary'}
164+
aria-pressed={labelWidth === 'limited'}
165+
color={labelWidth === 'limited' ? 'selected' : 'secondary'}
160166
label="limited"
161167
onClick={() => setLabelWidth('limited')}
162168
/>
163169
<Button
164-
color={labelWidth === 'custom' ? 'selected' : 'primary'}
170+
aria-pressed={labelWidth === 'custom'}
171+
color={labelWidth === 'custom' ? 'selected' : 'secondary'}
165172
label="custom"
166173
onClick={() => setLabelWidth('custom')}
167174
/>
@@ -351,14 +358,16 @@ This is a demo of all components supported by FormLayout.
351358
<div>
352359
<Toolbar>
353360
<ToolbarItem>
354-
<ButtonGroup>
361+
<ButtonGroup priority="outline">
355362
<Button
356-
color={fieldLayout === 'vertical' ? 'selected' : 'primary'}
363+
aria-pressed={fieldLayout === 'vertical'}
364+
color={fieldLayout === 'vertical' ? 'selected' : 'secondary'}
357365
label="Vertical layout"
358366
onClick={() => setFieldLayout('vertical')}
359367
/>
360368
<Button
361-
color={fieldLayout === 'horizontal' ? 'selected' : 'primary'}
369+
aria-pressed={fieldLayout === 'horizontal'}
370+
color={fieldLayout === 'horizontal' ? 'selected' : 'secondary'}
362371
label="Horizontal layout"
363372
onClick={() => setFieldLayout('horizontal')}
364373
/>

0 commit comments

Comments
 (0)