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

feat(iconbutton): update tokens to v0.192

Browse Source 
BREAKING CHANGE: Replace `container-size` tokens with `container-width` and `container-height`.

PiperOrigin-RevId: 566801178
This commit is contained in:
Elizabeth Mitchell 2023-09-19 17:51:21 -07:00 committed by Copybara-Service
parent 05957992e8
commit e8b5b29d1e
11 changed files with 55 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
catalog/src/components/theme-changer.ts
View File

@ -259,7 +259,8 @@ export class ThemeChanger extends LitElement {
copy-code-button { copy-code-button {
--md-icon-button-icon-size: var(--_copy-button-icon-size); --md-icon-button-icon-size: var(--_copy-button-icon-size);
--md-icon-button-state-layer-size: var(--_copy-button-button-size); --md-icon-button-state-layer-width: var(--_copy-button-button-size);
--md-icon-button-state-layer-height: var(--_copy-button-button-size);
/* /*
* Center the copy icon with the h2 text * Center the copy icon with the h2 text
* -(icon button size - intrinsic icon size) / 2 * -(icon button size - intrinsic icon size) / 2

3
docs/components/figures/iconbutton/theming-filled-tonal.html
View File

@ -5,7 +5,8 @@
aria-label="Image of a filled tonal icon button with a different theme applied"> aria-label="Image of a filled tonal icon button with a different theme applied">
<style> <style>
.styled-example.tonal { .styled-example.tonal {
--md-filled-tonal-icon-button-container-size: 80px; --md-filled-tonal-icon-button-container-width: 80px;
--md-filled-tonal-icon-button-container-height: 80px;
--md-filled-tonal-icon-button-container-shape: 0px; --md-filled-tonal-icon-button-container-shape: 0px;
--md-filled-tonal-icon-button-icon-size: 40px; --md-filled-tonal-icon-button-icon-size: 40px;
--md-sys-color-secondary-container: #006A6A; --md-sys-color-secondary-container: #006A6A;

3
docs/components/figures/iconbutton/theming-filled.html
View File

@ -5,7 +5,8 @@
aria-label="Image of a filled icon button with a different theme applied"> aria-label="Image of a filled icon button with a different theme applied">
<style> <style>
.styled-example.filled { .styled-example.filled {
--md-filled-icon-button-container-size: 80px; --md-filled-icon-button-container-width: 80px;
--md-filled-icon-button-container-height: 80px;
--md-filled-icon-button-icon-size: 40px; --md-filled-icon-button-icon-size: 40px;
--md-filled-icon-button-container-shape: 0px; --md-filled-icon-button-container-shape: 0px;
--md-sys-color-primary: #dc362e; --md-sys-color-primary: #dc362e;

3
docs/components/figures/iconbutton/theming-outlined.html
View File

@ -5,7 +5,8 @@
aria-label="Image of an outlined icon button with a different theme applied"> aria-label="Image of an outlined icon button with a different theme applied">
<style> <style>
.styled-example.outlined > * { .styled-example.outlined > * {
--md-outlined-icon-button-container-size: 80px; --md-outlined-icon-button-container-width: 80px;
--md-outlined-icon-button-container-height: 80px;
--md-outlined-icon-button-container-shape: 0px; --md-outlined-icon-button-container-shape: 0px;
--md-outlined-icon-button-icon-size: 40px; --md-outlined-icon-button-icon-size: 40px;
--md-outlined-icon-button-unselected-outline-width: 4px; --md-outlined-icon-button-unselected-outline-width: 4px;

20
docs/components/icon-button.md
View File

@ -323,7 +323,8 @@ Token | Default value
-------------------------------------------------- | ------------------------ -------------------------------------------------- | ------------------------
`--md-filled-icon-button-selected-container-color` | `--md-sys-color-primary` `--md-filled-icon-button-selected-container-color` | `--md-sys-color-primary`
`--md-filled-icon-button-container-shape` | `9999px` `--md-filled-icon-button-container-shape` | `9999px`
`--md-filled-icon-button-container-size` | `40px` `--md-filled-icon-button-container-width` | `40px`
`--md-filled-icon-button-container-height` | `40px`
`--md-filled-icon-button-icon-size` | `24px` `--md-filled-icon-button-icon-size` | `24px`
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-icon-button.scss) * [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-icon-button.scss)
@ -341,7 +342,8 @@ Token | Default value
```html ```html
<style> <style>
:root { :root {
--md-filled-icon-button-container-size: 80px; --md-filled-icon-button-container-width: 80px;
--md-filled-icon-button-container-height: 80px;
--md-filled-icon-button-icon-size: 40px; --md-filled-icon-button-icon-size: 40px;
--md-filled-icon-button-container-shape: 0px; --md-filled-icon-button-container-shape: 0px;
--md-sys-color-primary: #dc362e; --md-sys-color-primary: #dc362e;
@ -359,7 +361,8 @@ Token | Default value
-------------------------------------------------------- | ------------- -------------------------------------------------------- | -------------
`--md-filled-tonal-icon-button-selected-container-color` | `--md-sys-color-secondary-container` `--md-filled-tonal-icon-button-selected-container-color` | `--md-sys-color-secondary-container`
`--md-filled-tonal-icon-button-container-shape` | `9999px` `--md-filled-tonal-icon-button-container-shape` | `9999px`
`--md-filled-tonal-icon-button-container-size` | `40px` `--md-filled-tonal-icon-button-container-width` | `40px`
`--md-filled-tonal-icon-button-container-height` | `40px`
`--md-filled-tonal-icon-button-icon-size` | `24px` `--md-filled-tonal-icon-button-icon-size` | `24px`
### Filled Tonal Icon Button example ### Filled Tonal Icon Button example
@ -374,7 +377,8 @@ Token | Default value
```html ```html
<style> <style>
:root { :root {
--md-filled-tonal-icon-button-container-size: 80px; --md-filled-tonal-icon-button-container-width: 80px;
--md-filled-tonal-icon-button-container-height: 80px;
--md-filled-tonal-icon-button-container-shape: 0px; --md-filled-tonal-icon-button-container-shape: 0px;
--md-filled-tonal-icon-button-icon-size: 40px; --md-filled-tonal-icon-button-icon-size: 40px;
--md-sys-color-secondary-container: #006A6A; --md-sys-color-secondary-container: #006A6A;
@ -388,11 +392,12 @@ Token | Default value
### Outlined Icon Button tokens ### Outlined Icon Button tokens
Token | Default value Token | Default value
------------------------------------------- | ------------------------ -------------------------------------------- | ------------------------
`--md-outlined-icon-button-outline-color` | `--md-sys-color-outline` `--md-outlined-icon-button-outline-color` | `--md-sys-color-outline`
`--md-outlined-icon-button-outline-width` | `1px` `--md-outlined-icon-button-outline-width` | `1px`
`--md-outlined-icon-button-container-shape` | `9999px` `--md-outlined-icon-button-container-shape` | `9999px`
`--md-outlined-icon-button-container-size` | `40px` `--md-outlined-icon-button-container-width` | `40px`
`--md-outlined-icon-button-container-height` | `40px`
`--md-outlined-icon-button-icon-size` | `24px` `--md-outlined-icon-button-icon-size` | `24px`
### Outlined Icon Button example ### Outlined Icon Button example
@ -407,7 +412,8 @@ Token | Default value
```html ```html
<style> <style>
:root { :root {
--md-outlined-icon-button-container-size: 80px; --md-outlined-icon-button-container-width: 80px;
--md-outlined-icon-button-container-height: 80px;
--md-outlined-icon-button-container-shape: 0px; --md-outlined-icon-button-container-shape: 0px;
--md-outlined-icon-button-icon-size: 40px; --md-outlined-icon-button-icon-size: 40px;
--md-outlined-icon-button-outline-width: 4px; --md-outlined-icon-button-outline-width: 4px;

10
iconbutton/internal/_icon-button.scss
View File

@ -41,14 +41,16 @@
--_container-shape-start-end: 0; --_container-shape-start-end: 0;
--_container-shape-end-end: 0; --_container-shape-end-end: 0;
--_container-shape-end-start: 0; --_container-shape-end-start: 0;
--_container-size: 0; --_container-height: 0;
--_container-width: 0;
height: var(--_state-layer-size); height: var(--_state-layer-height);
width: var(--_state-layer-size); width: var(--_state-layer-width);
} }
:host([touch-target='wrapper']) { :host([touch-target='wrapper']) {
margin: max(0px, (48px - var(--_state-layer-size)) / 2); margin: max(0px, (48px - var(--_state-layer-height))/2)
max(0px, (48px - var(--_state-layer-width))/2);
} }
md-focus-ring { md-focus-ring {

18
iconbutton/internal/_shared.scss
View File

@ -20,13 +20,14 @@
display: inline-flex; display: inline-flex;
outline: none; outline: none;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
height: var(--_container-size); height: var(--_container-height);
width: var(--_container-size); width: var(--_container-width);
justify-content: center; justify-content: center;
} }
:host([touch-target='wrapper']) { :host([touch-target='wrapper']) {
margin: max(0px, (48px - var(--_container-size)) / 2); margin: max(0px, (48px - var(--_container-height)) / 2)
max(0px, (48px - var(--_container-width)) / 2);
} }
md-focus-ring { md-focus-ring {
@ -45,13 +46,13 @@
} }
.icon-button { .icon-button {
align-items: center; place-items: center;
background: none; background: none;
border: none; border: none;
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
justify-content: center; place-content: center;
outline: none; outline: none;
padding: 0; padding: 0;
position: relative; position: relative;
@ -99,11 +100,8 @@
.touch { .touch {
position: absolute; position: absolute;
top: 50%; height: max(48px, 100%);
height: 48px; width: max(48px, 100%);
left: 50%;
width: 48px;
transform: translate(-50%, -50%);
} }
:host([touch-target='none']) .touch { :host([touch-target='none']) .touch {

5
tokens/_md-comp-filled-icon-button.scss
View File

@ -7,15 +7,16 @@
@use './md-sys-color'; @use './md-sys-color';
@use './md-sys-shape'; @use './md-sys-shape';
@use './md-sys-state'; @use './md-sys-state';
@use './v0_172/md-comp-filled-icon-button'; @use './v0_192/md-comp-filled-icon-button';
@use './values'; @use './values';
// go/keep-sorted end // go/keep-sorted end
$supported-tokens: ( $supported-tokens: (
// go/keep-sorted start // go/keep-sorted start
'container-color', 'container-color',
'container-height',
'container-shape', 'container-shape',
'container-size', 'container-width',
'disabled-container-color', 'disabled-container-color',
'disabled-container-opacity', 'disabled-container-opacity',
'disabled-icon-color', 'disabled-icon-color',

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

@ -7,15 +7,16 @@
@use './md-sys-color'; @use './md-sys-color';
@use './md-sys-shape'; @use './md-sys-shape';
@use './md-sys-state'; @use './md-sys-state';
@use './v0_172/md-comp-filled-tonal-icon-button'; @use './v0_192/md-comp-filled-tonal-icon-button';
@use './values'; @use './values';
// go/keep-sorted end // go/keep-sorted end
$supported-tokens: ( $supported-tokens: (
// go/keep-sorted start // go/keep-sorted start
'container-color', 'container-color',
'container-height',
'container-shape', 'container-shape',
'container-size', 'container-width',
'disabled-container-color', 'disabled-container-color',
'disabled-container-opacity', 'disabled-container-opacity',
'disabled-icon-color', 'disabled-icon-color',

5
tokens/_md-comp-icon-button.scss
View File

@ -7,7 +7,7 @@
@use './md-sys-color'; @use './md-sys-color';
@use './md-sys-shape'; @use './md-sys-shape';
@use './md-sys-state'; @use './md-sys-state';
@use './v0_172/md-comp-icon-button'; @use './v0_192/md-comp-icon-button';
@use './values'; @use './values';
// go/keep-sorted end // go/keep-sorted end
@ -32,8 +32,9 @@ $supported-tokens: (
'selected-pressed-icon-color', 'selected-pressed-icon-color',
'selected-pressed-state-layer-color', 'selected-pressed-state-layer-color',
'selected-pressed-state-layer-opacity', 'selected-pressed-state-layer-opacity',
'state-layer-height',
'state-layer-shape', 'state-layer-shape',
'state-layer-size', 'state-layer-width',
// go/keep-sorted end // go/keep-sorted end
); );

5
tokens/_md-comp-outlined-icon-button.scss
View File

@ -7,14 +7,15 @@
@use './md-sys-color'; @use './md-sys-color';
@use './md-sys-shape'; @use './md-sys-shape';
@use './md-sys-state'; @use './md-sys-state';
@use './v0_172/md-comp-outlined-icon-button'; @use './v0_192/md-comp-outlined-icon-button';
@use './values'; @use './values';
// go/keep-sorted end // go/keep-sorted end
$supported-tokens: ( $supported-tokens: (
// go/keep-sorted start // go/keep-sorted start
'container-height',
'container-shape', 'container-shape',
'container-size', 'container-width',
'disabled-icon-color', 'disabled-icon-color',
'disabled-icon-opacity', 'disabled-icon-opacity',
'disabled-outline-color', 'disabled-outline-color',