Skip to content

Commit 01a9d71

Browse files
booc0mtacobooc0mtaco
authored
fix(Button): align disabled treatment to latest design (#1931)
- disabled buttons use proper rank treatment - size of icon-only variants make perfect circles - change to used icon for example icon stories (using `circle`) - update snapshots - fix for critical secondary background color to use proper no-emphasis token - implement neutral button
1 parent c6c7e30 commit 01a9d71

File tree

5 files changed

+147
-20
lines changed

5 files changed

+147
-20
lines changed

‎src/components/Button/Button-v2.module.css

+84-5
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,11 @@
2222
justify-content: center;
2323

2424
width: 100%;
25+
26+
.button--sm & {
27+
/* Offset to better align text in small button */
28+
transform: translateY(-1px);
29+
}
2530
}
2631

2732
.button__text.button--is-loading {
@@ -70,6 +75,7 @@
7075
min-width: 3rem;
7176
max-width: 12rem;
7277
max-height: 1.5rem;
78+
7379
}
7480

7581
.button--full-width {
@@ -78,6 +84,7 @@
7884

7985
/**
8086
* Anatomy and iconLayout (w/ size)
87+
* lg=40, md=32, sm=24 when layout is icon-only
8188
*/
8289
.button--layout-icon-only {
8390
min-width: unset;
@@ -93,14 +100,17 @@
93100

94101
.button--lg.button--layout-icon-only {
95102
padding: 0.5rem;
103+
width: 2.5rem;
96104
}
97105

98106
.button--md.button--layout-icon-only {
99-
padding: 0.5rem
107+
padding: 0.5rem;
108+
width: 2rem;
100109
}
101110

102111
.button--sm.button--layout-icon-only {
103112
padding: 0.25rem;
113+
width: 1.5rem;
104114
}
105115

106116
.button:focus-visible {
@@ -116,6 +126,7 @@
116126

117127
/**
118128
* Rank & Emphasis
129+
* TODO-AH: nest the states under the relevant variants/ranks
119130
*/
120131
.button--primary.button--variant-default {
121132
color: var(--eds-theme-color-text-utility-inverse);
@@ -151,14 +162,62 @@
151162
.button--secondary.button--variant-critical {
152163
color: var(--eds-theme-color-background-utility-critical-high-emphasis);
153164
border-color: currentColor;
154-
background-color: var(--eds-theme-color-background-utility-inverse-high-emphasis);
165+
background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis)
155166
}
156167

157168
.button--tertiary.button--variant-critical {
158169
color: var(--eds-theme-color-background-utility-critical-high-emphasis);
159170
border-color: var(--eds-theme-color-background-utility-inverse-high-emphasis);
160171
}
161172

173+
.button--primary.button--variant-neutral {
174+
color: var(--eds-theme-color-text-utility-inverse);
175+
border-color: var(--eds-theme-color-background-utility-default-medium-emphasis);
176+
background-color: var(--eds-theme-color-background-utility-default-medium-emphasis);
177+
178+
&:hover {
179+
border-color: var(--eds-theme-color-background-utility-default-medium-emphasis-hover);
180+
background-color: var(--eds-theme-color-background-utility-default-medium-emphasis-hover);
181+
}
182+
183+
&:active {
184+
border-color: var(--eds-theme-color-background-utility-default-medium-emphasis-active);
185+
background-color: var(--eds-theme-color-background-utility-default-medium-emphasis-active);
186+
}
187+
}
188+
189+
.button--secondary.button--variant-neutral {
190+
color: var(--eds-theme-color-text-utility-default-secondary);
191+
border-color: currentColor;
192+
background-color: var(--eds-theme-color-background-utility-default-no-emphasis);
193+
194+
&:hover {
195+
border-color: var(--eds-theme-color-border-utility-default-medium-emphasis-hover);
196+
background-color: var(--eds-theme-color-background-utility-default-no-emphasis-hover);
197+
}
198+
199+
&:active {
200+
border-color: var(--eds-theme-color-border-utility-default-medium-emphasis-active);
201+
background-color: var(--eds-theme-color-background-utility-default-no-emphasis-active);
202+
}
203+
}
204+
205+
.button--tertiary.button--variant-neutral {
206+
color: var(--eds-theme-color-text-utility-default-secondary);
207+
border-color: transparent;
208+
background-color: var(--eds-theme-color-background-utility-default-no-emphasis);
209+
210+
&:hover {
211+
border-color: var(--eds-theme-color-background-utility-default-no-emphasis-hover);
212+
background-color: var(--eds-theme-color-background-utility-default-no-emphasis-hover);
213+
}
214+
215+
&:active {
216+
border-color: var(--eds-theme-color-background-utility-default-no-emphasis-active);
217+
background-color: var(--eds-theme-color-background-utility-default-no-emphasis-active);
218+
}
219+
}
220+
162221
/**
163222
* Inverse
164223
*/
@@ -185,23 +244,43 @@
185244
* Disabled
186245
*/
187246

188-
.button--variant-default.button--disabled,
189-
.button--variant-critical.button--disabled {
247+
.button--primary.button--variant-default.button--disabled,
248+
.button--primary.button--variant-critical.button--disabled,
249+
.button--primary.button--variant-neutral.button--disabled {
190250
color: var(--eds-theme-color-text-utility-disabled-primary);
191251
border-color: var(--eds-theme-color-background-utility-disabled-medium-emphasis);
192252
background-color: var(--eds-theme-color-background-utility-disabled-medium-emphasis);
193253

194254
pointer-events: none;
195255
}
196256

197-
.button--variant-inverse.button--disabled {
257+
.button--primary.button--variant-inverse.button--disabled {
198258
color: var(--eds-theme-color-text-utility-inverse-disabled);
199259
border-color: var(--eds-theme-color-background-utility-inverse-disabled);
200260
background-color: var(--eds-theme-color-background-utility-inverse-disabled);
201261

202262
pointer-events: none;
203263
}
204264

265+
.button--secondary.button--variant-default.button--disabled,
266+
.button--secondary.button--variant-critical.button--disabled,
267+
.button--secondary.button--variant-neutral.button--disabled {
268+
color: var(--eds-theme-color-text-utility-disabled-primary);
269+
border-color: var(--eds-theme-color-border-disabled);
270+
background-color: var(--eds-theme-color-background-utility-default-no-emphasis);
271+
272+
pointer-events: none;
273+
}
274+
275+
.button--tertiary.button--variant-default.button--disabled,
276+
.button--tertiary.button--variant-critical.button--disabled,
277+
.button--tertiary.button--variant-neutral.button--disabled {
278+
color: var(--eds-theme-color-text-utility-disabled-primary);
279+
background-color: var(--eds-theme-color-background-utility-default-no-emphasis);
280+
281+
pointer-events: none;
282+
}
283+
205284
/**
206285
* States
207286
*/

‎src/components/Button/Button-v2.stories.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,17 @@ export const CriticalRanks: StoryObj<Args> = {
9595
render: DefaultRanks.render,
9696
};
9797

98+
/**
99+
* There is also a neutral variant, to combine into other components, or provide a muted appearance.
100+
*/
101+
export const NeutralRanks: StoryObj<Args> = {
102+
args: {
103+
...DefaultRanks.args,
104+
variant: 'neutral',
105+
},
106+
render: DefaultRanks.render,
107+
};
108+
98109
/**
99110
* Each rank also includes an inverse variant, for use on dark backgrounds.
100111
*/

‎src/components/Button/Button-v2.test.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import React from 'react';
66
import { Button } from './Button-v2';
77
import * as stories from './Button-v2.stories';
88

9-
describe('<Button />', () => {
9+
describe('<Button /> (v2)', () => {
1010
generateSnapshots(stories as StoryFile);
1111

1212
it('renders the text in the button', () => {

‎src/components/Button/Button-v2.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export type ButtonV2Props<ExtendedElement = unknown> =
5959
*
6060
* **Default is `"default"`**.
6161
*/
62-
variant?: 'default' | 'critical' | 'inverse';
62+
variant?: 'default' | 'neutral' | 'critical' | 'inverse';
6363

6464
/**
6565
* Whether the width of the button is set to the full layout.

‎src/components/Button/__snapshots__/Button-v2.test.tsx.snap

+50-13
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`<Button /> CriticalRanks story renders snapshot 1`] = `
3+
exports[`<Button /> (v2) CriticalRanks story renders snapshot 1`] = `
44
<div
55
class="flex gap-1"
66
>
@@ -37,7 +37,7 @@ exports[`<Button /> CriticalRanks story renders snapshot 1`] = `
3737
</div>
3838
`;
3939

40-
exports[`<Button /> Default story renders snapshot 1`] = `
40+
exports[`<Button /> (v2) Default story renders snapshot 1`] = `
4141
<button
4242
class="button button--layout-none button--primary button--lg button--variant-default"
4343
type="button"
@@ -50,7 +50,7 @@ exports[`<Button /> Default story renders snapshot 1`] = `
5050
</button>
5151
`;
5252

53-
exports[`<Button /> DefaultRanks story renders snapshot 1`] = `
53+
exports[`<Button /> (v2) DefaultRanks story renders snapshot 1`] = `
5454
<div
5555
class="flex gap-1"
5656
>
@@ -87,7 +87,7 @@ exports[`<Button /> DefaultRanks story renders snapshot 1`] = `
8787
</div>
8888
`;
8989

90-
exports[`<Button /> Disabled story renders snapshot 1`] = `
90+
exports[`<Button /> (v2) Disabled story renders snapshot 1`] = `
9191
<div
9292
class="flex gap-1"
9393
>
@@ -127,7 +127,7 @@ exports[`<Button /> Disabled story renders snapshot 1`] = `
127127
</div>
128128
`;
129129

130-
exports[`<Button /> FullWidths story renders snapshot 1`] = `
130+
exports[`<Button /> (v2) FullWidths story renders snapshot 1`] = `
131131
<div
132132
class="flex items-center gap-1"
133133
>
@@ -164,7 +164,7 @@ exports[`<Button /> FullWidths story renders snapshot 1`] = `
164164
</div>
165165
`;
166166

167-
exports[`<Button /> IconLayouts story renders snapshot 1`] = `
167+
exports[`<Button /> (v2) IconLayouts story renders snapshot 1`] = `
168168
<div
169169
class="flex items-center gap-1"
170170
>
@@ -243,7 +243,7 @@ exports[`<Button /> IconLayouts story renders snapshot 1`] = `
243243
</div>
244244
`;
245245

246-
exports[`<Button /> InverseRanks story renders snapshot 1`] = `
246+
exports[`<Button /> (v2) InverseRanks story renders snapshot 1`] = `
247247
<div
248248
class="bg-[var(--eds-color-blue-850)] p-1"
249249
>
@@ -284,7 +284,7 @@ exports[`<Button /> InverseRanks story renders snapshot 1`] = `
284284
</div>
285285
`;
286286

287-
exports[`<Button /> LoadingStates story renders snapshot 1`] = `
287+
exports[`<Button /> (v2) LoadingStates story renders snapshot 1`] = `
288288
<div
289289
class="flex items-center gap-1"
290290
>
@@ -465,7 +465,44 @@ exports[`<Button /> LoadingStates story renders snapshot 1`] = `
465465
</div>
466466
`;
467467

468-
exports[`<Button /> Sizes story renders snapshot 1`] = `
468+
exports[`<Button /> (v2) NeutralRanks story renders snapshot 1`] = `
469+
<div
470+
class="flex gap-1"
471+
>
472+
<button
473+
class="button button--layout-none button--primary button--lg button--variant-neutral"
474+
type="button"
475+
>
476+
<span
477+
class="button__text"
478+
>
479+
Primary
480+
</span>
481+
</button>
482+
<button
483+
class="button button--layout-none button--secondary button--lg button--variant-neutral"
484+
type="button"
485+
>
486+
<span
487+
class="button__text"
488+
>
489+
Secondary
490+
</span>
491+
</button>
492+
<button
493+
class="button button--layout-none button--tertiary button--lg button--variant-neutral"
494+
type="button"
495+
>
496+
<span
497+
class="button__text"
498+
>
499+
Tertiary
500+
</span>
501+
</button>
502+
</div>
503+
`;
504+
505+
exports[`<Button /> (v2) Sizes story renders snapshot 1`] = `
469506
<div
470507
class="flex items-center gap-1"
471508
>
@@ -502,7 +539,7 @@ exports[`<Button /> Sizes story renders snapshot 1`] = `
502539
</div>
503540
`;
504541

505-
exports[`<Button /> TertiaryStandalone story renders snapshot 1`] = `
542+
exports[`<Button /> (v2) TertiaryStandalone story renders snapshot 1`] = `
506543
<button
507544
class="button button--context-standalone button--layout-none button--tertiary button--lg button--variant-default"
508545
type="button"
@@ -515,7 +552,7 @@ exports[`<Button /> TertiaryStandalone story renders snapshot 1`] = `
515552
</button>
516553
`;
517554

518-
exports[`<Button /> UsingExtendedLink story renders snapshot 1`] = `
555+
exports[`<Button /> (v2) UsingExtendedLink story renders snapshot 1`] = `
519556
<div>
520557
Lorem ipsum dolor sit amet,
521558
@@ -535,7 +572,7 @@ exports[`<Button /> UsingExtendedLink story renders snapshot 1`] = `
535572
</div>
536573
`;
537574

538-
exports[`<Button /> passes class names down properly 1`] = `
575+
exports[`<Button /> (v2) passes class names down properly 1`] = `
539576
<button
540577
class="button button--layout-none button--primary button--lg button--variant-default exampleClassName"
541578
data-testid="example-class-name"
@@ -549,7 +586,7 @@ exports[`<Button /> passes class names down properly 1`] = `
549586
</button>
550587
`;
551588

552-
exports[`<Button /> passes test ids down properly 1`] = `
589+
exports[`<Button /> (v2) passes test ids down properly 1`] = `
553590
<button
554591
class="button button--layout-none button--primary button--lg button--variant-default"
555592
data-testid="example-test-id"

0 commit comments

Comments
 (0)