fix(styles): fixed for Input Group, Select and Step Input after desig…

…n review [ci visual] (#4646)
SAP · Jun 30, 2023 · 483df90 · 483df90
1 parent 58fd589
commit 483df90
Show file tree

Hide file tree

Showing 26 changed files with 1,346 additions and 387 deletions.
diff --git a/packages/styles/src/mixins/_forms.scss b/packages/styles/src/mixins/_forms.scss
@@ -193,6 +193,13 @@ $fd-input-field-height--compact: 1.625rem;
           }
         }
       }
+
+      @include fd-expanded() {
+        background: var(--sapField_Focus_Background);
+        outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) map_get($set-props, "focusOutlineColor");
+        outline-offset: var(--fdInput_Outline_Offset);
+        box-shadow: none;
+      }
     }
   }
 
@@ -322,15 +329,20 @@ $fd-input-field-height--compact: 1.625rem;
     border-radius: var(--fdInput_Group_Button_Border_Raduis);
     background: var(--fdInput_Group_Button_Background);
     color: var(--fdInput_Group_Button_Text_Color);
+    background-color: var(--fdButtonBackgroundColor);
 
     &::before {
       display: none !important;
     }
 
+    &::after {
+      border-radius: var(--fdInput_Outline_Border_Radius);
+    }
+
     @include fd-hover() {
       --fdInput_Group_Button_Text_Color: var(--fdInput_Group_Button_Hover_Text_Color);
+      --fdButtonBackgroundColor: var(--fdInput_Group_Button_Hover_Background);
 
-      background: var(--fdInput_Group_Button_Hover_Background);
       box-shadow: var(--fdInput_Group_Button_Box_Shadow);
     }
 
@@ -343,6 +355,31 @@ $fd-input-field-height--compact: 1.625rem;
 
   @each $set-name, $set-props in $fd-input-group-button-states {
     &.is-#{$set-name} {
+      @include fd-focus() {
+        .#{$block}__button {
+          color: map_get($set-props, "activeColor");
+          box-shadow: map_get($set-props, "boxShadow");
+
+          --fdButtonBackgroundColor: var(--fdInput_Group_Button_Active_Background);
+
+          @include fd-hover() {
+            --fdButtonBackgroundColor: var(--fdInput_Group_Button_Active_Background);
+          }
+        }
+      }
+
+      @include fd-expanded() {
+        .#{$block}__button {
+          color: map_get($set-props, "activeColor");
+          box-shadow: map_get($set-props, "boxShadow");
+
+          --fdButtonBackgroundColor: var(--fdInput_Group_Button_Active_Background);
+
+          @include fd-hover() {
+            --fdButtonBackgroundColor: var(--fdInput_Group_Button_Active_Background);
+          }
+        }
+      }
 
       .#{$block}__button {
         @include fd-hover() {

diff --git a/packages/styles/src/select.scss b/packages/styles/src/select.scss
@@ -9,89 +9,6 @@ $fd-select-padding-x-compact: 0.5rem;
   min-width: calc(var(--fdSelect_Min_Width) - var(--sapField_BorderWidth) * 2);
 }
 
-@mixin fd-select-button-settings($bkgdColor, $borderLeft) {
-  .#{$block}__button {
-    --fdInput_Group_Button_Text_Color: var(--sapButton_Active_TextColor);
-    --fdInput_Group_Button_Background: var(--sapField_BackgroundStyle);
-
-    // Need content here in case we have background property which may override background-color.
-    @content;
-
-    background-color: $bkgdColor;
-    border-left-color: $borderLeft;
-    box-shadow: var(--fdInput_Group_Button_Box_Shadow);
-    position: static;
-  }
-
-  @include fd-rtl() {
-    .#{$block}__button {
-      border-left-color: transparent;
-      border-right-color: $borderLeft;
-    }
-  }
-}
-
-@mixin fd-select-states-overwrite() {
-  $fd-select-states: (
-    'success': (
-      'activeColor': var(--fdInput_Group_Button_Success_Active_Text_Color),
-      'background': var(--sapField_SuccessBackgroundStyle),
-      'hoverBoxShadow': var(--fdInput_Success_Box_Shadow_Hover)
-    ),
-    'error': (
-      'activeColor': var(--fdInput_Group_Button_Error_Active_Text_Color),
-      'background': var(--sapField_InvalidBackgroundStyle),
-      'hoverBoxShadow': var(--fdInput_Error_Box_Shadow_Hover)
-    ),
-    'warning': (
-      'activeColor': var(--fdInput_Group_Button_Warning_Active_Text_Color),
-      'background': var(--sapField_WarningBackgroundStyle),
-      'hoverBoxShadow':  var(--fdInput_Warning_Box_Shadow_Hover)
-    ),
-    'alert': (
-      'activeColor': var(--fdInput_Group_Button_Warning_Active_Text_Color),
-      'background': var(--sapField_WarningBackgroundStyle),
-      'hoverBoxShadow':  var(--fdInput_Warning_Box_Shadow_Hover)
-    ),
-    'information': (
-      'activeColor': var(--fdInput_Group_Button_Information_Active_Text_Color),
-      'background': var(--sapField_InformationBackgroundStyle),
-      'hoverBoxShadow':  var(--fdInput_Information_Box_Shadow_Hover)
-    )
-  );
-
-  @each $set-name, $set-props in $fd-select-states {
-    &.is-#{$set-name} {
-      @include fd-expanded() {
-        box-shadow: map_get($set-props, "hoverBoxShadow");
-
-        .#{$block}__button {
-          color: map_get($set-props, "activeColor");
-          background: map_get($set-props, "background");
-          background-color: var(--sapButton_Selected_Background);
-          border-left-color: var(--fdSelect_Expanded_Button_Border_Left_Color);
-          box-shadow: map_get($set-props, "hoverBoxShadow");
-
-          @include fd-hover() {
-            color: var(--fdInput_Group_Button_Text_Color);
-          }
-        }
-
-        @include fd-rtl() {
-          .#{$block}__button {
-            border-left-color: transparent;
-            border-right-color: var(--fdSelect_Expanded_Button_Border_Left_Color);
-          }
-        }
-
-        @include fd-focus() {
-          box-shadow: none;
-        }
-      }
-    }
-  }
-}
-
 .#{$block} {
   @include fd-reset();
 
@@ -115,6 +32,7 @@ $fd-select-padding-x-compact: 0.5rem;
     box-shadow: none;
 
     @include fd-flex-center() {
+      gap: 0.25rem;
       justify-content: space-between;
     }
 
@@ -136,12 +54,6 @@ $fd-select-padding-x-compact: 0.5rem;
       @include fd-set-equal-positions(0);
     }
 
-    .#{$block}__button {
-      @include fd-set-margin-left(0.25rem);
-
-      height: 100%;
-    }
-
     @include fd-readonly() {
       cursor: text;
 
@@ -150,28 +62,26 @@ $fd-select-padding-x-compact: 0.5rem;
 
         --fdSelect_Min_Width: 5rem;
       }
-    }
 
-    @include fd-expanded() {
-      &::after {
-        box-shadow: var(--fdInput_Box_Shadow_Hover);
-      }
-
-      @include fd-select-button-settings(var(--sapButton_Selected_Background), var(--fdSelect_Expanded_Button_Border_Left_Color)
-    );
-
-      @include fd-focus() {
-        box-shadow: none;
+      .#{$block}__button {
+        opacity: 0;
       }
+    }
 
-      @include fd-hover() {
-        @include fd-select-button-settings(var(--sapButton_Selected_Hover_Background), var(--fdSelect_Expanded_Button_Border_Left_Color_Hover)) {
-          background: var(--sapField_Hover_BackgroundStyle);
+    &[aria-selected='false'] {
+      .#{$block}__text-content {
+        font-style: italic;
+        font-weight: normal;
+        padding: 0 0.625rem;
+        color: var(--sapField_PlaceholderTextColor);
+
+        [class*='sap-icon'] {
+          font-style: italic;
+          font-weight: normal;
+          color: var(--sapField_PlaceholderTextColor);
         }
       }
     }
-
-    @include fd-select-states-overwrite();
   }
 
   &__text-content {

diff --git a/packages/styles/src/step-input.scss b/packages/styles/src/step-input.scss
@@ -7,13 +7,10 @@ $block: #{$fd-namespace}-step-input;
   $fd-button-icon-font-size: 0.875rem;
   $fd-step-input-cozy-height: 2.25rem;
   $fd-step-input-compact-height: 1.625rem;
-  $fd-step-input-cozy-button-width: 2.125rem;
-  $fd-step-input-compact-button-width: 1.5rem;
   $fd-step-input-description-padding: 0.5rem;
-  $fd-step-input-semantic-border-offset: 0.125rem;
 
-  --fdStepInput_Button_Width: #{$fd-step-input-cozy-button-width};
-  --fdStepInput_Bordered_Button_Width: #{$fd-step-input-cozy-button-width - $fd-step-input-semantic-border-offset};
+  --fdStepInput_Button_Width: var(--fdStepInput_Button_Width_Cozy);
+  --fdStepInput_Bordered_Button_Width: var(--fdStepInput_Button_Width_Semantic_Cozy);
 
   // @include fd-reset();
   @include fd-input-field-base(true);
@@ -50,10 +47,11 @@ $block: #{$fd-namespace}-step-input;
   }
 
   &__input.#{$fd-namespace}-input {
+    --fdInput_Field_Padding: 0 0.25rem;
+
     text-align: right;
     border: none;
     margin: 0;
-    padding: 0 0.25rem;
     background: none;
     box-shadow: none;
     background-color: transparent;
@@ -82,14 +80,14 @@ $block: #{$fd-namespace}-step-input;
   &.is-error,
   &.is-warning {
     .#{$block}__button.#{$fd-namespace}-button {
-      width: var(--fdStepInput_Bordered_Button_Width);
-      min-width: var(--fdStepInput_Bordered_Button_Width);
+      width: var(--fdStepInput_Button_Width_Semantic_Cozy);
+      min-width: var(--fdStepInput_Button_Width_Semantic_Cozy);
     }
   }
 
   @include fd-compact-or-condensed() {
-    --fdStepInput_Bordered_Button_Width: #{$fd-step-input-compact-button-width - $fd-step-input-semantic-border-offset};
-    --fdStepInput_Button_Width: #{$fd-step-input-compact-button-width};
+    --fdStepInput_Button_Width: var(--fdStepInput_Button_Width_Compact);
+    --fdStepInput_Bordered_Button_Width: var(--fdStepInput_Button_Width_Semantic_Compact);
     --fdInput_Field_Compact_Padding: 0 0.25rem;
 
     height: $fd-step-input-compact-height;
@@ -98,20 +96,38 @@ $block: #{$fd-namespace}-step-input;
     .#{$block}__input.#{$fd-namespace}-input {
       height: 100%;
     }
+
+    &.is-readonly {
+      --fdInput_Field_Compact_Padding: 0 0.5rem;
+    }
   }
 
   &.is-readonly {
+    .#{$block}__input.#{$fd-namespace}-input {
+      --fdInput_Field_Padding: 0 0.625rem;
+    }
+
     .#{$block}__button.#{$fd-namespace}-button {
       display: none;
     }
 
     @include fd-focus-within() {
-      background: var(--sapField_Focus_Background);
       border-radius: var(--sapField_BorderCornerRadius);
 
       .#{$block}__input {
         background: transparent;
       }
     }
   }
+
+  @include fd-focus() {
+    &.is-information,
+    &.is-error,
+    &.is-warning,
+    &.is-success {
+      .#{$block}__button.#{$fd-namespace}-button:not(:hover) {
+        box-shadow: none;
+      }
+    }
+  }
 }
diff --git a/packages/styles/src/theming/common/input-group/_sap_fiori.scss b/packages/styles/src/theming/common/input-group/_sap_fiori.scss
@@ -5,7 +5,7 @@
   --fdInput_Group_Button_Box_Shadow: none;
   --fdInput_Group_Button_Hover_Background: var(--sapButton_Lite_Hover_Background);
   --fdInput_Group_Button_Hover_Text_Color: var(--sapButton_Lite_Hover_TextColor);
-  --fdInput_Group_Button_Active_Background: var(--sapButton_Lite_Active_Background);
+  --fdInput_Group_Button_Active_Background: var(--sapButton_Selected_Background);
   --fdInput_Group_Button_Active_Text_Color: var(--sapButton_Active_TextColor);
   --fdInput_Group_Button_Success_Active_Text_Color: var(--sapButton_Active_TextColor);
   --fdInput_Group_Button_Success_Active_Box_Shadow: none;
@@ -17,4 +17,5 @@
   --fdInput_Group_Button_Information_Active_Box_Shadow: none;
   --fdInput_Outline_Offset_Focus_Within: -0.1875rem;
   --fdInput_Outline_Offset_States: -0.25rem;
+  --fdInput_Outline_Border_Radius: 0;
 }
diff --git a/packages/styles/src/theming/common/input-group/_sap_horizon.scss b/packages/styles/src/theming/common/input-group/_sap_horizon.scss
@@ -1,10 +1,10 @@
 :root {
   --fdInput_Group_Button_Border_Raduis: var(--sapField_BorderCornerRadius);
   --fdInput_Group_Button_Background: transparent;
-  --fdInput_Group_Button_Text_Color: var(--sapButton_TextColor);
-  --fdInput_Group_Button_Box_Shadow: var(--sapContent_Interaction_Shadow);
+  --fdInput_Group_Button_Text_Color: var(--sapField_TextColor);
+  --fdInput_Group_Button_Box_Shadow: var(--sapField_Hover_Shadow);
   --fdInput_Group_Button_Hover_Background: transparent;
-  --fdInput_Group_Button_Hover_Text_Color: var(--sapButton_TextColor);
+  --fdInput_Group_Button_Hover_Text_Color: var(--sapField_TextColor);
   --fdInput_Group_Button_Active_Background: transparent;
   --fdInput_Group_Button_Active_Text_Color: var(--sapButton_Selected_TextColor);
   --fdInput_Group_Button_Success_Active_Text_Color: var(--sapButton_Accept_Selected_TextColor);
@@ -16,4 +16,5 @@
   --fdInput_Group_Button_Information_Active_Text_Color: var(--sapButton_Selected_TextColor);
   --fdInput_Group_Button_Information_Active_Box_Shadow: var(--sapContent_Informative_Shadow);
   --fdInput_Outline_Offset_Focus_Within: -0.125rem;
+  --fdInput_Outline_Border_Radius: 0.2rem;
 }
diff --git a/packages/styles/src/theming/common/input/_sap_horizon.scss b/packages/styles/src/theming/common/input/_sap_horizon.scss
@@ -2,7 +2,7 @@
   --fdInput_Box_Shadow_Hover: var(--sapField_Hover_Shadow);
   --fdInput_Outline_Color: var(--sapField_Active_BorderColor);
   --fdInput_Error_Background_Color_Hover: var(--sapField_Hover_Background);
-  --fdInput_Error_Box_Shadow_Hover: var(--sapContent_Negative_Shadow);
+  --fdInput_Error_Box_Shadow_Hover: var(--sapField_InvalidShadow);
   --fdInput_Error_Outline_Color: var(--sapField_InvalidColor);
   --fdInput_Warning_Background_Color_Hover: var(--sapField_Hover_Background);
   --fdInput_Warning_Box_Shadow_Hover: var(--sapContent_Critical_Shadow);

diff --git a/packages/styles/src/theming/common/step-input/_sap_fiori.scss b/packages/styles/src/theming/common/step-input/_sap_fiori.scss
@@ -0,0 +1,6 @@
+:root {
+  --fdStepInput_Button_Width_Cozy: 2.125rem;
+  --fdStepInput_Button_Width_Compact: 1.5rem;
+  --fdStepInput_Button_Width_Semantic_Cozy: 2rem;
+  --fdStepInput_Button_Width_Semantic_Compact: 1.375rem;
+}
diff --git a/packages/styles/src/theming/common/step-input/_sap_horizon.scss b/packages/styles/src/theming/common/step-input/_sap_horizon.scss
@@ -0,0 +1,6 @@
+:root {
+  --fdStepInput_Button_Width_Cozy: 2.25rem;
+  --fdStepInput_Button_Width_Compact: 2rem;
+  --fdStepInput_Button_Width_Semantic_Cozy: 2.25rem;
+  --fdStepInput_Button_Width_Semantic_Compact: 2rem;
+}
diff --git a/packages/styles/src/theming/sap_fiori_3.scss b/packages/styles/src/theming/sap_fiori_3.scss
@@ -37,6 +37,7 @@
 @import "./common/message-popover/sap_fiori";
 @import "./common/token/sap_fiori";
 @import "./common/calendar/sap_fiori";
+@import "./common/step-input/sap_fiori";
 @import "./sap_fiori_3/css_variables";
 
 :root {

diff --git a/packages/styles/src/theming/sap_fiori_3_dark.scss b/packages/styles/src/theming/sap_fiori_3_dark.scss
@@ -37,6 +37,7 @@
 @import "./common/message-popover/sap_fiori";
 @import "./common/token/sap_fiori";
 @import "./common/calendar/sap_fiori";
+@import "./common/step-input/sap_fiori";
 @import "./sap_fiori_3_dark/css_variables";
 
 :root {

diff --git a/packages/styles/src/theming/sap_fiori_3_hcb.scss b/packages/styles/src/theming/sap_fiori_3_hcb.scss
@@ -44,6 +44,7 @@
 @import "./common/message-popover/sap_fiori";
 @import "./common/token/sap_fiori_hc";
 @import "./common/calendar/sap_fiori";
+@import "./common/step-input/sap_fiori";
 @import "./sap_fiori_3_hcb/css_variables";
 
 :root {

diff --git a/packages/styles/src/theming/sap_fiori_3_hcw.scss b/packages/styles/src/theming/sap_fiori_3_hcw.scss
@@ -39,6 +39,7 @@
 @import "./common/token/sap_fiori_hc";
 @import "./common/calendar/sap_fiori";
 @import "./sap_fiori_3_hcw/css_variables";
+@import "./common/step-input/sap_fiori";
 
 :root {
   --fdInverted_Object_Border_Width: 0.0625rem;