feat(icon-button): enhance styles and motion

Alwatr · Dec 29, 2022 · 4b4a301 · 4b4a301
1 parent 738571c
commit 4b4a301
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 24 deletions.
diff --git a/ui/demo-pwa/src/page-chat.ts b/ui/demo-pwa/src/page-chat.ts
@@ -136,8 +136,10 @@ export class AlwatrPageHome extends AlwatrSmartElement {
 
       <p>
         <span class="section-name">icon buttons</span>
+        <alwatr-standard-icon-button .icon=${'menu-outline'}></alwatr-standard-icon-button>
         <alwatr-standard-icon-button .icon=${'mic-outline'}></alwatr-standard-icon-button>
-        <alwatr-standard-icon-button .icon=${'home-outline'}></alwatr-standard-icon-button>
+        <alwatr-standard-icon-button .icon=${'happy-outline'}></alwatr-standard-icon-button>
+        <alwatr-standard-icon-button .icon=${'send'}></alwatr-standard-icon-button>
       </p>
 
       <p>

diff --git a/ui/ui-kit/src/icon-button/standard-icon-button.ts b/ui/ui-kit/src/icon-button/standard-icon-button.ts
@@ -15,60 +15,67 @@ declare global {
 export class AlwatrStandardIconButton extends AlwatrDummyElement {
   static override styles = css`
     :host {
+      position: relative;
       display: inline-flex;
       user-select: none;
       align-items: center;
       justify-content: center;
       vertical-align: middle;
-      flex: 0 0 auto;
-
-      position: relative;
+      flex-grow: 0;
+      flex-shrink: 0;
+      flex-basis: auto;
 
       cursor: pointer;
       color: var(--md-sys-color-on-surface-variant);
-      font-size: var(--md-sys-spacing-track-3);
-      width: var(--md-sys-spacing-track-6);
-      height: var(--md-sys-spacing-track-6);
+      background-color: transparent;
+      width: var(--md-sys-spacing-track-5);
+      height: var(--md-sys-spacing-track-5);
       border-radius: 50%;
-      outline: none;
+      outline: 0;
       overflow: hidden;
-      z-index: 1;
-
+      overflow: clip;
+      z-index: var(--md-sys-zindex-default);
       -webkit-tap-highlight-color: transparent;
     }
+
     :host::before {
       content: '';
       position: absolute;
-      z-index: -1;
+      z-index: var(--md-sys-zindex-below);
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
       inset: 0;
       opacity: 0;
-
-      transition: opacity 150ms linear;
-
+      transition: opacity var(--md-sys-motion-duration-small-out) var(--md-sys-motion-easing-linear);
       background-color: var(--md-sys-color-on-surface-variant);
     }
+
     :host(:hover)::before {
       opacity: var(--md-sys-state-hover-state-layer-opacity);
+      transition-duration: var(--md-sys-motion-duration-small-in);
     }
-    :host(:focus)::before {
-      opacity: var(--md-sys-state-focus-state-layer-opacity);
-    }
+
     :host(:active)::before {
-      transition: opacity 50ms linear;
       opacity: var(--md-sys-state-pressed-state-layer-opacity);
+      transition-duration: 0ms;
+    }
+
+    :host(:focus)::before {
+      opacity: var(--md-sys-state-focus-state-layer-opacity);
+      transition-duration: var(--md-sys-motion-duration-small-in);
     }
 
-    /* :host(:hover) alwatr-icon {
-      color: var(--md-sys-color-surface-variant);
+    alwatr-icon {
+      width: var(--md-sys-spacing-track-3);
+      height: var(--md-sys-spacing-track-3);
     }
-    :host(:focus) alwatr-icon {
-      color: var(--md-sys-color-primary);
-    } */
   `;
 
   @property() icon?: string;
 
   override render(): unknown {
-    return html` <alwatr-icon .name=${this.icon}></alwatr-icon> `;
+    return html`<alwatr-icon .name=${this.icon}></alwatr-icon>`;
   }
 }