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.

Sign up for GitHub

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

feat(Button, OrderedList, UnorderedList): add expressive styles #8477

Merged
merged 24 commits into from
May 12, 2021
Merged

feat(Button, OrderedList, UnorderedList): add expressive styles #8477

Show file tree
Hide file tree
Changes from 18 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
946231a
feat: add expressive prop to btn
jnm2377 Apr 21, 2021
c8e1192
feat: add expressive styles
jnm2377 Apr 21, 2021
c46c1a6
docs: add expressive knob to playground
jnm2377 Apr 21, 2021
d0702c7
feat: add expressive prop to lists
jnm2377 Apr 21, 2021
ff2958f
feat: add expressive list styles
jnm2377 Apr 21, 2021
c2af92a
docs: add expressive knob to list stories
jnm2377 Apr 21, 2021
1ec23a3
chore: update tests
jnm2377 Apr 22, 2021
8c45d5d
Merge branch 'main' of github.com:carbon-design-system/carbon into ex…
jnm2377 Apr 29, 2021
a84705e
fix: update prop name and sizing
jnm2377 Apr 29, 2021
c41ed91
chore: update tests
jnm2377 Apr 29, 2021
28981d9
Merge branch 'main' into expressive-list-btn
andreancardona Apr 30, 2021
5dba2de
Merge branch 'main' into expressive-list-btn
andreancardona May 3, 2021
c438d62
test(expressive): expressive list btn
andreancardona May 3, 2021
2ddd348
remove console.log - failing tests
andreancardona May 3, 2021
435b6a1
test(button): update tests
andreancardona May 3, 2021
696992d
Merge branch 'expressive-list-btn' of github.com:jnm2377/carbon into …
andreancardona May 3, 2021
25e93af
fix: expressive button sizing
jnm2377 May 4, 2021
6e982ee
fix: expressive story and icon only btn
jnm2377 May 11, 2021
353d35a
chore: remove comment
jnm2377 May 11, 2021
94aea9f
chore: remove comment
jnm2377 May 11, 2021
50320bd
fix: v10 sizing for expressive story
jnm2377 May 11, 2021
37b6f92
Merge branch 'main' into expressive-list-btn
tw15egan May 11, 2021
eea7c9e
Merge branch 'main' into expressive-list-btn
janchild May 12, 2021
61d08d8
Merge branch 'main' into expressive-list-btn
kodiakhq[bot] May 12, 2021
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
25 changes: 23 additions & 2 deletions packages/components/src/components/button/_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -470,6 +470,23 @@
padding: $button-padding-field;
}

//expressive styles
.#{$prefix}--btn--expressive {
@include carbon--type-style('body-short-02');

min-height: 3rem;
}

.#{$prefix}--btn--icon-only.#{$prefix}--btn--expressive {
padding: 12px 13px;
//default size 48px
}

.#{$prefix}--btn.#{$prefix}--btn--expressive .#{$prefix}--btn__icon {
width: rem(20px);
height: rem(20px);
}

// Skeleton State
.#{$prefix}--btn.#{$prefix}--skeleton {
@include skeleton;
Expand All @@ -488,8 +505,6 @@

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

&:not(:focus) {
box-shadow: rem(-1px) 0 0 0 $button-separator;
Expand All @@ -500,6 +515,12 @@
}
}

.#{$prefix}--btn-set .#{$prefix}--btn:not(.#{$prefix}--btn--expressive) {
// 196px from design kit
max-width: rem(196px);
//TO-DO: follow up on design specs for width
jnm2377 marked this conversation as resolved.
Show resolved Hide resolved
}

.#{$prefix}--btn-set .#{$prefix}--btn:focus + .#{$prefix}--btn {
box-shadow: inherit;
}
Expand Down
5 changes: 5 additions & 0 deletions packages/components/src/components/list/_list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,11 @@
list-style: none;
}

.#{$prefix}--list--expressive,
.#{$prefix}--list--expressive .#{$prefix}--list--nested {
@include type-style('body-long-02');
}

.#{$prefix}--list--ordered--native {
list-style: decimal;
}
Expand Down
12 changes: 12 additions & 0 deletions packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,7 @@ Map {
"defaultProps": Object {
"dangerDescription": "danger",
"disabled": false,
"isExpressive": false,
"kind": "primary",
"size": "default",
"tabIndex": 0,
Expand Down Expand Up @@ -194,6 +195,9 @@ Map {
"type": "string",
},
"iconDescription": [Function],
"isExpressive": Object {
"type": "bool",
},
"isSelected": Object {
"type": "bool",
},
Expand Down Expand Up @@ -4246,6 +4250,7 @@ Map {
},
"OrderedList" => Object {
"defaultProps": Object {
"isExpressive": false,
"native": false,
"nested": false,
},
Expand All @@ -4256,6 +4261,9 @@ Map {
"className": Object {
"type": "string",
},
"isExpressive": Object {
"type": "bool",
},
"native": Object {
"type": "bool",
},
Expand Down Expand Up @@ -6484,6 +6492,7 @@ Map {
},
"UnorderedList" => Object {
"defaultProps": Object {
"isExpressive": false,
"nested": false,
},
"propTypes": Object {
Expand All @@ -6493,6 +6502,9 @@ Map {
"className": Object {
"type": "string",
},
"isExpressive": Object {
"type": "bool",
},
"nested": Object {
"type": "bool",
},
Expand Down
74 changes: 72 additions & 2 deletions packages/react/src/components/Button/Button-story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ const props = {
const iconToUse = iconMap[select('Icon (icon)', icons, 'none')];
return {
className: 'some-class',
isExpressive: boolean('Expressive', false),
kind: select('Button kind (kind)', kinds, 'primary'),
disabled: boolean('Disabled (disabled)', false),
size: select('Button size (size)', sizes, 'default'),
Expand All @@ -84,6 +85,7 @@ const props = {
}
return {
className: 'some-class',
isExpressive: boolean('Expressive', false),
kind: select('Button kind (kind)', kinds, 'primary'),
disabled: boolean('Disabled (disabled)', false),
isSelected: boolean('Selected (isSelected)', false),
Expand Down Expand Up @@ -111,6 +113,7 @@ const props = {
const iconToUse = iconMap[select('Icon (icon)', icons, 'none')];
return {
className: 'some-class',
isExpressive: boolean('Expressive', false),
disabled: boolean('Disabled (disabled)', false),
size: select('Button size (size)', sizes, 'default'),
renderIcon: !iconToUse || iconToUse.svgData ? undefined : iconToUse,
Expand Down Expand Up @@ -184,10 +187,14 @@ export const Playground = () => {
alignItems: 'center',
flexWrap: 'wrap',
}}>
<Button {...regularProps}>Button</Button>
<Button {...regularProps}>Buttons</Button>
&nbsp;
{!regularProps.kind.includes('danger') && (
<Button hasIconOnly {...iconOnly}></Button>
<>
<Button hasIconOnly {...iconOnly}></Button>
&nbsp;
<Button hasIconOnly {...iconOnly} kind="ghost"></Button>
tw15egan marked this conversation as resolved.
Show resolved Hide resolved
</>
)}
</div>
<div
Expand Down Expand Up @@ -229,6 +236,69 @@ export const SetOfButtons = () => {
);
};

export const ExpressiveButtons = () => {
return (
<>
<div
style={{
margin: '1rem',
}}>
<Button isExpressive size="default">
Button
</Button>
</div>
<div
style={{
margin: '1rem',
}}>
<Button isExpressive size="lg">
Button
</Button>
</div>
<div
style={{
margin: '1rem',
}}>
<Button isExpressive size="xl">
Button
</Button>
</div>
<div
style={{
margin: '1rem',
}}>
<Button isExpressive size="2xl" renderIcon={Add16}>
jnm2377 marked this conversation as resolved.
Show resolved Hide resolved
Button
</Button>
</div>
<div
style={{
margin: '1rem',
}}>
<Button
isExpressive
renderIcon={Add16}
hasIconOnly
iconDescription="Icon description"
/>
</div>
<div
style={{
marginTop: '1rem',
}}>
<ButtonSet>
<Button kind="secondary" isExpressive>
Secondary button
</Button>
<Button kind="primary" isExpressive>
Primary button
</Button>
</ButtonSet>
</div>
</>
);
};

export const Skeleton = () => (
<div>
<ButtonSkeleton />
Expand Down
29 changes: 27 additions & 2 deletions packages/react/src/components/Button/Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ const Button = React.forwardRef(function Button(
size,
kind,
href,
isExpressive,
isSelected,
tabIndex,
type,
Expand Down Expand Up @@ -120,16 +121,34 @@ const Button = React.forwardRef(function Button(

const enabled = useFeatureFlag('enable-2021-release');

// v10 sizing
// sm = 32px
// field = 40px
// default = 48px
// lg = 64px

//v11 sizing
// sm = 32px
// md = 40px
// lg = 48px
// xl = 64px
// 2xl = 80px
jnm2377 marked this conversation as resolved.
Show resolved Hide resolved

const buttonClasses = classNames(className, {
[`${prefix}--btn`]: true,
[`${prefix}--btn--sm`]: size === 'small' || size === 'sm' || small,
[`${prefix}--btn--md`]: size === 'field' || size === 'md',
[`${prefix}--btn--sm`]:
(size === 'small' && !isExpressive) ||
(size === 'sm' && !isExpressive) ||
(small && !isExpressive),
[`${prefix}--btn--md`]:
(size === 'field' && !isExpressive) || (size === 'md' && !isExpressive),
// V11: change lg to xl
[`${prefix}--btn--lg`]: enabled ? size === 'xl' : size === 'lg',
// V11: change xl to 2xl
[`${prefix}--btn--xl`]: enabled ? size === '2xl' : size === 'xl',
andreancardona marked this conversation as resolved.
Show resolved Hide resolved
[`${prefix}--btn--${kind}`]: kind,
[`${prefix}--btn--disabled`]: disabled,
[`${prefix}--btn--expressive`]: isExpressive,
[`${prefix}--tooltip--hidden`]: hasIconOnly && !allowTooltipVisibility,
[`${prefix}--tooltip--visible`]: isHovered,
[`${prefix}--btn--icon-only`]: hasIconOnly,
Expand Down Expand Up @@ -275,6 +294,11 @@ Button.propTypes = {
return undefined;
},

/**
* Specify whether the Button is expressive, or not
*/
isExpressive: PropTypes.bool,

/**
* Specify whether the Button is currently selected
*/
Expand Down Expand Up @@ -383,6 +407,7 @@ Button.defaultProps = {
dangerDescription: 'danger',
tooltipAlignment: 'center',
tooltipPosition: 'top',
isExpressive: false,
};

export default Button;
12 changes: 12 additions & 0 deletions packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1887,6 +1887,7 @@ exports[`DataTable should render 1`] = `
<Button
dangerDescription="danger"
disabled={false}
isExpressive={false}
kind="primary"
onClick={[MockFunction]}
size="small"
Expand Down Expand Up @@ -2047,6 +2048,7 @@ exports[`DataTable should render 1`] = `
<Button
dangerDescription="danger"
disabled={false}
isExpressive={false}
kind="primary"
onClick={[MockFunction]}
renderIcon={
Expand Down Expand Up @@ -2126,6 +2128,7 @@ exports[`DataTable should render 1`] = `
<Button
dangerDescription="danger"
disabled={false}
isExpressive={false}
kind="primary"
onClick={[MockFunction]}
renderIcon={
Expand Down Expand Up @@ -2205,6 +2208,7 @@ exports[`DataTable should render 1`] = `
<Button
dangerDescription="danger"
disabled={false}
isExpressive={false}
kind="primary"
onClick={[MockFunction]}
renderIcon={
Expand Down Expand Up @@ -2276,6 +2280,7 @@ exports[`DataTable should render 1`] = `
className="bx--batch-summary__cancel"
dangerDescription="danger"
disabled={false}
isExpressive={false}
kind="primary"
onClick={[Function]}
size="default"
Expand Down Expand Up @@ -2536,6 +2541,7 @@ exports[`DataTable should render 1`] = `
<Button
dangerDescription="danger"
disabled={false}
isExpressive={false}
kind="primary"
onClick={[MockFunction]}
size="small"
Expand Down Expand Up @@ -2926,6 +2932,7 @@ exports[`DataTable sticky header should render 1`] = `
<Button
dangerDescription="danger"
disabled={false}
isExpressive={false}
kind="primary"
onClick={[MockFunction]}
size="small"
Expand Down Expand Up @@ -3089,6 +3096,7 @@ exports[`DataTable sticky header should render 1`] = `
<Button
dangerDescription="danger"
disabled={false}
isExpressive={false}
kind="primary"
onClick={[MockFunction]}
renderIcon={
Expand Down Expand Up @@ -3168,6 +3176,7 @@ exports[`DataTable sticky header should render 1`] = `
<Button
dangerDescription="danger"
disabled={false}
isExpressive={false}
kind="primary"
onClick={[MockFunction]}
renderIcon={
Expand Down Expand Up @@ -3247,6 +3256,7 @@ exports[`DataTable sticky header should render 1`] = `
<Button
dangerDescription="danger"
disabled={false}
isExpressive={false}
kind="primary"
onClick={[MockFunction]}
renderIcon={
Expand Down Expand Up @@ -3318,6 +3328,7 @@ exports[`DataTable sticky header should render 1`] = `
className="bx--batch-summary__cancel"
dangerDescription="danger"
disabled={false}
isExpressive={false}
kind="primary"
onClick={[Function]}
size="default"
Expand Down Expand Up @@ -3578,6 +3589,7 @@ exports[`DataTable sticky header should render 1`] = `
<Button
dangerDescription="danger"
disabled={false}
isExpressive={false}
kind="primary"
onClick={[MockFunction]}
size="small"
Expand Down
1 change: 1 addition & 0 deletions ...ages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ exports[`DataTable.TableBatchAction should render 1`] = `
dangerDescription="danger"
disabled={false}
iconDescription="test"
isExpressive={false}
kind="primary"
renderIcon={
Object {
Expand Down
Loading