Skip to content

Commit 1cb3a75

Browse files
tw15egantay1orjoneskodiakhq[bot]
authoredFeb 2, 2022
fix(Button): make changes based on audit (#10610)
* fix(Button): make changes based on audit * docs(Button): add next folder back * docs(Button): remove excess stories * docs(Button): re-add stories for simplicity Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent cb0ccf9 commit 1cb3a75

File tree

4 files changed

+136
-5
lines changed

4 files changed

+136
-5
lines changed
 

‎packages/react/src/components/Button/Button.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -294,7 +294,7 @@ Button.propTypes = {
294294
isExpressive: PropTypes.bool,
295295

296296
/**
297-
* Specify whether the Button is currently selected
297+
* Specify whether the Button is currently selected. Only applies to the Ghost variant.
298298
*/
299299
isSelected: PropTypes.bool,
300300

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
/**
2+
* Copyright IBM Corp. 2016, 2018
3+
*
4+
* This source code is licensed under the Apache-2.0 license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
import React from 'react';
9+
import { action } from '@storybook/addon-actions';
10+
import { Add16 } from '@carbon/icons-react';
11+
import { default as Button, ButtonSkeleton } from '../';
12+
import ButtonSet from '../../ButtonSet';
13+
14+
export default {
15+
title: 'Components/Button',
16+
component: Button,
17+
subcomponents: {
18+
ButtonSet,
19+
ButtonSkeleton,
20+
},
21+
argTypes: {
22+
kind: {
23+
options: [
24+
'primary',
25+
'secondary',
26+
'tertiary',
27+
'ghost',
28+
'danger',
29+
'danger--tertiary',
30+
'danger--ghost',
31+
],
32+
control: { type: 'select' },
33+
},
34+
size: {
35+
options: ['sm', 'md', 'lg', 'xl', '2xl'],
36+
control: { type: 'select' },
37+
},
38+
children: {
39+
control: false,
40+
},
41+
renderIcon: {
42+
control: false,
43+
},
44+
as: {
45+
control: false,
46+
},
47+
small: {
48+
table: {
49+
disable: true,
50+
},
51+
},
52+
},
53+
};
54+
55+
export const _Default = (args) => {
56+
return <Button {...args}>Button</Button>;
57+
};
58+
59+
export const Secondary = (args) => {
60+
return (
61+
<Button kind="secondary" {...args}>
62+
Button
63+
</Button>
64+
);
65+
};
66+
67+
export const Tertiary = (args) => {
68+
return (
69+
<Button kind="tertiary" {...args}>
70+
Button
71+
</Button>
72+
);
73+
};
74+
75+
export const Danger = (args) => {
76+
return (
77+
<>
78+
<Button kind="danger" {...args}>
79+
Button
80+
</Button>
81+
&nbsp;
82+
<Button kind="danger--tertiary" {...args}>
83+
Tertiary Danger Button
84+
</Button>
85+
&nbsp;
86+
<Button kind="danger--ghost" {...args}>
87+
Ghost Danger Button
88+
</Button>
89+
</>
90+
);
91+
};
92+
93+
export const Ghost = (args) => {
94+
return (
95+
<Button kind="ghost" {...args}>
96+
Button
97+
</Button>
98+
);
99+
};
100+
101+
export const IconButton = (args) => (
102+
<Button
103+
renderIcon={Add16}
104+
iconDescription="Icon Description"
105+
hasIconOnly
106+
onClick={action('onClick')}
107+
{...args}
108+
/>
109+
);
110+
111+
export const SetOfButtons = (args) => {
112+
return (
113+
<ButtonSet>
114+
<Button kind="secondary" {...args}>
115+
Secondary button
116+
</Button>
117+
<Button kind="primary" {...args}>
118+
Primary button
119+
</Button>
120+
</ButtonSet>
121+
);
122+
};
123+
124+
export const Skeleton = () => (
125+
<div>
126+
<ButtonSkeleton />
127+
&nbsp;
128+
<ButtonSkeleton size="sm" />
129+
</div>
130+
);

‎packages/styles/scss/components/button/_button.scss

+4-3
Original file line numberDiff line numberDiff line change
@@ -102,9 +102,9 @@
102102
transparent,
103103
transparent,
104104
$link-primary,
105-
$background-hover,
105+
$layer-hover,
106106
currentColor,
107-
$background-active
107+
$layer-active
108108
);
109109

110110
padding: $button-padding-ghost;
@@ -243,6 +243,7 @@
243243

244244
&:active {
245245
border-color: $button-danger-active;
246+
background-color: $button-danger-active;
246247
color: $text-on-color;
247248
}
248249

@@ -334,7 +335,7 @@
334335

335336
//expressive styles
336337
.#{$prefix}--btn--expressive {
337-
@include type-style('body-short-02');
338+
@include type-style('body-compact-02');
338339

339340
min-height: 3rem;
340341
}

‎packages/styles/scss/components/button/_mixins.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
2020

2121
@mixin button-base {
2222
@include component-reset.reset;
23-
@include type-style('body-short-01');
23+
@include type-style('body-compact-01');
2424

2525
position: relative;
2626
display: inline-flex;

0 commit comments

Comments
 (0)
Please sign in to comment.