fix: select style consistency with input one

traefik · Nov 10, 2021 · cb4065d · cb4065d
1 parent 800c951
commit cb4065d
Show file tree

Hide file tree

Showing 5 changed files with 150 additions and 126 deletions.
diff --git a/components/Input/Input.themes.ts b/components/Input/Input.themes.ts
@@ -3,7 +3,7 @@ import tinycolor from 'tinycolor2';
 import { ColorInfo } from '../../utils/getPrimaryColorInfo';
 
 export namespace Theme {
-  type Colors = {
+  export type Colors = {
     inputBg: Property.Color;
     inputBorder: Property.Color;
     inputFocusBg: Property.Color;

diff --git a/components/Input/Input.tsx b/components/Input/Input.tsx
@@ -230,19 +230,13 @@ const InputWrapper = styled('div', {
     boxSizing: 'border-box',
     content: '""',
     position: 'absolute',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
+    inset: 0,
   },
   '&::after': {
     boxSizing: 'border-box',
     content: '""',
     position: 'absolute',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
+    inset: 0,
   },
 
   '&:focus-visible': {

diff --git a/components/Select/Select.stories.tsx b/components/Select/Select.stories.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import { BaseSelect, SelectProps, SelectVariants } from './Select';
+import { Select, SelectProps, SelectVariants } from './Select';
 import { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';
 
+const BaseSelect = (props: SelectProps): JSX.Element => <Select {...props} />;
 const SelectForStory = modifyVariantsForStory<
   SelectVariants,
   SelectProps & React.InputHTMLAttributes<any>
@@ -16,34 +17,30 @@ export default {
 
 const Template: ComponentStory<typeof SelectForStory> = (args) => (
   <SelectForStory {...args}>
-    <option>Option 1</option>
-    <option>Option 2</option>
-    <option>Option 3</option>
-    <option>Option 4</option>
-    <option>Option 5</option>
+    <option value="option1">Option 1</option>
+    <option value="option2">Option 2</option>
+    <option value="option3">Option 3</option>
+    <option value="option4">Option 4</option>
+    <option value="option5">Option 5</option>
   </SelectForStory>
 );
 
 export const Basic = Template.bind({});
 
 Basic.args = {};
 
-export const Large = Template.bind({});
+export const Size = Template.bind({});
 
-Large.args = { size: 'large', placeholder: 'placeholder' };
+Size.args = { size: 'large', placeholder: 'placeholder' };
 
-export const Ghost = Template.bind({});
+export const Variant = Template.bind({});
 
-Ghost.args = { variant: 'ghost', value: 'value' };
+Variant.args = { variant: 'ghost', defaultValue: 'option3' };
 
-export const Invalid = Template.bind({});
+export const State = Template.bind({});
 
-Invalid.args = { state: 'invalid' };
+State.args = { state: 'invalid' };
 
 export const Disabled = Template.bind({});
 
-Disabled.args = { disabled: true, value: 'value' };
-
-export const ReadOnly = Template.bind({});
-
-ReadOnly.args = { readOnly: true, value: 'value' };
+Disabled.args = { disabled: true, defaultValue: 'option3' };
diff --git a/components/Select/Select.themes.ts b/components/Select/Select.themes.ts
@@ -1,5 +1,6 @@
 import { Property } from '@stitches/react/types/css';
 import { ColorInfo } from '../../utils/getPrimaryColorInfo';
+import { Theme as InputTheme } from '../Input/Input.themes';
 
 export namespace Theme {
   type Colors = {
@@ -11,35 +12,29 @@ export namespace Theme {
     selectText: Property.Color;
     selectPlaceholder: Property.Color;
     selectDisabledText: Property.Color;
-    selectDisabledBorder: Property.Color;
-    selectReadOnlyBg: Property.Color;
+    selectInvalidBorder: Property.Color;
   };
 
-  type Factory = (primaryColor?: ColorInfo) => Colors;
+  type Factory = (primaryColor: ColorInfo) => Colors;
+  type FactoryMapper = (colors: InputTheme.Colors) => Colors;
 
-  export const getLight: Factory = () => ({
-    selectBg: '$deepBlue3',
-    selectBorder: '$deepBlue6',
-    selectFocusBg: '$deepBlue2',
-    selectFocusBorder: '$deepBlue10',
-    selectHoverBg: '$deepBlue2',
-    selectText: '$deepBlue9',
-    selectPlaceholder: '$deepBlue6',
-    selectDisabledText: '$deepBlue5',
-    selectDisabledBorder: '$deepBlue5',
-    selectReadOnlyBg: '$deepBlue3',
+  const remapInputTheme: FactoryMapper = (inputLightOrDark) => ({
+    selectBg: inputLightOrDark.inputBg,
+    selectBorder: inputLightOrDark.inputBorder,
+    selectFocusBg: inputLightOrDark.inputFocusBg,
+    selectFocusBorder: inputLightOrDark.inputFocusBorder,
+    selectHoverBg: inputLightOrDark.inputHoverBg,
+    selectText: inputLightOrDark.inputText,
+    selectPlaceholder: inputLightOrDark.inputPlaceholder,
+    selectDisabledText: inputLightOrDark.inputDisabledText,
+    selectInvalidBorder: inputLightOrDark.inputInvalidBorder,
   });
 
-  export const getDark: Factory = () => ({
-    selectBg: '$deepBlue3',
-    selectBorder: '$deepBlue6',
-    selectFocusBg: '$deepBlue1',
-    selectFocusBorder: '$deepBlue9',
-    selectHoverBg: '$deepBlue1',
-    selectText: '$deepBlue9',
-    selectPlaceholder: '$deepBlue6',
-    selectDisabledText: '$deepBlue5',
-    selectDisabledBorder: '$deepBlue4',
-    selectReadOnlyBg: '$deepBlue2',
+  export const getLight: Factory = (primaryColor) => ({
+    ...remapInputTheme(InputTheme.getLight(primaryColor)),
+  });
+
+  export const getDark: Factory = (primaryColor) => ({
+    ...remapInputTheme(InputTheme.getDark(primaryColor)),
   });
 }