feat(styles): add new examples for ShellBar (#4172)

SAP · Jan 25, 2023 · 12cba2c · 12cba2c
1 parent 05f9ef8
commit 12cba2c
Show file tree

Hide file tree

Showing 21 changed files with 985 additions and 489 deletions.
diff --git a/.storybook/static/preview-head.js b/.storybook/static/preview-head.js
@@ -335,6 +335,15 @@ function addClass(elementId, className) {
     }
 }
 
+function removeClass(elementId, className) {
+  let elementRef = document.getElementById(elementId);
+  if (elementRef && className) {
+      elementRef.classList.remove(className);
+  } else {
+      console.warn("No element with id='" + elementId + "' found");
+  }
+}
+
 function browseFile(inputId) {
     let inputRef = document.getElementById(inputId);
     inputRef.click();

diff --git a/packages/styles/src/input-group.scss b/packages/styles/src/input-group.scss
@@ -12,7 +12,13 @@ $fd-input-padding: 0.625rem;
 $fd-input-border-radius: var(--sapField_BorderCornerRadius);
 
 .#{$block} {
-  @include fd-input-field-base(false, false);
+  @include fd-input-field-base(
+    false,
+    false,
+    --fdInputGroup_Background,
+    --fdInputGroup_Background_Color,
+    --fdInputGroup_Hover_Background,
+    --fdInputGroup_Hover_Background_Color);
   @include fd-input-field-states();
   @include fd-input-group-button-overwrite();
 
@@ -25,22 +31,28 @@ $fd-input-border-radius: var(--sapField_BorderCornerRadius);
   .#{$block}__input {
     @include fd-reset-child-spacing();
 
-    border: none;
     flex: 1 1 10rem;
     background: none;
-    background-color: transparent;
+    background-color: var(--fdInputGroup_Input_Background, transparent);
     padding-left: 0.25rem;
     padding-right: 0.25rem;
     text-shadow: var(--fdInputGroup_Text_Shadow);
+    border: var(--fdInputGroup_Input_Border, none);
+    color: var(--fdInputGroup_Input_Color, inherit);
+
+    &::placeholder {
+      color: var(--fdInputGroup_Input_Placeholder_Color, var(--sapField_PlaceholderTextColor));
+      font-style: var(--fdInputGroup_Input_Placeholder_Style, italic);
+    }
 
     @include fd-hover() {
-      @include fd-input-field-nested-reset();
+      @include fd-input-field-nested-reset(--fdInputGroup_Hover_Input_Background);
     }
 
     @include fd-focus() {
       outline: none;
       box-shadow: none;
-      background: none;
+      background: var(--fdInputGroup_Input_Background, none);
       border-radius: 0;
     }
 
@@ -70,7 +82,7 @@ $fd-input-border-radius: var(--sapField_BorderCornerRadius);
     @include fd-ellipsis();
 
     color: var(--sapContent_NonInteractiveIconColor);
-    background: none !important;
+    background: var(--fdInputGroup_Addon_Background, none);
     font-size: var(--sapFontLargeSize);
     min-width: 2.25rem;
     min-height: $fd-form-input-height;

diff --git a/packages/styles/src/mixins/_forms.scss b/packages/styles/src/mixins/_forms.scss
@@ -5,7 +5,15 @@
 $fd-input-field-height: 2.25rem;
 $fd-input-field-height--compact: 1.625rem;
 
-@mixin fd-input-field-base($hasFocusWithin: false, $withMinHeight: true) {
+@mixin fd-input-field-base(
+  $hasFocusWithin: false,
+  $withMinHeight: true,
+  $overrideBackgroundProperty: --sapField_BackgroundStyle,
+  $overrideBackgroundColorProperty: --sapField_Background,
+  $overrideHoverBackgroundProperty: --sapField_Hover_BackgroundStyle,
+  $overrideHoverBackgroundColorProperty: --sapField_Hover_Background,
+  $overrideFocusBackgroundProperty: --sapField_Focus_Background,
+  $overrideMinWidth: 2.75rem) {
   @include fd-reset();
   @include fd-ellipsis();
 
@@ -15,15 +23,15 @@ $fd-input-field-height--compact: 1.625rem;
 
   z-index: 1;
   width: 100%;
-  min-width: 2.75rem;
+  min-width: var(#{$overrideMinWidth}, 2.75rem);
   border-radius: var(--sapField_BorderCornerRadius);
   padding: 0 0.625rem;
   margin: 0.25rem 0;
   box-shadow: none;
   color: var(--sapField_TextColor);
   text-shadow: var(--fdInput_Text_Shadow);
-  background: var(--sapField_BackgroundStyle);
-  background-color: var(--sapField_Background);
+  background: var(#{$overrideBackgroundProperty}, var(--sapField_BackgroundStyle));
+  background-color: var(#{$overrideBackgroundColorProperty}, var(--sapField_Background));
   border: var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);
   cursor: text;
   outline: none;
@@ -53,14 +61,14 @@ $fd-input-field-height--compact: 1.625rem;
   }
 
   @include fd-hover() {
-    background: var(--sapField_Hover_BackgroundStyle);
-    background-color: var(--sapField_Hover_Background);
+    background: var(#{$overrideHoverBackgroundProperty}, var(--sapField_Hover_BackgroundStyle));
+    background-color: var(#{$overrideHoverBackgroundColorProperty}, var(--sapField_Hover_Background));
     border-color: var(--sapField_Hover_BorderColor);
     box-shadow: var(--fdInput_Box_Shadow_Hover);
   }
 
   @include fd-focus() {
-    background: var(--sapField_Focus_Background);
+    background: var(#{$overrideFocusBackgroundProperty}, var(--sapField_Focus_Background));
     outline-width: var(--sapContent_FocusWidth);
     outline-style: var(--sapContent_FocusStyle);
     outline-color: var(--fdInput_Outline_Color);
@@ -70,7 +78,7 @@ $fd-input-field-height--compact: 1.625rem;
 
   @if $hasFocusWithin {
     @include fd-focus-within() {
-      background: var(--sapField_Focus_Background);
+      background: var(#{$overrideFocusBackgroundProperty}, var(--sapField_Focus_Background));
       outline-width: var(--sapContent_FocusWidth);
       outline-style: var(--sapContent_FocusStyle);
       outline-color: var(--fdInput_Outline_Color);
@@ -334,10 +342,10 @@ $fd-input-field-height--compact: 1.625rem;
   }
 }
 
-@mixin fd-input-field-nested-reset() {
+@mixin fd-input-field-nested-reset($background-color: transparent) {
   box-shadow: none;
   background: none;
-  background-color: transparent;
+  background-color: var($background-color, transparent);
 }
 
 @mixin fd-form-base {

diff --git a/packages/styles/src/select.scss b/packages/styles/src/select.scss
@@ -6,13 +6,14 @@ $fd-select-padding-x: 0.625rem;
 $fd-select-padding-x-compact: 0.5rem;
 
 @mixin fd-select-set-min-width($width) {
-  min-width: calc(#{$width} - var(--sapField_BorderWidth) * 2);
+  min-width: calc(var(--fdSelect_Min_Width) - var(--sapField_BorderWidth) * 2);
 }
 
 @mixin fd-select-button-settings($bkgdColor, $borderLeft) {
   .#{$block}__button {
-    color: var(--sapButton_Active_TextColor);
-    background: var(--sapField_BackgroundStyle);
+    --fdInput_Group_Button_Text_Color: var(--sapButton_Active_TextColor);
+    --fdInput_Group_Button_Background: var(--sapField_BackgroundStyle);
+
     background-color: $bkgdColor;
     border-left-color: $borderLeft;
     box-shadow: var(--fdInput_Group_Button_Box_Shadow);
@@ -90,7 +91,16 @@ $fd-select-padding-x-compact: 0.5rem;
   text-shadow: var(--fdSelect_Text_Shadow);
 
   &__control {
-    @include fd-input-field-base();
+    @include fd-input-field-base(
+      false,
+      true,
+      --fdSelect_Background,
+      --fdSelect_Background_Color,
+      --fdSelect_Hover_Background,
+      --fdSelect_Hover_Background_Color,
+      --fdSelect_Focus_Background,
+      --fdSelect_Min_Width
+    );
     @include fd-input-field-states();
     @include fd-input-group-button-overwrite();
 
@@ -118,7 +128,8 @@ $fd-select-padding-x-compact: 0.5rem;
 
       .#{$block}__text-content {
         @include fd-set-paddings-x-equal($fd-select-padding-x);
-        @include fd-select-set-min-width(5rem);
+
+        --fdSelect_Min_Width: 5rem;
       }
     }
 
@@ -147,8 +158,11 @@ $fd-select-padding-x-compact: 0.5rem;
     @include fd-set-padding-left($fd-select-padding-x);
     @include fd-select-set-min-width(2.5rem);
 
+    --fdSelect_Min_Width: 2.5rem;
+
+    color: var(--fdSelect_Text_Content_Color, var(--sapTextColor));
     cursor: pointer;
-    display: inline-block;
+    display: var(--fdSelect_Text_Content_Display, inline-block);
   }
 
   &--compact {
@@ -158,7 +172,8 @@ $fd-select-padding-x-compact: 0.5rem;
 
       .#{$block}__text-content {
         @include fd-set-padding-left($fd-select-padding-x-compact);
-        @include fd-select-set-min-width(2.75rem);
+
+        --fdSelect_Min_Width: 2.75rem;
       }
 
       @include fd-readonly() {