fix: input and select component

intermine · Nov 19, 2021 · c847359 · c847359
1 parent 00f6998
commit c847359
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 8 deletions.
diff --git a/src/input/input.tsx b/src/input/input.tsx
@@ -128,6 +128,9 @@ interface IconContainerProps {
     }
 }
 
+// TODO: Don't depend on padding to get a specific height of input box.
+// TODO: Use fixed value instead.
+
 const InputRoot = createStyledComponent<typeof InputBase, InputProps>(
     InputBase,
     (theme, props) => {
@@ -143,10 +146,10 @@ const InputRoot = createStyledComponent<typeof InputBase, InputProps>(
         const { body, bodySm, h3 } = themePropsForThemeVarFn.typography
 
         const getPadding = (): string => {
-            if (size === 'regular') return '0.4rem 0.625rem'
-            if (size === 'small') return '0.3rem 0.4rem'
+            if (size === 'regular') return '0.6rem'
+            if (size === 'small') return '0.4rem 0.6rem'
 
-            return '0.5rem 0.8rem'
+            return '0.8rem 0.6rem'
         }
 
         const getTypographyProperties = (): CSSObject => {
@@ -298,7 +301,7 @@ const IconContainer = createStyledComponent<'div ', IconContainerProps>(
                     width: '2rem'
                 }
             return {
-                width: '2rem'
+                width: '1.5rem'
             }
         }
 
@@ -319,7 +322,7 @@ const IconContainer = createStyledComponent<'div ', IconContainerProps>(
 
         const getPadding = (): string => {
             if (size === 'regular' || size === 'large') return '0.5rem'
-            return '0.125rem'
+            return '0.25rem'
         }
 
         return {

diff --git a/src/select/select.stories.tsx b/src/select/select.stories.tsx
@@ -21,3 +21,15 @@ Default.args = {
         { value: 'covid-mind', label: 'CovidMine' },
     ],
 }
+
+export const MultipleSelect = Template.bind({})
+MultipleSelect.args = {
+    isDisabled: false,
+    isMulti: true,
+    options: [
+        { value: 'fly-mine', label: 'FlyMine' },
+        { value: 'human--mine', label: 'HumanMine' },
+        { value: 'rat-mine', label: 'RatMine' },
+        { value: 'covid-mind', label: 'CovidMine' },
+    ],
+}
diff --git a/src/select/select.tsx b/src/select/select.tsx
@@ -129,10 +129,9 @@ export const Select = forwardRef(
 
             const _neutral = tto(themeType, grey, darkGrey)
             const _neutralText = tto(themeType, black, white)
-
             return {
-                danger: error.main,
-                dangerLight: error.mainLightShade,
+                danger: error.text,
+                dangerLight: error.main,
                 neutral0: tto(themeType, white, _neutral[30]),
                 neutral5: disable.main,
                 neutral10: disable.mainDarkShade,