feat: match Select component height with form inputs

Royal-Navy · Mar 9, 2020 · 1426376 · 1426376
1 parent f8b3eaf
commit 1426376
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 26 deletions.
diff --git a/packages/css-framework/src/components/_select.scss b/packages/css-framework/src/components/_select.scss
@@ -3,10 +3,16 @@
 .rn-select {
   position: relative;
 
+  .rn-select__control {
+    padding-top: f.spacing("px");
+    padding-bottom: f.spacing("px");
+    border: 1px solid f.color("neutral", "200");
+  }
+
   .rn-select__control--is-focused,
   .rn-select__control:hover {
     border-color: f.color("action", "600");
-    box-shadow: 0 0 0 1px f.color("action", "600");
+    box-shadow: 0 0 0 1px f.color("action", "600"), 0 0 0 4px f.color("action", "100");
     &.rn-select__control--menu-is-open {
       border-bottom-color: transparent;
     }
@@ -16,6 +22,7 @@
     padding: 0;
   }
 
+
   .rn-select__control--menu-is-open {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
@@ -27,15 +34,29 @@
     padding-right: (40px - 11px)/2;
   }
 
+  .rn-select__indicator-separator {
+    background-color: f.color("neutral", "100");
+  }
+
   .rn-select__menu {
-    margin-top: 0;
+    margin-top: -1px;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
-    box-shadow:
-      -1px 1px 0 0 f.color("action", "600"),
-      1px 1px 0 0 f.color("action", "600");
+    box-shadow: 0 0 0 1px f.color("action", "600"),
+      -2px 2px 0 2px f.color("action", "100"),
+      2px 2px 0 2px f.color("action", "100");
     border: 1px solid f.color("action", "600");
     border-top: 0;
+    background:f.color("neutral", "white");
+    &::after {
+      position: absolute;
+      top: -1px;
+      right: 0;
+      left: 0;
+      height: 1px;
+      background: f.color("neutral", "white");
+      content: "";
+    }
   }
 
   .rn-select__menu-list {
@@ -44,8 +65,19 @@
   }
 
   .rn-select__option {
-    border-radius: 4px;
+    border-radius: 2px;
     color: f.color("neutral", "500");
+    display: flex;
+    align-items: center;
+    padding-top: f.spacing("4");
+    padding-bottom: f.spacing("4");
+    padding-left: f.spacing("4");
+    font-size: f.font-size("base");
+    font-weight: 500;
+    margin-top: f.spacing("2");
+    .rn-badge {
+      transform: translateY(1px);
+    }
   }
 
   .rn-select__option--is-focused {
@@ -83,11 +115,13 @@
   .rn-select__single-value {
     padding-right: 50px;
     overflow: visible;
+    padding-bottom: f.spacing("2");
   }
 
+
   .rn-select__single-value .rn-select__badge {
     display: inline-block;
-    bottom: f.spacing("2");
+    transform: translateY(-1px);
   }
 
   .rn-select__label {
@@ -107,20 +141,10 @@
     white-space: nowrap;
   }
 
-  .rn-select__badge {
-    font-size: f.font-size("xs");
-    padding: f.spacing("2") f.spacing("4");
-    background-color: f.color("neutral", "500");
-    display: inline-block;
-    border-radius: 100px;
-    color: f.color("neutral", "white");
-    margin-left: f.spacing("2");
-    position: absolute;
-  }
 
   .rn-select__control--is-focused .rn-select__label,
   .rn-select__value-container--has-value .rn-select__label {
-    transform: translate(f.spacing("6"), 6px) scale(0.8);
+    transform: translate(f.spacing("6"), 5px) scale(0.8);
   }
 
   .rn-arrow__fill {

diff --git a/packages/react-component-library/src/components/Select/Option.tsx b/packages/react-component-library/src/components/Select/Option.tsx
@@ -10,17 +10,21 @@ export interface SelectOptionWithBadgeType {
   value: string
 }
 
-export const Option: React.FC<
-  OptionProps<SelectOptionWithBadgeType>
-> = props => {
+export const Option: React.FC<OptionProps<
+  SelectOptionWithBadgeType
+>> = props => {
   const {
     data: { badge, label },
   } = props
 
   return (
     <components.Option {...props} data-testid="select-option">
       <span data-testid="select-option-label">{label}</span>
-      {badge && <Badge className="rn-select__badge">{badge}</Badge>}
+      {badge && (
+        <Badge className="rn-select__badge rn_ml-3" size="small">
+          {badge}
+        </Badge>
+      )}
     </components.Option>
   )
 }
diff --git a/packages/react-component-library/src/components/Select/SingleValue.tsx b/packages/react-component-library/src/components/Select/SingleValue.tsx
@@ -5,14 +5,16 @@ import { SingleValueProps } from 'react-select/src/components/SingleValue'
 import { Badge } from '../Badge'
 import { SelectOptionWithBadgeType } from './Option'
 
-export const SingleValue: React.FC<
-  SingleValueProps<SelectOptionWithBadgeType>
-> = ({ children, ...props }) => {
+export const SingleValue: React.FC<SingleValueProps<
+  SelectOptionWithBadgeType
+>> = ({ children, ...props }) => {
   return (
     <components.SingleValue {...props} data-testid="select-single-value">
       <span data-testid="select-single-value-label">{children}</span>
       {props.data.badge && (
-        <Badge className="rn-select__badge">{props.data.badge}</Badge>
+        <Badge className="rn-select__badge rn_ml-2" size="xsmall">
+          {props.data.badge}
+        </Badge>
       )}
     </components.SingleValue>
   )