Skip to content

Commit

Permalink
feat(button): add selected state to icon only ghost button (#7784)
Browse files Browse the repository at this point in the history
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
  • Loading branch information
tw15egan and kodiakhq[bot] authored Feb 23, 2021
1 parent 1551b04 commit e4bb101
Show file tree
Hide file tree
Showing 4 changed files with 15 additions and 0 deletions.
4 changes: 4 additions & 0 deletions packages/components/src/components/button/_button.scss
Original file line number Diff line number Diff line change
Expand Up @@ -212,6 +212,10 @@
}
}

.#{$prefix}--btn--icon-only.#{$prefix}--btn--selected {
background: $selected-ui;
}

.#{$prefix}--btn path[data-icon-path='inner-path'] {
fill: none;
}
Expand Down
3 changes: 3 additions & 0 deletions packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,9 @@ Map {
"type": "string",
},
"iconDescription": [Function],
"isSelected": Object {
"type": "bool",
},
"kind": Object {
"args": Array [
Array [
Expand Down
1 change: 1 addition & 0 deletions packages/react/src/components/Button/Button-story.js
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ const props = {
className: 'some-class',
kind: select('Button kind (kind)', kinds, 'primary'),
disabled: boolean('Disabled (disabled)', false),
isSelected: boolean('Selected (isSelected)', false),
size: select('Button size (size)', sizes, 'default'),
renderIcon: !iconToUse || iconToUse.svgData ? undefined : iconToUse,
iconDescription: text(
Expand Down
7 changes: 7 additions & 0 deletions packages/react/src/components/Button/Button.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ const Button = React.forwardRef(function Button(
size,
kind,
href,
isSelected,
tabIndex,
type,
renderIcon: ButtonImageElement,
Expand All @@ -43,6 +44,7 @@ const Button = React.forwardRef(function Button(
[`${prefix}--btn--${kind}`]: kind,
[`${prefix}--btn--disabled`]: disabled,
[`${prefix}--btn--icon-only`]: hasIconOnly,
[`${prefix}--btn--selected`]: hasIconOnly && isSelected && kind === 'ghost',
[`${prefix}--tooltip__trigger`]: hasIconOnly,
[`${prefix}--tooltip--a11y`]: hasIconOnly,
[`${prefix}--tooltip--${tooltipPosition}`]: hasIconOnly && tooltipPosition,
Expand Down Expand Up @@ -148,6 +150,11 @@ Button.propTypes = {
return undefined;
},

/**
* Specify whether the Button is currently selected
*/
isSelected: PropTypes.bool,

/**
* Specify the kind of Button you want to create
*/
Expand Down

0 comments on commit e4bb101

Please sign in to comment.