material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-09-11 13:46:10 +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); font: var(--_label-text-type);
color: var(--_label-text-color); color: var(--_label-text-color);
// TODO(b/181413732): Verify token below are named correctly // TODO(b/181413732): Verify token below are named correctly
padding-inline-start: var(--_spacing-leading); padding-inline-start: var(--_leading-space);
padding-inline-end: var(--_spacing-trailing); padding-inline-end: var(--_trailing-space);
gap: 8px; gap: 8px;
&::before { &::before {
@ -139,13 +139,13 @@
// TODO(b/181413732): Verify token below are named correctly // TODO(b/181413732): Verify token below are named correctly
.button--icon-leading { .button--icon-leading {
padding-inline-start: var(--_with-icon-spacing-leading); padding-inline-start: var(--_with-leading-icon-leading-space);
padding-inline-end: var(--_with-icon-spacing-trailing); padding-inline-end: var(--_with-leading-icon-trailing-space);
} }
.button--icon-trailing { .button--icon-trailing {
padding-inline-start: var(--_with-trailing-icon-spacing-leading); padding-inline-start: var(--_with-trailing-icon-leading-space);
padding-inline-end: var(--_with-trailing-icon-spacing-trailing); padding-inline-end: var(--_with-trailing-icon-trailing-space);
} }
.link-button-wrapper { .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; display: inline-block;
position: relative; position: relative;
margin-inline-end: 16px; margin-inline-end: 16px;
--md-outlined-button-spacing-leading: 8px; --md-outlined-button-leading-space: 8px;
--md-outlined-button-spacing-trailing: 8px; --md-outlined-button-trailing-space: 8px;
--md-outlined-button-container-height: 32px; --md-outlined-button-container-height: 32px;
/* md-checkbox sizes */ /* md-checkbox sizes */
--_component-size: 40px; --_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-tonal-button md-circular-progress {
--md-circular-progress-size: 36px; --md-circular-progress-size: 36px;
--md-circular-progress-active-indicator-width: ${(4 / 36) * 100}; --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 { .around-icon {

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

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

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

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

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

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

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

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

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

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