Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(button): update button kind prop type #7212

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions packages/components/src/components/button/_button.scss
Original file line number Diff line number Diff line change
Expand Up @@ -283,7 +283,9 @@
color: $text-04;
}

&-tertiary {
// TODO: deprecate single dash tertiary
&-tertiary,
&--tertiary {
@include button-theme(
transparent,
$danger-02,
Expand All @@ -309,7 +311,9 @@
}
}

&-ghost {
// TODO: deprecate single dash ghost
&-ghost,
&--ghost {
@include button-theme(
transparent,
transparent,
Expand Down
8 changes: 8 additions & 0 deletions packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,8 @@ Map {
"danger",
"ghost",
"danger--primary",
"danger--ghost",
"danger--tertiary",
"tertiary",
],
],
Expand Down Expand Up @@ -2450,6 +2452,8 @@ Map {
"danger",
"ghost",
"danger--primary",
"danger--ghost",
"danger--tertiary",
"tertiary",
],
],
Expand Down Expand Up @@ -2554,6 +2558,8 @@ Map {
"danger",
"ghost",
"danger--primary",
"danger--ghost",
"danger--tertiary",
"tertiary",
],
],
Expand Down Expand Up @@ -3366,6 +3372,8 @@ Map {
"danger",
"ghost",
"danger--primary",
"danger--ghost",
"danger--tertiary",
"tertiary",
],
],
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/components/Button/Button-story.js
Original file line number Diff line number Diff line change
Expand Up @@ -159,9 +159,9 @@ export const Danger = () => {
<>
<Button kind="danger">Button</Button>
&nbsp;
<Button kind="danger-tertiary">Tertiary Danger Button</Button>
<Button kind="danger--tertiary">Tertiary Danger Button</Button>
&nbsp;
<Button kind="danger-ghost">Ghost Danger Button</Button>
<Button kind="danger--ghost">Ghost Danger Button</Button>
</>
);
};
Expand Down
10 changes: 6 additions & 4 deletions packages/react/src/components/Button/Button-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -277,18 +277,20 @@ describe('DangerButton', () => {
});

describe('Renders tertiary variation as expected', () => {
const wrapper = shallow(<Button kind="danger-tertiary" />);
const wrapper = shallow(<Button kind="danger--tertiary" />);

it('has the expected classes', () => {
expect(wrapper.hasClass(`${prefix}--btn--danger-tertiary`)).toEqual(true);
expect(wrapper.hasClass(`${prefix}--btn--danger--tertiary`)).toEqual(
true
);
});
});

describe('Renders ghost variation as expected', () => {
const wrapper = shallow(<Button kind="danger-ghost" />);
const wrapper = shallow(<Button kind="danger--ghost" />);

it('has the expected classes', () => {
expect(wrapper.hasClass(`${prefix}--btn--danger-ghost`)).toEqual(true);
expect(wrapper.hasClass(`${prefix}--btn--danger--ghost`)).toEqual(true);
});
});
});
Expand Down
19 changes: 10 additions & 9 deletions packages/react/src/components/Button/Button.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,8 @@ user interacts with it.

Icon buttons allow users to take actions, and make choices, with a single tap.
Icon buttons can take the form of any of the seven types (Primary, Secondary,
Tertiary, Danger, Danger tertiary, Danger ghost and Ghost) but most commonly will be styled as primary or ghost
buttons.
Tertiary, Danger, Danger tertiary, Danger ghost and Ghost) but most commonly
will be styled as primary or ghost buttons.

<Preview>
<Story id="button--icon-button" />
Expand Down Expand Up @@ -162,24 +162,25 @@ button is interacted with.
### Button `kind`

Carbon has seven types of buttons, `primary`, `secondary`, `tertiary`, `ghost`,
`danger`, `danger-tertiary`, and `danger-ghost`. If no `kind` is specified, a `primary` button will be rendered.
For more information on when to use each variant, check out the
`danger`, `danger--tertiary`, and `danger--ghost`. If no `kind` is specified, a
`primary` button will be rendered. For more information on when to use each
variant, check out the
[design documentation](https://www.carbondesignsystem.com/components/button/usage#overview)

<Button>Primary</Button> <Button kind="secondary">Secondary</Button> <Button kind="tertiary">
Tertiary{' '}
</Button> <Button kind="danger">Danger</Button> <Button kind="danger-tertiary">Danger Tertiary</Button>
<Button kind="danger-ghost">Danger Ghost</Button> <Button kind="ghost">
Ghost
</Button> <Button kind="danger">Danger</Button> <Button kind="danger--tertiary">
Danger Tertiary
</Button>
<Button kind="danger--ghost">Danger Ghost</Button> <Button kind="ghost">Ghost</Button>

```jsx
<Button>Primary</Button>
<Button kind="secondary">Secondary</Button>
<Button kind="tertiary">Tertiary</Button>
<Button kind="danger">Danger</Button>
<Button kind="danger-tertiary">Danger Tertiary</Button>
<Button kind="danger-ghost">Danger Ghost</Button>
<Button kind="danger--tertiary">Danger Tertiary</Button>
<Button kind="danger--ghost">Danger Ghost</Button>
<Button kind="ghost">Ghost</Button>
```

Expand Down
2 changes: 2 additions & 0 deletions packages/react/src/prop-types/types.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,7 @@ export const ButtonKinds = [
'danger',
'ghost',
'danger--primary',
'danger--ghost',
'danger--tertiary',
'tertiary',
];