fix(Select): add text ellipsising to the option

8base · Apr 24, 2019 · baa7e88 · baa7e88
1 parent 678165b
commit baa7e88
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 2 deletions.
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/...s__/__image_snapshots__/select-test-js-components-select-common-open-1-snap.png b/...s__/__image_snapshots__/select-test-js-components-select-common-open-1-snap.png
diff --git a/e2e/__tests__/select.test.js b/e2e/__tests__/select.test.js
@@ -3,6 +3,13 @@ import { baisy } from '../setup/TestSuiter';
 
 const SUITES = [
   baisy.suite('Components/Select', 'common'),
+  baisy.suite('Components/Select', 'common', 'open')
+    .addRootHeight(50)
+    .setEnhancer(async (iframe) => {
+      const selectTrigger = await iframe.waitForXPath('(//input)[4]');
+
+      await selectTrigger.click();
+    }),
 ];
 
 

diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js
@@ -77,6 +77,11 @@ const customStyles = ({ hasError, zIndex = Z_INDEX.DROPDOWN }) => ({
     ...style,
     padding: '0 8px',
   }),
+  option: (style) => ({
+    ...style,
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+  }),
 });
 
 class Select extends React.Component<SelectProps> {

diff --git a/src/components/Select/Select.stories.js b/src/components/Select/Select.stories.js
@@ -12,7 +12,7 @@ const OPTIONS = [{
 }];
 
 const LONG_OPTIONS = [{
-  label: 'Geoglossaceae nontransportation laemodipodiform gluttonously spaework ankylorrhinia zain carlet ironheartedness topia antiorthodox cerebropedal Sothis whispered basilica idealizer outvalue thwacking unafraid coining nak friskily renishly stringsman',
+  label: 'GeoglossaceaenontransportationlaemodipodiformgluttonouslyspaeworkankylorrhiniazaincarletironheartednesstopiaantiorthodoxcerebropedalSothiswhisperedbasilicaidealizeroutvaluethwackingunafraidcoiningnakfriskilyrenishlystringsman',
   value: 'ovenlike',
 }, {
   label: 'backhander unpersecuted platch antisymmetrical fumaroid chromitite Microthelyphonida epigraphically myope supramechanical pageant ankle camphory nitronaphthalene thieve umquhile mornings gynomonoecism unvulgarize rickmatic saltless sternoglossal pungi pronumber',
@@ -36,7 +36,7 @@ export default (asStory) => {
           <StateContainer value={ [OPTIONS[1].value, OPTIONS[2].value] }>
             <Select name="name" placeholder="Select an option" options={ OPTIONS } multiple />
           </StateContainer>
-          <StateContainer value={ [LONG_OPTIONS[1].value, LONG_OPTIONS[2].value] }>
+          <StateContainer value={ [LONG_OPTIONS[1].value] }>
             <Select name="name" placeholder="Select an option" options={ LONG_OPTIONS } multiple />
           </StateContainer>
           <StateContainer value={ [OPTIONS[1].value, OPTIONS[2].value] }>