Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(chips): Baseline chip and chip set #2083

Merged
merged 36 commits into from
Feb 1, 2018
Merged

feat(chips): Baseline chip and chip set #2083

merged 36 commits into from
Feb 1, 2018

Conversation

bonniezhou
Copy link
Contributor

MDC Chips is a new package in MDC Web for the chips component. It is comprised of two parts: the chip itself and the set that the chip belongs to.

This PR includes:

  • basic styles (including ripple) for mdc-chip, mdc-chip-set, and mdc-chip__text classes
  • adapter, foundation, and vanilla component for MDCChip and MDCChipSet
  • tests for MDCChip and MDCChipSet
  • documentation and a new catalog page for Chips

This PR doesn't include:

  • chip set behaviour
  • handling icons
  • Sass customization

Note: MDC Chips has a similar model to MDC Tabs, which is comprised of multiple mandatory components, as opposed to MDC Text Field, which is a single main component with multiple optional components. Thus there is a single README for MDC Chips.

Resolves #2003

@codecov-io
Copy link

codecov-io commented Jan 25, 2018

Codecov Report

Merging #2083 into master will decrease coverage by 0.11%.
The diff coverage is 91.52%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #2083      +/-   ##
==========================================
- Coverage   99.25%   99.13%   -0.12%     
==========================================
  Files          84       90       +6     
  Lines        3772     3831      +59     
  Branches      489      491       +2     
==========================================
+ Hits         3744     3798      +54     
- Misses         28       33       +5
Impacted Files Coverage Δ
packages/mdc-chips/chip/foundation.js 100% <100%> (ø)
packages/mdc-chips/chip-set/constants.js 100% <100%> (ø)
packages/mdc-chips/chip-set/foundation.js 100% <100%> (ø)
packages/mdc-chips/chip-set/index.js 100% <100%> (ø)
packages/mdc-chips/chip/constants.js 100% <100%> (ø)
packages/mdc-chips/chip/index.js 66.66% <66.66%> (ø)
... and 2 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3bb4382...a44aa89. Read the comment docs.

Copy link
Contributor

@kfranqueiro kfranqueiro left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

About half-done with review but figured I'd send comments now

@@ -1074,7 +1074,7 @@
"base64-js": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.2.1.tgz",
"integrity": "sha512-dwVUVIXsBZXwTuwnXI9RK8sBmgq09NDHzyR9SAph9eqk76gKK2JSQmZARC2zRC81JC2QTtxD0ARU5qTS25gIGw==",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

package-lock shouldn't be in this diff.

On this branch, git checkout master -- package-lock.json

demos/index.html Outdated
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_chips_24dp.svg" /></span>
<span class="mdc-list-item__text">
Chips
<span class="mdc-list-item__secondary-text">Chips for actions, selection, and input </span>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove trailing space

@@ -0,0 +1,37 @@
{
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm... I'm curious how this ended up generated, since I don't see package-lock files in any other of our own packages folders? I suspect it's unnecessary.

demos/chips.html Outdated
<script>
demoReady(function() {
var chipSets = document.querySelectorAll(
'.mdc-chip-set:not([data-demo-no-auto-js])'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we planning to show css-only chips? Otherwise the :not here isn't doing anything right now.

Also, this statement can fit on one line.

demos/chips.html Outdated
var chipSets = document.querySelectorAll(
'.mdc-chip-set:not([data-demo-no-auto-js])'
);
for (var i = 0, chipSet; chipSet = chipSets[i]; i++) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[].forEach.call(chipSets, function(chipSet) {

}

initialize() {
this.ripple_ = new MDCRipple(this.root_);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question... Do you think we need a layout method, like text field has to re-layout the ripple? It would presumably be mostly relevant to situations where a chip is initialized inside something that is initially hidden...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We might... I can't think of any use cases right now but we can see if it's necessary as we build out more features on chips.


# Chips

Chips are compact elements that represent an attribute, text, entity, or action. They allow users to enter information, select a choice, filter content, or trigger an action.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

First sentence sounds kind of confusing to me (an element that "represents" text??). I'd consider condensing to just "Chips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action."


The MDC Chips module is comprised of two JavaScript classes:
* `MDCChip` defines the behavior of a single chip
* `MDCChipSet` defines the behavior of a chip within a specific set. For example, chips in an entry chip set behave differently from those in a filter chip set.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"a chip" -> "chips"?

--- | ---
`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the root element
`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener on the root element
`notifyInteraction() => void` | Emits a custom event "MDCChip:interaction" denoting the chip has been interacted with
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mention that this event bubbles, like we did with text field icon

* Returns the text content in the chip.
* @return {string}
*/
getText() {}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If this is intended to eventually support e.g. selection APIs, I'd be a bit concerned of the consequences of i18n (i.e. the returned text would vary by language)

Copy link
Contributor Author

@bonniezhou bonniezhou Jan 26, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah this is a good point. I'll remove it for now and wait until we have the actual selection API built to determine the best way for querying chips.

Copy link
Contributor

@kfranqueiro kfranqueiro left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed rest of JS outside of tests, will get to that next.

/**
* @param {!MDCChipSetAdapter=} adapter
*/
constructor(adapter = /** @type {!MDCChipSetAdapter} */ ({})) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't realize we started doing this in some of our newer foundations, but I don't think the default parameter value here makes sense, since errors will occur whether the adapter is empty or undefined.

--- | ---
`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the root element
`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener on the root element
`notifyInteraction() => void` | Emits a custom event "MDCChip:interaction" denoting the chip has been interacted with, which bubbles to the top-level text field element
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"text field element"? 🤔 replace with chip set?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Whoops, thanks for catching!

})));
}

instantiateChips_(chipFactory) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this need type information to compile with closure?

Also, this PR doesn't seem to be adding mdc-chips to closureWhitelist in package.json... should we be doing that from the outset with this package?

/** @enum {string} */
const strings = {
INTERACTION_EVENT: 'MDCChip:interaction',
TEXT_SELECTOR: '.mdc-chip__text',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is unused now; should it be removed here?


.mdc-chip__text {
display: inline-block;
vertical-align: middle;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI I noticed something funny with this style... with it, chips are 33px tall, but without it, they're 32px tall. (Only checked in Chrome so far.)

Not sure if we're aiming for a specific height for chips, or if this is moot pending the addition of icons anyway.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting... the mdc-chip__text div is 18px but for some reason the mdc-chip content becomes 19px.

From the experimental/chip branch it seems that both mdc-chip content and mdc-chip__icon height are 24px once icons are added (which is the expected result).

Not sure what's causing this, but a fix for now would be to make the mdc-chip__text content 17px since that won't affect anything that comes afterwards. Any thoughts?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My first question would be... are chips w/o icons expected to be less tall than chips w/ icons? This would be weird if there's any situation in which you can have a mix of some with icons and some without within the same set, but OTOH if they're all expected to eventually match the with-icons size then this point may become moot.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Chips w/o icons are expected to be the same height as chips with icons.
But chips with icons are also 32px, which means that we need to fix this for chips w/o icons anyways.

foundation.destroy();

td.verify(mockAdapter.deregisterInteractionHandler('click', td.matchers.isA(Function)));
td.verify(mockAdapter.deregisterInteractionHandler('click', td.matchers.isA(Function)));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this supposed to be keydown?

@bonniezhou
Copy link
Contributor Author

Added a few extra chip set tests to check that the child chips are being properly instantiated/destroyed.

I'm getting weird errors when trying to add the module to the Closure whitelist, so I'm still working on that.

@bonniezhou
Copy link
Contributor Author

Added mdc-chips to Closure whitelist now!

hasClass(className) {}
}

export {MDCChipSetAdapter};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed you had to update your imports due to this exporting an object containing the adapter rather than just exporting the adapter directly. I'm pretty sure we generally don't export an object unless we need to expose other things in addition (e.g. with text field), so I think you can remove the curly braces in the chip and chip-set adapters as well as their respective imports.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done!

@bonniezhou bonniezhou merged commit 17c6c51 into master Feb 1, 2018
@bonniezhou bonniezhou deleted the feat/chip/base branch February 1, 2018 23:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants