diff --git a/src/components/DropdownV2/DropdownV2-story.js b/src/components/DropdownV2/DropdownV2-story.js index fabe449768..8fe9438570 100644 --- a/src/components/DropdownV2/DropdownV2-story.js +++ b/src/components/DropdownV2/DropdownV2-story.js @@ -116,6 +116,23 @@ storiesOf('DropdownV2', module) ) ) + .addWithInfo( + 'light', + ` + DropdownV2 + `, + () => ( +
+ (item ? item.text : '')} + onChange={action('onChange')} + /> +
+ ) + ) .addWithInfo( 'skeleton', ` diff --git a/src/components/DropdownV2/DropdownV2-test.js b/src/components/DropdownV2/DropdownV2-test.js index 5837ff1c5a..4383b03e8c 100644 --- 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(); + 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(); openMenu(wrapper); diff --git a/src/components/DropdownV2/DropdownV2.js b/src/components/DropdownV2/DropdownV2.js index fc417b7a27..04d2143c60 100644 --- 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 (
) ) + .addWithInfo( + 'light', + ` + MultiSelect + `, + () => ( +
+ (item ? item.text : '')} + onChange={action('onChange')} + /> +
+ ) + ) .addWithInfo( 'inline', ` @@ -122,6 +139,23 @@ storiesOf('MultiSelect', module)
) ) + .addWithInfo( + 'filterable light', + ` + Filterable version of our MultiSelect component + `, + () => ( +
+ (item ? item.text : '')} + onChange={action('onChange')} + placeholder={defaultPlaceholder} + /> +
+ ) + ) .addWithInfo( 'filterable - disabled', ` diff --git a/src/components/MultiSelect/MultiSelect.js b/src/components/MultiSelect/MultiSelect.js index 6823946b0e..3288d8ff4f 100644 --- 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 (