Skip to content

Commit 4b2dbeb

Browse files
dbanksdesigndbanksdesign
authored
feat(button): add warning and destructive variations (#3133)
1 parent abb682c commit 4b2dbeb

File tree

10 files changed

+296
-7
lines changed

10 files changed

+296
-7
lines changed

‎.changeset/popular-plums-mate.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@aws-amplify/ui-react": minor
3+
"@aws-amplify/ui": minor
4+
---
5+
6+
feat(button): add `warning` and `destructive` variations to the React Button component

‎docs/src/data/test/__snapshots__/props-table.test.ts.snap

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -982,7 +982,7 @@ exports[`Props Table 1`] = `
982982
},
983983
\\"variation\\": {
984984
\\"name\\": \\"variation\\",
985-
\\"type\\": \\"'primary' | 'link' | 'menu'\\",
985+
\\"type\\": \\"| 'primary'\\\\n | 'link'\\\\n | 'menu'\\\\n | 'warning'\\\\n | 'destructive'\\",
986986
\\"description\\": \\"Changes the visual weight of the button.\\",
987987
\\"category\\": \\"ButtonProps\\",
988988
\\"isOptional\\": true
@@ -4432,7 +4432,7 @@ exports[`Props Table 1`] = `
44324432
},
44334433
\\"variation\\": {
44344434
\\"name\\": \\"variation\\",
4435-
\\"type\\": \\"'primary' | 'link' | 'menu'\\",
4435+
\\"type\\": \\"| 'primary'\\\\n | 'link'\\\\n | 'menu'\\\\n | 'warning'\\\\n | 'destructive'\\",
44364436
\\"description\\": \\"Changes the visual weight of the button.\\",
44374437
\\"category\\": \\"ButtonProps\\",
44384438
\\"isOptional\\": true
@@ -4715,7 +4715,7 @@ exports[`Props Table 1`] = `
47154715
},
47164716
\\"variation\\": {
47174717
\\"name\\": \\"variation\\",
4718-
\\"type\\": \\"'primary' | 'link' | 'menu'\\",
4718+
\\"type\\": \\"| 'primary'\\\\n | 'link'\\\\n | 'menu'\\\\n | 'warning'\\\\n | 'destructive'\\",
47194719
\\"description\\": \\"Changes the visual weight of the button.\\",
47204720
\\"category\\": \\"ButtonProps\\",
47214721
\\"isOptional\\": true
@@ -11420,7 +11420,7 @@ exports[`Props Table 1`] = `
1142011420
},
1142111421
\\"variation\\": {
1142211422
\\"name\\": \\"variation\\",
11423-
\\"type\\": \\"'primary' | 'link' | 'menu'\\",
11423+
\\"type\\": \\"| 'primary'\\\\n | 'link'\\\\n | 'menu'\\\\n | 'warning'\\\\n | 'destructive'\\",
1142411424
\\"description\\": \\"Changes the visual weight of the button.\\",
1142511425
\\"category\\": \\"ButtonProps\\",
1142611426
\\"isOptional\\": true
@@ -11724,7 +11724,7 @@ exports[`Props Table 1`] = `
1172411724
},
1172511725
\\"variation\\": {
1172611726
\\"name\\": \\"variation\\",
11727-
\\"type\\": \\"'primary' | 'link' | 'menu'\\",
11727+
\\"type\\": \\"| 'primary'\\\\n | 'link'\\\\n | 'menu'\\\\n | 'warning'\\\\n | 'destructive'\\",
1172811728
\\"description\\": \\"Changes the visual weight of the button.\\",
1172911729
\\"category\\": \\"ButtonProps\\",
1173011730
\\"isOptional\\": true

‎docs/src/pages/[platform]/components/button/demo.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,8 @@ const PropControls = (props) => {
4848
<option value="">Default</option>
4949
<option value="primary">Primary</option>
5050
<option value="link">Link</option>
51+
<option value="warning">Warning</option>
52+
<option value="destructive">Destructive</option>
5153
</SelectField>
5254

5355
<SelectField

‎docs/src/pages/[platform]/components/button/react.mdx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,13 +76,15 @@ Use the `size` prop to change the Button size. Available options are `small`, `l
7676

7777
### Variations
7878

79-
Use the `variation` prop to change the Button variation. Available options are `primary`, `link`, `menu` and none (default).
79+
Use the `variation` prop to change the Button variation. Available options are `primary`, `link`, `menu`, `warning`, `destructive` and none (default).
8080

8181
<Example>
8282
<View>
8383
<Button variation="primary">Primary</Button>
8484
<Button variation="link">Link</Button>
8585
<Button variation="menu">Menu</Button>
86+
<Button variation="warning">Warning</Button>
87+
<Button variation="destructive">Destructive</Button>
8688
<Button>Default</Button>
8789
</View>
8890

@@ -92,6 +94,8 @@ Use the `variation` prop to change the Button variation. Available options are `
9294
<Button variation="primary">Primary</Button>
9395
<Button variation="link">Link</Button>
9496
<Button variation="menu">Menu</Button>
97+
<Button variation="warning">Warning</Button>
98+
<Button variation="destructive">Destructive</Button>
9599
<Button>Default</Button>
96100
```
97101

‎packages/react/src/primitives/Button/__tests__/Button.test.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,29 @@ describe('Button test suite', () => {
1515
<Button variation="link" testId="link">
1616
Link
1717
</Button>
18+
<Button variation="menu" testId="menu">
19+
Menu
20+
</Button>
21+
<Button variation="warning" testId="warning">
22+
Warning
23+
</Button>
24+
<Button variation="destructive" testId="destructive">
25+
Destructive
26+
</Button>
1827
</div>
1928
);
2029

2130
const primary = await screen.findByTestId('primary');
2231
const link = await screen.findByTestId('link');
32+
const menu = await screen.findByTestId('menu');
33+
const warning = await screen.findByTestId('warning');
34+
const destructive = await screen.findByTestId('destructive');
2335

2436
expect(primary.classList).toContain('amplify-button--primary');
2537
expect(link.classList).toContain('amplify-button--link');
38+
expect(menu.classList).toContain('amplify-button--menu');
39+
expect(warning.classList).toContain('amplify-button--warning');
40+
expect(destructive.classList).toContain('amplify-button--destructive');
2641
});
2742

2843
it('should add the disabled class with the disabled attribute', async () => {

‎packages/react/src/primitives/types/button.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,12 @@ import { FlexContainerStyleProps } from './flex';
44

55
export type ButtonSizes = Sizes;
66
export type ButtonTypes = 'button' | 'reset' | 'submit';
7-
export type ButtonVariations = 'primary' | 'link' | 'menu';
7+
export type ButtonVariations =
8+
| 'primary'
9+
| 'link'
10+
| 'menu'
11+
| 'warning'
12+
| 'destructive';
813

914
export interface ButtonProps extends ViewProps, FlexContainerStyleProps {
1015
/**

‎packages/ui/src/theme/__tests__/defaultTheme.test.ts

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,47 @@ describe('@aws-amplify/ui', () => {
182182
--amplify-components-button-link-loading-border-color: transparent;
183183
--amplify-components-button-link-loading-background-color: transparent;
184184
--amplify-components-button-link-loading-color: var(--amplify-colors-font-disabled);
185+
--amplify-components-button-warning-background-color: transparent;
186+
--amplify-components-button-warning-border-color: var(--amplify-colors-red-60);
187+
--amplify-components-button-warning-border-width: var(--amplify-border-widths-small);
188+
--amplify-components-button-warning-color: var(--amplify-colors-red-60);
189+
--amplify-components-button-warning-hover-border-color: var(--amplify-colors-red-80);
190+
--amplify-components-button-warning-hover-background-color: var(--amplify-colors-red-10);
191+
--amplify-components-button-warning-hover-color: var(--amplify-colors-font-error);
192+
--amplify-components-button-warning-focus-border-color: var(--amplify-colors-red-80);
193+
--amplify-components-button-warning-focus-background-color: var(--amplify-colors-red-10);
194+
--amplify-components-button-warning-focus-color: var(--amplify-colors-red-80);
195+
--amplify-components-button-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
196+
--amplify-components-button-warning-active-border-color: var(--amplify-colors-red-100);
197+
--amplify-components-button-warning-active-background-color: var(--amplify-colors-red-20);
198+
--amplify-components-button-warning-active-color: var(--amplify-colors-red-100);
199+
--amplify-components-button-warning-disabled-border-color: var(--amplify-colors-border-tertiary);
200+
--amplify-components-button-warning-disabled-background-color: transparent;
201+
--amplify-components-button-warning-disabled-color: var(--amplify-colors-font-disabled);
202+
--amplify-components-button-warning-loading-border-color: var(--amplify-colors-border-tertiary);
203+
--amplify-components-button-warning-loading-background-color: transparent;
204+
--amplify-components-button-warning-loading-color: var(--amplify-colors-font-disabled);
205+
--amplify-components-button-destructive-border-color: transparent;
206+
--amplify-components-button-destructive-border-width: var(--amplify-border-widths-small);
207+
--amplify-components-button-destructive-border-style: solid;
208+
--amplify-components-button-destructive-background-color: var(--amplify-colors-red-60);
209+
--amplify-components-button-destructive-color: var(--amplify-colors-font-inverse);
210+
--amplify-components-button-destructive-disabled-border-color: transparent;
211+
--amplify-components-button-destructive-disabled-background-color: var(--amplify-colors-background-disabled);
212+
--amplify-components-button-destructive-disabled-color: var(--amplify-colors-font-disabled);
213+
--amplify-components-button-destructive-loading-border-color: transparent;
214+
--amplify-components-button-destructive-loading-background-color: var(--amplify-colors-background-disabled);
215+
--amplify-components-button-destructive-loading-color: var(--amplify-colors-font-disabled);
216+
--amplify-components-button-destructive-hover-border-color: transparent;
217+
--amplify-components-button-destructive-hover-background-color: var(--amplify-colors-red-80);
218+
--amplify-components-button-destructive-hover-color: var(--amplify-colors-font-inverse);
219+
--amplify-components-button-destructive-focus-border-color: transparent;
220+
--amplify-components-button-destructive-focus-background-color: var(--amplify-colors-red-80);
221+
--amplify-components-button-destructive-focus-color: var(--amplify-colors-font-inverse);
222+
--amplify-components-button-destructive-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
223+
--amplify-components-button-destructive-active-border-color: transparent;
224+
--amplify-components-button-destructive-active-background-color: var(--amplify-colors-red-100);
225+
--amplify-components-button-destructive-active-color: var(--amplify-colors-font-inverse);
185226
--amplify-components-button-small-font-size: var(--amplify-components-fieldcontrol-small-font-size);
186227
--amplify-components-button-small-padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
187228
--amplify-components-button-small-padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);

‎packages/ui/src/theme/__tests__/overrides.test.ts

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,47 @@ describe('@aws-amplify/ui', () => {
216216
--amplify-components-button-link-loading-border-color: transparent;
217217
--amplify-components-button-link-loading-background-color: transparent;
218218
--amplify-components-button-link-loading-color: var(--amplify-colors-font-disabled);
219+
--amplify-components-button-warning-background-color: transparent;
220+
--amplify-components-button-warning-border-color: var(--amplify-colors-red-60);
221+
--amplify-components-button-warning-border-width: var(--amplify-border-widths-small);
222+
--amplify-components-button-warning-color: var(--amplify-colors-red-60);
223+
--amplify-components-button-warning-hover-border-color: var(--amplify-colors-red-80);
224+
--amplify-components-button-warning-hover-background-color: var(--amplify-colors-red-10);
225+
--amplify-components-button-warning-hover-color: var(--amplify-colors-font-error);
226+
--amplify-components-button-warning-focus-border-color: var(--amplify-colors-red-80);
227+
--amplify-components-button-warning-focus-background-color: var(--amplify-colors-red-10);
228+
--amplify-components-button-warning-focus-color: var(--amplify-colors-red-80);
229+
--amplify-components-button-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
230+
--amplify-components-button-warning-active-border-color: var(--amplify-colors-red-100);
231+
--amplify-components-button-warning-active-background-color: var(--amplify-colors-red-20);
232+
--amplify-components-button-warning-active-color: var(--amplify-colors-red-100);
233+
--amplify-components-button-warning-disabled-border-color: var(--amplify-colors-border-tertiary);
234+
--amplify-components-button-warning-disabled-background-color: transparent;
235+
--amplify-components-button-warning-disabled-color: var(--amplify-colors-font-disabled);
236+
--amplify-components-button-warning-loading-border-color: var(--amplify-colors-border-tertiary);
237+
--amplify-components-button-warning-loading-background-color: transparent;
238+
--amplify-components-button-warning-loading-color: var(--amplify-colors-font-disabled);
239+
--amplify-components-button-destructive-border-color: transparent;
240+
--amplify-components-button-destructive-border-width: var(--amplify-border-widths-small);
241+
--amplify-components-button-destructive-border-style: solid;
242+
--amplify-components-button-destructive-background-color: var(--amplify-colors-red-60);
243+
--amplify-components-button-destructive-color: var(--amplify-colors-font-inverse);
244+
--amplify-components-button-destructive-disabled-border-color: transparent;
245+
--amplify-components-button-destructive-disabled-background-color: var(--amplify-colors-background-disabled);
246+
--amplify-components-button-destructive-disabled-color: var(--amplify-colors-font-disabled);
247+
--amplify-components-button-destructive-loading-border-color: transparent;
248+
--amplify-components-button-destructive-loading-background-color: var(--amplify-colors-background-disabled);
249+
--amplify-components-button-destructive-loading-color: var(--amplify-colors-font-disabled);
250+
--amplify-components-button-destructive-hover-border-color: transparent;
251+
--amplify-components-button-destructive-hover-background-color: var(--amplify-colors-red-80);
252+
--amplify-components-button-destructive-hover-color: var(--amplify-colors-font-inverse);
253+
--amplify-components-button-destructive-focus-border-color: transparent;
254+
--amplify-components-button-destructive-focus-background-color: var(--amplify-colors-red-80);
255+
--amplify-components-button-destructive-focus-color: var(--amplify-colors-font-inverse);
256+
--amplify-components-button-destructive-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
257+
--amplify-components-button-destructive-active-border-color: transparent;
258+
--amplify-components-button-destructive-active-background-color: var(--amplify-colors-red-100);
259+
--amplify-components-button-destructive-active-color: var(--amplify-colors-font-inverse);
219260
--amplify-components-button-small-font-size: var(--amplify-components-fieldcontrol-small-font-size);
220261
--amplify-components-button-small-padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
221262
--amplify-components-button-small-padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);

‎packages/ui/src/theme/css/component/button.scss

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -203,6 +203,112 @@
203203
color: var(--amplify-components-button-link-active-color);
204204
}
205205
}
206+
207+
&--destructive {
208+
border-width: var(--amplify-components-button-destructive-border-width);
209+
background-color: var(--amplify-components-button-destructive-background-color);
210+
border-color: var(--amplify-components-button-destructive-border-color);
211+
color: var(--amplify-components-button-destructive-color);
212+
213+
&:hover {
214+
background-color: var(
215+
--amplify-components-button-destructive-hover-background-color
216+
);
217+
border-color: var(--amplify-components-button-destructive-hover-border-color);
218+
color: var(--amplify-components-button-destructive-hover-color);
219+
}
220+
221+
&:focus {
222+
background-color: var(
223+
--amplify-components-button-destructive-focus-background-color
224+
);
225+
border-color: var(--amplify-components-button-destructive-focus-border-color);
226+
color: var(--amplify-components-button-destructive-focus-color);
227+
box-shadow: var(--amplify-components-button-destructive-focus-box-shadow);
228+
}
229+
230+
&:active {
231+
background-color: var(
232+
--amplify-components-button-destructive-active-background-color
233+
);
234+
border-color: var(
235+
--amplify-components-button-destructive-active-border-color
236+
);
237+
color: var(--amplify-components-button-destructive-active-color);
238+
}
239+
240+
--amplify-internal-button-disabled-border-color: var(
241+
--amplify-components-button-destructive-disabled-border-color
242+
);
243+
--amplify-internal-button-disabled-background-color: var(
244+
--amplify-components-button-destructive-disabled-background-color
245+
);
246+
--amplify-internal-button-disabled-color: var(
247+
--amplify-components-button-destructive-disabled-color
248+
);
249+
--amplify-internal-button-loading-background-color: var(
250+
--amplify-components-button-destructive-loading-background-color
251+
);
252+
--amplify-internal-button-loading-border-color: var(
253+
--amplify-components-button-destructive-loading-border-color
254+
);
255+
--amplify-internal-button-loading-color: var(
256+
--amplify-components-button-destructive-loading-color
257+
);
258+
}
259+
260+
&--warning {
261+
background-color: var(--amplify-components-button-warning-background-color);
262+
border-color: var(--amplify-components-button-warning-border-color);
263+
border-width: var(--amplify-components-button-warning-border-width);
264+
color: var(--amplify-components-button-warning-color);
265+
266+
--amplify-internal-button-disabled-text-decoration: none;
267+
--amplify-internal-button-disabled-border-color: var(
268+
--amplify-components-button-warning-disabled-border-color
269+
);
270+
--amplify-internal-button-disabled-background-color: var(
271+
--amplify-components-button-warning-disabled-background-color
272+
);
273+
--amplify-internal-button-disabled-color: var(
274+
--amplify-components-button-warning-disabled-color
275+
);
276+
--amplify-internal-button-loading-background-color: var(
277+
--amplify-components-button-warning-loading-background-color
278+
);
279+
--amplify-internal-button-loading-border-color: var(
280+
--amplify-components-button-warning-loading-border-color
281+
);
282+
--amplify-internal-button-loading-color: var(
283+
--amplify-components-button-warning-loading-color
284+
);
285+
--amplify-internal-button-loading-text-decoration: none;
286+
287+
&:hover {
288+
background-color: var(
289+
--amplify-components-button-warning-hover-background-color
290+
);
291+
border-color: var(--amplify-components-button-warning-hover-border-color);
292+
color: var(--amplify-components-button-warning-hover-color);
293+
}
294+
295+
&:focus {
296+
background-color: var(
297+
--amplify-components-button-warning-focus-background-color
298+
);
299+
border-color: var(--amplify-components-button-warning-focus-border-color);
300+
color: var(--amplify-components-button-warning-focus-color);
301+
box-shadow: var(--amplify-components-button-warning-focus-box-shadow);
302+
}
303+
304+
&:active {
305+
background-color: var(
306+
--amplify-components-button-warning-active-background-color
307+
);
308+
border-color: var(--amplify-components-button-warning-active-border-color);
309+
color: var(--amplify-components-button-warning-active-color);
310+
}
311+
}
206312

207313
&--small {
208314
font-size: var(--amplify-components-button-small-font-size);

0 commit comments

Comments
 (0)