Skip to content

Commit 0ac4e01

Browse files
booc0mtacobooc0mtaco
committed
fix(Button): align disabled treatment to latest design
- 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 0ac4e01

File tree

5 files changed

+144
-20
lines changed

5 files changed

+144
-20
lines changed

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

Lines changed: 81 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,9 @@
7070
min-width: 3rem;
7171
max-width: 12rem;
7272
max-height: 1.5rem;
73+
74+
/* Offset to better align text in small button */
75+
transform: translateY(-1px);
7376
}
7477

7578
.button--full-width {
@@ -78,6 +81,7 @@
7881

7982
/**
8083
* Anatomy and iconLayout (w/ size)
84+
* lg=40, md=32, sm=24 when layout is icon-only
8185
*/
8286
.button--layout-icon-only {
8387
min-width: unset;
@@ -93,14 +97,17 @@
9397

9498
.button--lg.button--layout-icon-only {
9599
padding: 0.5rem;
100+
width: 2.5rem;
96101
}
97102

98103
.button--md.button--layout-icon-only {
99-
padding: 0.5rem
104+
padding: 0.5rem;
105+
width: 2rem;
100106
}
101107

102108
.button--sm.button--layout-icon-only {
103109
padding: 0.25rem;
110+
width: 1.5rem;
104111
}
105112

106113
.button:focus-visible {
@@ -116,6 +123,7 @@
116123

117124
/**
118125
* Rank & Emphasis
126+
* TODO-AH: nest the states under the relevant variants/ranks
119127
*/
120128
.button--primary.button--variant-default {
121129
color: var(--eds-theme-color-text-utility-inverse);
@@ -151,14 +159,62 @@
151159
.button--secondary.button--variant-critical {
152160
color: var(--eds-theme-color-background-utility-critical-high-emphasis);
153161
border-color: currentColor;
154-
background-color: var(--eds-theme-color-background-utility-inverse-high-emphasis);
162+
background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis)
155163
}
156164

157165
.button--tertiary.button--variant-critical {
158166
color: var(--eds-theme-color-background-utility-critical-high-emphasis);
159167
border-color: var(--eds-theme-color-background-utility-inverse-high-emphasis);
160168
}
161169

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

188-
.button--variant-default.button--disabled,
189-
.button--variant-critical.button--disabled {
244+
.button--primary.button--variant-default.button--disabled,
245+
.button--primary.button--variant-critical.button--disabled,
246+
.button--primary.button--variant-neutral.button--disabled {
190247
color: var(--eds-theme-color-text-utility-disabled-primary);
191248
border-color: var(--eds-theme-color-background-utility-disabled-medium-emphasis);
192249
background-color: var(--eds-theme-color-background-utility-disabled-medium-emphasis);
193250

194251
pointer-events: none;
195252
}
196253

197-
.button--variant-inverse.button--disabled {
254+
.button--primary.button--variant-inverse.button--disabled {
198255
color: var(--eds-theme-color-text-utility-inverse-disabled);
199256
border-color: var(--eds-theme-color-background-utility-inverse-disabled);
200257
background-color: var(--eds-theme-color-background-utility-inverse-disabled);
201258

202259
pointer-events: none;
203260
}
204261

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

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

Lines changed: 11 additions & 0 deletions
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 50 additions & 13 deletions
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)