+ this.setState(selectedChipIds)}
+ >
+
);
}
@@ -85,30 +77,76 @@ Filter chips include a leading checkmark to indicate selection. To define a set
```js
class MyFilterChips extends React.Component {
state = {
- selectedChipIds: new Set(),
+ selectedChipIds: ['chip1', 'chip2'],
};
- isSelected = (id) => {
- return this.state.selectedChipIds.has(id);
+ render() {
+ return (
+ this.setState(selectedChipIds)}
+ >
+
+ );
}
+}
+```
+
+### Input chips
+
+Input chips are a variant of chips which enable user input by converting text into chips. Chips may be dynamically added and removed from the chip set. To define a set of chips as input chips, add the `input` prop to the `ChipSet`. To remove a chip, pass a callback to the `Chip` through the `handleRemove` prop.
- handleSelect = (id) => {
- const selectedChipIds = new Set(this.state.selectedChipIds);
- if (this.isSelected(id)) {
- selectedChipIds.delete(id);
- } else {
- selectedChipIds.add(id);
+> _NOTE_: We recommend you store an array of chip labels and their respective IDs in the `state` to manage adding/removing chips. Do _NOT_ use the chip's index as its ID or key, because its index may change due to the addition/removal of other chips.
+
+```js
+class MyInputChips extends React.Component {
+ state = {
+ chips: [
+ {label: 'Jane Smith', id: 'janesmith'},
+ {label: 'John Doe', id: 'johndoe'}
+ ],
+ };
+
+ handleKeyDown = (e) => {
+ // If you have a more complex input, you may want to store the value in the state.
+ const label = e.target.value;
+ if (!!label && e.key === 'Enter') {
+ const id = label.replace(/\s/g,'');
+ // Create a new chips array to ensure that a re-render occurs.
+ // See: https://reactjs.org/docs/state-and-lifecycle.html#do-not-modify-state-directly
+ const chips = [...this.state.chips];
+ chips.push({label, id});
+ this.setState({chips});
+ e.target.value = '';
}
- this.setState({selectedChipIds});
+ }
+
+ // Removes the chip element from the page
+ handleRemove = (id) => {
+ const chips = [...this.state.chips];
+ const index = chips.findIndex(chip => chip.id === id);
+ chips.splice(index, 1);
+ this.setState({chips});
}
render() {
return (
-
-
-
-
-
+
+
+ {this.state.chips.map((chip) =>
+
+
);
}
}
@@ -121,7 +159,12 @@ class MyFilterChips extends React.Component {
Prop Name | Type | Description
--- | --- | ---
className | String | Classes to be applied to the chip set element
+selectedChipIds | Array | Array of ids of chips that are selected
+handleSelect | Function(id: string) => void | Callback for selecting the chip with the given id
+handleRemove | Function(id: string) => void | Callback for removing the chip with the given id
+choice | Boolean | Indicates that the chips in the set are choice chips, which allow single selection from a set of options
filter | Boolean | Indicates that the chips in the set are filter chips, which allow multiple selection from a set of options
+input | Boolean | Indicates that the chips in the set are input chips, where chips can be added or removed
### Chip
@@ -129,10 +172,13 @@ filter | Boolean | Indicates that the chips in the set are filter chips, which a
Prop Name | Type | Description
--- | --- | ---
className | String | Classes to be applied to the chip element
-id | Number | Unique identifier for the chip
+id | Number | Required. Unique identifier for the chip
label | String | Text to be shown on the chip
+leadingIcon | Element | An icon element that appears as the leading icon.
+removeIcon | Element | An icon element that appears as the remove icon. Clicking on it should remove the chip.
selected | Boolean | Indicates whether the chip is selected
-handleSelect | Function(id: number) => void | Callback to call when the chip with the given id is selected
+handleSelect | Function(id: string) => void | Callback for selecting the chip with the given id
+handleRemove | Function(id: string) => void | Callback for removing the chip with the given id
## Sass Mixins
diff --git a/packages/chips/package_skip.json b/packages/chips/package.json
similarity index 100%
rename from packages/chips/package_skip.json
rename to packages/chips/package.json
diff --git a/scripts/screenshot-directory-reader.js b/scripts/screenshot-directory-reader.js
index 2c9684288..a66aa73a1 100644
--- a/scripts/screenshot-directory-reader.js
+++ b/scripts/screenshot-directory-reader.js
@@ -1,10 +1,8 @@
const {lstatSync, readdirSync} = require('fs');
const {basename, join, resolve} = require('path');
-const denyList = [
- 'chips',
- 'images'
-];
+const denyList = ['images'];
+
const isDirectory = source => lstatSync(source).isDirectory();
const getDirectories = source =>
readdirSync(source).map(name => join(source, name)).filter(isDirectory);
diff --git a/test/screenshot/chips/index.js b/test/screenshot/chips/index.js
index 3eda2c87b..80f8d79e5 100644
--- a/test/screenshot/chips/index.js
+++ b/test/screenshot/chips/index.js
@@ -2,73 +2,143 @@ import React from 'react';
import './index.scss';
import '../../../packages/chips/index.scss';
-import {Chip, ChipSet} from '../../../packages/chips';
+import MaterialIcon from '../../../packages/material-icon';
+import {Chip, ChipSet} from '../../../packages/chips/index';
+import uuidv1 from 'uuid/v1';
-class ShirtSizes extends React.Component {
+class ChoiceChipsTest extends React.Component {
state = {
- selectedChipId: 0,
+ selectedChipIds: this.props.selectedChipIds, // eslint-disable-line react/prop-types
};
- isSelected = (id) => {
- return this.state.selectedChipId === id;
+ render() {
+ const {children} = this.props; // eslint-disable-line react/prop-types
+ return (
+
+ this.setState({selectedChipIds})}
+ >
+ {children}
+
+
+ );
}
+}
- handleSelect = (id) => {
- if (this.isSelected(id)) {
- this.setState({selectedChipId: -1});
- } else {
- this.setState({selectedChipId: id});
- }
- }
+class FilterChipsTest extends React.Component {
+ state = {
+ selectedChipIds: this.props.selectedChipIds, // eslint-disable-line react/prop-types
+ };
render() {
+ const {children} = this.props; // eslint-disable-line react/prop-types
return (
-
-
-
-
-
+
+ this.setState({selectedChipIds})}
+ >
+ {children}
+
+ this.setState({selectedChipIds: ['2chip', '0chip']})}>
+ Select first and last
+
+
);
}
}
-class ShoppingFilters extends React.Component {
+class InputChipsTest extends React.Component {
state = {
- selectedChipIds: new Set([0, 1]),
+ chips: this.props.labels.map((label) => { // eslint-disable-line react/prop-types
+ return {label: label, id: uuidv1()};
+ }),
};
- isSelected = (id) => {
- return this.state.selectedChipIds.has(id);
+ addChip(label) {
+ // Create a new chips array to ensure that a re-render occurs.
+ // See: https://reactjs.org/docs/state-and-lifecycle.html#do-not-modify-state-directly
+ const chips = [...this.state.chips];
+ chips.push({label, id: uuidv1()});
+ this.setState({chips});
}
- handleSelect = (id) => {
- const selectedChipIds = new Set(this.state.selectedChipIds);
- if (this.isSelected(id)) {
- selectedChipIds.delete(id);
- } else {
- selectedChipIds.add(id);
+ handleKeyDown = (e) => {
+ if (e.key === 'Enter' && e.target.value) {
+ this.addChip(e.target.value);
+ e.target.value = '';
}
- this.setState({selectedChipIds});
}
render() {
return (
-
-
-
-
-
+
+ {
+ const {chips} = this.state;
+ for (let i = 0; i < chips.length; i ++) {
+ if (chips[i].id === chipId) {
+ chips.splice(index, 1);
+ this.setState(chips);
+ return;
+ }
+ }
+ }}>
+ {this.state.chips.map((chip) =>
+
+
);
}
}
+const seasons = ['Winter', 'Summer', 'Spring', 'Autumn'];
+const sizes = ['Small', 'Medium', 'Large'];
+const clothes = ['Tops', 'Bottoms', 'Shoes'];
+const contacts = ['Jane Smith', 'John Doe'];
+
+const renderChips = (list) => {
+ return list.map((label, index) => (
+
- Choice chips
-
+ {renderChips(seasons)}
+
+
+ Choice Chips
+
+ {renderChips(sizes)}
+
+
+ Filter Chips
+
+ {renderChips(clothes)}
+
+
+ Input chips
+
);
};
diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json
index 031492cd9..a15c1d1c5 100644
--- a/test/screenshot/golden.json
+++ b/test/screenshot/golden.json
@@ -2,6 +2,7 @@
"button": "a0cf6b2a5d09400657303bb2a7b220dbe33642a8f44fd7571cdfcf5517fb3586",
"card": "b2fd82763c383be438ff6578083bf9009711c7470333d07eb916ab690fc42d31",
+ "chips": "9cdf56c10f4badd9555433e84a52d52028f286f42392f4902251dcb8eb748e33",
"line-ripple": "56b136db2dc7e09260849447e6bde9b55a837af332a05d9f52506ab1c95e2e57",
"fab": "db36f52195c420062d91dd5ebe5432ad87247b3c1146fd547b0a195079bbce2f",
"floating-label": "1d4d4f2e57e1769b14fc84985d1e6f53410c49aef41c9cf4fde94f938adefe57",
@@ -22,4 +23,4 @@
"top-app-bar/standard": "90534d59d40f8c050aae022e94b0afa022a00d1e00c19e3f92dcc1908efcd831",
"top-app-bar/standardNoActionItems": "9102ece0efc0a040e0dc2b097c66d2ee5ecc9c91759aeb16ea5aa2baabe7307a",
"top-app-bar/standardWithNavigationIconElement": "91b10df9c4faf85ba63c84b1cf82a1c1143a3d8c4ba7ed8af477fabdc65ec25e"
-}
+}
diff --git a/test/screenshot/screenshot-test-urls.js b/test/screenshot/screenshot-test-urls.js
index db76d1fbc..f1b595b7e 100644
--- a/test/screenshot/screenshot-test-urls.js
+++ b/test/screenshot/screenshot-test-urls.js
@@ -3,7 +3,7 @@ import topAppBarVariants from './top-app-bar/variants';
const urls = [
'button',
'card',
- // 'chips',
+ 'chips',
'line-ripple',
'fab',
'floating-label',
diff --git a/test/unit/chips/Chip.test.js b/test/unit/chips/Chip.test.js
index e19a1ce84..c736b0923 100644
--- a/test/unit/chips/Chip.test.js
+++ b/test/unit/chips/Chip.test.js
@@ -1,54 +1,190 @@
-// import React from 'react';
-// import {assert} from 'chai';
-// import {mount} from 'enzyme';
-// import td from 'testdouble';
-// import {Chip, ChipCheckmark} from '../../../packages/chips/index';
-//
-// suite('Chip');
-//
-// test('creates foundation', () => {
-// const wrapper = mount(Hello world );
-// assert.exists(wrapper.instance().foundation_);
-// });
-//
-// test('classNames adds classes', () => {
-// const wrapper = mount(Hello world );
-// assert.exists(wrapper.find('.mdc-chip'));
-// });
-//
-// test('#adapter.addClass adds class to state.classList', () => {
-// const wrapper = mount(Jane Doe );
-// wrapper.instance().foundation_.adapter_.addClass('test-class-name');
-// assert.isTrue(wrapper.state().classList.has('test-class-name'));
-// });
-//
-// test('#adapter.removeClass removes class from state.classList', () => {
-// const wrapper = mount(Jane Doe );
-// const classList = new Set();
-// classList.add('test-class-name');
-// wrapper.setState({classList});
-// wrapper.instance().foundation_.adapter_.removeClass('test-class-name');
-// assert.isFalse(wrapper.state().classList.has('test-class-name'));
-// });
-//
-// test('on click calls #props.handleSelect', () => {
-// const handleSelect = td.func();
-// const wrapper = mount(Jane Doe );
-// wrapper.simulate('click');
-// td.verify(handleSelect(123));
-// });
-//
-// test('renders chip checkmark if it exists', () => {
-// const wrapper = mount(}>Jane Doe );
-// assert.exists(wrapper.find('.mdc-chip__checkmark'));
-// });
-//
-// test('adds mndc-chip--selected class if selected prop is true', () => {
-// const wrapper = mount(Jane Doe );
-// assert.exists(wrapper.hasClass('.mdc-chip--selected'));
-// });
+import React from 'react';
+import {assert} from 'chai';
+import {mount, shallow} from 'enzyme';
+import td from 'testdouble';
+import {Chip} from '../../../packages/chips/Chip';
+import ChipCheckmark from '../../../packages/chips/ChipCheckmark';
+
+suite('Chip');
+
+test('creates foundation', () => {
+ const wrapper = mount(Hello world );
+ assert.isTrue(wrapper.state().classList.has('mdc-chip--selected'));
+});
+
+test('classNames adds classes', () => {
+ const wrapper = shallow(} />);
+ assert.equal(wrapper.find('.mdc-chip__checkmark').length, 1);
+});
+
+test('renders custom chip checkmark', () => {
+ const wrapper = shallow(
-//
-// );
-// assert.exists(wrapper.find('.mdc-chip-set'));
-// assert.lengthOf(wrapper.find(Chip), 2);
-// });
-//
-// test('selected filter chip renders checkmark', () => {
-// const wrapper = shallow(
-//
-//
-// );
-// assert.exists(wrapper.find('.mdc-chip__checkmark'));
-// });
-//
-// test('#adapter.hasClass returns true if class was added in className prop', () => {
-// const wrapper = shallow(
+
+ );
+ wrapper.instance().handleSelect();
+ td.verify(handleSelect(['1']), {times: 1});
+});
+
+test('#handleSelect calls foundation_.toggleSelect with chipId and is choice variant', () => {
+ const handleSelect = td.func();
+ const wrapper = shallow(
+
+ );
+ wrapper.instance().foundation_.toggleSelect = td.func();
+ wrapper.instance().handleSelect('1');
+ td.verify(wrapper.instance().foundation_.toggleSelect('1'), {times: 1});
+});
+
+test('#handleSelect calls foundation_.toggleSelect with chipId and is filter variant', () => {
+ const handleSelect = td.func();
+ const wrapper = shallow(
+
+ );
+ wrapper.instance().foundation_.toggleSelect = td.func();
+ wrapper.instance().handleSelect('1');
+ td.verify(wrapper.instance().foundation_.toggleSelect('1'), {times: 1});
+});
+
+test('#handleSelect does not call foundation_.toggleSelect with chipId if is neither filter nor choice', () => {
+ const handleSelect = td.func();
+ const wrapper = shallow(
+
+ );
+ wrapper.instance().foundation_.toggleSelect = td.func();
+ wrapper.instance().handleSelect('1');
+ td.verify(wrapper.instance().foundation_.toggleSelect('1'), {times: 0});
+});
+
+test('#handleRemove calls foundation_.deselect with chipId and is input variant', () => {
+ const handleRemove = td.func();
+ const wrapper = shallow(
+
+ );
+ wrapper.instance().foundation_.deselect = td.func();
+ wrapper.instance().handleRemove('1');
+ td.verify(wrapper.instance().foundation_.deselect('1'), {times: 1});
+});
+
+test('#handleRemove does not call foundation_.deselect with chipId if is not input variant', () => {
+ const handleRemove = td.func();
+ const wrapper = shallow(
+
+ );
+ wrapper.instance().foundation_.deselect = td.func();
+ wrapper.instance().handleRemove('1');
+ td.verify(wrapper.instance().foundation_.deselect('1'), {times: 0});
+});
+
+test('#handleRemove calls props.handleRemove with chipId', () => {
+ const handleRemove = td.func();
+ const wrapper = shallow(