feat(chips): Add entry chips #2414
Conversation
Codecov Report
@@ Coverage Diff @@
## master #2414 +/- ##
==========================================
- Coverage 98.85% 98.64% -0.22%
==========================================
Files 103 103
Lines 4121 4143 +22
Branches 516 518 +2
==========================================
+ Hits 4074 4087 +13
- Misses 47 56 +9
Continue to review full report at Codecov.
|
demos/chips.html
Outdated
| @@ -55,7 +55,8 @@ | |||
|
|
|||
| <section class="example"> | |||
| <h2>Entry Chips</h2> | |||
| <div class="mdc-chip-set"> | |||
| Add entry: <input id="entry-chip-set-input"> | |||
There was a problem hiding this comment.
I think we should add a button here instead of relying on the keyboard event.
Also, the keyboard event doesn't work in IE11. No console errors, but doesn't add a chip.
There was a problem hiding this comment.
Moved the event listeners to the button instead of input. Also renamed the event handler to simply addChip.
Note that this page will be redesigned once entry chips are complete, so the aesthetic of the input is not important at the moment. There's also the possibility of incorporating the input directly within the entry chip set in the future, pending discussion with design.
packages/mdc-chips/README.md
Outdated
| @@ -192,6 +196,8 @@ Method Signature | Description | |||
| `hasClass(className: string) => boolean` | Returns whether the chip set element has the given class | |||
| `registerInteractionHandler(evtType, handler) => void` | Registers an event handler on the root element for a given event | |||
| `deregisterInteractionHandler(evtType, handler) => void` | Deregisters an event handler on the root element for a given event | |||
| `createChip(text: string, leadingIcon: Element, trailingIcon: Element) => Element` | Returns a chip element with the given text, leading icon, and trailing icon | |||
There was a problem hiding this comment.
Nit: We're putting parameter types on 3/5 entries in this list.
|
IE11 doesn't support arrow functions....changed them in |
demos/chips.html
Outdated
| @@ -55,7 +55,11 @@ | |||
|
|
|||
| <section class="example"> | |||
| <h2>Entry Chips</h2> | |||
| <div class="mdc-chip-set"> | |||
| <input id="entry-chip-set-input"> | |||
There was a problem hiding this comment.
Nit: Maybe give this a placeholder="Chip text"?
demos/chips.html
Outdated
| @@ -231,10 +235,28 @@ <h2>Custom theme</h2> | |||
| <script src="/assets/material-components-web.js" async></script> | |||
| <script> | |||
| demoReady(function() { | |||
| var chipSets = document.querySelectorAll('.mdc-chip-set'); | |||
| var entryChipSet = document.querySelector('.mdc-chip-set--entry'); | |||
There was a problem hiding this comment.
Nit: Use an #id selector (or document.getElementById())
demos/chips.html
Outdated
| function addChip(evt) { | ||
| if ((evt.type === 'click' || evt.key === 'Enter' || evt.keyCode === 13) && | ||
| entryInput.value !== '') { | ||
| var leadingIcon = document.querySelector('.mdc-chip__icon--leading').cloneNode(true); |
There was a problem hiding this comment.
Nit: Use an #id selector (or document.getElementById())
packages/mdc-chips/README.md
Outdated
|
|
||
| Method Signature | Description | ||
| --- | --- | ||
| `createChipElement(text: string, leadingIcon: Element, trailingIcon: Element) => Element` | Returns a new chip element with the given text, leading icon, and trailing icon, added to the root chip set element |
There was a problem hiding this comment.
Maybe rename this to addChip()? (Then it'll match MDCChipSet)
packages/mdc-chips/README.md
Outdated
| `deregisterInteractionHandler(evtType, handler) => void` | Deregisters an event handler on the root element for a given event | ||
| `registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event handler on the root element for a given event | ||
| `deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event handler on the root element for a given event | ||
| `createChip(text: string, leadingIcon: Element, trailingIcon: Element) => Element` | Returns a chip element with the given text, leading icon, and trailing icon |
There was a problem hiding this comment.
Maybe rename this to createChipElement()?
First PR for #2010.
Add a way for
MDCChipSetto add new chips to the DOM and instantiate them. The demo includes an example of hooking it up to a user input.Note this PR doesn't include any animations.