fix(styles): buttons design update

SAP · Sep 3, 2023 · 4f3155b · 4f3155b
1 parent 6c4d34e
commit 4f3155b
Show file tree

Hide file tree

Showing 5 changed files with 342 additions and 63 deletions.
diff --git 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
@@ -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
@@ -1,10 +1,26 @@
 <div class="fddocs-button-container">
     <button class="fd-button">
+        <span class="fd-button__text">Badge Button</span>
+        <span class="fd-button__badge">9999</span>
+    </button>
+    <button class="fd-button fd-button--emphasized">
+        <span class="fd-button__text">Badge Button</span>
+        <span class="fd-button__badge">3984</span>
+    </button>
+    <button class="fd-button fd-button--transparent">
         <span class="fd-button__text">Badge Button</span>
         <span class="fd-button__badge">3984</span>
     </button>
     <button class="fd-button" aria-label="Add to cart">
         <i class="sap-icon--cart" role="presentation"></i>
-        <span class="fd-button__badge">3</span>
+        <span class="fd-button__badge">99+</span>
+    </button>
+    <button class="fd-button fd-button--emphasized" aria-label="Add to cart">
+        <i class="sap-icon--cart" role="presentation"></i>
+        <span class="fd-button__badge">66</span>
+    </button>
+    <button class="fd-button fd-button--transparent" aria-label="Add to cart">
+        <i class="sap-icon--cart" role="presentation"></i>
+        <span class="fd-button__badge">12</span>
     </button>
 </div>