feat(Dropdown): Add support for string widths (#47)

heydoctor · Jul 24, 2019 · a907cce · a907cce
1 parent 186f7e2
commit a907cce
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 15 deletions.
diff --git a/src/Dropdown/Dropdown.js b/src/Dropdown/Dropdown.js
@@ -191,11 +191,11 @@ Dropdown.propTypes = {
   offset: PropTypes.string,
   boundariesElement: PropTypes.string,
   positionFixed: PropTypes.bool,
-  width: PropTypes.number,
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   zIndex: PropTypes.number,
   transitionDuration: PropTypes.number,
   transitionTimingFunction: PropTypes.string,
-  portalNode: PropTypes.element,
+  portalNode: PropTypes.instanceOf(typeof Element !== 'undefined' ? Element : Object),
 };
 
 Dropdown.defaultProps = {
@@ -204,7 +204,7 @@ Dropdown.defaultProps = {
   offset: '0, 10',
   positionFixed: false,
   boundariesElement: 'viewport',
-  width: 150,
+  width: 'auto',
   zIndex: 10,
   transitionDuration: 225,
   transitionTimingFunction: 'cubic-bezier(0.25, 0.1, 0.17, 1.2)',
@@ -233,7 +233,7 @@ const DropdownMenu = createComponent({
     border: 1px solid #e4edf5;
     outline: none;
     box-shadow: 0 0 3px 0 rgba(178, 194, 212, 0.3);
-    width: ${width}px;
+    width: ${typeof width === 'string' ? width : `${width}px`};
     opacity: 0.75;
     transform: scale(0.75);
     transform-origin: ${PLACEMENT_TRANSITION_ORIGINS[placement]};

diff --git a/src/Dropdown/Dropdown.spec.js b/src/Dropdown/Dropdown.spec.js
@@ -21,11 +21,11 @@ jest.mock('popper.js', () => {
 describe('<Dropdown />', () => {
   let renderUtils;
 
-  const renderDropdown = () => {
+  const renderDropdown = (props = {}) => {
     const wrapper = document.createElement('div');
     wrapper.setAttribute('tabindex', 1);
     const utils = renderWithTheme(
-      <Dropdown portalNode={wrapper} trigger={<Button>Trigger</Button>}>
+      <Dropdown {...props} portalNode={wrapper} trigger={<Button>Trigger</Button>}>
         <Dropdown.Header>Header</Dropdown.Header>
         <Dropdown.Body>
           <Dropdown.Item data-testid="item-one">One</Dropdown.Item>
@@ -43,20 +43,20 @@ describe('<Dropdown />', () => {
     };
   };
 
-  const assertDropdownOpen = () =>
+  const assertDropdownOpen = (utils = renderUtils) =>
     wait(() => {
-      expect(renderUtils.queryByText('Header')).toBeInTheDocument();
+      expect(utils.queryByText('Header')).toBeInTheDocument();
     });
 
-  const assertDropdownClosed = () =>
+  const assertDropdownClosed = (utils = renderUtils) =>
     wait(() => {
-      expect(renderUtils.queryByText('Header')).not.toBeInTheDocument();
+      expect(utils.queryByText('Header')).not.toBeInTheDocument();
     });
 
-  const openDropdown = async () => {
-    const trigger = renderUtils.getByText('Trigger');
+  const openDropdown = async (utils = renderUtils) => {
+    const trigger = utils.getByText('Trigger');
     fireEvent.click(trigger, { stopPropagation: () => null });
-    return assertDropdownOpen();
+    return assertDropdownOpen(utils);
   };
 
   beforeEach(() => {
@@ -112,4 +112,24 @@ describe('<Dropdown />', () => {
     fireEvent.keyDown(document.body, { key: 'ArrowUp' });
     expect(isFocused(itemOne)).toBeTruthy();
   });
+
+  describe('prop: width', () => {
+    test('wdith defaults to auto', async () => {
+      const utils = renderDropdown();
+      await openDropdown(utils);
+      expect(utils.getByTestId('dropdown-menu')).toHaveStyleRule('width', 'auto');
+    });
+
+    test('supports string widths', async () => {
+      const utils = renderDropdown({ width: '2rem' });
+      await openDropdown(utils);
+      expect(utils.getByTestId('dropdown-menu')).toHaveStyleRule('width', '2rem');
+    });
+
+    test('supports number widths', async () => {
+      const utils = renderDropdown({ width: 200 });
+      await openDropdown(utils);
+      expect(utils.getByTestId('dropdown-menu')).toHaveStyleRule('width', '200px');
+    });
+  });
 });
diff --git a/src/Dropdown/__snapshots__/Dropdown.spec.js.snap b/src/Dropdown/__snapshots__/Dropdown.spec.js.snap
@@ -142,7 +142,7 @@ exports[`<Dropdown /> opens menu with focus when trigger is clicked 1`] = `
   border: 1px solid #e4edf5;
   outline: none;
   box-shadow: 0 0 3px 0 rgba(178,194,212,0.3);
-  width: 150px;
+  width: auto;
   opacity: 0.75;
   -webkit-transform: scale(0.75);
   -ms-transform: scale(0.75);
@@ -217,7 +217,7 @@ exports[`<Dropdown /> opens menu with focus when trigger is clicked 1`] = `
       data-testid="dropdown-menu"
       style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none;"
       tabindex="0"
-      width="150"
+      width="auto"
     >
       <header
         class="re-dropdown-header c1"