feat: add middle alignments for badges

Author: hperrin

packages/badge/_mixins.scss

@@ -41,6 +41,7 @@ $padding: 4px;
     }
 
     &.smui-badge--align-top-start,
+    &.smui-badge--align-top-middle,
     &.smui-badge--align-top-end {
       &.smui-badge--position-inset,
       &.smui-badge--position-middle {
@@ -53,6 +54,7 @@ $padding: 4px;
     }
 
     &.smui-badge--align-bottom-start,
+    &.smui-badge--align-bottom-middle,
     &.smui-badge--align-bottom-end {
       &.smui-badge--position-inset,
       &.smui-badge--position-middle {
@@ -65,6 +67,7 @@ $padding: 4px;
     }
 
     &.smui-badge--align-top-end,
+    &.smui-badge--align-middle-end,
     &.smui-badge--align-bottom-end {
       &.smui-badge--position-inset {
         @include rtl.reflexive-position(right, 0);
@@ -80,6 +83,7 @@ $padding: 4px;
     }
 
     &.smui-badge--align-top-start,
+    &.smui-badge--align-middle-start,
     &.smui-badge--align-bottom-start {
       &.smui-badge--position-inset {
         @include rtl.reflexive-position(left, 0);
@@ -103,6 +107,15 @@ $padding: 4px;
       }
     }
 
+    &.smui-badge--align-top-middle.smui-badge--position-middle {
+      transform-origin: center;
+      transform: translateY(-50%);
+
+      @include rtl.rtl {
+        transform: translateY(-50%);
+      }
+    }
+
     &.smui-badge--align-top-end.smui-badge--position-middle {
       transform-origin: center;
       transform: translateX(50%) translateY(-50%);
@@ -112,6 +125,24 @@ $padding: 4px;
       }
     }
 
+    &.smui-badge--align-middle-start.smui-badge--position-middle {
+      transform-origin: center;
+      transform: translateX(-50%);
+
+      @include rtl.rtl {
+        transform: translateX(50%);
+      }
+    }
+
+    &.smui-badge--align-middle-end.smui-badge--position-middle {
+      transform-origin: center;
+      transform: translateX(50%);
+
+      @include rtl.rtl {
+        transform: translateX(-50%);
+      }
+    }
+
     &.smui-badge--align-bottom-start.smui-badge--position-middle {
       transform-origin: center;
       transform: translateX(-50%) translateY(50%);
@@ -121,6 +152,15 @@ $padding: 4px;
       }
     }
 
+    &.smui-badge--align-bottom-middle.smui-badge--position-middle {
+      transform-origin: center;
+      transform: translateY(50%);
+
+      @include rtl.rtl {
+        transform: translateY(50%);
+      }
+    }
+
     &.smui-badge--align-bottom-end.smui-badge--position-middle {
       transform-origin: center;
       transform: translateX(50%) translateY(50%);

packages/badge/src/Badge.svelte

@@ -34,8 +34,16 @@
   export let square = false;
   export let color: 'primary' | 'secondary' | string = 'primary';
   export let position: 'inset' | 'middle' | 'outset' = 'middle';
-  export let align: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' =
-    'top-end';
+  export let align:
+    | 'top-start'
+    | 'top-middle'
+    | 'top-end'
+    | 'middle-start'
+    | 'middle-middle'
+    | 'middle-end'
+    | 'bottom-start'
+    | 'bottom-middle'
+    | 'bottom-end' = 'top-end';
 
   let element: HTMLSpanElement;
 

packages/site/src/routes/demo/badge/_PositionAlign.svelte

@@ -1,8 +1,8 @@
 <div style="margin-top: 2em; text-align: center;">
-  <IconButton style="position: relative;">
-    <Icon class="material-icons">message</Icon>
+  <Button style="position: relative;">
+    <Label>Button</Label>
     <Badge {position} {align} aria-label="unread count">8</Badge>
-  </IconButton>
+  </Button>
 </div>
 
 <div style="margin-top: 2em;">
@@ -18,10 +18,22 @@
 </div>
 
 <div style="margin-top: 2em;">
-  Alignment:
-  {#each alignments as alignment}
+  Y Alignment:
+  {#each alignmentsY as alignment}
     <FormField>
-      <Radio bind:group={align} value={alignment} />
+      <Radio bind:group={alignY} value={alignment} />
+      <span slot="label">
+        {alignment}
+      </span>
+    </FormField>
+  {/each}
+</div>
+
+<div style="margin-top: 2em;">
+  X Alignment:
+  {#each alignmentsX as alignment}
+    <FormField>
+      <Radio bind:group={alignX} value={alignment} />
       <span slot="label">
         {alignment}
       </span>
@@ -31,14 +43,16 @@
 
 <script lang="ts">
   import Badge from '@smui-extra/badge';
-  import IconButton, { Icon } from '@smui/icon-button';
+  import Button, { Label } from '@smui/button';
   import Radio from '@smui/radio';
   import FormField from '@smui/form-field';
 
   let position: 'inset' | 'middle' | 'outset' = 'middle';
-  let align: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' =
-    'top-end';
+  let alignY: 'top' | 'middle' | 'bottom' = 'top';
+  let alignX: 'start' | 'middle' | 'end' = 'end';
+  $: align = `${alignY}-${alignX}`;
 
   const positions = ['inset', 'middle', 'outset'];
-  const alignments = ['top-start', 'top-end', 'bottom-start', 'bottom-end'];
+  const alignmentsY = ['top', 'middle', 'bottom'];
+  const alignmentsX = ['start', 'middle', 'end'];
 </script>

packages/site/src/routes/demo/badge/_Simple.svelte

@@ -21,9 +21,20 @@
   </IconButton>
 </div>
 
+<div style="margin-top: 1.5em;">
+  FAB with a badge.
+
+  <Fab style="position: relative;">
+    <Icon class="material-icons">message</Icon>
+    <Badge aria-label="unread content count">2</Badge>
+  </Fab>
+</div>
+
 <div style="margin-top: 1.5em;">
   <!-- Adding some padding makes sure long badges don't cover the content. -->
-  <span style="position: relative; display: inline-block; padding: .5em;">
+  <span
+    style="position: relative; display: inline-block; padding: .5em .5em 0 0;"
+  >
     Long content in a badge.
     <Badge aria-label="notification count">1,000,000</Badge>
   </span>
@@ -42,5 +53,7 @@
 <script lang="ts">
   import Badge from '@smui-extra/badge';
   import Button, { Label } from '@smui/button';
-  import IconButton, { Icon } from '@smui/icon-button';
+  import IconButton from '@smui/icon-button';
+  import Fab from '@smui/fab';
+  import { Icon } from '@smui/common';
 </script>