DEV/material-components_material-web
1
0
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2026-01-09 07:21:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(list)!: list items are now noninteractive by default

Browse Source 
BREAKING CHANGE: the `noninteractive` property has been replaced by the `interactive` property, and by default, a list-item will no longer show a ripple or focus ring.
What to change:
- To preserve prior default behavior, add the `interactive` attribute explicitly.
- Any setting of a truthy `noninteractive` attribute or property can be removed as it's the new default behavior.

PiperOrigin-RevId: 566696782
This commit is contained in:
Andrew Jakubowicz 2023-09-19 11:43:15 -07:00 committed by Copybara-Service
parent e3b3d86fa9
commit 3b5cbc4ede
8 changed files with 27 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/components/figures/list/usage.html
View File

@ -3,7 +3,7 @@
aria-label="Three items in a list. The first item says Apple as its headline. The second one says Banana in its headline as well as Banana is a yellow fruit as its sub header. The third list item says Cucumber in its headline and Cucumbers are long green fruits that are just as long as this multi-line description as its sub header which is on two lines."
>
<md-list style="max-width: 300px">
<md-list-item headline="Fruits" noninteractive></md-list-item>
<md-list-item headline="Fruits"></md-list-item>
<md-divider></md-divider>
<md-list-item headline="Apple"></md-list-item>
<md-list-item headline="Banana" supporting-text="Banana is a yellow fruit"> </md-list-item>
@ -14,6 +14,7 @@
>
</md-list-item>
<md-list-item
interactive
headline="Shop for Kiwis"
supporting-text="This will link you out in a new tab"
href="https://google.com/search?q=buy+kiwis&tbm=shop"

3
docs/components/list.md
View File

@ -71,7 +71,7 @@ header which is on two lines.](images/list/usage.webp)
```html
<md-list style="max-width: 300px;">
<md-list-item headline="Fruits" noninteractive></md-list-item>
<md-list-item headline="Fruits"></md-list-item>
<md-divider></md-divider>
<md-list-item headline="Apple"></md-list-item>
<md-list-item headline="Banana" supporting-text="Banana is a yellow fruit">
@ -82,6 +82,7 @@ header which is on two lines.](images/list/usage.webp)
supporting-text="Cucumbers are long green fruits that are just as long as this multi-line description">
</md-list-item>
<md-list-item
interactive
headline="Shop for Kiwis"
supporting-text="This will link you out in a new tab"
href="https://google.com/search?q=buy+kiwis&tbm=shop"

2
list/demo/demo.ts
View File

@ -38,7 +38,7 @@ const collection =
new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('List', [
new Knob('md-list-item', {ui: title()}),
new Knob('disabled', {ui: boolInput(), defaultValue: false}),
new Knob('noninteractive', {ui: boolInput(), defaultValue: false}),
new Knob('interactive', {ui: boolInput(), defaultValue: false}),
new Knob(
'multiLineSupportingText', {ui: boolInput(), defaultValue: false}),
new Knob('headline', {ui: textInput(), defaultValue: 'Headline'}),

18
list/demo/stories.ts
View File

@ -16,7 +16,7 @@ import {css, html} from 'lit';
export interface StoryKnobs {
'md-list-item': void;
disabled: boolean;
noninteractive: boolean;
interactive: boolean;
multiLineSupportingText: boolean;
headline: string;
supportingText: string;
@ -58,7 +58,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
render(knobs) {
const {
disabled,
noninteractive,
interactive,
multiLineSupportingText,
headline,
supportingText,
@ -76,7 +76,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
.multiLineSupportingText=${multiLineSupportingText}
.trailingSupportingText=${trailingSupportingText}
.disabled=${disabled}
.noninteractive=${noninteractive}>
.interactive=${interactive}>
</md-list-item>
<md-list-item
@ -85,7 +85,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
.multiLineSupportingText=${multiLineSupportingText}
.trailingSupportingText=${trailingSupportingText}
.disabled=${disabled}
.noninteractive=${noninteractive}>
.interactive=${interactive}>
<md-icon slot="start-icon">
${knobs['start icon']}
</md-icon>
@ -100,7 +100,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
.multiLineSupportingText=${multiLineSupportingText}
.trailingSupportingText=${trailingSupportingText}
.disabled=${disabled}
.noninteractive=${noninteractive}
.interactive=${interactive}
.href=${href}
.target=${target as '' | '_blank' | '_parent' | '_self' | '_top'}>
<md-icon slot="end-icon">${knobs['link end icon']}</md-icon>
@ -114,7 +114,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
.multiLineSupportingText=${multiLineSupportingText}
.trailingSupportingText=${trailingSupportingText}
.disabled=${disabled}
.noninteractive=${noninteractive}>
.interactive=${interactive}>
<img src=${knobs['avatar img']} slot="start-avatar">
</md-list-item>
@ -124,7 +124,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
.multiLineSupportingText=${multiLineSupportingText}
.trailingSupportingText=${trailingSupportingText}
.disabled=${disabled}
.noninteractive=${noninteractive}>
.interactive=${interactive}>
<span slot="start-avatar">
${knobs['avatar label']}
</span>
@ -136,7 +136,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
.multiLineSupportingText=${multiLineSupportingText}
.trailingSupportingText=${trailingSupportingText}
.disabled=${disabled}
.noninteractive=${noninteractive}>
.interactive=${interactive}>
<img .src=${image} slot="start-image">
</md-list-item>
@ -146,7 +146,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
.multiLineSupportingText=${multiLineSupportingText}
.trailingSupportingText=${trailingSupportingText}
.disabled=${disabled}
.noninteractive=${noninteractive}>
.interactive=${interactive}>
<video
muted
autoplay

2
list/internal/listitem/_list-item.scss
View File

@ -80,7 +80,7 @@
// hide android tap color since we have ripple
-webkit-tap-highlight-color: transparent;
&:not(.disabled):not(.noninteractive) {
&:not(.disabled).interactive {
cursor: pointer;
}

11
list/internal/listitem/list-item-only.ts
View File

@ -12,23 +12,24 @@ import {createRequestActivationEvent, ListItemEl} from './list-item.js';
// tslint:disable-next-line:enforce-comments-on-exported-symbols
export class ListItemOnly extends ListItemEl {
/**
* Removes the hover and click ripples from the item when true.
* Enables focusing the list item, and adds hover and click ripples when set
* to true. By default `interactive` is false.
*/
@property({type: Boolean}) noninteractive = false;
@property({type: Boolean}) interactive = false;
override getRenderClasses() {
return {
...super.getRenderClasses(),
'noninteractive': this.noninteractive,
'interactive': this.interactive,
};
}
override renderRipple() {
return this.noninteractive ? nothing : super.renderRipple();
return this.interactive ? super.renderRipple() : nothing;
}
override renderFocusRing() {
return this.noninteractive ? nothing : super.renderFocusRing();
return this.interactive ? super.renderFocusRing() : nothing;
}
override onFocus() {

3
list/internal/listitem/list-item.ts
View File

@ -129,9 +129,6 @@ export class ListItemEl extends LitElement implements ListItem {
*/
@property() target: '_blank'|'_parent'|'_self'|'_top'|'' = '';
// Use a lit property to handle reflecting with preset attributes
@property({type: Number, reflect: true}) override tabIndex = 0;
@query('.list-item') protected readonly listItemRoot!: HTMLElement|null;
protected override render() {

12
list/list_test.ts
View File

@ -1087,7 +1087,7 @@ describe('<md-list-item>', () => {
expect(rootEl.classList.contains('with-three-line')).toBeTrue();
});
it('ripple and focus ring not rendered on noninteractive', async () => {
it('ripple and focus ring rendered on interactive', async () => {
const root = env.render(html`<md-list-item></md-list-item>`);
const listItem = root.querySelector('md-list-item')!;
@ -1097,18 +1097,18 @@ describe('<md-list-item>', () => {
let rippleEl = listItem.renderRoot.querySelector('md-ripple');
let focusRingEl = listItem.renderRoot.querySelector('md-focus-ring');
expect(rippleEl).toBeTruthy();
expect(focusRingEl).toBeTruthy();
expect(rippleEl).toBeNull();
expect(focusRingEl).toBeNull();
listItem.noninteractive = true;
listItem.interactive = true;
await env.waitForStability();
rippleEl = listItem.renderRoot.querySelector('md-ripple');
focusRingEl = listItem.renderRoot.querySelector('md-focus-ring');
expect(rippleEl).toBeNull();
expect(focusRingEl).toBeNull();
expect(rippleEl).toBeTruthy();
expect(focusRingEl).toBeTruthy();
});
});