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 {
--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
* -(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">
<style>
.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-icon-size: 40px;
--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">
<style>
.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-container-shape: 0px;
--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">
<style>
.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-icon-size: 40px;
--md-outlined-icon-button-unselected-outline-width: 4px;

30
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-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`
* [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
<style>
: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-container-shape: 0px;
--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-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`
### Filled Tonal Icon Button example
@ -374,7 +377,8 @@ Token | Default value
```html
<style>
: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-icon-size: 40px;
--md-sys-color-secondary-container: #006A6A;
@ -387,13 +391,14 @@ Token | Default value
### Outlined Icon Button tokens
Token | Default value
------------------------------------------- | ------------------------
`--md-outlined-icon-button-outline-color` | `--md-sys-color-outline`
`--md-outlined-icon-button-outline-width` | `1px`
`--md-outlined-icon-button-container-shape` | `9999px`
`--md-outlined-icon-button-container-size` | `40px`
`--md-outlined-icon-button-icon-size` | `24px`
Token | Default value
-------------------------------------------- | ------------------------
`--md-outlined-icon-button-outline-color` | `--md-sys-color-outline`
`--md-outlined-icon-button-outline-width` | `1px`
`--md-outlined-icon-button-container-shape` | `9999px`
`--md-outlined-icon-button-container-width` | `40px`
`--md-outlined-icon-button-container-height` | `40px`
`--md-outlined-icon-button-icon-size` | `24px`
### Outlined Icon Button example
@ -407,7 +412,8 @@ Token | Default value
```html
<style>
: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-icon-size: 40px;
--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-end-end: 0;
--_container-shape-end-start: 0;
--_container-size: 0;
--_container-height: 0;
--_container-width: 0;
height: var(--_state-layer-size);
width: var(--_state-layer-size);
height: var(--_state-layer-height);
width: var(--_state-layer-width);
}
: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 {

18
iconbutton/internal/_shared.scss
View File

@ -20,13 +20,14 @@
display: inline-flex;
outline: none;
-webkit-tap-highlight-color: transparent;
height: var(--_container-size);
width: var(--_container-size);
height: var(--_container-height);
width: var(--_container-width);
justify-content: center;
}
: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 {
@ -45,13 +46,13 @@
}
.icon-button {
align-items: center;
place-items: center;
background: none;
border: none;
box-sizing: border-box;
cursor: pointer;
display: flex;
justify-content: center;
place-content: center;
outline: none;
padding: 0;
position: relative;
@ -99,11 +100,8 @@
.touch {
position: absolute;
top: 50%;
height: 48px;
left: 50%;
width: 48px;
transform: translate(-50%, -50%);
height: max(48px, 100%);
width: max(48px, 100%);
}
: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-shape';
@use './md-sys-state';
@use './v0_172/md-comp-filled-icon-button';
@use './v0_192/md-comp-filled-icon-button';
@use './values';
// go/keep-sorted end
$supported-tokens: (
// go/keep-sorted start
'container-color',
'container-height',
'container-shape',
'container-size',
'container-width',
'disabled-container-color',
'disabled-container-opacity',
'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-shape';
@use './md-sys-state';
@use './v0_172/md-comp-filled-tonal-icon-button';
@use './v0_192/md-comp-filled-tonal-icon-button';
@use './values';
// go/keep-sorted end
$supported-tokens: (
// go/keep-sorted start
'container-color',
'container-height',
'container-shape',
'container-size',
'container-width',
'disabled-container-color',
'disabled-container-opacity',
'disabled-icon-color',

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

@ -7,7 +7,7 @@
@use './md-sys-color';
@use './md-sys-shape';
@use './md-sys-state';
@use './v0_172/md-comp-icon-button';
@use './v0_192/md-comp-icon-button';
@use './values';
// go/keep-sorted end
@ -32,8 +32,9 @@ $supported-tokens: (
'selected-pressed-icon-color',
'selected-pressed-state-layer-color',
'selected-pressed-state-layer-opacity',
'state-layer-height',
'state-layer-shape',
'state-layer-size',
'state-layer-width',
// 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-shape';
@use './md-sys-state';
@use './v0_172/md-comp-outlined-icon-button';
@use './v0_192/md-comp-outlined-icon-button';
@use './values';
// go/keep-sorted end
$supported-tokens: (
// go/keep-sorted start
'container-height',
'container-shape',
'container-size',
'container-width',
'disabled-icon-color',
'disabled-icon-opacity',
'disabled-outline-color',