material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-08-16 09:00:32 +03:00
Code Issues Projects Releases Wiki Activity

fix(button)!: rename spacing tokens

Browse Source 
BREAKING CHANGE: Rename `--md-<button>-spacing-<token>` to `--md-<button>-<token>-space`. Rename `--md-<button>-with-icon-*` to `--md-<button>-with-leading-icon-*`.

PiperOrigin-RevId: 552323014
This commit is contained in:
Elizabeth Mitchell 2023-07-30 17:18:05 -07:00 committed by Copybara-Service
parent 2568d4fbac
commit 2329d2b419
8 changed files with 79 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
button/internal/_shared.scss
View File

@ -67,8 +67,8 @@
font: var(--_label-text-type);
color: var(--_label-text-color);
// TODO(b/181413732): Verify token below are named correctly
padding-inline-start: var(--_spacing-leading);
padding-inline-end: var(--_spacing-trailing);
padding-inline-start: var(--_leading-space);
padding-inline-end: var(--_trailing-space);
gap: 8px;
&::before {
@ -139,13 +139,13 @@
// TODO(b/181413732): Verify token below are named correctly
.button--icon-leading {
padding-inline-start: var(--_with-icon-spacing-leading);
padding-inline-end: var(--_with-icon-spacing-trailing);
padding-inline-start: var(--_with-leading-icon-leading-space);
padding-inline-end: var(--_with-leading-icon-trailing-space);
}
.button--icon-trailing {
padding-inline-start: var(--_with-trailing-icon-spacing-leading);
padding-inline-end: var(--_with-trailing-icon-spacing-trailing);
padding-inline-start: var(--_with-trailing-icon-leading-space);
padding-inline-end: var(--_with-trailing-icon-trailing-space);
}
.link-button-wrapper {

4
catalog/stories/components/knob-ui-components.ts
View File

@ -56,8 +56,8 @@ export class KnobColorSelector extends LitElement {
display: inline-block;
position: relative;
margin-inline-end: 16px;
--md-outlined-button-spacing-leading: 8px;
--md-outlined-button-spacing-trailing: 8px;
--md-outlined-button-leading-space: 8px;
--md-outlined-button-trailing-space: 8px;
--md-outlined-button-container-height: 32px;
/* md-checkbox sizes */
--_component-size: 40px;

2
progress/demo/stories.ts
View File

@ -93,7 +93,7 @@ const components: MaterialStoryInit<StoryKnobs> = {
md-tonal-button md-circular-progress {
--md-circular-progress-size: 36px;
--md-circular-progress-active-indicator-width: ${(4 / 36) * 100};
--md-tonal-button-with-icon-spacing-trailing: 8px;
--md-tonal-button-with-leading-icon-trailing-space: 8px;
}
.around-icon {

26
tokens/_md-comp-elevated-button.scss
View File

@ -42,17 +42,17 @@ $supported-tokens: (
'icon-size',
'label-text-color',
'label-text-type',
'leading-space',
'pressed-container-elevation',
'pressed-icon-color',
'pressed-label-text-color',
'pressed-state-layer-color',
'pressed-state-layer-opacity',
'spacing-leading',
'spacing-trailing',
'with-icon-spacing-leading',
'with-icon-spacing-trailing',
'with-trailing-icon-spacing-leading',
'with-trailing-icon-spacing-trailing',
'trailing-space',
'with-leading-icon-leading-space',
'with-leading-icon-trailing-space',
'with-trailing-icon-leading-space',
'with-trailing-icon-trailing-space',
// go/keep-sorted end
);
@ -84,13 +84,15 @@ $_default: (
$new-tokens: (
// TODO(b/198759625): Remove once spacing tokens are formally added
// go/keep-sorted start
'spacing-leading': if($exclude-hardcoded-values, null, 24px),
'spacing-trailing': if($exclude-hardcoded-values, null, 24px),
'with-icon-spacing-leading': if($exclude-hardcoded-values, null, 16px),
'with-icon-spacing-trailing': if($exclude-hardcoded-values, null, 24px),
'with-trailing-icon-spacing-leading':
'leading-space': if($exclude-hardcoded-values, null, 24px),
'trailing-space': if($exclude-hardcoded-values, null, 24px),
'with-leading-icon-leading-space':
if($exclude-hardcoded-values, null, 16px),
'with-leading-icon-trailing-space':
if($exclude-hardcoded-values, null, 24px),
'with-trailing-icon-spacing-trailing':
'with-trailing-icon-leading-space':
if($exclude-hardcoded-values, null, 24px),
'with-trailing-icon-trailing-space':
if($exclude-hardcoded-values, null, 16px),
// go/keep-sorted end
),

26
tokens/_md-comp-filled-button.scss
View File

@ -42,17 +42,17 @@ $supported-tokens: (
'icon-size',
'label-text-color',
'label-text-type',
'leading-space',
'pressed-container-elevation',
'pressed-icon-color',
'pressed-label-text-color',
'pressed-state-layer-color',
'pressed-state-layer-opacity',
'spacing-leading',
'spacing-trailing',
'with-icon-spacing-leading',
'with-icon-spacing-trailing',
'with-trailing-icon-spacing-leading',
'with-trailing-icon-spacing-trailing',
'trailing-space',
'with-leading-icon-leading-space',
'with-leading-icon-trailing-space',
'with-trailing-icon-leading-space',
'with-trailing-icon-trailing-space',
// go/keep-sorted end
);
@ -84,13 +84,15 @@ $_default: (
$new-tokens: (
// TODO(b/198759625): Remove once spacing tokens are formally added
// go/keep-sorted start
'spacing-leading': if($exclude-hardcoded-values, null, 24px),
'spacing-trailing': if($exclude-hardcoded-values, null, 24px),
'with-icon-spacing-leading': if($exclude-hardcoded-values, null, 16px),
'with-icon-spacing-trailing': if($exclude-hardcoded-values, null, 24px),
'with-trailing-icon-spacing-leading':
'leading-space': if($exclude-hardcoded-values, null, 24px),
'trailing-space': if($exclude-hardcoded-values, null, 24px),
'with-leading-icon-leading-space':
if($exclude-hardcoded-values, null, 16px),
'with-leading-icon-trailing-space':
if($exclude-hardcoded-values, null, 24px),
'with-trailing-icon-spacing-trailing':
'with-trailing-icon-leading-space':
if($exclude-hardcoded-values, null, 24px),
'with-trailing-icon-trailing-space':
if($exclude-hardcoded-values, null, 16px),
// go/keep-sorted end
),

26
tokens/_md-comp-filled-tonal-button.scss
View File

@ -42,17 +42,17 @@ $supported-tokens: (
'icon-size',
'label-text-color',
'label-text-type',
'leading-space',
'pressed-container-elevation',
'pressed-icon-color',
'pressed-label-text-color',
'pressed-state-layer-color',
'pressed-state-layer-opacity',
'spacing-leading',
'spacing-trailing',
'with-icon-spacing-leading',
'with-icon-spacing-trailing',
'with-trailing-icon-spacing-leading',
'with-trailing-icon-spacing-trailing',
'trailing-space',
'with-leading-icon-leading-space',
'with-leading-icon-trailing-space',
'with-trailing-icon-leading-space',
'with-trailing-icon-trailing-space',
// go/keep-sorted end
);
@ -84,13 +84,15 @@ $_default: (
$new-tokens: (
// TODO(b/198759625): Remove once spacing tokens are formally added
// go/keep-sorted start
'spacing-leading': if($exclude-hardcoded-values, null, 24px),
'spacing-trailing': if($exclude-hardcoded-values, null, 24px),
'with-icon-spacing-leading': if($exclude-hardcoded-values, null, 16px),
'with-icon-spacing-trailing': if($exclude-hardcoded-values, null, 24px),
'with-trailing-icon-spacing-leading':
'leading-space': if($exclude-hardcoded-values, null, 24px),
'trailing-space': if($exclude-hardcoded-values, null, 24px),
'with-leading-icon-leading-space':
if($exclude-hardcoded-values, null, 16px),
'with-leading-icon-trailing-space':
if($exclude-hardcoded-values, null, 24px),
'with-trailing-icon-spacing-trailing':
'with-trailing-icon-leading-space':
if($exclude-hardcoded-values, null, 24px),
'with-trailing-icon-trailing-space':
if($exclude-hardcoded-values, null, 16px),
// go/keep-sorted end
),

26
tokens/_md-comp-outlined-button.scss
View File

@ -35,6 +35,7 @@ $supported-tokens: (
'icon-size',
'label-text-color',
'label-text-type',
'leading-space',
'outline-color',
'outline-width',
'pressed-icon-color',
@ -42,12 +43,11 @@ $supported-tokens: (
'pressed-outline-color',
'pressed-state-layer-color',
'pressed-state-layer-opacity',
'spacing-leading',
'spacing-trailing',
'with-icon-spacing-leading',
'with-icon-spacing-trailing',
'with-trailing-icon-spacing-leading',
'with-trailing-icon-spacing-trailing',
'trailing-space',
'with-leading-icon-leading-space',
'with-leading-icon-trailing-space',
'with-trailing-icon-leading-space',
'with-trailing-icon-trailing-space',
// go/keep-sorted end
);
@ -80,13 +80,15 @@ $_default: (
$new-tokens: (
// TODO(b/198759625): Remove once spacing tokens are formally added
// go/keep-sorted start
'spacing-leading': if($exclude-hardcoded-values, null, 24px),
'spacing-trailing': if($exclude-hardcoded-values, null, 24px),
'with-icon-spacing-leading': if($exclude-hardcoded-values, null, 16px),
'with-icon-spacing-trailing': if($exclude-hardcoded-values, null, 24px),
'with-trailing-icon-spacing-leading':
'leading-space': if($exclude-hardcoded-values, null, 24px),
'trailing-space': if($exclude-hardcoded-values, null, 24px),
'with-leading-icon-leading-space':
if($exclude-hardcoded-values, null, 16px),
'with-leading-icon-trailing-space':
if($exclude-hardcoded-values, null, 24px),
'with-trailing-icon-spacing-trailing':
'with-trailing-icon-leading-space':
if($exclude-hardcoded-values, null, 24px),
'with-trailing-icon-trailing-space':
if($exclude-hardcoded-values, null, 16px),
// go/keep-sorted end
),

26
tokens/_md-comp-text-button.scss
View File

@ -33,16 +33,16 @@ $supported-tokens: (
'icon-size',
'label-text-color',
'label-text-type',
'leading-space',
'pressed-icon-color',
'pressed-label-text-color',
'pressed-state-layer-color',
'pressed-state-layer-opacity',
'spacing-leading',
'spacing-trailing',
'with-icon-spacing-leading',
'with-icon-spacing-trailing',
'with-trailing-icon-spacing-leading',
'with-trailing-icon-spacing-trailing',
'trailing-space',
'with-leading-icon-leading-space',
'with-leading-icon-trailing-space',
'with-trailing-icon-leading-space',
'with-trailing-icon-trailing-space',
// go/keep-sorted end
);
@ -73,13 +73,15 @@ $_default: (
$new-tokens: (
// TODO(b/198759625): Remove once spacing tokens are formally added
// go/keep-sorted start
'spacing-leading': if($exclude-hardcoded-values, null, 12px),
'spacing-trailing': if($exclude-hardcoded-values, null, 12px),
'with-icon-spacing-leading': if($exclude-hardcoded-values, null, 12px),
'with-icon-spacing-trailing': if($exclude-hardcoded-values, null, 16px),
'with-trailing-icon-spacing-leading':
'leading-space': if($exclude-hardcoded-values, null, 12px),
'trailing-space': if($exclude-hardcoded-values, null, 12px),
'with-leading-icon-leading-space':
if($exclude-hardcoded-values, null, 12px),
'with-leading-icon-trailing-space':
if($exclude-hardcoded-values, null, 16px),
'with-trailing-icon-spacing-trailing':
'with-trailing-icon-leading-space':
if($exclude-hardcoded-values, null, 16px),
'with-trailing-icon-trailing-space':
if($exclude-hardcoded-values, null, 12px),
// go/keep-sorted end
),