diff --git a/packages/styles/src/button.scss b/packages/styles/src/button.scss index c516705a71..1a4339e5db 100644 --- a/packages/styles/src/button.scss +++ b/packages/styles/src/button.scss @@ -5,53 +5,6 @@ $fd-button-icon-font-size: 1rem; $fd-button-badge-spacing: 0.25rem; -$btp-button-block: #{$block-button}--btp; - -@mixin base-badge() { - @include fd-reset(); - @include fd-inline-flex-center(); - @include fd-set-position-right(-$fd-button-badge-spacing); - - z-index: 1; - height: 1rem; - position: var(--fdButton_Badge_Position, absolute); - padding: 0 0.3125rem; - border-radius: 0.5rem; - top: -$fd-button-badge-spacing; - font-size: var(--sapFontSmallSize); - color: var(--sapContent_BadgeTextColor); - border: 0.0625rem solid var(--fdButton_Badge_Border_Color); - background-color: var(--sapContent_BadgeBackground); - - @include fd-set-margin-left(var(--fdButton_Badge_Margin_Left, 0)); - @content; -} - -@mixin btp-badge() { - @include fd-reset-paddings(); - @include fd-set-square(0.625rem); - @include fd-set-position-right(-0.125rem); - - top: -0.125rem; - position: absolute; - border-radius: 100%; - background: var(--sapContent_BadgeBackground); - border: 0.0625rem solid var(--fdButton_ToolHeader_Badge_Border_Color); - color: var(--sapContent_BadgeBackground); - overflow: hidden; -} - -@mixin badge() { - .#{$block-button}__badge { - @include base-badge(); - } - - &.#{$btp-button-block} { - .#{$block-button}__badge { - @include btp-badge(); - } - } -} .#{$block-button} { --fdButton_Clickable_Height: 2.75rem; @@ -62,7 +15,6 @@ $btp-button-block: #{$block-button}--btp; @include fd-button-reset(); @include fd-inline-flex-center(); @include fd-set-paddings-x-equal(calc(var(--fdButton_Padding_X) - var(--sapButton_BorderWidth))); - @include badge(); height: var(--fdButton_Height); max-height: var(--fdButton_Height); @@ -122,6 +74,25 @@ $btp-button-block: #{$block-button}--btp; } } + &__badge { + @include fd-reset(); + @include fd-inline-flex-center(); + @include fd-set-position-right(-$fd-button-badge-spacing); + + z-index: 1; + height: 1rem; + position: var(--fdButton_Badge_Position, absolute); + padding: 0 0.3125rem; + border-radius: 0.5rem; + top: -$fd-button-badge-spacing; + font-size: var(--sapFontSmallSize); + color: var(--sapContent_BadgeTextColor); + border: 0.0625rem solid var(--fdButton_Badge_Border_Color); + background-color: var(--sapContent_BadgeBackground); + + @include fd-set-margin-left(var(--fdButton_Badge_Margin_Left, 0)); + } + @include fd-compact-or-condensed() { --fdButton_Height: var(--fdButton_Compact_Height); --fdButton_Clickable_Height: 2rem; @@ -275,6 +246,21 @@ $btp-button-block: #{$block-button}--btp; --fdButton_ToolHeader_Padding: 0.5rem; --fdButton_ToolHeader_Size: var(--fdButton_ToolHeader_Button_Size_Compact); } + + .#{$block-button}__badge { + @include fd-reset(); + @include fd-set-square(0.625rem); + @include fd-set-position-right(-0.125rem); + + top: -0.125rem; + position: absolute; + border-radius: 100%; + background: var(--sapContent_BadgeBackground); + border: 0.0625rem solid var(--fdButton_ToolHeader_Badge_Border_Color); + color: var(--sapContent_BadgeBackground); + padding: 0; + overflow: hidden; + } } /** diff --git a/packages/styles/stories/BTP/button/badge.example.html b/packages/styles/stories/BTP/button/badge.example.html deleted file mode 100644 index 2ee2623ca4..0000000000 --- a/packages/styles/stories/BTP/button/badge.example.html +++ /dev/null @@ -1,6 +0,0 @@ -
- -
diff --git a/packages/styles/stories/BTP/button/button.md b/packages/styles/stories/BTP/button/button.md index 559004240a..735878a312 100644 --- a/packages/styles/stories/BTP/button/button.md +++ b/packages/styles/stories/BTP/button/button.md @@ -1,4 +1,2 @@ -BTP button is an overstyle over the Button(Horizon) and is intended to be used within the controls and patterns for the BTP area. -BTP overstyling adds several different use-cases on top of the button from Horizon: -- Two additional button types: `tool header` and `nested` -- Badges require to not have a content in them and `fd-button--btp` class is required to be used when badges are applied. +BTP button is an over-style over the Button(Horizon) and is intended to be used within the controls and patterns for the BTP area. +BTP over-styling adds wo additional button types: `tool header` and `nested` diff --git a/packages/styles/stories/BTP/button/button.stories.js b/packages/styles/stories/BTP/button/button.stories.js index 8bf3654007..8c2036be7f 100644 --- a/packages/styles/stories/BTP/button/button.stories.js +++ b/packages/styles/stories/BTP/button/button.stories.js @@ -1,6 +1,5 @@ import toolHeaderButtonExampleHtml from './tool-header.example.html?raw'; import nestedButtonExampleHtml from './nested.example.html?raw'; -import badgeExampleHtml from './badge.example.html?raw'; import description from './button.md?raw'; import '../../../src/icon.scss'; @@ -14,15 +13,6 @@ export default { } }; -export const Badge = () => badgeExampleHtml; -Badge.parameters = { - docs: { - description: { - story: `Buttons can contain a badge that acts as a visual eye-catcher and attracts the user’s attention. Badges in BTP, unlike in base SAP Horizon and Fiori, should not contain text. They should be used only as a visual eye-catcher.` - } - } -} - export const ToolHeaderButton = () => toolHeaderButtonExampleHtml; ToolHeaderButton.parameters = { docs: { diff --git a/packages/styles/stories/BTP/button/tool-header.example.html b/packages/styles/stories/BTP/button/tool-header.example.html index 7bde9e6928..9514449bf1 100644 --- a/packages/styles/stories/BTP/button/tool-header.example.html +++ b/packages/styles/stories/BTP/button/tool-header.example.html @@ -34,7 +34,7 @@

disabled

with badge

- diff --git a/packages/styles/stories/BTP/tool-header/desktop.example.html b/packages/styles/stories/BTP/tool-header/desktop.example.html index d7ab09cd72..466d230183 100644 --- a/packages/styles/stories/BTP/tool-header/desktop.example.html +++ b/packages/styles/stories/BTP/tool-header/desktop.example.html @@ -85,7 +85,7 @@

Without Menu Button (default)

- @@ -215,7 +215,7 @@

With Menu Button

- diff --git a/packages/styles/stories/BTP/tool-header/mobile.example.html b/packages/styles/stories/BTP/tool-header/mobile.example.html index 1f14950fba..c9d9e17f61 100644 --- a/packages/styles/stories/BTP/tool-header/mobile.example.html +++ b/packages/styles/stories/BTP/tool-header/mobile.example.html @@ -93,7 +93,7 @@

Phone

- @@ -223,7 +223,7 @@

Phone (Expanded Search)

- diff --git a/packages/styles/stories/BTP/tool-header/tablet.example.html b/packages/styles/stories/BTP/tool-header/tablet.example.html index 721427147f..d54371c68f 100644 --- a/packages/styles/stories/BTP/tool-header/tablet.example.html +++ b/packages/styles/stories/BTP/tool-header/tablet.example.html @@ -93,7 +93,7 @@

Tablet - Landscape

- @@ -223,7 +223,7 @@

Tablet - Portrait

- @@ -354,7 +354,7 @@

Tablet - Portrait (Expanded Search)

-