From 77195bb20c76ead080571874de870926bcdd4810 Mon Sep 17 00:00:00 2001 From: "Kenneth G. Franqueiro" Date: Tue, 4 Dec 2018 16:32:47 -0500 Subject: [PATCH] docs(list): Document disabled modifier class (#4141) --- packages/mdc-list/README.md | 18 +++++++++--------- packages/mdc-menu/README.md | 5 +++++ 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/packages/mdc-list/README.md b/packages/mdc-list/README.md index e56c6d5c8f7..a6a78250a13 100644 --- a/packages/mdc-list/README.md +++ b/packages/mdc-list/README.md @@ -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. @@ -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 @@ -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. diff --git a/packages/mdc-menu/README.md b/packages/mdc-menu/README.md index 4ffec2cbb0e..b9c162c6be8 100644 --- a/packages/mdc-menu/README.md +++ b/packages/mdc-menu/README.md @@ -106,6 +106,11 @@ Menus can contain a group of list items that can represent the selection state o ``` +### 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