feat: mini and button sizes for icon button

Author: hperrin

packages/icon-button/IconButton.svelte

@@ -23,6 +23,8 @@
     'mdc-icon-button--on': !isUninitializedValue(pressed) && pressed,
     'mdc-icon-button--touch': touch,
     'mdc-icon-button--display-flex': displayFlex,
+    'smui-icon-button--size-button': size === 'button',
+    'mdc-icon-button--reduced-size': size === 'mini' || size === 'button',
     'mdc-card__action': context === 'card:action',
     'mdc-card__action--icon': context === 'card:action',
     'mdc-top-app-bar__navigation-icon': context === 'top-app-bar:navigation',
@@ -97,6 +99,7 @@
   export let ariaLabelOff: string | undefined = undefined;
   export let touch = false;
   export let displayFlex = true;
+  export let size: 'normal' | 'mini' | 'button' = 'normal';
   export let href: string | undefined = undefined;
   export let action:
     | 'close'

packages/icon-button/IconButton.types.ts

@@ -24,6 +24,7 @@ export declare class IconButtonComponentDev<
     | 'ariaLabelOff'
     | 'touch'
     | 'displayFlex'
+    | 'size'
     | 'href'
     | 'action'
     | 'component'

packages/icon-button/_mixins.scss

@@ -0,0 +1,12 @@
+@use '@material/feature-targeting/index' as feature-targeting;
+@use '@material/icon-button/icon-button-theme';
+
+$button-icon-height: 18px !default;
+$button-height: 36px !default;
+
+@mixin core-styles($query: feature-targeting.all()) {
+  .mdc-icon-button.smui-icon-button--size-button {
+    @include icon-button-theme.icon-size($button-icon-height);
+    @include icon-button-theme.size($button-height);
+  }
+}

packages/icon-button/_style.scss

@@ -1,5 +1,8 @@
 @use '@material/icon-button/mdc-icon-button';
 @use '@smui/ripple/style' as ripple-style;
+@use './mixins' as mixins;
+
+@include mixins.core-styles;
 
 // Prevent pointer giving focus inside.
 .mdc-icon-button svg {

packages/site/src/routes/demo/icon-button/_Sizes.svelte

@@ -0,0 +1,31 @@
+<div style="display: flex; align-items: center;">
+  <IconButton class="material-icons" on:click={() => clicked++} size="normal">
+    <Icon component={Svg} viewBox="0 0 24 24">
+      <path fill="currentColor" d={mdiWrench} />
+    </Icon>
+  </IconButton> (normal = standard icon button size)
+</div>
+<div style="display: flex; align-items: center;">
+  <IconButton class="material-icons" on:click={() => clicked++} size="mini">
+    <Icon component={Svg} viewBox="0 0 24 24">
+      <path fill="currentColor" d={mdiWrench} />
+    </Icon>
+  </IconButton> (mini = same size as mini FAB)
+</div>
+<div style="display: flex; align-items: center;">
+  <IconButton class="material-icons" on:click={() => clicked++} size="button">
+    <Icon component={Svg} viewBox="0 0 24 24">
+      <path fill="currentColor" d={mdiWrench} />
+    </Icon>
+  </IconButton> (button = same height as button)
+</div>
+
+<pre class="status">Clicked: {clicked}</pre>
+
+<script lang="ts">
+  import { mdiWrench } from '@mdi/js';
+  import IconButton, { Icon } from '@smui/icon-button';
+  import { Svg } from '@smui/common/elements';
+
+  let clicked = 0;
+</script>

packages/site/src/routes/demo/icon-button/index.svelte

@@ -18,6 +18,10 @@
   <Demo component={Touch} file="icon-button/_Touch.svelte">
     Increased touch target
   </Demo>
+
+  <Demo component={Sizes} file="icon-button/_Sizes.svelte">
+    Different sizes
+  </Demo>
 </section>
 
 <script lang="ts">
@@ -27,4 +31,5 @@
   import Toggle from './_Toggle.svelte';
   import Svgs from './_Svgs.svelte';
   import Touch from './_Touch.svelte';
+  import Sizes from './_Sizes.svelte';
 </script>

packages/snackbar/_mixins.scss

@@ -1,10 +1,5 @@
-// TODO: check if this is still required
-// @use '@material/theme/theme-color';
-// @use '@material/snackbar/index' as snackbar with (
-//   $action-ink-color: theme-color.prop-value(primary)
-// );
-@use '@material/snackbar/mdc-snackbar';
-@use './mixins';
+@use '@material/theme/theme-color';
+@use '@material/snackbar/index' as snackbar with
+  ($action-ink-color: theme-color.prop-value(primary));
 
-// @include snackbar.core-styles;
-@include mixins.core-styles;
+@include snackbar.core-styles;