feat(fn): introduce Input Messages [ci visual] (#3204)

* feat(fn): introduce Input Messages [ci visual] * feat(fn): introduce Input Messages [ci visual]
SAP · Feb 23, 2022 · fd0d22c · fd0d22c
1 parent 735ab5c
commit fd0d22c
Show file tree

Hide file tree

Showing 8 changed files with 422 additions and 282 deletions.
diff --git a/src/fn/fn-form.scss b/src/fn/fn-form.scss
@@ -34,4 +34,12 @@ $fn-form-item-margin-bottom: 0.75rem;
       }
     }
   }
+
+  &__control {
+    @include fn-reset();
+
+    flex: 1;
+    max-width: 100%;
+    position: relative;
+  }
 }
diff --git a/src/fn/fn-input-message.scss b/src/fn/fn-input-message.scss
@@ -0,0 +1,36 @@
+@import "./fn-settings";
+
+$block: #{$fn-namespace}-input-message;
+
+$fn-input-message-states: (
+  "positive": ("background": $fn-color-green-2),
+  "critical": ("background": $fn-color-mango-2),
+  "negative": ("background": $fn-color-red-2),
+  "info": ("background": $fn-color-blue-2),
+);
+
+.#{$block} {
+  @include fn-reset();
+
+  width: 100%;
+  max-width: 100%;
+  position: absolute;
+  top: calc(100% - 0.3125rem);
+  z-index: 1;
+  min-height: $fn-control-height;
+  padding: 0.625rem 0.625rem 0.375rem 0.625rem;
+  border-radius: 0 0 $fn-border-radius-6 $fn-border-radius-6;
+
+  @each $set-name, $set-prop in $fn-input-message-states {
+    &--#{$set-name} {
+      background: map-get($set-prop, 'background');
+    }
+  }
+
+  &__text {
+    @include fn-reset();
+
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+}
diff --git a/src/fn/fn-input.scss b/src/fn/fn-input.scss
@@ -2,12 +2,12 @@
 
 $block: #{$fn-namespace}-input;
 
-@mixin fn-input-base($background, $border, $shadow, $hasFocus: false) {
-  @if $hasFocus {
+@mixin fn-input-base($background, $border, $shadow, $focusShadow: false) {
+  @if $focusShadow {
     @if $shadow != "none" {
-      box-shadow: $shadow, $fn-focus-outline-shadow-blue;
+      box-shadow: $shadow, $focusShadow;
     } @else {
-      box-shadow: $fn-focus-outline-shadow-blue;
+      box-shadow: $focusShadow;
     }
   } @else {
     box-shadow: $shadow;
@@ -34,29 +34,19 @@ $block: #{$fn-namespace}-input;
   border-radius: $fn-border-radius-6;
 }
 
-@mixin fn-input-base-states() {
+@mixin fn-input-base-states($shadowFocus) {
   @content;
 
   @include fn-active() {
-    @include fn-input-base($fn-color-white, transparent, none, true);
-
-    & ~ [class*='sap-icon'] {
-      display: none;
-    }
+    @include fn-input-base($fn-color-white, transparent, none, $shadowFocus);
   }
 
   @include fn-focus() {
-    @include fn-input-base($fn-color-white, transparent, none, true);
+    @include fn-input-base($fn-color-white, transparent, none, $shadowFocus);
 
     outline: none;
   }
 
-  @include fn-focus-active() {
-    & ~ [class*='sap-icon'] {
-      display: none;
-    }
-  }
-
   @include fn-disabled() {
     pointer-events: none;
     opacity: $fn-disabled-opacity;
@@ -86,7 +76,7 @@ $block: #{$fn-namespace}-input;
   }
 }
 
-@mixin fn-input-base-semantics($background, $border, $shadow) {
+@mixin fn-input-base-semantics($background, $border, $shadow, $shadowFocus) {
   [class*='sap-icon'] {
     color: $border;
     position: absolute;
@@ -96,7 +86,7 @@ $block: #{$fn-namespace}-input;
     @include fn-set-paddings-x($fn-padding-small, 1.625rem);
     @include fn-input-base($background, $border, none);
 
-    @include fn-input-base-states() {
+    @include fn-input-base-states($shadowFocus) {
       @include fn-hover() {
         @include fn-input-base($fn-color-white, $border, $shadow);
       }
@@ -108,12 +98,13 @@ $block: #{$fn-namespace}-input;
   @include fn-reset();
   @include fn-input-base-parameters();
 
+  z-index: 2;
   position: relative;
 
   [class*='sap-icon'] {
     @include fn-set-position-right(0.25rem);
 
-    z-index: 2;
+    z-index: 3;
     width: 1.125rem;
     font-size: 0.9375rem;
     text-align: center;
@@ -136,7 +127,7 @@ $block: #{$fn-namespace}-input;
       line-height: $fn-input-placeholder-line-height;
     }
 
-    @include fn-input-base-states() {
+    @include fn-input-base-states($fn-focus-outline-shadow-blue) {
       @include fn-hover() {
         @include fn-input-base($fn-color-white, $fn-color-grey-7, $fn-shadow-grey-level-1);
       }
@@ -164,19 +155,19 @@ $block: #{$fn-namespace}-input;
   }
 
   &--info {
-    @include fn-input-base-semantics($fn-color-blue-1, $fn-color-blue-7, $fn-shadow-blue-level-1);
+    @include fn-input-base-semantics($fn-color-blue-1, $fn-color-blue-7, $fn-shadow-blue-level-1, $fn-focus-outline-shadow-blue);
   }
 
   &--critical {
-    @include fn-input-base-semantics($fn-color-mango-1, $fn-color-mango-6, $fn-shadow-mango-level-1);
+    @include fn-input-base-semantics($fn-color-mango-1, $fn-color-mango-6, $fn-shadow-mango-level-1, $fn-focus-outline-shadow-mango);
   }
 
   &--negative {
-    @include fn-input-base-semantics($fn-color-red-1, $fn-color-red-7, $fn-shadow-red-level-1);
+    @include fn-input-base-semantics($fn-color-red-1, $fn-color-red-7, $fn-shadow-red-level-1, $fn-focus-outline-shadow-red);
   }
 
   &--positive {
-    @include fn-input-base-semantics($fn-color-green-1, $fn-color-green-7, $fn-shadow-green-level-1);
+    @include fn-input-base-semantics($fn-color-green-1, $fn-color-green-7, $fn-shadow-green-level-1, $fn-focus-outline-shadow-green);
   }
 
   &--select {

diff --git a/src/fn/fundamental-next.scss b/src/fn/fundamental-next.scss
@@ -7,6 +7,7 @@
 @import "./fn-fieldset";
 @import "./fn-generic-tag";
 @import "./fn-input";
+@import "./fn-input-message";
 @import "./fn-label";
 @import "./fn-link";
 @import "./fn-message-box";