feat(button): add tertiary and ghost danger buttons #7087

AlexanderLyon · 2020-10-20T03:49:50Z

Closes #4945
Closes #5610

Changelog

New

Adds tertiary and ghost danger button variant styles
- These are implemented as new "kinds" (i.e. danger-tertiary and danger-ghost respectively)
Adds tests to Button-test.js to verify these new variants render successfully
Added new danger button variants to Storybook

Testing / Reviewing

See "Danger Ghost" and "Danger Tertiary" in Storybook to verify correct styles

netlify · 2020-10-20T04:01:08Z

Deploy preview for carbon-elements ready!

Built with commit 4292b0f

https://deploy-preview-7087--carbon-elements.netlify.app

netlify · 2020-10-20T04:12:30Z

Deploy preview for carbon-components-react ready!

Built without sensitive environment variables with commit 4292b0f

https://deploy-preview-7087--carbon-components-react.netlify.app

emyarod

thanks for opening this PR, I requested a review from our design team. in the meantime, you'll need to resolve the SassDoc conflict (probably by rerunning the build npm script for the components package)

…tton-variants

AlexanderLyon · 2020-10-21T00:22:21Z

@emyarod the merge conflict has been resolved

AlexanderLyon · 2020-10-21T00:32:26Z

Do you think it would make more sense to show all danger button variations under Button -> Danger in Storybook, rather than each separately as it is now (ex. Button -> Danger, Button -> Danger Tertiary, and Button -> Danger Ghost)?

aagonzales · 2020-10-22T19:12:44Z

@AlexanderLyon Yes I think it would be good to show them all under one Danger button story.

AlexanderLyon · 2020-10-24T03:47:49Z

@aagonzales sure thing - I've updated storybook to display all 3 danger variants under the same story

aagonzales

👍 Looks good! Thanks for contributing!

emyarod

since the Danger Button story now has multiple variants, should we label them accordingly?

emyarod · 2020-10-26T15:45:20Z

packages/react/src/components/Button/Button-story.js

+    <>
+      <Button kind="danger">Button</Button>
+      &nbsp;
+      <Button kind="danger-tertiary">Button</Button>


Suggested change

<Button kind="danger-tertiary">Button</Button>

<Button kind="danger-tertiary">Tertiary Danger Button</Button>

emyarod · 2020-10-26T15:45:29Z

packages/react/src/components/Button/Button-story.js

+      &nbsp;
+      <Button kind="danger-tertiary">Button</Button>
+      &nbsp;
+      <Button kind="danger-ghost">Button</Button>


Suggested change

<Button kind="danger-ghost">Button</Button>

<Button kind="danger-ghost">Ghost Danger Button</Button>

…lexanderLyon/carbon into feature/danger-button-variants

AlexanderLyon · 2020-10-27T01:01:59Z

Good point @emyarod, this has been updated in 7ffd560!

emyarod

thanks for the update, looks good to me

DusanMilko · 2020-10-29T19:28:41Z

packages/components/docs/sass.md

@@ -4447,9 +4449,13 @@ Define theme variables from a map of tokens
      --#{$custom-property-prefix}-overlay-01,
      map-get($theme, 'overlay-01')
    ) !global;
-    $danger: var(


This is a breaking change

AlexanderLyon added 7 commits October 18, 2020 20:06

refactor(button): rename danger color token to danger-01

3ecdce9

refactor(button): update documentation to include danger-01 token

1dc080b

feat(colors): add danger-02 color token

0aaafff

style(button): add tertiary danger button styles

d81328d

style(button): add ghost danger button styles

a9074c3

docs(button): update Button story to include new danger button kinds

1ed3653

test(button): add tests for tertiary and ghost danger button variants

c179eb1

AlexanderLyon requested a review from a team as a code owner October 20, 2020 03:49

AlexanderLyon requested review from emyarod and dakahn October 20, 2020 03:49

emyarod requested review from a team and johnbister and removed request for a team October 20, 2020 20:10

emyarod added the status: visual review 🔍 label Oct 20, 2020

emyarod reviewed Oct 20, 2020

View reviewed changes

AlexanderLyon added 2 commits October 20, 2020 19:36

docs(button): update button sass documentation

efef77b

Merge remote-tracking branch 'upstream/master' into feature/danger-bu…

05cf526

…tton-variants

johnbister requested a review from aagonzales October 22, 2020 17:10

laurenmrice mentioned this pull request Oct 22, 2020

[button] add tertiary and ghost variants for danger button carbon-design-system/carbon-design-kit#380

Closed

9 tasks

AlexanderLyon added 3 commits October 23, 2020 23:35

refactor(button): consolidate all danger button variants to one story

75ae498

docs(button): update button sass documentation

cd41f90

Merge branch 'master' into feature/danger-button-variants

7e9d84d

johnbister removed their request for review October 26, 2020 15:19

aagonzales approved these changes Oct 26, 2020

View reviewed changes

aagonzales added status: one more review 👀 and removed status: visual review 🔍 labels Oct 26, 2020

aagonzales requested a review from emyarod October 26, 2020 15:43

emyarod reviewed Oct 26, 2020

View reviewed changes

AlexanderLyon added 4 commits October 26, 2020 20:36

refactor(button): re-word storybook danger button text

7ffd560

Merge branch 'feature/danger-button-variants' of https://github.com/A…

ed5b176

…lexanderLyon/carbon into feature/danger-button-variants

Merge branch 'master' into feature/danger-button-variants

a38cf3d

docs(button): update button docs to include new danger variant examples

4292b0f

emyarod approved these changes Oct 27, 2020

View reviewed changes

emyarod added status: ready to merge 🎉 and removed status: one more review 👀 labels Oct 27, 2020

kodiakhq bot merged commit 262bb9b into carbon-design-system:master Oct 27, 2020

laurenmrice mentioned this pull request Oct 27, 2020

[button] add danger variants to usage tab docs carbon-design-system/carbon-website#1927

Closed

1 task

DusanMilko reviewed Oct 29, 2020

View reviewed changes

This was referenced Oct 29, 2020

fix(themes): deprecate danger token #7179

Merged

Storybook emits prop type warning for tertiary and ghost danger buttons #7211

Closed

emyarod mentioned this pull request Feb 16, 2021

Button component CSS is not correct. #7809

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(button): add tertiary and ghost danger buttons #7087

feat(button): add tertiary and ghost danger buttons #7087

AlexanderLyon commented Oct 20, 2020 •

edited

Loading

netlify bot commented Oct 20, 2020 •

edited

Loading

netlify bot commented Oct 20, 2020 •

edited

Loading

emyarod left a comment

AlexanderLyon commented Oct 21, 2020

AlexanderLyon commented Oct 21, 2020

aagonzales commented Oct 22, 2020

AlexanderLyon commented Oct 24, 2020

aagonzales left a comment

emyarod left a comment

emyarod Oct 26, 2020

emyarod Oct 26, 2020 •

edited

Loading

AlexanderLyon commented Oct 27, 2020

emyarod left a comment

DusanMilko Oct 29, 2020

	<Button kind="danger-tertiary">Button</Button>
	<Button kind="danger-tertiary">Tertiary Danger Button</Button>

	<Button kind="danger-ghost">Button</Button>
	<Button kind="danger-ghost">Ghost Danger Button</Button>

feat(button): add tertiary and ghost danger buttons #7087

feat(button): add tertiary and ghost danger buttons #7087

Conversation

AlexanderLyon commented Oct 20, 2020 • edited Loading

Changelog

Testing / Reviewing

netlify bot commented Oct 20, 2020 • edited Loading

netlify bot commented Oct 20, 2020 • edited Loading

emyarod left a comment

Choose a reason for hiding this comment

AlexanderLyon commented Oct 21, 2020

AlexanderLyon commented Oct 21, 2020

aagonzales commented Oct 22, 2020

AlexanderLyon commented Oct 24, 2020

aagonzales left a comment

Choose a reason for hiding this comment

emyarod left a comment

Choose a reason for hiding this comment

emyarod Oct 26, 2020

Choose a reason for hiding this comment

emyarod Oct 26, 2020 • edited Loading

Choose a reason for hiding this comment

AlexanderLyon commented Oct 27, 2020

emyarod left a comment

Choose a reason for hiding this comment

DusanMilko Oct 29, 2020

Choose a reason for hiding this comment

AlexanderLyon commented Oct 20, 2020 •

edited

Loading

netlify bot commented Oct 20, 2020 •

edited

Loading

netlify bot commented Oct 20, 2020 •

edited

Loading

emyarod Oct 26, 2020 •

edited

Loading