docs(chips): Update README to new format #2652
Conversation
Codecov Report
@@ Coverage Diff @@
## master #2652 +/- ##
=======================================
Coverage 98.48% 98.48%
=======================================
Files 98 98
Lines 4230 4230
Branches 537 537
=======================================
Hits 4166 4166
Misses 64 64Continue to review full report at Codecov.
|
packages/mdc-chips/README.md
Outdated
|
|
||
| ## Variants | ||
|
|
||
| ### Leading and Trailing Icons |
There was a problem hiding this comment.
IMO I'd be inclined to put the different chip types first to quickly follow the example above, rather than require people reading this top-to-bottom to context-switch back later.
Also, do/should we explain anywhere which of leading/trailing are valid on which types of chip?
There was a problem hiding this comment.
I was thinking about that too, but Filter Chips references leading icons...
There was a problem hiding this comment.
Hm... yeah okay.
Should we also mention the use of trailing remove icon under Input Chips... anad maybe also update this documentation since IIRC we determined that remove icon was the only valid use of trailing icon?
There was a problem hiding this comment.
I think it's better to add the note about input chips under trailing icons and have it linked to the input chips section.
Now it's debatable whether we should do the same for filter chips...but I think filter chips talks about leading icons in a depth that requires more than just a reference.
packages/mdc-chips/README.md
Outdated
| @@ -153,7 +177,7 @@ CSS Class | Description | |||
|
|
|||
| ### Sass Mixins | |||
|
|
|||
| To customize the colors of any part of the chip, use the following mixins. | |||
| To customize a chip, use the following mixins. | |||
There was a problem hiding this comment.
We could drop this paragraph, esp. since the first mixin applies to the chip set.
packages/mdc-chips/README.md
Outdated
| @@ -204,6 +228,10 @@ Property | Value Type | Description | |||
| --- | --- | --- | |||
| `chips` | Array<`MDCChip`> | An array of the `MDCChip` objects that represent chips in the set | |||
|
|
|||
| ## Usage within Web Frameworks | |||
|
|
|||
| If you are using a JavaScript framework, such as React or Angular, you can create a <COMPONENT_NAME> for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../integrating-into-frameworks.md). | |||
There was a problem hiding this comment.
<COMPONENT_NAME> -> Chip Set and Chip?
Also, the "here" link needs a different relative path (see #2651)
packages/mdc-chips/README.md
Outdated
| @@ -81,6 +81,8 @@ You can optionally add a leading icon (i.e. thumbnail) and/or a trailing icon to | |||
|
|
|||
| #### Trailing icon | |||
|
|
|||
| A trailing icon comes with the functionality to remove the chip from the set. If you're adding a trailing icon, also set `tabindex="0"` and `role="button"` to make it accessible by keyboard and screenreader. Trailing icons should only be added to [input chips](###input-chips). | |||
There was a problem hiding this comment.
###input-chips should just be #input-chips, it's linking to another part of the page.
packages/mdc-chips/README.md
Outdated
|
|
||
| The MDC Chips module is comprised of two JavaScript classes: | ||
| * `MDCChip` defines the behavior of a single chip | ||
| * `MDCChip` defines the behavior of a single chip. |
There was a problem hiding this comment.
On the line above this:
- module -> package (arguably each of those classes is in a JS module)
- "is comprised of" -> "is composed of" (comprises works the opposite way)
No description provided.