diff --git a/packages/button/README.md b/packages/button/README.md index 477c101ac..818bcbed4 100644 --- a/packages/button/README.md +++ b/packages/button/README.md @@ -14,6 +14,8 @@ Each page will likely have one primary button. Any remaining calls-to-action are **Secondary**: Most buttons on a page are likely this style. +**Warning**: Warning buttons are used to advise caution. + **Danger**: Destructive buttons are used to highlight something dangerous that can't be undone e.g. "Delete". **Icon only**: Use when an icon is enough to represent the action e.g. "Create a Service". Should be accompanied by a tooltip. diff --git a/packages/button/components/ButtonBase.tsx b/packages/button/components/ButtonBase.tsx index 7f331b73c..bf61e0432 100644 --- a/packages/button/components/ButtonBase.tsx +++ b/packages/button/components/ButtonBase.tsx @@ -29,7 +29,8 @@ export enum ButtonAppearances { Secondary = "secondary", Standard = "standard", Danger = "danger", - Success = "success" + Success = "success", + Warning = "warning" } export interface ButtonProps extends LinkProps { diff --git a/packages/button/components/WarningButton.tsx b/packages/button/components/WarningButton.tsx new file mode 100644 index 000000000..0d94ac4d7 --- /dev/null +++ b/packages/button/components/WarningButton.tsx @@ -0,0 +1,16 @@ +import * as React from "react"; +import { + default as ButtonBase, + ButtonProps, + ButtonAppearances +} from "./ButtonBase"; + +const WarningButton = (props: ButtonProps) => ( + +); + +export default WarningButton; diff --git a/packages/button/components/WarningDropdownButton.tsx b/packages/button/components/WarningDropdownButton.tsx new file mode 100644 index 000000000..748fd8dfb --- /dev/null +++ b/packages/button/components/WarningDropdownButton.tsx @@ -0,0 +1,14 @@ +import * as React from "react"; +import WarningButton from "./WarningButton"; +import { ButtonProps } from "./ButtonBase"; +import { SystemIcons } from "../../icons/dist/system-icons-enum"; + +const WarningDropdownButton = (props: ButtonProps) => ( + +); + +export default WarningDropdownButton; diff --git a/packages/button/index.ts b/packages/button/index.ts index 53b23d3ca..0b7062318 100644 --- a/packages/button/index.ts +++ b/packages/button/index.ts @@ -3,11 +3,13 @@ export { default as SecondaryButton } from "./components/SecondaryButton"; export { default as StandardButton } from "./components/StandardButton"; export { default as SuccessButton } from "./components/SuccessButton"; export { default as DangerButton } from "./components/DangerButton"; +export { default as WarningButton } from "./components/WarningButton"; export { default as PrimaryDropdownButton } from "./components/PrimaryDropdownButton"; export { default as SecondaryDropdownButton } from "./components/SecondaryDropdownButton"; export { default as StandardDropdownButton } from "./components/StandardDropdownButton"; export { default as SuccessDropdownButton } from "./components/SuccessDropdownButton"; +export { default as WarningDropdownButton } from "./components/WarningDropdownButton"; export { default as DangerDropdownButton } from "./components/DangerDropdownButton"; export { default as ResetButton } from "./components/ResetButton"; diff --git a/packages/button/stories/DefaultButton.stories.tsx b/packages/button/stories/DefaultButton.stories.tsx index b87475494..12de3a72f 100644 --- a/packages/button/stories/DefaultButton.stories.tsx +++ b/packages/button/stories/DefaultButton.stories.tsx @@ -5,15 +5,13 @@ import { SecondaryButton, StandardButton, SuccessButton, - DangerButton -} from "../../"; + DangerButton, + WarningButton +} from "../.."; import { action } from "@storybook/addon-actions"; import { SystemIcons } from "../../icons/dist/system-icons-enum"; import { ButtonProps } from "../components/ButtonBase"; -import { - systemIconLabels, - systemIcons -} from "../../storybookHelpers/controlConstants"; + export default { title: "Actions/Button", component: StandardButton, @@ -21,7 +19,8 @@ export default { PrimaryButton, SecondaryButton, SuccessButton, - DangerButton + DangerButton, + WarningButton }, decorators: [Story =>
{Story()}
], argTypes: { @@ -62,6 +61,10 @@ export const _SuccessButton = args => ( {args.children} ); +export const _WarningButton = args => ( + {args.children} +); + export const _DangerButton = args => ( {args.children} ); diff --git a/packages/button/stories/DropdownButton.stories.tsx b/packages/button/stories/DropdownButton.stories.tsx index 406a45a79..c2a00ff21 100644 --- a/packages/button/stories/DropdownButton.stories.tsx +++ b/packages/button/stories/DropdownButton.stories.tsx @@ -5,9 +5,9 @@ import { SecondaryDropdownButton, StandardDropdownButton, SuccessDropdownButton, + WarningDropdownButton, DangerDropdownButton } from "../../index"; -import { SystemIcons } from "../../icons/dist/system-icons-enum"; import { systemIconLabels, systemIcons @@ -53,6 +53,10 @@ export const _SuccessDropdownButton = args => ( {args.children} ); +export const _WarningDropdownButton = args => ( + {args.children} +); + export const _DangerDropdownButton = args => ( {args.children} ); diff --git a/packages/button/style.ts b/packages/button/style.ts index e687a3fc3..48240a79a 100644 --- a/packages/button/style.ts +++ b/packages/button/style.ts @@ -16,7 +16,9 @@ import { themeBrandPrimaryInverted, themeSuccessInverted, themeErrorInverted, - themeTextColorDisabledInverted + themeTextColorDisabledInverted, + themeWarningInverted, + themeWarning } from "../design-tokens/build/js/designTokens"; import { darken, pickReadableTextColor } from "../shared/styles/color"; import { ButtonAppearances } from "./components/ButtonBase"; @@ -190,6 +192,10 @@ export const focusStyleByAppearance = (appearance, isInverse) => { return isInverse ? focusStyles(getHoverColor(getCSSVarValue(themeErrorInverted))) : focusStyles(getHoverColor(getCSSVarValue(themeError))); + case "warning": + return isInverse + ? focusStyles(getHoverColor(getCSSVarValue(themeWarningInverted))) + : focusStyles(getHoverColor(getCSSVarValue(themeWarning))); default: return ""; } @@ -239,6 +245,12 @@ export const button = appearance => { getHoverColor(getCSSVarValue(themeError)), getActiveColor(getCSSVarValue(themeError)) ); + case "warning": + return filledButton( + getCSSVarValue(themeWarning), + getHoverColor(getCSSVarValue(themeWarning)), + getActiveColor(getCSSVarValue(themeWarning)) + ); default: return ""; } @@ -288,6 +300,12 @@ export const buttonInverse = appearance => { getHoverColor(getCSSVarValue(themeErrorInverted)), getActiveColor(getCSSVarValue(themeErrorInverted)) ); + case "warning": + return filledButton( + getCSSVarValue(themeWarningInverted), + getHoverColor(getCSSVarValue(themeWarningInverted)), + getActiveColor(getCSSVarValue(themeWarningInverted)) + ); default: return ""; } diff --git a/packages/button/tests/__snapshots__/ButtonBase.test.tsx.snap b/packages/button/tests/__snapshots__/ButtonBase.test.tsx.snap index 50f02765b..b2ccd3819 100644 --- a/packages/button/tests/__snapshots__/ButtonBase.test.tsx.snap +++ b/packages/button/tests/__snapshots__/ButtonBase.test.tsx.snap @@ -1113,3 +1113,226 @@ exports[`ButtonBase renders all appearances with props 5`] = ` `; + +exports[`ButtonBase renders all appearances with props 6`] = ` + + .emotion-0 { + outline: none; + position: relative; +} + +.emotion-0:focus { + background-color: #e09224; +} + +.emotion-0:focus:after { + border: 2px solid #e09224; + border-radius: 4px; + bottom: -3px; + content: ""; + left: -3px; + position: absolute; + right: -3px; + top: -3px; +} + +.emotion-1 { + background: none; + border: 0; + color: inherit; + font: inherit; + line-height: normal; + overflow: visible; + padding: 0; + text-align: inherit; + color: #1B2029; + fill: #1B2029; + background-color: #F9A328; + border-radius: 4px; + padding: 10px 18px; + cursor: pointer; + display: inline-block; + outline: none; + -webkit-text-decoration: none; + text-decoration: none; + font-weight: 500; + text-align: center; + width: 100%; + color: var(--themeTextColorDisabled, #AEB0B4); + fill: var(--themeTextColorDisabled, #AEB0B4); + cursor: default; + pointer-events: none; + background-color: var(--themeBgDisabled, #E8EAED); +} + +.emotion-1::-moz-focus-inner { + border: 0; + padding: 0; +} + +.emotion-1[href], +.emotion-1[href]:visited { + color: #1B2029; + fill: #1B2029; +} + +.emotion-1:hover { + background-color: #e09224; +} + +.emotion-1:active { + background-color: #c78220; +} + +.emotion-1:hover, +.emotion-1:focus, +.emotion-1:active { + color: var(--themeTextColorDisabled, #AEB0B4); + fill: var(--themeTextColorDisabled, #AEB0B4); +} + +.emotion-1:hover, +.emotion-1:focus, +.emotion-1:active { + background-color: var(--themeBgDisabled, #E8EAED); +} + +.emotion-2 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: auto; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + min-height: 0; +} + +.emotion-2>div { + width: auto; +} + +.emotion-3 { + box-sizing: border-box; + -webkit-flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + width: initial; + display: inherit; +} + +.emotion-4 { + vertical-align: middle; + fill: inherit; +} + +.emotion-4 use { + pointer-events: none; +} + +.emotion-5 { + box-sizing: border-box; + -webkit-flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + width: initial; + padding-left: 8px; +} + +.emotion-5:after { + content: "..."; +} + +.emotion-6 { + box-sizing: border-box; + -webkit-flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + width: initial; + display: inherit; + padding-left: 4px; +} + + + +`; diff --git a/packages/index.ts b/packages/index.ts index 163c7d6fc..9af2c73f9 100644 --- a/packages/index.ts +++ b/packages/index.ts @@ -29,10 +29,12 @@ export { StandardButton, SuccessButton, DangerButton, + WarningButton, PrimaryDropdownButton, SecondaryDropdownButton, StandardDropdownButton, SuccessDropdownButton, + WarningDropdownButton, DangerDropdownButton, ResetButton } from "./button";