Skip to content

Commit

Permalink
refactor(material/button): simplify icon button structural styles (#2…
Browse files Browse the repository at this point in the history
…9342)

Simplifies the structural styles for the icon button to make them smaller and easier to maintain.
  • Loading branch information
crisbeto authored and DBowen33 committed Jul 3, 2024
1 parent 0fe877c commit d5d321a
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 46 deletions.
34 changes: 14 additions & 20 deletions src/material/button/_icon-button-theme.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
@use 'sass:map';
@use 'sass:math';
@use '@material/density/functions' as mdc-density-functions;
@use '@material/icon-button/icon-button-theme' as mdc-icon-button-theme;
@use '../core/tokens/m2/mdc/icon-button' as tokens-mdc-icon-button;
@use '../core/tokens/m2/mat/icon-button' as tokens-mat-icon-button;
@use '../core/style/sass-utils';
Expand All @@ -18,7 +16,8 @@
@else {
// Add default values for tokens not related to color, typography, or density.
@include sass-utils.current-selector-or-root() {
@include mdc-icon-button-theme.theme(tokens-mdc-icon-button.get-unthemable-tokens());
@include token-utils.create-token-values(tokens-mdc-icon-button.$prefix,
tokens-mdc-icon-button.get-unthemable-tokens());
}
}
}
Expand All @@ -34,7 +33,7 @@
tokens-mat-icon-button.get-color-tokens($theme)
);

@include mdc-icon-button-theme.theme($mdc-tokens);
@include token-utils.create-token-values(tokens-mdc-icon-button.$prefix, $mdc-tokens);
@include token-utils.create-token-values(tokens-mat-icon-button.$prefix, $mat-tokens);
}

Expand Down Expand Up @@ -82,19 +81,15 @@
@else {
$icon-size: 24px;
$density-scale: inspection.get-theme-density($theme);
// Manually apply the expected density theming, and include the padding
// as it was applied before
$calculated-size: mdc-density-functions.prop-value(
$density-config: (
size: (
default: 48px,
maximum: 48px,
minimum: 28px,
),
),
$density-scale: $density-scale,
$property-name: size,
$size-map: (
0: 48px,
-1: 44px,
-2: 40px,
-3: 36px,
-4: 32px,
-5: 28px,
);
$calculated-size: map.get($size-map, $density-scale);

@include sass-utils.current-selector-or-root() {
@include token-utils.create-token-values(tokens-mat-icon-button.$prefix,
Expand All @@ -105,9 +100,7 @@
.mat-mdc-icon-button.mat-mdc-button-base {
// Match the styles that used to be present. This is necessary for backwards
// compat to match the previous implementations selector count (two classes).
@include mdc-icon-button-theme.theme((
state-layer-size: $calculated-size,
));
--mdc-icon-button-state-layer-size: #{$calculated-size};

// TODO: Switch calculated-size to "var(--mdc-icon-button-state-layer-size)"
// Currently fails validation because the variable is "undefined"
Expand Down Expand Up @@ -153,7 +146,8 @@
@include validation.selector-defined(
'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
@if ($tokens != ()) {
@include mdc-icon-button-theme.theme(map.get($tokens, tokens-mdc-icon-button.$prefix));
@include token-utils.create-token-values(
tokens-mdc-icon-button.$prefix, map.get($tokens, tokens-mdc-icon-button.$prefix));
@include token-utils.create-token-values(
tokens-mat-icon-button.$prefix, map.get($tokens, tokens-mat-icon-button.$prefix));
}
Expand Down
54 changes: 28 additions & 26 deletions src/material/button/icon-button.scss
Original file line number Diff line number Diff line change
@@ -1,32 +1,27 @@
@use 'sass:map';
@use '@material/icon-button/icon-button' as mdc-icon-button;
@use '@material/icon-button/icon-button-theme' as mdc-icon-button-theme;
@use '@material/theme/custom-properties' as mdc-custom-properties;

@use '../core/tokens/m2/mdc/icon-button' as tokens-mdc-icon-button;
@use '../core/tokens/m2/mat/icon-button' as tokens-mat-icon-button;

@use './button-base';
@use '../core/style/private';
@use '../core/style/vendor-prefixes';
@use '../core/tokens/token-utils';

// The slots for tokens that will be configured in the theme can be emitted with no fallback.
@include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
$token-slots: tokens-mdc-icon-button.get-token-slots();

// Add the MDC component static styles.
@include mdc-icon-button.static-styles();

.mat-mdc-icon-button {
// Add the official slots for the MDC component.
@include mdc-icon-button-theme.theme-styles(map.merge($token-slots, (
// Exclude the state layer size since we'll re-emit it below with a default value.
state-layer-size: null,
)));
}
}

.mat-mdc-icon-button {
@include vendor-prefixes.user-select(none);
display: inline-block;
position: relative;
box-sizing: border-box;
border: none;
outline: none;
background-color: transparent;
fill: currentColor;
color: inherit;
text-decoration: none;
cursor: pointer;
z-index: 0;
overflow: visible;

// Border radius is inherited by ripple to know its shape. Set to 50% so the ripple is round.
border-radius: 50%;

Expand All @@ -36,10 +31,6 @@
// Ensure the icons are centered.
text-align: center;

svg {
vertical-align: baseline;
}

@include token-utils.use-tokens(
tokens-mdc-icon-button.$prefix, tokens-mdc-icon-button.get-token-slots()) {
$button-size: var(#{token-utils.get-token-variable(state-layer-size)}, 48px);
Expand All @@ -57,12 +48,18 @@
// Icon size used to be placed on the host element. Now, in `theme-styles` it is placed on
// the unused `.mdc-button__icon` class. Explicitly set the font-size here.
@include token-utils.create-token-slot(font-size, icon-size);
@include token-utils.create-token-slot(color, icon-color);

@include button-base.mat-private-button-disabled {
// MDC's disabled styles target the `:disabled` selector which doesn't work on links.
// We re-apply the disabled icon color here since we support Material buttons on links too.
@include token-utils.create-token-slot(color, disabled-icon-color);
};

img,
svg {
@include token-utils.create-token-slot(width, icon-size);
@include token-utils.create-token-slot(height, icon-size);
vertical-align: baseline;
}
}

@include button-base.mat-private-button-interactive();
Expand All @@ -76,6 +73,11 @@
border-radius: 50%;
}

// MDC used to include this and it seems like a lot of apps depend on it.
&[hidden] {
display: none;
}

// MDC adds some styles to icon buttons that conflict with some of our focus indicator styles
// and don't actually do anything. This undoes those conflicting styles.
&.mat-unthemed,
Expand Down

0 comments on commit d5d321a

Please sign in to comment.