mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
fix(button): remove md3-* class prefixes
PiperOrigin-RevId: 549499066
This commit is contained in:
parent
a2b4f6152d
commit
2dabbdc142
@ -14,6 +14,6 @@ import {Button} from './lib/button.js';
|
||||
export class ButtonHarness extends Harness<Button> {
|
||||
protected override async getInteractiveElement() {
|
||||
await this.element.updateComplete;
|
||||
return this.element.renderRoot.querySelector('.md3-button') as HTMLElement;
|
||||
return this.element.renderRoot.querySelector('.button') as HTMLElement;
|
||||
}
|
||||
}
|
||||
|
@ -3,9 +3,6 @@
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
// stylelint-disable selector-class-pattern --
|
||||
// Selector '.md3-*' should only be used in this project.
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:map';
|
||||
// go/keep-sorted end
|
||||
@ -23,7 +20,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
|
||||
transition-timing-function: map.get($_md-sys-motion, 'emphasized-easing');
|
||||
}
|
||||
|
||||
.md3-button {
|
||||
.button {
|
||||
@include elevation.theme(
|
||||
(
|
||||
'level': var(--_container-elevation),
|
||||
|
@ -3,15 +3,12 @@
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
// stylelint-disable selector-class-pattern --
|
||||
// Selector '.md3-*' should only be used in this project.
|
||||
|
||||
@mixin styles() {
|
||||
// The icon CSS class overrides styles defined in the .material-icons CSS
|
||||
// class, which is loaded separately so the order of CSS definitions is not
|
||||
// guaranteed. Therefore, increase specifity to ensure overrides apply.
|
||||
::slotted([slot='icon']) {
|
||||
.md3-button & {
|
||||
.button & {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
writing-mode: horizontal-tb;
|
||||
@ -22,19 +19,19 @@
|
||||
block-size: var(--_icon-size);
|
||||
}
|
||||
|
||||
.md3-button:hover & {
|
||||
.button:hover & {
|
||||
color: var(--_hover-icon-color);
|
||||
}
|
||||
|
||||
.md3-button:focus & {
|
||||
.button:focus & {
|
||||
color: var(--_focus-icon-color);
|
||||
}
|
||||
|
||||
.md3-button:active & {
|
||||
.button:active & {
|
||||
color: var(--_pressed-icon-color);
|
||||
}
|
||||
|
||||
.md3-button:disabled & {
|
||||
.button:disabled & {
|
||||
color: var(--_disabled-icon-color);
|
||||
opacity: var(--_disabled-icon-opacity);
|
||||
}
|
||||
|
@ -11,9 +11,6 @@
|
||||
@use '../../tokens';
|
||||
// go/keep-sorted end
|
||||
|
||||
// stylelint-disable selector-class-pattern --
|
||||
// Selector '.md3-*' should only be used in this project.
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$supported-tokens: list.join(
|
||||
tokens.$md-comp-outlined-button-supported-tokens,
|
||||
@ -67,7 +64,7 @@
|
||||
);
|
||||
}
|
||||
|
||||
.md3-button__outline {
|
||||
.button__outline {
|
||||
inset: 0;
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
@ -78,22 +75,22 @@
|
||||
border-end-start-radius: var(--_container-shape-end-start);
|
||||
border-end-end-radius: var(--_container-shape-end-end);
|
||||
|
||||
.md3-button:active & {
|
||||
.button:active & {
|
||||
border-color: var(--_pressed-outline-color);
|
||||
}
|
||||
|
||||
.md3-button:disabled & {
|
||||
.button:disabled & {
|
||||
border-color: var(--_disabled-outline-color);
|
||||
opacity: var(--_disabled-outline-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
.md3-button__outline,
|
||||
.md3-button__ripple {
|
||||
.button__outline,
|
||||
.button__ripple {
|
||||
border-width: var(--_outline-width);
|
||||
}
|
||||
|
||||
.md3-button__ripple {
|
||||
.button__ripple {
|
||||
inline-size: calc(100% - 2 * var(--_outline-width));
|
||||
block-size: calc(100% - 2 * var(--_outline-width));
|
||||
border-style: solid;
|
||||
|
@ -3,9 +3,6 @@
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
// stylelint-disable selector-class-pattern --
|
||||
// Selector '.md3-*' should only be used in this project.
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:map';
|
||||
// go/keep-sorted end
|
||||
@ -50,7 +47,7 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.md3-button {
|
||||
.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -102,7 +99,7 @@
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:disabled .md3-button__label {
|
||||
&:disabled .button__label {
|
||||
color: var(--_disabled-label-text-color);
|
||||
opacity: var(--_disabled-label-text-opacity);
|
||||
}
|
||||
@ -125,33 +122,33 @@
|
||||
}
|
||||
}
|
||||
|
||||
.md3-button,
|
||||
.md3-button__ripple {
|
||||
.button,
|
||||
.button__ripple {
|
||||
border-start-start-radius: var(--_container-shape-start-start);
|
||||
border-start-end-radius: var(--_container-shape-start-end);
|
||||
border-end-start-radius: var(--_container-shape-end-start);
|
||||
border-end-end-radius: var(--_container-shape-end-end);
|
||||
}
|
||||
|
||||
.md3-button::after,
|
||||
.md3-button::before,
|
||||
.button::after,
|
||||
.button::before,
|
||||
md-elevation,
|
||||
.md3-button__ripple {
|
||||
.button__ripple {
|
||||
z-index: -1; // Place behind content
|
||||
}
|
||||
|
||||
// TODO(b/181413732): Verify token below are named correctly
|
||||
.md3-button--icon-leading {
|
||||
.button--icon-leading {
|
||||
padding-inline-start: var(--_with-icon-spacing-leading);
|
||||
padding-inline-end: var(--_with-icon-spacing-trailing);
|
||||
}
|
||||
|
||||
.md3-button--icon-trailing {
|
||||
.button--icon-trailing {
|
||||
padding-inline-start: var(--_with-trailing-icon-spacing-leading);
|
||||
padding-inline-end: var(--_with-trailing-icon-spacing-trailing);
|
||||
}
|
||||
|
||||
.md3-link-button-wrapper {
|
||||
.link-button-wrapper {
|
||||
inline-size: 100%;
|
||||
}
|
||||
}
|
||||
|
@ -3,11 +3,8 @@
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
// stylelint-disable selector-class-pattern --
|
||||
// Selector '.md3-*' should only be used in this project.
|
||||
|
||||
@mixin styles() {
|
||||
.md3-button__touch {
|
||||
.button__touch {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
height: 48px;
|
||||
|
@ -69,7 +69,7 @@ export abstract class Button extends LitElement {
|
||||
*/
|
||||
@property() type: ''|'submit'|'reset' = '';
|
||||
|
||||
@query('.md3-button') private readonly buttonElement!: HTMLElement|null;
|
||||
@query('.button') private readonly buttonElement!: HTMLElement|null;
|
||||
|
||||
@queryAssignedElements({slot: 'icon', flatten: true})
|
||||
private readonly assignedIcons!: HTMLElement[];
|
||||
@ -104,7 +104,7 @@ export abstract class Button extends LitElement {
|
||||
const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;
|
||||
return staticHtml`
|
||||
<${button}
|
||||
class="md3-button ${classMap(this.getRenderClasses())}"
|
||||
class="button ${classMap(this.getRenderClasses())}"
|
||||
?disabled=${isDisabled}
|
||||
aria-label="${ariaLabel || nothing}"
|
||||
aria-haspopup="${ariaHasPopup || nothing}"
|
||||
@ -126,8 +126,8 @@ export abstract class Button extends LitElement {
|
||||
|
||||
protected getRenderClasses() {
|
||||
return {
|
||||
'md3-button--icon-leading': !this.trailingIcon && this.hasIcon,
|
||||
'md3-button--icon-trailing': this.trailingIcon && this.hasIcon,
|
||||
'button--icon-leading': !this.trailingIcon && this.hasIcon,
|
||||
'button--icon-trailing': this.trailingIcon && this.hasIcon,
|
||||
};
|
||||
}
|
||||
|
||||
@ -141,7 +141,7 @@ export abstract class Button extends LitElement {
|
||||
|
||||
private renderTouchTarget() {
|
||||
return html`
|
||||
<span class="md3-button__touch"></span>
|
||||
<span class="button__touch"></span>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -154,7 +154,7 @@ export abstract class Button extends LitElement {
|
||||
};
|
||||
|
||||
private renderRipple() {
|
||||
return html`<md-ripple class="md3-button__ripple" ?disabled="${
|
||||
return html`<md-ripple class="button__ripple" ?disabled="${
|
||||
this.disabled}"></md-ripple>`;
|
||||
}
|
||||
|
||||
@ -163,7 +163,7 @@ export abstract class Button extends LitElement {
|
||||
}
|
||||
|
||||
private renderLabel() {
|
||||
return html`<span class="md3-button__label"><slot></slot></span>`;
|
||||
return html`<span class="button__label"><slot></slot></span>`;
|
||||
}
|
||||
|
||||
private renderLeadingIcon() {
|
||||
|
@ -14,13 +14,6 @@ import {Button} from './button.js';
|
||||
* An elevated button component.
|
||||
*/
|
||||
export class ElevatedButton extends Button {
|
||||
protected override getRenderClasses() {
|
||||
return {
|
||||
...super.getRenderClasses(),
|
||||
'md3-button--elevated': true,
|
||||
};
|
||||
}
|
||||
|
||||
protected override renderElevation() {
|
||||
return html`<md-elevation></md-elevation>`;
|
||||
}
|
||||
|
@ -14,13 +14,6 @@ import {Button} from './button.js';
|
||||
* A filled button component.
|
||||
*/
|
||||
export class FilledButton extends Button {
|
||||
protected override getRenderClasses() {
|
||||
return {
|
||||
...super.getRenderClasses(),
|
||||
'md3-button--filled': true,
|
||||
};
|
||||
}
|
||||
|
||||
protected override renderElevation() {
|
||||
return html`<md-elevation></md-elevation>`;
|
||||
}
|
||||
|
@ -12,14 +12,7 @@ import {Button} from './button.js';
|
||||
* An outlined button component.
|
||||
*/
|
||||
export class OutlinedButton extends Button {
|
||||
protected override getRenderClasses() {
|
||||
return {
|
||||
...super.getRenderClasses(),
|
||||
'md3-button--outlined': true,
|
||||
};
|
||||
}
|
||||
|
||||
protected override renderOutline() {
|
||||
return html`<span class="md3-button__outline"></span>`;
|
||||
return html`<span class="button__outline"></span>`;
|
||||
}
|
||||
}
|
||||
|
@ -9,11 +9,4 @@ import {Button} from './button.js';
|
||||
/**
|
||||
* A text button component.
|
||||
*/
|
||||
export class TextButton extends Button {
|
||||
protected override getRenderClasses() {
|
||||
return {
|
||||
...super.getRenderClasses(),
|
||||
'md3-button--text': true,
|
||||
};
|
||||
}
|
||||
}
|
||||
export class TextButton extends Button {}
|
||||
|
@ -14,13 +14,6 @@ import {Button} from './button.js';
|
||||
* A tonal button component.
|
||||
*/
|
||||
export class TonalButton extends Button {
|
||||
protected override getRenderClasses() {
|
||||
return {
|
||||
...super.getRenderClasses(),
|
||||
'md3-button--tonal': true,
|
||||
};
|
||||
}
|
||||
|
||||
protected override renderElevation() {
|
||||
return html`<md-elevation></md-elevation>`;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user