fix(Select): component doesn't have stretch prop

8base · May 7, 2019 · ab21679 · ab21679
1 parent 4aab9e0
commit ab21679
Show file tree

Hide file tree

Showing 9 changed files with 19 additions and 10 deletions.
diff --git a/...mage_snapshots__/select-field-test-js-components-select-field-common-1-snap.png b/...mage_snapshots__/select-field-test-js-components-select-field-common-1-snap.png
diff --git a/..._tests__/__image_snapshots__/select-test-js-components-select-common-1-snap.png b/..._tests__/__image_snapshots__/select-test-js-components-select-common-1-snap.png
diff --git a/src/components/Input/Input.theme.js b/src/components/Input/Input.theme.js
@@ -7,7 +7,7 @@ const name = 'input';
 
 const [InputTag, themeInput] = createThemeTag(name, ({ COLORS, SIZES }: *): * => ({
   root: props => ({
-    width: props.width ? `${props.width}rem` : props.stretch ? '100%' : '172px',
+    width: props.width ? `${props.width}rem` : props.stretch ? '100%' : SIZES.FIELD_WIDTH,
     outline: 'none',
     paddingLeft: props.hasLeftIcon ? '36px' : '8px',
     paddingRight: props.hasRightIcon || (props.type === 'number' && !props.hideNumberArrows) ? '48px' : '16px',

diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js
@@ -23,6 +23,8 @@ type SelectProps = {|
   components?: Object,
   className?: string,
   formatOptionLabel?: Function,
+  /** when stretch is true, width is 100% */
+  stretch?: boolean,
 |};
 
 type SelectPropsFromHOCs = {|
@@ -94,6 +96,7 @@ class Select extends React.Component<SelectProps & SelectPropsFromHOCs> {
   static components = components;
   static defaultProps = {
     withPortal: true,
+    stretch: true,
   };
 
   onChange = (option: Object) => {

diff --git a/src/components/Select/Select.stories.js b/src/components/Select/Select.stories.js
@@ -28,7 +28,7 @@ export default (asStory) => {
       .add('common', () => (
         <Column>
           <StateContainer value={ null }>
-            <Select name="name" placeholder="Select an option" options={ OPTIONS } />
+            <Select name="name" placeholder="Select an option" options={ OPTIONS } stretch={ false } />
           </StateContainer>
           <StateContainer value={ OPTIONS[1].value }>
             <Select name="name" placeholder="Select an option" options={ OPTIONS } clearable />

diff --git a/src/components/Select/Select.test.js b/src/components/Select/Select.test.js
@@ -14,6 +14,7 @@ describe('<Select />', () => {
     const hasError = false;
     const loading = false;
     const disabled = true;
+    const stretch = true;
     const components = {};
 
     const wrapper = mount(
@@ -29,6 +30,7 @@ describe('<Select />', () => {
           loading={ loading }
           disabled={ disabled }
           components={ components }
+          stretch={ stretch }
         />
       </EightBaseBoostProvider>,
     );
@@ -54,6 +56,7 @@ describe('<Select />', () => {
     expect(passedStyledProps).toEqual({
       hasError,
       'aria-busy': String(loading),
+      stretch,
     });
   });
 });
diff --git a/src/components/Select/Select.theme.js b/src/components/Select/Select.theme.js
@@ -1,14 +1,18 @@
 // @flow
 import { createThemeTag } from '../../theme/createThemeTag';
 
-
 const name = 'select';
 
-const [SelectTag, themeSelect] = createThemeTag(name, {
+const [SelectTag, themeSelect] = createThemeTag(name, ({ SIZES }) => ({
   root: {
-    width: '100%',
+    width: SIZES.FIELD_WIDTH,
   },
-});
+  modifiers: {
+    stretch: {
+      width: '100%',
+    },
+  },
+}));
 
 const [SelectChevron, themeChevron] = createThemeTag(`${name}Chevron`, {
   root: {
@@ -17,11 +21,9 @@ const [SelectChevron, themeChevron] = createThemeTag(`${name}Chevron`, {
   },
 });
 
-
 const theme = {
   ...themeSelect,
   ...themeChevron,
 };
 
 export { SelectTag, SelectChevron, theme };
-
diff --git a/src/components/SelectField/SelectField.stories.js b/src/components/SelectField/SelectField.stories.js
@@ -17,7 +17,7 @@ export default (asStory) => {
       .add('common', () => (
         <Column>
           <StateContainer value={ null } withForm>
-            <SelectField label="Select" name="name" placeholder="Select an option" options={ OPTIONS } />
+            <SelectField label="Stretch = false" name="name" placeholder="Select an option" options={ OPTIONS } stretch={ false } />
           </StateContainer>
           <StateContainer value={ OPTIONS[1].value } withForm>
             <SelectField label="Clearable select" name="name" placeholder="Select an option" options={ OPTIONS } clearable />
@@ -29,4 +29,3 @@ export default (asStory) => {
       ));
   });
 };
-
diff --git a/src/theme/sizes.js b/src/theme/sizes.js
@@ -35,6 +35,8 @@ const SIZES = {
 
   SUBTITLE_2: '1.2rem',
   SUBTITLE_2_LH: '2.1rem',
+
+  FIELD_WIDTH: '172px',
 };
 
 export {