Skip to content

Commit c829406

Browse files
jnm2377andreancardonatw15eganjanchildkodiakhq[bot]
authored
feat(Button, OrderedList, UnorderedList): add expressive styles (#8477)
* feat: add expressive prop to btn * feat: add expressive styles * docs: add expressive knob to playground * feat: add expressive prop to lists * feat: add expressive list styles * docs: add expressive knob to list stories * chore: update tests * fix: update prop name and sizing * chore: update tests * test(expressive): expressive list btn * remove console.log - failing tests * test(button): update tests * fix: expressive button sizing * fix: expressive story and icon only btn * chore: remove comment * chore: remove comment * fix: v10 sizing for expressive story Co-authored-by: Andrea N. Cardona <andreancardona@gmail.com> Co-authored-by: TJ Egan <tw15egan@gmail.com> Co-authored-by: Jan Child <44503588+janchild@users.noreply.github.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent bf82b04 commit c829406

File tree

14 files changed

+267
-71
lines changed

14 files changed

+267
-71
lines changed

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

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -440,6 +440,23 @@
440440
padding: $button-padding-field;
441441
}
442442

443+
//expressive styles
444+
.#{$prefix}--btn--expressive {
445+
@include carbon--type-style('body-short-02');
446+
447+
min-height: 3rem;
448+
}
449+
450+
.#{$prefix}--btn--icon-only.#{$prefix}--btn--expressive {
451+
padding: 12px 13px;
452+
//default size 48px
453+
}
454+
455+
.#{$prefix}--btn.#{$prefix}--btn--expressive .#{$prefix}--btn__icon {
456+
width: rem(20px);
457+
height: rem(20px);
458+
}
459+
443460
// Skeleton State
444461
.#{$prefix}--btn.#{$prefix}--skeleton {
445462
@include skeleton;
@@ -458,8 +475,6 @@
458475

459476
.#{$prefix}--btn-set .#{$prefix}--btn {
460477
width: 100%;
461-
// 196px from design kit
462-
max-width: rem(196px);
463478

464479
&:not(:focus) {
465480
box-shadow: rem(-1px) 0 0 0 $button-separator;
@@ -470,6 +485,11 @@
470485
}
471486
}
472487

488+
.#{$prefix}--btn-set .#{$prefix}--btn:not(.#{$prefix}--btn--expressive) {
489+
// 196px from design kit
490+
max-width: rem(196px);
491+
}
492+
473493
.#{$prefix}--btn-set .#{$prefix}--btn:focus + .#{$prefix}--btn {
474494
box-shadow: inherit;
475495
}

‎packages/components/src/components/list/_list.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,11 @@
2828
list-style: none;
2929
}
3030

31+
.#{$prefix}--list--expressive,
32+
.#{$prefix}--list--expressive .#{$prefix}--list--nested {
33+
@include type-style('body-long-02');
34+
}
35+
3136
.#{$prefix}--list--ordered--native {
3237
list-style: decimal;
3338
}

‎packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,7 @@ Map {
150150
"defaultProps": Object {
151151
"dangerDescription": "danger",
152152
"disabled": false,
153+
"isExpressive": false,
153154
"kind": "primary",
154155
"size": "default",
155156
"tabIndex": 0,
@@ -194,6 +195,9 @@ Map {
194195
"type": "string",
195196
},
196197
"iconDescription": [Function],
198+
"isExpressive": Object {
199+
"type": "bool",
200+
},
197201
"isSelected": Object {
198202
"type": "bool",
199203
},
@@ -4250,6 +4254,7 @@ Map {
42504254
},
42514255
"OrderedList" => Object {
42524256
"defaultProps": Object {
4257+
"isExpressive": false,
42534258
"native": false,
42544259
"nested": false,
42554260
},
@@ -4260,6 +4265,9 @@ Map {
42604265
"className": Object {
42614266
"type": "string",
42624267
},
4268+
"isExpressive": Object {
4269+
"type": "bool",
4270+
},
42634271
"native": Object {
42644272
"type": "bool",
42654273
},
@@ -6476,6 +6484,7 @@ Map {
64766484
},
64776485
"UnorderedList" => Object {
64786486
"defaultProps": Object {
6487+
"isExpressive": false,
64796488
"nested": false,
64806489
},
64816490
"propTypes": Object {
@@ -6485,6 +6494,9 @@ Map {
64856494
"className": Object {
64866495
"type": "string",
64876496
},
6497+
"isExpressive": Object {
6498+
"type": "bool",
6499+
},
64886500
"nested": Object {
64896501
"type": "bool",
64906502
},

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

Lines changed: 72 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ const props = {
7474
const iconToUse = iconMap[select('Icon (icon)', icons, 'none')];
7575
return {
7676
className: 'some-class',
77+
isExpressive: boolean('Expressive', false),
7778
kind: select('Button kind (kind)', kinds, 'primary'),
7879
disabled: boolean('Disabled (disabled)', false),
7980
size: select('Button size (size)', sizes, 'default'),
@@ -96,6 +97,7 @@ const props = {
9697
}
9798
return {
9899
className: 'some-class',
100+
isExpressive: boolean('Expressive', false),
99101
kind: select('Button kind (kind)', kinds, 'primary'),
100102
disabled: boolean('Disabled (disabled)', false),
101103
isSelected: boolean('Selected (isSelected)', false),
@@ -123,6 +125,7 @@ const props = {
123125
const iconToUse = iconMap[select('Icon (icon)', icons, 'none')];
124126
return {
125127
className: 'some-class',
128+
isExpressive: boolean('Expressive', false),
126129
disabled: boolean('Disabled (disabled)', false),
127130
size: select('Button size (size)', sizes, 'default'),
128131
renderIcon: !iconToUse || iconToUse.svgData ? undefined : iconToUse,
@@ -196,10 +199,14 @@ export const Playground = () => {
196199
alignItems: 'center',
197200
flexWrap: 'wrap',
198201
}}>
199-
<Button {...regularProps}>Button</Button>
202+
<Button {...regularProps}>Buttons</Button>
200203
&nbsp;
201204
{!regularProps.kind.includes('danger') && (
202-
<Button hasIconOnly {...iconOnly}></Button>
205+
<>
206+
<Button hasIconOnly {...iconOnly}></Button>
207+
&nbsp;
208+
<Button hasIconOnly {...iconOnly} kind="ghost"></Button>
209+
</>
203210
)}
204211
</div>
205212
<div
@@ -241,6 +248,69 @@ export const SetOfButtons = () => {
241248
);
242249
};
243250

251+
export const ExpressiveButtons = () => {
252+
return (
253+
<>
254+
<div
255+
style={{
256+
margin: '1rem',
257+
}}>
258+
<Button isExpressive size="default">
259+
Button
260+
</Button>
261+
</div>
262+
<div
263+
style={{
264+
margin: '1rem',
265+
}}>
266+
<Button isExpressive size="lg">
267+
Button
268+
</Button>
269+
</div>
270+
<div
271+
style={{
272+
margin: '1rem',
273+
}}>
274+
<Button isExpressive size="xl">
275+
Button
276+
</Button>
277+
</div>
278+
<div
279+
style={{
280+
margin: '1rem',
281+
}}>
282+
<Button isExpressive size="default" renderIcon={Add16}>
283+
Button
284+
</Button>
285+
</div>
286+
<div
287+
style={{
288+
margin: '1rem',
289+
}}>
290+
<Button
291+
isExpressive
292+
renderIcon={Add16}
293+
hasIconOnly
294+
iconDescription="Icon description"
295+
/>
296+
</div>
297+
<div
298+
style={{
299+
marginTop: '1rem',
300+
}}>
301+
<ButtonSet>
302+
<Button kind="secondary" isExpressive>
303+
Secondary button
304+
</Button>
305+
<Button kind="primary" isExpressive>
306+
Primary button
307+
</Button>
308+
</ButtonSet>
309+
</div>
310+
</>
311+
);
312+
};
313+
244314
export const Skeleton = () => (
245315
<div>
246316
<ButtonSkeleton />

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

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ const Button = React.forwardRef(function Button(
2828
size,
2929
kind,
3030
href,
31+
isExpressive,
3132
isSelected,
3233
tabIndex,
3334
type,
@@ -122,14 +123,19 @@ const Button = React.forwardRef(function Button(
122123

123124
const buttonClasses = classNames(className, {
124125
[`${prefix}--btn`]: true,
125-
[`${prefix}--btn--sm`]: size === 'small' || size === 'sm' || small,
126-
[`${prefix}--btn--md`]: size === 'field' || size === 'md',
126+
[`${prefix}--btn--sm`]:
127+
(size === 'small' && !isExpressive) ||
128+
(size === 'sm' && !isExpressive) ||
129+
(small && !isExpressive),
130+
[`${prefix}--btn--md`]:
131+
(size === 'field' && !isExpressive) || (size === 'md' && !isExpressive),
127132
// V11: change lg to xl
128133
[`${prefix}--btn--lg`]: enabled ? size === 'xl' : size === 'lg',
129134
// V11: change xl to 2xl
130135
[`${prefix}--btn--xl`]: enabled ? size === '2xl' : size === 'xl',
131136
[`${prefix}--btn--${kind}`]: kind,
132137
[`${prefix}--btn--disabled`]: disabled,
138+
[`${prefix}--btn--expressive`]: isExpressive,
133139
[`${prefix}--tooltip--hidden`]: hasIconOnly && !allowTooltipVisibility,
134140
[`${prefix}--tooltip--visible`]: isHovered,
135141
[`${prefix}--btn--icon-only`]: hasIconOnly,
@@ -275,6 +281,11 @@ Button.propTypes = {
275281
return undefined;
276282
},
277283

284+
/**
285+
* Specify whether the Button is expressive, or not
286+
*/
287+
isExpressive: PropTypes.bool,
288+
278289
/**
279290
* Specify whether the Button is currently selected
280291
*/
@@ -383,6 +394,7 @@ Button.defaultProps = {
383394
dangerDescription: 'danger',
384395
tooltipAlignment: 'center',
385396
tooltipPosition: 'top',
397+
isExpressive: false,
386398
};
387399

388400
export default Button;

‎packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1887,6 +1887,7 @@ exports[`DataTable should render 1`] = `
18871887
<Button
18881888
dangerDescription="danger"
18891889
disabled={false}
1890+
isExpressive={false}
18901891
kind="primary"
18911892
onClick={[MockFunction]}
18921893
size="small"
@@ -2047,6 +2048,7 @@ exports[`DataTable should render 1`] = `
20472048
<Button
20482049
dangerDescription="danger"
20492050
disabled={false}
2051+
isExpressive={false}
20502052
kind="primary"
20512053
onClick={[MockFunction]}
20522054
renderIcon={
@@ -2126,6 +2128,7 @@ exports[`DataTable should render 1`] = `
21262128
<Button
21272129
dangerDescription="danger"
21282130
disabled={false}
2131+
isExpressive={false}
21292132
kind="primary"
21302133
onClick={[MockFunction]}
21312134
renderIcon={
@@ -2205,6 +2208,7 @@ exports[`DataTable should render 1`] = `
22052208
<Button
22062209
dangerDescription="danger"
22072210
disabled={false}
2211+
isExpressive={false}
22082212
kind="primary"
22092213
onClick={[MockFunction]}
22102214
renderIcon={
@@ -2276,6 +2280,7 @@ exports[`DataTable should render 1`] = `
22762280
className="bx--batch-summary__cancel"
22772281
dangerDescription="danger"
22782282
disabled={false}
2283+
isExpressive={false}
22792284
kind="primary"
22802285
onClick={[Function]}
22812286
size="default"
@@ -2536,6 +2541,7 @@ exports[`DataTable should render 1`] = `
25362541
<Button
25372542
dangerDescription="danger"
25382543
disabled={false}
2544+
isExpressive={false}
25392545
kind="primary"
25402546
onClick={[MockFunction]}
25412547
size="small"
@@ -2926,6 +2932,7 @@ exports[`DataTable sticky header should render 1`] = `
29262932
<Button
29272933
dangerDescription="danger"
29282934
disabled={false}
2935+
isExpressive={false}
29292936
kind="primary"
29302937
onClick={[MockFunction]}
29312938
size="small"
@@ -3089,6 +3096,7 @@ exports[`DataTable sticky header should render 1`] = `
30893096
<Button
30903097
dangerDescription="danger"
30913098
disabled={false}
3099+
isExpressive={false}
30923100
kind="primary"
30933101
onClick={[MockFunction]}
30943102
renderIcon={
@@ -3168,6 +3176,7 @@ exports[`DataTable sticky header should render 1`] = `
31683176
<Button
31693177
dangerDescription="danger"
31703178
disabled={false}
3179+
isExpressive={false}
31713180
kind="primary"
31723181
onClick={[MockFunction]}
31733182
renderIcon={
@@ -3247,6 +3256,7 @@ exports[`DataTable sticky header should render 1`] = `
32473256
<Button
32483257
dangerDescription="danger"
32493258
disabled={false}
3259+
isExpressive={false}
32503260
kind="primary"
32513261
onClick={[MockFunction]}
32523262
renderIcon={
@@ -3318,6 +3328,7 @@ exports[`DataTable sticky header should render 1`] = `
33183328
className="bx--batch-summary__cancel"
33193329
dangerDescription="danger"
33203330
disabled={false}
3331+
isExpressive={false}
33213332
kind="primary"
33223333
onClick={[Function]}
33233334
size="default"
@@ -3578,6 +3589,7 @@ exports[`DataTable sticky header should render 1`] = `
35783589
<Button
35793590
dangerDescription="danger"
35803591
disabled={false}
3592+
isExpressive={false}
35813593
kind="primary"
35823594
onClick={[MockFunction]}
35833595
size="small"

‎packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ exports[`DataTable.TableBatchAction should render 1`] = `
1616
dangerDescription="danger"
1717
disabled={false}
1818
iconDescription="test"
19+
isExpressive={false}
1920
kind="primary"
2021
renderIcon={
2122
Object {

‎packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchActions-test.js.snap‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ exports[`DataTable.TableBatchActions should render 1`] = `
3131
className="bx--batch-summary__cancel"
3232
dangerDescription="danger"
3333
disabled={false}
34+
isExpressive={false}
3435
kind="primary"
3536
onClick={[MockFunction]}
3637
size="default"
@@ -92,6 +93,7 @@ exports[`DataTable.TableBatchActions should render 2`] = `
9293
className="bx--batch-summary__cancel"
9394
dangerDescription="danger"
9495
disabled={false}
96+
isExpressive={false}
9597
kind="primary"
9698
onClick={[MockFunction]}
9799
size="default"

0 commit comments

Comments
 (0)