From f578c8308efbfed3f0269b258a94df6453118239 Mon Sep 17 00:00:00 2001 From: droshev Date: Wed, 2 Aug 2023 14:11:08 -0400 Subject: [PATCH] fix(styles): buttons design update --- package.json | 2 +- .../src/mixins/button/_button-types.scss | 6 + packages/styles/src/segmented-button.scss | 105 +++++--- .../button/badge-on-button.example.html | 18 +- .../button/button-states.example.html | 228 +++++++++++++++--- .../segmented-button.example.html | 48 +++- 6 files changed, 343 insertions(+), 64 deletions(-) diff --git a/package.json b/package.json index b50c41dbc4..beb10954bb 100644 --- a/package.json +++ b/package.json @@ -172,4 +172,4 @@ "fast-deep-equal": "^3.1.3", "jsdom": "^20.0.1" } -} \ No newline at end of file +} diff --git a/packages/styles/src/mixins/button/_button-types.scss b/packages/styles/src/mixins/button/_button-types.scss index 093c3d938b..38febc72ef 100644 --- a/packages/styles/src/mixins/button/_button-types.scss +++ b/packages/styles/src/mixins/button/_button-types.scss @@ -45,6 +45,12 @@ &::after { border-color: var(--sapContent_ContrastFocusColor); } + + @include fd-active() { + &::after { + border-color: var(--sapContent_FocusColor); + } + } } // @deprecated selected state diff --git a/packages/styles/src/segmented-button.scss b/packages/styles/src/segmented-button.scss index 01d4899ba3..403d4881f7 100644 --- a/packages/styles/src/segmented-button.scss +++ b/packages/styles/src/segmented-button.scss @@ -1,47 +1,98 @@ @import "./new-settings"; @import "./mixins"; @import "./mixins/button/button-helper"; +@import "./mixins/button/button-types"; $block: #{$fd-namespace}-segmented-button; .#{$block} { @include fd-reset(); - @include fd-button-pad(); + // @include fd-button-pad(); display: inline-flex; vertical-align: middle; + background: var(--sapButton_Background); + border: var(--sapButton_BorderColor) solid var(--sapButton_BorderWidth); + border-radius: var(--sapButton_BorderCornerRadius); - button { - margin: 0; + &__item { + --fdButton_Height: 2.25rem; + --fdButton_Clickable_Height: 2.75rem; + --fdButton_Padding_X: 0.625rem; + --fdButton_Min_Width: 2.25rem; - @include fd-hover() { - z-index: 1; - } + background-color: var(--fdButtonBackgorundColor); - &:first-child { - border-radius: var(--fdButton_Border_Radius_Left); - } + @include fd-reset(); + @include fd-button-reset(); + @include fd-inline-flex-center(); + @include fd-set-paddings-x-equal(calc(var(--fdButton_Padding_X) - var(--sapButton_BorderWidth))); + @include _fd-button-type( + $defaultText: var(--sapButton_Lite_TextColor), + $defaultBorder: var(--sapButton_Lite_BorderColor), + $defaultBackground: var(--sapButton_Lite_Background), + $hoverText: var(--sapButton_Lite_Hover_TextColor), + $hoverBorder: var(--sapButton_Lite_Hover_BorderColor), + $hoverBackground: var(--sapButton_Lite_Hover_Background), + $activeBorder: var(--sapButton_Lite_Active_BorderColor), + $activeBackground: var(--sapButton_Lite_Active_Background) + ); - &:not(:first-child):not(:last-child) { - border-radius: var(--fdButton_Segmented_Middle_Border_Radius); - } + height: var(--fdButton_Height); + max-height: var(--fdButton_Height); + min-width: var(--fdButton_Min_Width); + position: relative; + text-align: center; + text-shadow: var(--fdButton_Text_Shadow); + border-style: solid; + border-width: var(--sapButton_BorderWidth); + color: var(--sapButton_TextColor); + } - &:last-child { - border-radius: var(--fdButton_Border_Radius_Right); - } + &__item-text { + @include fd-reset(); + @include fd-ellipsis(); - &:not(:last-child) { - @include fd-set-margin-right(var(--fdButton_Segmented_Border_Offset)); - } + font-weight: inherit; + color: inherit; + } - @include fd-rtl() { - &:first-child { - border-radius: var(--fdButton_Border_Radius_Left_RTL); - } + // button { + // border: none; + // background: none; + // } - &:last-child { - border-radius: var(--fdButton_Border_Radius_Right_RTL); - } - } - } + // button { + // margin: 0; + + // @include fd-hover() { + // z-index: 1; + // } + + // &:first-child { + // border-radius: var(--fdButton_Border_Radius_Left); + // } + + // &:not(:first-child):not(:last-child) { + // border-radius: var(--fdButton_Segmented_Middle_Border_Radius); + // } + + // &:last-child { + // border-radius: var(--fdButton_Border_Radius_Right); + // } + + // &:not(:last-child) { + // @include fd-set-margin-right(var(--fdButton_Segmented_Border_Offset)); + // } + + // @include fd-rtl() { + // &:first-child { + // border-radius: var(--fdButton_Border_Radius_Left_RTL); + // } + + // &:last-child { + // border-radius: var(--fdButton_Border_Radius_Right_RTL); + // } + // } + // } } diff --git a/packages/styles/stories/Components/button/badge-on-button.example.html b/packages/styles/stories/Components/button/badge-on-button.example.html index 3a0cf92911..2393d01b05 100644 --- a/packages/styles/stories/Components/button/badge-on-button.example.html +++ b/packages/styles/stories/Components/button/badge-on-button.example.html @@ -1,10 +1,26 @@
+ + + +
\ No newline at end of file diff --git a/packages/styles/stories/Components/button/button-states.example.html b/packages/styles/stories/Components/button/button-states.example.html index fa5e5b86c3..a05052f68f 100644 --- a/packages/styles/stories/Components/button/button-states.example.html +++ b/packages/styles/stories/Components/button/button-states.example.html @@ -1,42 +1,202 @@ + -
- - - -

This disabled button is focusable and this text will be read out by a screen reader and read again when there are changes to the state of the button.

-

- - - +
+
+ + Normal + Focused + Active + Active&Focus + Hovered + Disabled + Disabled +
+
+ Emphasized + + + + + + + +

This disabled button is focusable and this text will be read out by a screen reader and read again when there are changes to the state of the button.

+
+
+ Default + + + + + + +

This disabled button is focusable and this text will be read out by a screen reader and read again when there are changes to the state of the button.

-

- - - +
+
+ Transparent + + + + + + +

This disabled button is focusable and this text will be read out by a screen reader and read again when there are changes to the state of the button.

-

- - - -

This disabled button is focusable and this text will be read out by a screen reader and read again when there are changes to the state of the button.

-

- - - +
+
+ Ghost + + + + + + +

This disabled button is focusable and this text will be read out by a screen reader and read again when there are changes to the state of the button.

-

- - - +
+
+ Positive + + + + + + +

This disabled button is focusable and this text will be read out by a screen reader and read again when there are changes to the state of the button.

-

- - - +
+
+ Negative + + + + + + +

This disabled button is focusable and this text will be read out by a screen reader and read again when there are changes to the state of the button.

-

- - - +
+
+ Attention + + + + + + +

This disabled button is focusable and this text will be read out by a screen reader and read again when there are changes to the state of the button.

+
diff --git a/packages/styles/stories/Components/segmented-button/segmented-button.example.html b/packages/styles/stories/Components/segmented-button/segmented-button.example.html index 45023c9e54..e0f8bfee68 100644 --- a/packages/styles/stories/Components/segmented-button/segmented-button.example.html +++ b/packages/styles/stories/Components/segmented-button/segmented-button.example.html @@ -1,7 +1,53 @@ -
+ +
+ +
+
+ + + + +
+
\ No newline at end of file