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

Merge pull request #5787 from material-components:disabled-link-support

Browse Source 
PiperOrigin-RevId: 742326684
This commit is contained in:
Copybara-Service 2025-03-31 11:11:15 -07:00
commit c72650fa2e
2 changed files with 28 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
button/demo/stories.ts
View File

@ -120,11 +120,13 @@ const buttons: MaterialStoryInit<StoryKnobs> = {
const links: MaterialStoryInit<StoryKnobs> = {
name: 'Links',
styles,
render({label}) {
render({label, disabled, softDisabled}) {
return html`
<div class="column">
<div class="row">
<md-filled-button
?disabled=${disabled}
?soft-disabled=${softDisabled}
href="https://google.com"
target="_blank"
trailing-icon>
@ -132,6 +134,8 @@ const links: MaterialStoryInit<StoryKnobs> = {
</md-filled-button>
<md-outlined-button
?disabled=${disabled}
?soft-disabled=${softDisabled}
href="https://google.com"
target="_blank"
trailing-icon>
@ -139,6 +143,8 @@ const links: MaterialStoryInit<StoryKnobs> = {
</md-outlined-button>
<md-elevated-button
?disabled=${disabled}
?soft-disabled=${softDisabled}
href="https://google.com"
target="_blank"
trailing-icon>
@ -146,6 +152,8 @@ const links: MaterialStoryInit<StoryKnobs> = {
</md-elevated-button>
<md-filled-tonal-button
?disabled=${disabled}
?soft-disabled=${softDisabled}
href="https://google.com"
target="_blank"
trailing-icon>
@ -153,6 +161,8 @@ const links: MaterialStoryInit<StoryKnobs> = {
</md-filled-tonal-button>
<md-text-button
?disabled=${disabled}
?soft-disabled=${softDisabled}
href="https://google.com"
target="_blank"
trailing-icon>
@ -162,6 +172,8 @@ const links: MaterialStoryInit<StoryKnobs> = {
<div class="row">
<md-filled-button
aria-label="${label || 'Filled'} link with trailing icon"
?disabled=${disabled}
?soft-disabled=${softDisabled}
href="https://google.com"
target="_blank"
trailing-icon>
@ -171,6 +183,8 @@ const links: MaterialStoryInit<StoryKnobs> = {
<md-outlined-button
aria-label="${label || 'Outlined'} link with trailing icon"
?disabled=${disabled}
?soft-disabled=${softDisabled}
href="https://google.com"
target="_blank"
trailing-icon>
@ -180,6 +194,8 @@ const links: MaterialStoryInit<StoryKnobs> = {
<md-elevated-button
aria-label="${label || 'Elevated'} link with trailing icon"
?disabled=${disabled}
?soft-disabled=${softDisabled}
href="https://google.com"
target="_blank"
trailing-icon>
@ -189,6 +205,8 @@ const links: MaterialStoryInit<StoryKnobs> = {
<md-filled-tonal-button
aria-label="${label || 'Tonal'} link with trailing icon"
?disabled=${disabled}
?soft-disabled=${softDisabled}
href="https://google.com"
target="_blank"
trailing-icon>
@ -198,6 +216,8 @@ const links: MaterialStoryInit<StoryKnobs> = {
<md-text-button
aria-label="${label || 'Text'} link with trailing icon"
?disabled=${disabled}
?soft-disabled=${softDisabled}
href="https://google.com"
target="_blank"
trailing-icon>

13
button/internal/button.ts
View File

@ -142,8 +142,7 @@ export abstract class Button extends buttonBaseClass implements FormSubmitter {
}
protected override render() {
// Link buttons may not be disabled
const isRippleDisabled = !this.href && (this.disabled || this.softDisabled);
const isRippleDisabled = this.disabled || this.softDisabled;
const buttonOrLink = this.href ? this.renderLink() : this.renderButton();
// TODO(b/310046938): due to a limitation in focus ring/ripple, we can't use
// the same ID for different elements, so we change the ID instead.
@ -190,6 +189,8 @@ export abstract class Button extends buttonBaseClass implements FormSubmitter {
aria-label="${ariaLabel || nothing}"
aria-haspopup="${ariaHasPopup || nothing}"
aria-expanded="${ariaExpanded || nothing}"
aria-disabled=${this.disabled || this.softDisabled || nothing}
tabindex="${this.disabled && !this.softDisabled ? -1 : nothing}"
href=${this.href}
download=${this.download || nothing}
target=${this.target || nothing}
@ -211,10 +212,10 @@ export abstract class Button extends buttonBaseClass implements FormSubmitter {
}
private handleClick(event: MouseEvent) {
// If the button is soft-disabled, we need to explicitly prevent the click
// from propagating to other event listeners as well as prevent the default
// action.
if (!this.href && this.softDisabled) {
// If the button is soft-disabled or a disabled link, we need to explicitly
// prevent the click from propagating to other event listeners as well as
// prevent the default action.
if (this.softDisabled || (this.disabled && this.href)) {
event.stopImmediatePropagation();
event.preventDefault();
return;