Skip to content

Commit

Permalink
feat(button): add warning and destructive variations (#3133)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dbanksdesign
dbanksdesign authored Dec 5, 2022
1 parent abb682c commit 4b2dbeb
Show file tree
Hide file tree
Showing 10 changed files with 296 additions and 7 deletions.
6 changes: 6 additions & 0 deletions .changeset/popular-plums-mate.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@aws-amplify/ui-react": minor
"@aws-amplify/ui": minor
---

feat(button): add `warning` and `destructive` variations to the React Button component
10 changes: 5 additions & 5 deletions docs/src/data/test/__snapshots__/props-table.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -982,7 +982,7 @@ exports[`Props Table 1`] = `
},
\\"variation\\": {
\\"name\\": \\"variation\\",
\\"type\\": \\"'primary' | 'link' | 'menu'\\",
\\"type\\": \\"| 'primary'\\\\n | 'link'\\\\n | 'menu'\\\\n | 'warning'\\\\n | 'destructive'\\",
\\"description\\": \\"Changes the visual weight of the button.\\",
\\"category\\": \\"ButtonProps\\",
\\"isOptional\\": true
Expand Down Expand Up @@ -4432,7 +4432,7 @@ exports[`Props Table 1`] = `
},
\\"variation\\": {
\\"name\\": \\"variation\\",
\\"type\\": \\"'primary' | 'link' | 'menu'\\",
\\"type\\": \\"| 'primary'\\\\n | 'link'\\\\n | 'menu'\\\\n | 'warning'\\\\n | 'destructive'\\",
\\"description\\": \\"Changes the visual weight of the button.\\",
\\"category\\": \\"ButtonProps\\",
\\"isOptional\\": true
Expand Down Expand Up @@ -4715,7 +4715,7 @@ exports[`Props Table 1`] = `
},
\\"variation\\": {
\\"name\\": \\"variation\\",
\\"type\\": \\"'primary' | 'link' | 'menu'\\",
\\"type\\": \\"| 'primary'\\\\n | 'link'\\\\n | 'menu'\\\\n | 'warning'\\\\n | 'destructive'\\",
\\"description\\": \\"Changes the visual weight of the button.\\",
\\"category\\": \\"ButtonProps\\",
\\"isOptional\\": true
Expand Down Expand Up @@ -11420,7 +11420,7 @@ exports[`Props Table 1`] = `
},
\\"variation\\": {
\\"name\\": \\"variation\\",
\\"type\\": \\"'primary' | 'link' | 'menu'\\",
\\"type\\": \\"| 'primary'\\\\n | 'link'\\\\n | 'menu'\\\\n | 'warning'\\\\n | 'destructive'\\",
\\"description\\": \\"Changes the visual weight of the button.\\",
\\"category\\": \\"ButtonProps\\",
\\"isOptional\\": true
Expand Down Expand Up @@ -11724,7 +11724,7 @@ exports[`Props Table 1`] = `
},
\\"variation\\": {
\\"name\\": \\"variation\\",
\\"type\\": \\"'primary' | 'link' | 'menu'\\",
\\"type\\": \\"| 'primary'\\\\n | 'link'\\\\n | 'menu'\\\\n | 'warning'\\\\n | 'destructive'\\",
\\"description\\": \\"Changes the visual weight of the button.\\",
\\"category\\": \\"ButtonProps\\",
\\"isOptional\\": true
Expand Down
2 changes: 2 additions & 0 deletions docs/src/pages/[platform]/components/button/demo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,8 @@ const PropControls = (props) => {
<option value="">Default</option>
<option value="primary">Primary</option>
<option value="link">Link</option>
<option value="warning">Warning</option>
<option value="destructive">Destructive</option>
</SelectField>

<SelectField
Expand Down
6 changes: 5 additions & 1 deletion docs/src/pages/[platform]/components/button/react.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,13 +76,15 @@ Use the `size` prop to change the Button size. Available options are `small`, `l

### Variations

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

<Example>
<View>
<Button variation="primary">Primary</Button>
<Button variation="link">Link</Button>
<Button variation="menu">Menu</Button>
<Button variation="warning">Warning</Button>
<Button variation="destructive">Destructive</Button>
<Button>Default</Button>
</View>

Expand All @@ -92,6 +94,8 @@ Use the `variation` prop to change the Button variation. Available options are `
<Button variation="primary">Primary</Button>
<Button variation="link">Link</Button>
<Button variation="menu">Menu</Button>
<Button variation="warning">Warning</Button>
<Button variation="destructive">Destructive</Button>
<Button>Default</Button>
```

Expand Down
15 changes: 15 additions & 0 deletions packages/react/src/primitives/Button/__tests__/Button.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,29 @@ describe('Button test suite', () => {
<Button variation="link" testId="link">
Link
</Button>
<Button variation="menu" testId="menu">
Menu
</Button>
<Button variation="warning" testId="warning">
Warning
</Button>
<Button variation="destructive" testId="destructive">
Destructive
</Button>
</div>
);

const primary = await screen.findByTestId('primary');
const link = await screen.findByTestId('link');
const menu = await screen.findByTestId('menu');
const warning = await screen.findByTestId('warning');
const destructive = await screen.findByTestId('destructive');

expect(primary.classList).toContain('amplify-button--primary');
expect(link.classList).toContain('amplify-button--link');
expect(menu.classList).toContain('amplify-button--menu');
expect(warning.classList).toContain('amplify-button--warning');
expect(destructive.classList).toContain('amplify-button--destructive');
});

it('should add the disabled class with the disabled attribute', async () => {
Expand Down
7 changes: 6 additions & 1 deletion packages/react/src/primitives/types/button.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,12 @@ import { FlexContainerStyleProps } from './flex';

export type ButtonSizes = Sizes;
export type ButtonTypes = 'button' | 'reset' | 'submit';
export type ButtonVariations = 'primary' | 'link' | 'menu';
export type ButtonVariations =
| 'primary'
| 'link'
| 'menu'
| 'warning'
| 'destructive';

export interface ButtonProps extends ViewProps, FlexContainerStyleProps {
/**
Expand Down
41 changes: 41 additions & 0 deletions packages/ui/src/theme/__tests__/defaultTheme.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,47 @@ describe('@aws-amplify/ui', () => {
--amplify-components-button-link-loading-border-color: transparent;
--amplify-components-button-link-loading-background-color: transparent;
--amplify-components-button-link-loading-color: var(--amplify-colors-font-disabled);
--amplify-components-button-warning-background-color: transparent;
--amplify-components-button-warning-border-color: var(--amplify-colors-red-60);
--amplify-components-button-warning-border-width: var(--amplify-border-widths-small);
--amplify-components-button-warning-color: var(--amplify-colors-red-60);
--amplify-components-button-warning-hover-border-color: var(--amplify-colors-red-80);
--amplify-components-button-warning-hover-background-color: var(--amplify-colors-red-10);
--amplify-components-button-warning-hover-color: var(--amplify-colors-font-error);
--amplify-components-button-warning-focus-border-color: var(--amplify-colors-red-80);
--amplify-components-button-warning-focus-background-color: var(--amplify-colors-red-10);
--amplify-components-button-warning-focus-color: var(--amplify-colors-red-80);
--amplify-components-button-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
--amplify-components-button-warning-active-border-color: var(--amplify-colors-red-100);
--amplify-components-button-warning-active-background-color: var(--amplify-colors-red-20);
--amplify-components-button-warning-active-color: var(--amplify-colors-red-100);
--amplify-components-button-warning-disabled-border-color: var(--amplify-colors-border-tertiary);
--amplify-components-button-warning-disabled-background-color: transparent;
--amplify-components-button-warning-disabled-color: var(--amplify-colors-font-disabled);
--amplify-components-button-warning-loading-border-color: var(--amplify-colors-border-tertiary);
--amplify-components-button-warning-loading-background-color: transparent;
--amplify-components-button-warning-loading-color: var(--amplify-colors-font-disabled);
--amplify-components-button-destructive-border-color: transparent;
--amplify-components-button-destructive-border-width: var(--amplify-border-widths-small);
--amplify-components-button-destructive-border-style: solid;
--amplify-components-button-destructive-background-color: var(--amplify-colors-red-60);
--amplify-components-button-destructive-color: var(--amplify-colors-font-inverse);
--amplify-components-button-destructive-disabled-border-color: transparent;
--amplify-components-button-destructive-disabled-background-color: var(--amplify-colors-background-disabled);
--amplify-components-button-destructive-disabled-color: var(--amplify-colors-font-disabled);
--amplify-components-button-destructive-loading-border-color: transparent;
--amplify-components-button-destructive-loading-background-color: var(--amplify-colors-background-disabled);
--amplify-components-button-destructive-loading-color: var(--amplify-colors-font-disabled);
--amplify-components-button-destructive-hover-border-color: transparent;
--amplify-components-button-destructive-hover-background-color: var(--amplify-colors-red-80);
--amplify-components-button-destructive-hover-color: var(--amplify-colors-font-inverse);
--amplify-components-button-destructive-focus-border-color: transparent;
--amplify-components-button-destructive-focus-background-color: var(--amplify-colors-red-80);
--amplify-components-button-destructive-focus-color: var(--amplify-colors-font-inverse);
--amplify-components-button-destructive-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
--amplify-components-button-destructive-active-border-color: transparent;
--amplify-components-button-destructive-active-background-color: var(--amplify-colors-red-100);
--amplify-components-button-destructive-active-color: var(--amplify-colors-font-inverse);
--amplify-components-button-small-font-size: var(--amplify-components-fieldcontrol-small-font-size);
--amplify-components-button-small-padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
--amplify-components-button-small-padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
Expand Down
41 changes: 41 additions & 0 deletions packages/ui/src/theme/__tests__/overrides.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,47 @@ describe('@aws-amplify/ui', () => {
--amplify-components-button-link-loading-border-color: transparent;
--amplify-components-button-link-loading-background-color: transparent;
--amplify-components-button-link-loading-color: var(--amplify-colors-font-disabled);
--amplify-components-button-warning-background-color: transparent;
--amplify-components-button-warning-border-color: var(--amplify-colors-red-60);
--amplify-components-button-warning-border-width: var(--amplify-border-widths-small);
--amplify-components-button-warning-color: var(--amplify-colors-red-60);
--amplify-components-button-warning-hover-border-color: var(--amplify-colors-red-80);
--amplify-components-button-warning-hover-background-color: var(--amplify-colors-red-10);
--amplify-components-button-warning-hover-color: var(--amplify-colors-font-error);
--amplify-components-button-warning-focus-border-color: var(--amplify-colors-red-80);
--amplify-components-button-warning-focus-background-color: var(--amplify-colors-red-10);
--amplify-components-button-warning-focus-color: var(--amplify-colors-red-80);
--amplify-components-button-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
--amplify-components-button-warning-active-border-color: var(--amplify-colors-red-100);
--amplify-components-button-warning-active-background-color: var(--amplify-colors-red-20);
--amplify-components-button-warning-active-color: var(--amplify-colors-red-100);
--amplify-components-button-warning-disabled-border-color: var(--amplify-colors-border-tertiary);
--amplify-components-button-warning-disabled-background-color: transparent;
--amplify-components-button-warning-disabled-color: var(--amplify-colors-font-disabled);
--amplify-components-button-warning-loading-border-color: var(--amplify-colors-border-tertiary);
--amplify-components-button-warning-loading-background-color: transparent;
--amplify-components-button-warning-loading-color: var(--amplify-colors-font-disabled);
--amplify-components-button-destructive-border-color: transparent;
--amplify-components-button-destructive-border-width: var(--amplify-border-widths-small);
--amplify-components-button-destructive-border-style: solid;
--amplify-components-button-destructive-background-color: var(--amplify-colors-red-60);
--amplify-components-button-destructive-color: var(--amplify-colors-font-inverse);
--amplify-components-button-destructive-disabled-border-color: transparent;
--amplify-components-button-destructive-disabled-background-color: var(--amplify-colors-background-disabled);
--amplify-components-button-destructive-disabled-color: var(--amplify-colors-font-disabled);
--amplify-components-button-destructive-loading-border-color: transparent;
--amplify-components-button-destructive-loading-background-color: var(--amplify-colors-background-disabled);
--amplify-components-button-destructive-loading-color: var(--amplify-colors-font-disabled);
--amplify-components-button-destructive-hover-border-color: transparent;
--amplify-components-button-destructive-hover-background-color: var(--amplify-colors-red-80);
--amplify-components-button-destructive-hover-color: var(--amplify-colors-font-inverse);
--amplify-components-button-destructive-focus-border-color: transparent;
--amplify-components-button-destructive-focus-background-color: var(--amplify-colors-red-80);
--amplify-components-button-destructive-focus-color: var(--amplify-colors-font-inverse);
--amplify-components-button-destructive-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
--amplify-components-button-destructive-active-border-color: transparent;
--amplify-components-button-destructive-active-background-color: var(--amplify-colors-red-100);
--amplify-components-button-destructive-active-color: var(--amplify-colors-font-inverse);
--amplify-components-button-small-font-size: var(--amplify-components-fieldcontrol-small-font-size);
--amplify-components-button-small-padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
--amplify-components-button-small-padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
Expand Down
106 changes: 106 additions & 0 deletions packages/ui/src/theme/css/component/button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,112 @@
color: var(--amplify-components-button-link-active-color);
}
}

&--destructive {
border-width: var(--amplify-components-button-destructive-border-width);
background-color: var(--amplify-components-button-destructive-background-color);
border-color: var(--amplify-components-button-destructive-border-color);
color: var(--amplify-components-button-destructive-color);

&:hover {
background-color: var(
--amplify-components-button-destructive-hover-background-color
);
border-color: var(--amplify-components-button-destructive-hover-border-color);
color: var(--amplify-components-button-destructive-hover-color);
}

&:focus {
background-color: var(
--amplify-components-button-destructive-focus-background-color
);
border-color: var(--amplify-components-button-destructive-focus-border-color);
color: var(--amplify-components-button-destructive-focus-color);
box-shadow: var(--amplify-components-button-destructive-focus-box-shadow);
}

&:active {
background-color: var(
--amplify-components-button-destructive-active-background-color
);
border-color: var(
--amplify-components-button-destructive-active-border-color
);
color: var(--amplify-components-button-destructive-active-color);
}

--amplify-internal-button-disabled-border-color: var(
--amplify-components-button-destructive-disabled-border-color
);
--amplify-internal-button-disabled-background-color: var(
--amplify-components-button-destructive-disabled-background-color
);
--amplify-internal-button-disabled-color: var(
--amplify-components-button-destructive-disabled-color
);
--amplify-internal-button-loading-background-color: var(
--amplify-components-button-destructive-loading-background-color
);
--amplify-internal-button-loading-border-color: var(
--amplify-components-button-destructive-loading-border-color
);
--amplify-internal-button-loading-color: var(
--amplify-components-button-destructive-loading-color
);
}

&--warning {
background-color: var(--amplify-components-button-warning-background-color);
border-color: var(--amplify-components-button-warning-border-color);
border-width: var(--amplify-components-button-warning-border-width);
color: var(--amplify-components-button-warning-color);

--amplify-internal-button-disabled-text-decoration: none;
--amplify-internal-button-disabled-border-color: var(
--amplify-components-button-warning-disabled-border-color
);
--amplify-internal-button-disabled-background-color: var(
--amplify-components-button-warning-disabled-background-color
);
--amplify-internal-button-disabled-color: var(
--amplify-components-button-warning-disabled-color
);
--amplify-internal-button-loading-background-color: var(
--amplify-components-button-warning-loading-background-color
);
--amplify-internal-button-loading-border-color: var(
--amplify-components-button-warning-loading-border-color
);
--amplify-internal-button-loading-color: var(
--amplify-components-button-warning-loading-color
);
--amplify-internal-button-loading-text-decoration: none;

&:hover {
background-color: var(
--amplify-components-button-warning-hover-background-color
);
border-color: var(--amplify-components-button-warning-hover-border-color);
color: var(--amplify-components-button-warning-hover-color);
}

&:focus {
background-color: var(
--amplify-components-button-warning-focus-background-color
);
border-color: var(--amplify-components-button-warning-focus-border-color);
color: var(--amplify-components-button-warning-focus-color);
box-shadow: var(--amplify-components-button-warning-focus-box-shadow);
}

&:active {
background-color: var(
--amplify-components-button-warning-active-background-color
);
border-color: var(--amplify-components-button-warning-active-border-color);
color: var(--amplify-components-button-warning-active-color);
}
}

&--small {
font-size: var(--amplify-components-button-small-font-size);
Expand Down
Loading

0 comments on commit 4b2dbeb

Please sign in to comment.