diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md index 70f16a48dede..4ba44f1cb5b8 100644 --- a/packages/components/docs/sass.md +++ b/packages/components/docs/sass.md @@ -6534,6 +6534,7 @@ $icon-01: if( - **Type**: `{undefined}` - **Used by**: - [carbon--theme [mixin]](#carbon--theme-mixin) + - [button [mixin]](#button-mixin) - [snippet [mixin]](#snippet-mixin) - [data-table-v2-action [mixin]](#data-table-v2-action-mixin) - [date-picker [mixin]](#date-picker-mixin) @@ -7641,6 +7642,7 @@ $disabled-02: if( - **Type**: `{undefined}` - **Used by**: - [carbon--theme [mixin]](#carbon--theme-mixin) + - [button [mixin]](#button-mixin) - [button-base [mixin]](#button-base-mixin) - [button-theme [mixin]](#button-theme-mixin) - [checkbox [mixin]](#checkbox-mixin) @@ -13062,6 +13064,31 @@ Button styles } } + .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only + .#{$prefix}--btn__icon + path, + .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only .#{$prefix}--btn__icon { + fill: $icon-01; + } + + .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only[disabled] + .#{$prefix}--btn__icon + path, + .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only[disabled] + .#{$prefix}--btn__icon { + fill: $disabled-02; + } + + .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only[disabled] { + cursor: not-allowed; + } + + .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only[disabled] + .#{$prefix}--assistive-text, + .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only[disabled]::before { + display: none; + } + .#{$prefix}--btn--icon-only.#{$prefix}--btn--tertiary { padding-left: rem(15px); padding-right: rem(15px); @@ -13162,6 +13189,8 @@ Button styles - [hover-primary-text [variable]](#hover-primary-text-variable) - [focus [variable]](#focus-variable) - [ui-02 [variable]](#ui-02-variable) + - [icon-01 [variable]](#icon-01-variable) + - [disabled-02 [variable]](#disabled-02-variable) - [danger [variable]](#danger-variable) - [hover-danger [variable]](#hover-danger-variable) - [active-danger [variable]](#active-danger-variable) diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss index b13a0867d8f3..ffa7957e0d9d 100644 --- a/packages/components/src/components/button/_button.scss +++ b/packages/components/src/components/button/_button.scss @@ -206,6 +206,31 @@ } } + .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only + .#{$prefix}--btn__icon + path, + .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only .#{$prefix}--btn__icon { + fill: $icon-01; + } + + .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only[disabled] + .#{$prefix}--btn__icon + path, + .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only[disabled] + .#{$prefix}--btn__icon { + fill: $disabled-02; + } + + .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only[disabled] { + cursor: not-allowed; + } + + .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only[disabled] + .#{$prefix}--assistive-text, + .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only[disabled]::before { + display: none; + } + .#{$prefix}--btn--icon-only.#{$prefix}--btn--tertiary { padding-left: rem(15px); padding-right: rem(15px); diff --git a/packages/react/src/components/Button/Button-story.js b/packages/react/src/components/Button/Button-story.js index 8260f1bf0896..bc35f1b3d6da 100644 --- a/packages/react/src/components/Button/Button-story.js +++ b/packages/react/src/components/Button/Button-story.js @@ -71,6 +71,7 @@ const props = { 'Primary button (primary)': 'primary', 'Secondary button (secondary)': 'secondary', 'Tertiary button (tertiary)': 'tertiary', + 'Ghost button (ghost)': 'ghost', }, 'primary' ), diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.js b/packages/react/src/components/OverflowMenu/OverflowMenu.js index e135065af4bc..c7d6ee083a74 100644 --- a/packages/react/src/components/OverflowMenu/OverflowMenu.js +++ b/packages/react/src/components/OverflowMenu/OverflowMenu.js @@ -347,7 +347,10 @@ class OverflowMenu extends Component { }; handleClickOutside = evt => { - if (!this._menuBody || !this._menuBody.contains(evt.target)) { + if ( + this.state.open && + (!this._menuBody || !this._menuBody.contains(evt.target)) + ) { this.closeMenu(); } }; diff --git a/packages/react/src/components/UIShell/HeaderMenu.js b/packages/react/src/components/UIShell/HeaderMenu.js index fae3cde4b002..40d98c787a12 100644 --- a/packages/react/src/components/UIShell/HeaderMenu.js +++ b/packages/react/src/components/UIShell/HeaderMenu.js @@ -113,10 +113,11 @@ class HeaderMenu extends React.Component { const itemTriggeredBlur = this.items.find( element => element === event.relatedTarget ); - if ( event.relatedTarget && - (event.relatedTarget.getAttribute('href') !== '#' || itemTriggeredBlur) + ((event.relatedTarget.getAttribute('href') && + event.relatedTarget.getAttribute('href') !== '#') || + itemTriggeredBlur) ) { return; }