pixel-react 1.2.8 → 1.2.9

package/src/components/Select/Select.scss

@@ -1,250 +1,183 @@
 @use '../../assets/styles/fonts';
 
-// todo color need to be add into style guide
-@mixin transition-all($time: 0.3s) {
-  transition: opacity $time ease-out, transform $time ease-out,
-    font-size $time ease-out, padding $time ease-out;
-}
-
-@mixin absolute-position($top: auto, $right: auto, $bottom: auto, $left: auto) {
-  position: absolute;
-  top: $top;
-  right: $right;
-  bottom: $bottom;
-  left: $left;
+@mixin svg-path-style($fill-color: var(--ff-select-brand-color)) {
+  svg {
+    path {
+      fill: $fill-color;
+      transition: all 0.18s ease;
+    }
+  }
 }
 
-@mixin opacity-style($opacity: 1, $color: null, $border-color-arg: null) {
-  opacity: $opacity;
+@mixin select-state-style($color) {
+  border-color: $color;
 
-  @if $color {
+  .ff-select-label {
     color: $color;
   }
 
-  @if $border-color-arg {
-    border-color: $border-color-arg;
+  .ff-select-arrow-wrapper {
+    .ff-select-arrow {
+      @include svg-path-style($color);
+    }
   }
 }
 
 .ff-select-wrapper {
-  position: relative;
-  
-  .ff-select-input {
-    cursor: pointer;
-  }
+  min-height: 24px;
+  min-width: 50px;
 
   .ff-select {
-    @extend .fontSm;
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    min-height: 32px;
-    min-width: 100px;
+    height: 100%;
+    border: 1px solid var(--ff-select-border-color);
+    border-radius: 4px;
     display: flex;
-    align-items: end;
+    align-items: center;
+    justify-content: space-evenly;
     position: relative;
+    box-sizing: border-box;
 
-    &-fieldset {
-      margin: 0;
-      padding: 25px 0px 0px 8px;
-      border: 1px solid transparent;
-      box-sizing: border-box;
-      height: 100%;
-      width: 100%;
-      border-radius: 4px;
-      display: block;
-
-      &--border-radius {
-        border-radius: 0px 4px 4px 0px;
-      }
-
-      &--no-label {
-        padding: 30px 0px 0px 8px;
-      }
-
-      &--default {
-        @include opacity-style(0, null, var(--ff-select-border-color));
-      }
+    &:hover {
+      @include select-state-style(var(--ff-select-text-hover-color));
+    }
 
-      &--active {
-        @include opacity-style(1, null, var(--ff-select-brand-color));
-      }
+    .ff-select-input {
+      @extend .fontSm;
+      width: calc(100% - 8px);
+      padding: 0px 0px 0px 8px;
+      border: none;
+      outline: none;
+      line-height: 30px;
+      letter-spacing: 0.5px;
+      z-index: 10;
+      background: transparent;
 
-      &--option {
-        opacity: 1;
+      &__disabled {
+        cursor: not-allowed;
+        color: var(--ff-select-border-color);
       }
+    }
 
-      &--no-border {
-        border-color: transparent;
-      }
+    .ff-select-arrow-wrapper {
+      cursor: pointer;
+      height: 100%;
+      padding: 0px;
+      padding-right: 8px;
+      display: flex;
+      align-items: center;
 
-      &--error {
-        border-color: var(--error-light);
+      .ff-select-arrow {
+        @include svg-path-style(var(--ff-select-border-color));
       }
 
-      .ff-select-legend {
-        @extend .font-size-8;
-        padding: 0 2px;
-        letter-spacing: 0.5px;
-
-        &--default {
-          @include transition-all(0.3s);
-          opacity: 0;
-        }
-
-        &--active {
-          @include transition-all(0.25s);
-          @include opacity-style(1, var(--ff-select-brand-color));
-        }
-
-        &--option {
-          @include opacity-style(1, var(--ff-select-default-color));
-        }
-
-        &--error {
-          color: var(--error-light);
-        }
-
-        &--required {
-          margin-right: 2px;
-        }
+      &__disabled {
+        cursor: not-allowed;
       }
     }
 
-    &-input {
+    .ff-select-label {
       @extend .fontSm;
-      @include absolute-position(6px, auto, auto, auto);
-      width: 100%;
-      min-height: calc(100% - 8px);
-      padding: 0 28px 0 8px;
+      position: absolute;
+      left: 8px;
+      color: var(--ff-select-border-color);
+      letter-spacing: 0.5px;
+      line-height: 18px;
+      transition: 0.18s ease all;
       border-radius: 4px;
-      border: 1px solid transparent;
-      z-index: 100;
-      background: transparent;
-      outline: none;
 
-      &:hover {
-        ~ .ff-select-label {
-          color: var(--ff-select-text-hover-color);
-        }
+      &__active {
+        @extend .font-size-8;
+        transform: translateY(-15px);
+        transition: 0.18s ease all;
+        background-color: var(--ff-select-background-color);
+        padding: 0px 4px;
+        z-index: 100000;
       }
+    }
 
-      &--border-radius {
-        border-radius: 0px 4px 4px 0px;
+    &__focus {
+      border-color: var(--ff-select-brand-color);
+      &:hover {
+        @include select-state-style(var(--ff-select-brand-color));
       }
 
-      &--default {
-        @include opacity-style(1, null, var(--ff-select-border-color));
-
-        &:hover {
-          border-color: var(--ff-select-text-color);
-
-          ~ .ff-select-fieldset--option {
-            border-color: var(--ff-select-text-color);
-
-            .ff-select-legend--option {
-              color: var(--ff-select-text-color);
-            }
-          }
+      .ff-select-label {
+        @extend .font-size-8;
+        transform: translateY(-15px);
+        transition: 0.18s ease all;
+        color: var(--ff-select-brand-color);
+        background-color: var(--ff-select-background-color);
+        padding: 0px 4px;
+        line-height: 18px;
+        z-index: 100000;
+      }
+
+      .ff-select-arrow-wrapper {
+        .ff-select-arrow {
+          transform: rotate(180deg);
+          transition: 0.18s ease all;
+          @include svg-path-style(var(--ff-select-brand-color));
         }
       }
+    }
 
-      &--no-label {
-        min-height: calc(100% - 2px);
-        margin-top: 0px;
-        top: 0px;
-      }
-
-      &--active {
-        border-color: transparent;
-
-        &:hover {
-          border-color: transparent;
-        }
+    &__disabled {
+      cursor: not-allowed;
+      &:hover {
+        @include select-state-style(var(--ff-select-border-color));
       }
+    }
 
-      &--no-border {
-        border: none;
-        border-color: transparent;
+    &__error {
+      border-color: var(--error_light);
 
-        &:hover {
-          border-color: transparent;
+      &:hover {
+        border-color: var(--error_light);
 
-          ~ .ff-select-fieldset--no-border {
-            border-color: transparent;
-          }
+        .ff-select-label {
+          color: var(--error_light);
         }
-      }
-
-      &--disable {
-        border-color: var(--ff-select-border-color);
-
-        &:hover {
-          border-color: var(--ff-select-border-color);
 
-          ~ .ff-select-label--default {
-            color: var(--ff-select-default-color);
+        .ff-select-arrow-wrapper {
+          .ff-select-arrow {
+            @include svg-path-style(var(--ff-select-default-color));
           }
         }
       }
 
-      &--error {
-        border-color: var(--error-light);
-
+      &__focused {
         &:hover {
-          border-color: var(--error-light);
+          .ff-select-arrow-wrapper {
+            .ff-select-arrow {
+              @include svg-path-style(var(--ff-select-brand-color));
+            }
+          }
         }
       }
-    }
-
-    &-label {
-      @include absolute-position(13px, auto, auto, 8px);
-      z-index: 1;
-      font-size: 12px;
-      top: 60%;
-      padding-left: 8px;
 
-      &--default {
-        @include transition-all;
-        @include opacity-style(1, var(--ff-select-default-color));
-
-        transform: translateY(-50%);
-      }
-
-      &--active {
+      .ff-select-label {
         @extend .font-size-8;
-        @include transition-all;
-        opacity: 0;
-        transform: translateY(-150%);
-        padding: 0 6px;
-      }
-
-      &--required {
-        margin-right: 2px;
+        transform: translateY(-16px);
+        transition: 0.3s ease all;
+        color: var(--error_light);
+        background-color: var(--ff-select-background-color);
+        padding: 0px 4px;
+        line-height: 18px;
       }
     }
 
-    &-arrow {
-      position: absolute;
-      top: 60%;
-      height: 100%;
-      right: 10px;
-      transform: rotateX(180deg) translateY(50%);
-      cursor: pointer;
-
-      &--no-label {
-        top: 50%;
-      }
+    &__no_border {
+      border-color: transparent;
 
-      &--down {
-        transform: rotateX(0deg) translateY(-50%);
-        z-index: 101;
+      &:hover {
+        border-color: transparent;
       }
     }
   }
 
-  &-error-text {
-    @include absolute-position(auto, auto, -14px, 12px);
-    white-space: nowrap;
+  .ff-select-error-msg {
+    padding-left: 8px;
+    margin-top: 4px;
+    letter-spacing: 0.5px;
   }
 }

package/src/components/Select/Select.stories.tsx

@@ -113,7 +113,10 @@ export const Disable: Story = {
 export const WithInitialValue: Story = {
   args: {
     label: 'Select',
-    selectedOption: { label: 'Option 2', value: 'Option 2' },
+    selectedOption: {
+      label: 'fire-flink-LIC4900-onPrem',
+      value: 'fire-flink-LIC4900-onPrem',
+    },
     optionsList: [
       {
         label: 'fire-flink-LIC4900-onPrem',