-
Notifications
You must be signed in to change notification settings - Fork 2.1k
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
fix(list): Change default class to activated #3388
Changes from all commits
7fe2be1
06121ac
cb31cb9
f1f0b5d
8b1a968
7082f39
7ffb214
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -134,7 +134,7 @@ OR | |
### Single Selection List | ||
|
||
MDC List can handle selecting/deselecting list elements based on click or keyboard action. When enabled, the `space` and `enter` keys (or `click` event) will trigger an | ||
single list item to become selected or deselected. | ||
single list item to become selected and any other previous selected element to become deselected. | ||
|
||
```html | ||
<ul id="my-list" class="mdc-list" aria-orientation="vertical"> | ||
|
@@ -153,7 +153,8 @@ list.singleSelection = true; | |
#### Pre-selected list item | ||
|
||
When rendering the list with a pre-selected list item, the list item that needs to be selected should contain | ||
the `mdc-list-item--selected` class and `aria-selected="true"` attribute before creating the list. | ||
the `mdc-list-item--selected` or `mdc-list-item--activated` class and `aria-selected="true"` attribute before | ||
creating the list. | ||
|
||
```html | ||
<ul id="my-list" class="mdc-list" aria-orientation="vertical"> | ||
|
@@ -267,10 +268,10 @@ these should also receive `tabIndex="-1"`. | |
#### Setup in `singleSelection()` | ||
|
||
When implementing a component that will use the single selection variant, the HTML should be modified to include | ||
the `aria-selected` attribute, the `mdc-list-item--selected` class should be added, and the `tabindex` of the selected | ||
element should be `0`. The first list item should have the `tabindex` updated to `-1`. The foundation method | ||
`setSelectedIndex()` should be called with the initially selected element immediately after the foundation is | ||
instantiated. | ||
the `aria-selected` attribute, the `mdc-list-item--selected` or `mdc-list-item--activated` class should be added, | ||
and the `tabindex` of the selected element should be `0`. The first list item should have the `tabindex` updated | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. is it mandator for user to set There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. If the user has marked an element as |
||
to `-1`. The foundation method `setSelectedIndex()` should be called with the initially selected element immediately | ||
after the foundation is instantiated. | ||
|
||
```html | ||
<ul id="my-list" class="mdc-list" aria-orientation="vertical"> | ||
|
@@ -302,6 +303,7 @@ Method Signature | Description | |
`setVerticalOrientation(value: Boolean) => void` | Sets the list to an orientation causing the keys used for navigation to change. `true` results in the Up/Down arrow keys being used. `false` results in the Left/Right arrow keys being used. | ||
`setSingleSelection(value: Boolean) => void` | Sets the list to be a selection list. Enables the `enter` and `space` keys for selecting/deselecting a list item. | ||
`setSelectedIndex(index: Number) => void` | Toggles the `selected` state of the list item at index `index`. | ||
`setUseActivated(useActivated: boolean) => void` | Sets the selection logic to apply/remove the `mdc-list-item--activated` class. | ||
`handleFocusIn(evt: Event) => void` | Handles the changing of `tabindex` to `0` for all `button` and `a` elements when a list item receives focus. | ||
`handleFocusOut(evt: Event) => void` | Handles the changing of `tabindex` to `-1` for all `button` and `a` elements when a list item loses focus. | ||
`handleKeydown(evt: Event) => void` | Handles determining if a focus action should occur when a key event is triggered. | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -67,6 +67,7 @@ class MDCList extends MDCComponent { | |
this.root_.addEventListener('focusin', this.focusInEventListener_); | ||
this.root_.addEventListener('focusout', this.focusOutEventListener_); | ||
this.layout(); | ||
this.initializeListType(); | ||
} | ||
|
||
layout() { | ||
|
@@ -84,6 +85,21 @@ class MDCList extends MDCComponent { | |
.forEach((ele) => ele.setAttribute('tabindex', -1)); | ||
} | ||
|
||
initializeListType() { | ||
// Automatically set single selection if selected/activated classes are present. | ||
const preselectedElement = | ||
this.root_.querySelector(`.${cssClasses.LIST_ITEM_ACTIVATED_CLASS}, .${cssClasses.LIST_ITEM_SELECTED_CLASS}`); | ||
|
||
if (preselectedElement) { | ||
if (preselectedElement.classList.contains(cssClasses.LIST_ITEM_ACTIVATED_CLASS)) { | ||
this.foundation_.setUseActivatedClass(true); | ||
} | ||
|
||
this.singleSelection = true; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. is it safe to assume user wants to have single selection mode when list has selected item? Multi-selectable list can initially have one item selected. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think it is safe to assume that the user has a single selection list when using the selected or activated classes. There isn't a multi-selectable list, but this can be changed if we implement one. |
||
this.selectedIndex = this.listElements_.indexOf(preselectedElement); | ||
} | ||
} | ||
|
||
/** @param {boolean} value */ | ||
set vertical(value) { | ||
this.foundation_.setVerticalOrientation(value); | ||
|
@@ -108,11 +124,6 @@ class MDCList extends MDCComponent { | |
} | ||
|
||
this.foundation_.setSingleSelection(isSingleSelectionList); | ||
const selectedElement = this.root_.querySelector('.mdc-list-item--selected'); | ||
|
||
if (selectedElement) { | ||
this.selectedIndex = this.listElements_.indexOf(selectedElement); | ||
} | ||
} | ||
|
||
/** @param {number} index */ | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
is this still relevant?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, when clicked it will deselect the previously selected list item and select the currently selected list item.