feat: Light dropdown & multiselect (#919)

* feat: Add light dropdown and multiselect * chore: update snapshot
carbon-design-system · Jun 4, 2018 · 9e8136c · 9e8136c
1 parent f986519
commit 9e8136c
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 5 deletions.
diff --git a/src/components/DropdownV2/DropdownV2-story.js b/src/components/DropdownV2/DropdownV2-story.js
@@ -116,6 +116,23 @@ storiesOf('DropdownV2', module)
       </WithState>
     )
   )
+  .addWithInfo(
+    'light',
+    `
+    DropdownV2
+  `,
+    () => (
+      <div style={{ width: 300 }}>
+        <DropdownV2
+          light
+          label="Label"
+          items={items}
+          itemToString={item => (item ? item.text : '')}
+          onChange={action('onChange')}
+        />
+      </div>
+    )
+  )
   .addWithInfo(
     'skeleton',
     `

diff --git a/src/components/DropdownV2/DropdownV2-test.js b/src/components/DropdownV2/DropdownV2-test.js
@@ -39,6 +39,13 @@ describe('DropdownV2', () => {
     assertMenuOpen(wrapper, mockProps);
   });
 
+  it('should specify light version as expected', () => {
+    const wrapper = mount(<DropdownV2 {...mockProps} />);
+    expect(wrapper.props().light).toEqual(false);
+    wrapper.setProps({ light: true });
+    expect(wrapper.props().light).toEqual(true);
+  });
+
   it('should let the user select an option by clicking on the option node', () => {
     const wrapper = mount(<DropdownV2 {...mockProps} />);
     openMenu(wrapper);

diff --git a/src/components/DropdownV2/DropdownV2.js b/src/components/DropdownV2/DropdownV2.js
@@ -59,12 +59,18 @@ export default class DropdownV2 extends React.Component {
      * In the case you want to control the dropdown selection entirely.
      */
     selectedItem: PropTypes.object,
+
+    /**
+     * `true` to use the light version.
+     */
+    light: PropTypes.bool,
   };
 
   static defaultProps = {
     disabled: false,
     type: 'default',
     itemToString: defaultItemToString,
+    light: false,
   };
 
   handleOnChange = selectedItem => {
@@ -83,8 +89,11 @@ export default class DropdownV2 extends React.Component {
       type,
       initialSelectedItem,
       selectedItem,
+      light,
     } = this.props;
-    const className = cx('bx--dropdown-v2', containerClassName);
+    const className = cx('bx--dropdown', containerClassName, {
+      'bx--dropdown--light': light,
+    });
     return (
       <Downshift
         onChange={this.handleOnChange}

diff --git a/src/components/DropdownV2/__snapshots__/DropdownV2-test.js.snap b/src/components/DropdownV2/__snapshots__/DropdownV2-test.js.snap
@@ -34,6 +34,7 @@ exports[`DropdownV2 should render 1`] = `
     ]
   }
   label="input"
+  light={false}
   onChange={[MockFunction]}
   placeholder="Filter..."
   type="default"
@@ -57,13 +58,13 @@ exports[`DropdownV2 should render 1`] = `
     stateReducer={[Function]}
   >
     <ListBox
-      className="bx--dropdown-v2"
+      className="bx--dropdown"
       disabled={false}
       innerRef={[Function]}
       type="default"
     >
       <div
-        className="bx--dropdown-v2 bx--list-box"
+        className="bx--dropdown bx--list-box"
         onKeyDown={[Function]}
       >
         <ListBoxField

diff --git a/src/components/MultiSelect/FilterableMultiSelect.js b/src/components/MultiSelect/FilterableMultiSelect.js
@@ -55,6 +55,11 @@ export default class FilterableMultiSelect extends React.Component {
      * what this field is for
      */
     placeholder: PropTypes.string.isRequired,
+
+    /**
+     * `true` to use the light version.
+     */
+    light: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -65,6 +70,7 @@ export default class FilterableMultiSelect extends React.Component {
     itemToString: defaultItemToString,
     locale: 'en',
     sortItems: defaultSortItems,
+    light: false,
   };
 
   constructor(props) {
@@ -168,11 +174,15 @@ export default class FilterableMultiSelect extends React.Component {
       placeholder,
       sortItems,
       compareItems,
+      light,
     } = this.props;
     const className = cx(
       'bx--multi-select',
       'bx--combo-box',
-      containerClassName
+      containerClassName,
+      {
+        'bx--list-box--light': light,
+      }
     );
     return (
       <Selection

diff --git a/src/components/MultiSelect/MultiSelect-story.js b/src/components/MultiSelect/MultiSelect-story.js
@@ -41,6 +41,23 @@ storiesOf('MultiSelect', module)
       </div>
     )
   )
+  .addWithInfo(
+    'light',
+    `
+    MultiSelect
+  `,
+    () => (
+      <div style={{ width: 300 }}>
+        <MultiSelect
+          light
+          label={defaultLabel}
+          items={items}
+          itemToString={item => (item ? item.text : '')}
+          onChange={action('onChange')}
+        />
+      </div>
+    )
+  )
   .addWithInfo(
     'inline',
     `
@@ -122,6 +139,23 @@ storiesOf('MultiSelect', module)
       </div>
     )
   )
+  .addWithInfo(
+    'filterable light',
+    `
+      Filterable version of our MultiSelect component
+    `,
+    () => (
+      <div style={{ width: 300 }}>
+        <MultiSelect.Filterable
+          light
+          items={items}
+          itemToString={item => (item ? item.text : '')}
+          onChange={action('onChange')}
+          placeholder={defaultPlaceholder}
+        />
+      </div>
+    )
+  )
   .addWithInfo(
     'filterable - disabled',
     `

diff --git a/src/components/MultiSelect/MultiSelect.js b/src/components/MultiSelect/MultiSelect.js
@@ -58,6 +58,11 @@ export default class MultiSelect extends React.Component {
      * Specify 'inline' to create an inline multi-select.
      */
     type: PropTypes.oneOf(['default', 'inline']),
+
+    /**
+     * `true` to use the light version.
+     */
+    light: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -68,6 +73,7 @@ export default class MultiSelect extends React.Component {
     initialSelectedItems: [],
     sortItems: defaultSortItems,
     type: 'default',
+    light: false,
   };
 
   constructor(props) {
@@ -130,8 +136,11 @@ export default class MultiSelect extends React.Component {
       initialSelectedItems,
       sortItems,
       compareItems,
+      light,
     } = this.props;
-    const className = cx('bx--multi-select', containerClassName);
+    const className = cx('bx--multi-select', containerClassName, {
+      'bx--list-box--light': light,
+    });
     return (
       <Selection
         onChange={this.handleOnChange}

diff --git a/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap b/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap
@@ -36,6 +36,7 @@ exports[`MultiSelect.Filterable should render 1`] = `
       },
     ]
   }
+  light={false}
   locale="en"
   onChange={[MockFunction]}
   placeholder="Placeholder..."