fix(styles): adjusts select Icon to match figma (#2164)

swisspost · Oct 31, 2023 · 50e0624 · 50e0624
1 parent 29888b9
commit 50e0624
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 3 deletions.
diff --git a/.changeset/angry-falcons-accept.md b/.changeset/angry-falcons-accept.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Changed dropdown icon for the select component and adjusted the size of the icon.
diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss
@@ -78,6 +78,7 @@
 
     padding-top: forms.$form-floating-input-padding-t;
     padding-bottom: forms.$form-floating-input-padding-b;
+    background-size: forms.$form-floating-select-bg-size;
 
     ~ label {
       padding-top: 0.7rem;

diff --git a/packages/styles/src/variables/components/_form-select.scss b/packages/styles/src/variables/components/_form-select.scss
@@ -7,7 +7,7 @@ $form-select-disabled-color: forms.$input-disabled-color;
 $form-select-disabled-bg: forms.$input-disabled-bg;
 $form-select-disabled-border-color: forms.$input-disabled-border-color;
 $form-select-indicator-color: color.$black;
-$form-select-bg-size: 14px 14px !default;
-$_form-select-indicator-icon: icons.get-colored-svg-url('2052', $form-select-indicator-color);
+$form-select-bg-size: 24px 24px !default;
+$_form-select-indicator-icon: icons.get-colored-svg-url('2113', $form-select-indicator-color);
 $form-select-indicator: url($_form-select-indicator-icon) !default;
-$form-select-indicator-hcm: url(icons.get-colored-svg-url('2052', color.$white)) !default;
+$form-select-indicator-hcm: url(icons.get-colored-svg-url('2113', color.$white)) !default;
diff --git a/packages/styles/src/variables/components/_forms.scss b/packages/styles/src/variables/components/_forms.scss
@@ -127,3 +127,4 @@ $form-floating-transition: animation.$transition-base;
 $form-floating-transition-in: $form-floating-transition,
   width 0ms list.nth(animation.$transition-base, 2);
 $form-floating-transition-out: $form-floating-transition, width 0ms linear;
+$form-floating-select-bg-size: 32px 32px;