fix: focus of select (#1973)

* fix: focus of select * fix: resolve comments * fix: change __text-content to __text * fix:tests * fix: change outline to border * fix:select min width
SAP · Dec 30, 2020 · 860970e · 860970e
1 parent c4255dc
commit 860970e
Showing 1 changed file with 52 additions and 13 deletions.
diff --git a/src/select.scss b/src/select.scss
@@ -2,6 +2,7 @@
 @import "./mixins";
 
 $block: #{$fd-namespace}-select;
+$outline-offset: 0.1875rem;
 
 .#{$block} {
   $fd-select-padding-x: 0.625rem;
@@ -17,6 +18,7 @@ $block: #{$fd-namespace}-select;
   text-shadow: var(--fdSelect_Text_Shadow);
 
   &__control {
+    @include fd-reset();
     @include fd-form-base();
 
     height: $fd-form-input-height;
@@ -26,7 +28,6 @@ $block: #{$fd-namespace}-select;
     align-items: center;
     justify-content: space-between;
     padding-right: 0;
-    padding-left: $fd-select-padding-x;
 
     .#{$block}__button {
       align-items: center;
@@ -42,13 +43,34 @@ $block: #{$fd-namespace}-select;
       }
     }
 
-    @include fd-fiori-focus();
     @include fd-form-states();
 
+    @include fd-focus() {
+      outline: 0;
+
+      &::before {
+        content: '';
+        top: $outline-offset;
+        left: $outline-offset;
+        border-width: var(--sapContent_FocusWidth);
+        border-color: var(--sapContent_FocusColor);
+        border-style: var(--sapContent_FocusStyle);
+        height: calc(100% - (2 * #{$outline-offset}));
+        width: calc(100% - (2 * #{$outline-offset}));
+        z-index: 1;
+        position: absolute;
+      }
+    }
+
     @include fd-rtl() {
       text-align: right;
-      padding-right: $fd-select-padding-x;
       padding-left: 0;
+
+      @include fd-focus() {
+        &::before {
+          right: -0.0234375rem;
+        }
+      }
     }
 
     @include fd-hover() {
@@ -81,34 +103,51 @@ $block: #{$fd-namespace}-select;
     }
 
     &.is-readonly {
-      padding-right: $fd-select-padding-x;
-      padding-left: $fd-select-padding-x;
+      .#{$block}__text-content {
+        padding-right: $fd-select-padding-x;
+        padding-left: $fd-select-padding-x;
+      }
+
       cursor: text;
     }
   }
 
-  &__text {
+  &__text-content {
+    @include fd-reset();
+
     font-size: var(--sapFontSize);
-  }
+    padding-left: $fd-select-padding-x;
+    min-width: 5.625rem;
 
-  &__text-content {
-    min-width: 5rem;
+    @include fd-rtl() {
+      padding-left: 0;
+      padding-right: $fd-select-padding-x;
+    }
   }
 
   &--compact {
     .#{$block}__control {
       height: $fd-form-input-height--compact;
-      padding-left: $fd-select-padding-compact-x;
+
+      .#{$block}__text-content {
+        padding-left: $fd-select-padding-compact-x;
+      }
 
       @include fd-rtl() {
         text-align: right;
-        padding-right: $fd-select-padding-compact-x;
         padding-left: 0;
+
+        .#{$block}__text-content {
+          padding-left: 0;
+          padding-right: $fd-select-padding-compact-x;
+        }
       }
 
       &.is-readonly {
-        padding-right: $fd-select-padding-compact-x;
-        padding-left: $fd-select-padding-compact-x;
+        .#{$block}__text-content {
+          padding-right: $fd-select-padding-compact-x;
+          padding-left: $fd-select-padding-compact-x;
+        }
       }
     }
   }