feat(SelectInputs): make dropdown indicator match icon (#882)

* feat(SelectInputs): make dropdown indicator match icon * Update SelectInputNativeInset.module.scss
palmetto · Mar 15, 2024 · 3c9a80c · 3c9a80c
1 parent f3f9cbc
commit 3c9a80c
Show file tree

Hide file tree

Showing 6 changed files with 304 additions and 154 deletions.
diff --git a/src/components/FormLabel/FormLabel.module.scss b/src/components/FormLabel/FormLabel.module.scss
@@ -9,6 +9,6 @@
   }
 
   &.disabled {
-    color: var(--color-brand-grey-light);
+    color: var(--color-brand-grey-300);
   }
 }
diff --git a/src/components/SelectInput/SelectInput.module.scss b/src/components/SelectInput/SelectInput.module.scss
@@ -4,10 +4,16 @@
 @mixin react-select-icon {
   padding: 0;
   padding-right: 2px;
-  color: var(--form-control-icon-color, var(--INTERNAL_form-control-icon-color));
+  color: var(
+    --form-control-icon-color,
+    var(--INTERNAL_form-control-icon-color)
+  );
 
   &:hover {
-    color: var(--form-control-icon-color-hover, var(--INTERNAL_form-control-icon-color-hover));
+    color: var(
+      --form-control-icon-color-hover,
+      var(--INTERNAL_form-control-icon-color-hover)
+    );
   }
 }
 
@@ -22,19 +28,28 @@
 // stylelint-disable
 @mixin size-sm {
   :global(.react-select__control) {
-    border-radius: var(--form-control-size-sm-border-radius, var(--INTERNAL_form-control-size-sm-border-radius));
+    border-radius: var(
+      --form-control-size-sm-border-radius,
+      var(--INTERNAL_form-control-size-sm-border-radius)
+    );
     padding: 0 8px;
     min-height: 32px;
   }
 
   :global(.react-select__option),
   :global(.react-select__placeholder),
   :global(.react-select__single-value) {
-    font-size: var(--form-control-size-sm-font-size, var(--INTERNAL_form-control-size-sm-font-size));
+    font-size: var(
+      --form-control-size-sm-font-size,
+      var(--INTERNAL_form-control-size-sm-font-size)
+    );
   }
 
   :global(.react-select__multi-value__label) {
-    font-size: var(--form-control-size-sm-font-size, var(--INTERNAL_form-control-size-sm-font-size));
+    font-size: var(
+      --form-control-size-sm-font-size,
+      var(--INTERNAL_form-control-size-sm-font-size)
+    );
   }
 
   :global(.react-select__dropdown-indicator) {
@@ -45,8 +60,14 @@
     @include react-select-icon;
 
     svg {
-      width: var(--form-control-select-sm-icon-size, var(--INTERNAL_form-control-select-sm-icon-size));
-      height: var(--form-control-select-sm-icon-size, var(--INTERNAL_form-control-select-sm-icon-size));
+      width: var(
+        --form-control-select-sm-icon-size,
+        var(--INTERNAL_form-control-select-sm-icon-size)
+      );
+      height: var(
+        --form-control-select-sm-icon-size,
+        var(--INTERNAL_form-control-select-sm-icon-size)
+      );
     }
   }
 }
@@ -61,16 +82,25 @@
 
 @mixin size-md {
   :global(.react-select__control) {
-    border-radius: var(--form-control-size-md-border-radius, var(--INTERNAL_form-control-size-md-border-radius));
-    padding: 4px 8px;
+    border-radius: var(
+      --form-control-size-md-border-radius,
+      var(--INTERNAL_form-control-size-md-border-radius)
+    );
+    padding: 5px 8px;
   }
 
   :global(.react-select__single-value) {
-    font-size: var(--form-control-size-md-font-size, var(--INTERNAL_form-control-size-md-font-size));
+    font-size: var(
+      --form-control-size-md-font-size,
+      var(--INTERNAL_form-control-size-md-font-size)
+    );
   }
 
   :global(.react-select__multi-value__label) {
-    font-size: var(--form-control-size-md-font-size, var(--INTERNAL_form-control-size-md-font-size));
+    font-size: var(
+      --form-control-size-md-font-size,
+      var(--INTERNAL_form-control-size-md-font-size)
+    );
   }
 
   :global(.react-select__dropdown-indicator) {
@@ -81,8 +111,14 @@
     @include react-select-icon;
 
     svg {
-      width: var(--form-control-select-md-icon-size, var(--INTERNAL_form-control-select-md-icon-size));
-      height: var(--form-control-select-md-icon-size, var(--INTERNAL_form-control-select-md-icon-size));
+      width: var(
+        --form-control-select-md-icon-size,
+        var(--INTERNAL_form-control-select-md-icon-size)
+      );
+      height: var(
+        --form-control-select-md-icon-size,
+        var(--INTERNAL_form-control-select-md-icon-size)
+      );
     }
   }
 }
@@ -97,19 +133,28 @@
 
 @mixin size-lg {
   :global(.react-select__control) {
-    padding: 9px 8px 10px;
-    border-radius: var(--form-control-size-md-border-radius, var(--INTERNAL_form-control-size-md-border-radius));
+    padding: 11px 8px 12px 8px;
+    border-radius: var(
+      --form-control-size-md-border-radius,
+      var(--INTERNAL_form-control-size-md-border-radius)
+    );
   }
 
   :global(.react-select__option),
   :global(.react-select__placeholder),
   :global(.react-select__single-value) {
-    font-size: var(--form-control-size-lg-font-size, var(--INTERNAL_form-control-size-lg-font-size));
+    font-size: var(
+      --form-control-size-lg-font-size,
+      var(--INTERNAL_form-control-size-lg-font-size)
+    );
   }
 
   :global(.react-select__multi-value__label) {
-    font-size: var(--form-control-size-lg-font-size, var(--INTERNAL_form-control-size-lg-font-size));
-    padding: 2px 6px 3px;
+    font-size: var(
+      --form-control-size-lg-font-size,
+      var(--INTERNAL_form-control-size-lg-font-size)
+    );
+    padding: 2px 6px 1px;
   }
 
   :global(.react-select__dropdown-indicator) {
@@ -120,8 +165,14 @@
     @include react-select-icon;
 
     svg {
-      width: var(--form-control-select-lg-icon-size, var(--INTERNAL_form-control-select-lg-icon-size));
-      height: var(--form-control-select-lg-icon-size, var(--INTERNAL_form-control-select-lg-icon-size));
+      width: var(
+        --form-control-select-lg-icon-size,
+        var(--INTERNAL_form-control-select-lg-icon-size)
+      );
+      height: var(
+        --form-control-select-lg-icon-size,
+        var(--INTERNAL_form-control-select-lg-icon-size)
+      );
     }
   }
 }
@@ -135,27 +186,45 @@
 }
 
 :global(.select-input-wrapper) {
-  font-family: var(--form-control-font-family, var(--INTERNAL_form-control-font-family));
+  font-family: var(
+    --form-control-font-family,
+    var(--INTERNAL_form-control-font-family)
+  );
 
   :global(.react-select) {
     &:hover {
       :global(.react-select__dropdown-indicator) {
-        color: var(--form-control-border-color-focus, var(--INTERNAL_form-control-border-color-focus));
+        color: var(
+          --form-control-border-color-focus,
+          var(--INTERNAL_form-control-border-color-focus)
+        );
       }
     }
 
     :global(.react-select__control) {
-      line-height: var(--form-control-line-height, var(--INTERNAL_form-control-line-height));
-      border-color: var(--form-control-border-color, var(--INTERNAL_form-control-border-color));
+      line-height: var(
+        --form-control-line-height,
+        var(--INTERNAL_form-control-line-height)
+      );
+      border-color: var(
+        --form-control-border-color,
+        var(--INTERNAL_form-control-border-color)
+      );
       box-shadow: 0 3px 0 rgba(0, 0, 0, 0.05);
-      background-color: var(--form-control-background-color, var(--INTERNAL_form-control-background-color));
+      background-color: var(
+        --form-control-background-color,
+        var(--INTERNAL_form-control-background-color)
+      );
 
       :global(.react-select__value-container) {
         padding: 0;
       }
 
       :global(.react-select__placeholder) {
-        color: var(--form-control-placeholder-color, var(--INTERNAL_form-control-placeholder-color));
+        color: var(
+          --form-control-placeholder-color,
+          var(--INTERNAL_form-control-placeholder-color)
+        );
       }
 
       :global(.react-select__clear-indicator) {
@@ -166,21 +235,28 @@
         display: none;
       }
 
-      :global(.react-select__clear-indicator) {
-        @extend .react-select-icon;
-
-        margin-right: var(--form-control-select-clear-icon-margin, var(--INTERNAL_form-control-select-clear-icon-margin));
-      }
-
       &:global(.react-select__control--is-focused) {
-        border-color: var(--form-control-border-color-focus, var(--INTERNAL_form-control-border-color-focus));
-        box-shadow: var(--form-control-box-shadow, var(--INTERNAL_form-control-box-shadow-focus)),
-        inset 0 0 0 1px var(--form-control-border-color-focus, var(--INTERNAL_form-control-border-color-focus));
+        border-color: var(
+          --form-control-border-color-focus,
+          var(--INTERNAL_form-control-border-color-focus)
+        );
+        box-shadow: var(
+            --form-control-box-shadow,
+            var(--INTERNAL_form-control-box-shadow-focus)
+          ),
+          inset 0 0 0 1px
+            var(
+              --form-control-border-color-focus,
+              var(--INTERNAL_form-control-border-color-focus)
+            );
       }
 
       &:global(.react-select__control--is-disabled) {
         :global(.react-select__dropdown-indicator) {
-          color: var(--form-control-placeholder-color, var(--INTERNAL_form-control-placeholder-color));
+          color: var(
+            --form-control-placeholder-color,
+            var(--INTERNAL_form-control-placeholder-color)
+          );
         }
       }
     }
@@ -191,13 +267,25 @@
 
     &.error {
       :global(.react-select__control) {
-        border-color: var(--form-control-border-color-error, var(--INTERNAL_form-control-border-color-error));
-        background-color: var(--form-control-background-color-error, var(--INTERNAL_form-control-background-color-error));
+        border-color: var(
+          --form-control-border-color-error,
+          var(--INTERNAL_form-control-border-color-error)
+        );
+        background-color: var(
+          --form-control-background-color-error,
+          var(--INTERNAL_form-control-background-color-error)
+        );
 
         &:global(.react-select__control--is-focused) {
           outline: none;
-          border-color: var(--form-control-border-color, var(--INTERNAL_form-control-border-color));
-          background-color: var(--form-control-background-color, var(--INTERNAL_form-control-background-color));
+          border-color: var(
+            --form-control-border-color,
+            var(--INTERNAL_form-control-border-color)
+          );
+          background-color: var(
+            --form-control-background-color,
+            var(--INTERNAL_form-control-background-color)
+          );
         }
       }
     }
@@ -251,13 +339,19 @@
 
   &.disabled {
     :global(.react-select__control--is-disabled) {
-      background-color: var(--form-control-background-color-disabled, var(--INTERNAL_form-control-background-color-disabled));
+      background-color: var(
+        --form-control-background-color-disabled,
+        var(--INTERNAL_form-control-background-color-disabled)
+      );
     }
   }
 }
 // stylelint-enable
 
 // while we try to avoid important statements, this one is necessary to override bootstrap utilities that are currently in use by some of our teams
 .select-input-label {
-  margin-bottom: var(--form-control-label-margin, var(--INTERNAL_form-control-label-margin)) !important;
+  margin-bottom: var(
+    --form-control-label-margin,
+    var(--INTERNAL_form-control-label-margin)
+  ) !important;
 }
diff --git a/src/components/SelectInput/SelectInput.test.jsx b/src/components/SelectInput/SelectInput.test.jsx
@@ -259,29 +259,10 @@ describe('SelectInput', () => {
     });
 
     describe('Is Clearable', () => {
-      test('it does not render the X icon if input has value but is not clearable', () => {
-        const mockedHandleChange = jest.fn();
-
-        const { container } = render(
-          <SelectInput
-            id="testId"
-            onChange={mockedHandleChange}
-            label="Select Label"
-            options={selectOptions}
-            value={selectOptions[0]}
-            isClearable={false}
-          />,
-        );
-
-        expect(
-          container.querySelector('.react-select__clear-indicator'),
-        ).not.toBeInTheDocument();
-      });
-
       test('it renders the X icon if input has value and is clearable', () => {
         const mockedHandleChange = jest.fn();
 
-        const { container } = render(
+        render(
           <SelectInput
             id="testId"
             onChange={mockedHandleChange}
@@ -293,7 +274,7 @@ describe('SelectInput', () => {
         );
 
         expect(
-          container.querySelector('.react-select__clear-indicator'),
+          screen.getByTestId('icon-testid--remove-light'),
         ).toBeInTheDocument();
       });
     });