Skip to content

Commit

Permalink
Merge branch 'master' into refactor/notched-outline
Browse files Browse the repository at this point in the history
  • Loading branch information
williamernest authored Dec 4, 2018
2 parents e3da3e3 + 77195bb commit 955ca04
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 9 deletions.
18 changes: 9 additions & 9 deletions packages/mdc-list/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -374,8 +374,9 @@ CSS Class | Description
`mdc-list-item__text` | Mandatory. Wrapper for list item text content (displayed as middle column of the list item).
`mdc-list-item__primary-text` | Optional, primary text for the list item. Should be the child of `mdc-list-item__text`.
`mdc-list-item__secondary-text` | Optional, secondary text for the list item. Displayed below the primary text. Should be the child of `mdc-list-item__text`.
`mdc-list-item--selected` | Optional, styles the row in an selected* state.
`mdc-list-item--activated` | Optional, styles the row in an activated* state.
`mdc-list-item--disabled` | Optional, styles the row in the disabled state.
`mdc-list-item--selected` | Optional, styles the row in the selected* state.
`mdc-list-item--activated` | Optional, styles the row in the activated* state.
`mdc-list-item__graphic` | Optional, the first tile in the row (in LTR languages, the first column of the list item). Typically an icon or image.
`mdc-list-item__meta` | Optional, the last tile in the row (in LTR languages, the last column of the list item). Typically small text, icon. or image.
`mdc-list-group` | Optional, wrapper around two or more mdc-list elements to be grouped together.
Expand All @@ -384,14 +385,11 @@ CSS Class | Description
`mdc-list-divider--padded` | Optional, leaves gaps on each side of divider to match padding of `list-item__meta`.
`mdc-list-divider--inset` | Optional, increases the leading margin of the divider so that it does not intersect the avatar column.

> NOTE: `mdc-list-divider` class can be used between list items (example 1) *OR* between two lists (example 2).
> NOTE: The `mdc-list-divider` class can be used between list items *OR* between two lists (see respective examples under [List Dividers](#list-dividers)).
> NOTE: the difference between selected and activated states:
* *Selected* state should be implemented on the `.mdc-list-item` when it is likely to change soon. Eg., selecting one or more photos to share in Google Photos.
* Multiple items can be selected at the same time when using the *selected* state.
* *Activated* state is similar to selected state, however should only be implemented once within a specific list.
* *Activated* state is more permanent than selected state, and will **NOT** change soon relative to the lifetime of the page.
> NOTE: In Material Design, the selected and activated states apply in different, mutually-exclusive situations:
> * *Selected* state should be applied on the `.mdc-list-item` when it is likely to frequently change due to user choice. E.g., selecting one or more photos to share in Google Photos.
> * *Activated* state is more permanent than selected state, and will **NOT** change soon relative to the lifetime of the page. Common examples are navigation components such as the list within a navigation drawer.
### Sass Mixins

Expand Down Expand Up @@ -426,6 +424,8 @@ list. The `Arrow`, `Home`, and `End` keys should be used for navigating internal
item. The MDCList will perform the following actions for each key press. Since list interaction will toggle a radio
button or checkbox within the list item, the list will not toggle `tabindex` for those elements.

Any disabled list items (with the `mdc-list-item--disabled` class applied) will be excluded from keyboard navigation.

Key | Action
--- | ---
`ArrowUp` | When the list is in a vertical orientation, it will cause the previous list item to receive focus.
Expand Down
5 changes: 5 additions & 0 deletions packages/mdc-menu/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,11 @@ Menus can contain a group of list items that can represent the selection state o
</div>
```

### Disabled Menu Items

Menu items can be disabled by adding the `mdc-list-item--disabled` modifier class (from [MDC List](../mdc-list)).
Disabled menu items will be excluded from keyboard navigation.

### Anchors and Positioning

#### Anchored To Parent
Expand Down

0 comments on commit 955ca04

Please sign in to comment.