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 (