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

docs(button): expose tertiary button and restrict icon button variants #5201

Merged
merged 10 commits into from
Feb 1, 2020
Merged

docs(button): expose tertiary button and restrict icon button variants #5201

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
23fe5d4
docs(button): expose tertiary button and restrict icon button variants
emyarod Jan 28, 2020
160d79b
fix(button): use active-tertiary color token
emyarod Jan 28, 2020
9050479
fix(button): remove active tertiary text color override
emyarod Jan 30, 2020
fbbc31e
refactor(Button): combine button class logic
emyarod Jan 30, 2020
85506d1
fix(button): replace outline with box-shadow
emyarod Jan 30, 2020
d0a3ba8
fix(button): preserve tertiary button width
emyarod Jan 30, 2020
dd4c4e2
fix(button): set active tertiary border
emyarod Jan 30, 2020
d17f577
Merge branch 'master' into 5199-tertiary-button-docs
tw15egan Jan 30, 2020
b9d4d1e
Merge branch 'master' into 5199-tertiary-button-docs
tw15egan Jan 30, 2020
95f7ba3
Merge branch 'master' into 5199-tertiary-button-docs
asudoh Feb 1, 2020
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
58 changes: 42 additions & 16 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 @@ -101,7 +101,7 @@
}

&:active {
color: $inverse-01;
border-color: transparent;
}

&:disabled,
Expand All @@ -114,7 +114,7 @@
color: $disabled;
outline: none;

& > .#{$prefix}--btn__icon path {
> .#{$prefix}--btn__icon path {
fill: $disabled;
}
}
Expand All @@ -124,6 +124,19 @@
}
}

.#{$prefix}--btn--tertiary,
.#{$prefix}--btn--tertiary.#{$prefix}--btn--field,
.#{$prefix}--btn--tertiary.#{$prefix}--btn--sm {
padding-right: rem(62px);
padding-left: rem(14px);

&:focus {
border-width: rem(3px);
padding-right: rem(60px);
padding-left: rem(12px);
}
}

.#{$prefix}--btn--ghost {
@include button-theme(
transparent,
Expand Down Expand Up @@ -180,13 +193,11 @@

.#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger {
@include tooltip--trigger('icon', 'bottom');
outline: $button-outline-width solid transparent;
outline-offset: -4px;
}

.#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus {
border-color: $focus;
outline-color: $ui-02;
box-shadow: inset 0 0 0 $button-outline-width $ui-02;
}

.#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus
Expand All @@ -207,11 +218,6 @@
padding-left: rem(13px);
padding-right: rem(13px);

&.#{$prefix}--btn--tertiary {
padding-left: rem(15px);
padding-right: rem(15px);
}

.#{$prefix}--btn__icon {
position: static;
}
Expand All @@ -221,23 +227,43 @@
}
}

.#{$prefix}--btn--icon-only.#{$prefix}--btn--tertiary {
padding-left: rem(15px);
padding-right: rem(15px);

&:focus {
padding-left: rem(13px);
padding-right: rem(13px);
}
}

.#{$prefix}--btn--field.#{$prefix}--btn--icon-only {
padding-left: rem(9px);
padding-right: rem(9px);
}

&.#{$prefix}--btn--tertiary {
padding-left: rem(11px);
padding-right: rem(11px);
.#{$prefix}--btn--field.#{$prefix}--btn--icon-only.#{$prefix}--btn--tertiary {
padding-left: rem(11px);
padding-right: rem(11px);

&:focus {
padding-left: rem(9px);
padding-right: rem(9px);
}
}

.#{$prefix}--btn--sm.#{$prefix}--btn--icon-only {
padding-left: rem(5px);
padding-right: rem(5px);
}

&.#{$prefix}--btn--tertiary {
padding-left: rem(7px);
padding-right: rem(7px);
.#{$prefix}--btn--sm.#{$prefix}--btn--icon-only.#{$prefix}--btn--tertiary {
padding-left: rem(7px);
padding-right: rem(7px);

&:focus {
padding-left: rem(5px);
padding-right: rem(5px);
}
}

Expand Down
14 changes: 7 additions & 7 deletions packages/components/src/components/button/button.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ module.exports = {
name: 'primary--field',
label: 'Primary Buttons (Field)',
notes: `
"Field" buttons are used in forms, when a button needs to line up horizontally with an input field.
"Field" buttons are used in forms, when a button needs to line up horizontally with an input field.
Field buttons match the height of input elements that they sit next to.
`,
context: {
Expand Down Expand Up @@ -66,7 +66,7 @@ module.exports = {
name: 'secondary--field',
label: 'Secondary Buttons (Field)',
notes: `
"Field" buttons are used in forms, when a button needs to line up horizontally with an input field.
"Field" buttons are used in forms, when a button needs to line up horizontally with an input field.
Field buttons match the height of input elements that they sit next to.
`,
context: {
Expand Down Expand Up @@ -96,13 +96,14 @@ module.exports = {
'Tertiary buttons should be used for tertiary actions on each page.',
context: {
variant: 'tertiary',
hasIconOnly: true,
},
},
{
name: 'tertiary--field',
label: 'Tertiary Buttons (Field)',
notes: `
"Field" buttons are used in forms, when a button needs to line up horizontally with an input field.
"Field" buttons are used in forms, when a button needs to line up horizontally with an input field.
Field buttons match the height of input elements that they sit next to.
`,
context: {
Expand All @@ -122,6 +123,7 @@ module.exports = {
context: {
variant: 'tertiary',
small: true,
hasIconOnly: true,
},
},
{
Expand All @@ -138,13 +140,12 @@ module.exports = {
name: 'danger--field',
label: 'Danger Buttons (Field)',
notes: `
"Field" buttons are used in forms, when a button needs to line up horizontally with an input field.
"Field" buttons are used in forms, when a button needs to line up horizontally with an input field.
Field buttons match the height of input elements that they sit next to.
`,
context: {
variant: 'danger',
field: true,
hasIconOnly: true,
},
},
{
Expand Down Expand Up @@ -172,13 +173,12 @@ module.exports = {
name: 'ghost--field',
label: 'Ghost Buttons (Field)',
notes: `
"Field" buttons are used in forms, when a button needs to line up horizontally with an input field.
"Field" buttons are used in forms, when a button needs to line up horizontally with an input field.
Field buttons match the height of input elements that they sit next to.
`,
context: {
variant: 'ghost',
field: true,
hasIconOnly: true,
},
},
{
Expand Down
11 changes: 10 additions & 1 deletion 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 @@ -33,6 +33,7 @@ const iconMap = {
const kinds = {
'Primary button (primary)': 'primary',
'Secondary button (secondary)': 'secondary',
'Tertiary button (tertiary)': 'tertiary',
'Danger button (danger)': 'danger',
'Ghost button (ghost)': 'ghost',
};
Expand Down Expand Up @@ -64,7 +65,15 @@ const props = {
const iconToUse = iconMap[select('Icon (icon)', icons, 'Add16')];
return {
className: 'some-class',
kind: select('Button kind (kind)', kinds, 'primary'),
kind: select(
'Button kind (kind)',
{
'Primary button (primary)': 'primary',
'Secondary button (secondary)': 'secondary',
'Tertiary button (tertiary)': 'tertiary',
},
'primary'
),
disabled: boolean('Disabled (disabled)', false),
size: select('Button size (size)', sizes, 'default'),
renderIcon: !iconToUse || iconToUse.svgData ? undefined : iconToUse,
Expand Down
7 changes: 1 addition & 6 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 @@ -38,12 +38,7 @@ const Button = React.forwardRef(function Button(
[`${prefix}--btn`]: true,
[`${prefix}--btn--field`]: size === 'field',
[`${prefix}--btn--sm`]: size === 'small' || small,
[`${prefix}--btn--primary`]: kind === 'primary',
[`${prefix}--btn--danger`]: kind === 'danger',
[`${prefix}--btn--secondary`]: kind === 'secondary',
[`${prefix}--btn--ghost`]: kind === 'ghost',
[`${prefix}--btn--danger--primary`]: kind === 'danger--primary',
[`${prefix}--btn--tertiary`]: kind === 'tertiary',
[`${prefix}--btn--${kind}`]: kind,
[`${prefix}--btn--disabled`]: disabled,
[`${prefix}--btn--icon-only`]: hasIconOnly,
[`${prefix}--tooltip__trigger`]: hasIconOnly,
Expand Down