feat(icon-button): new standard icon button

Alwatr · Feb 7, 2023 · b8e9836 · b8e9836
1 parent c44ce67
commit b8e9836
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 37 deletions.
diff --git a/ui/pwa-helper/package.json b/ui/pwa-helper/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@alwatr/pwa-helper",
-  "version": "0.29.0-beta7",
+  "version": "0.29.0-beta8",
   "description": "Alwatr PWA Helper",
   "keywords": [
     "element",

diff --git a/ui/ui-kit/src/button/icon-button.ts b/ui/ui-kit/src/button/icon-button.ts
@@ -12,70 +12,67 @@ declare global {
 /**
  * Alwatr standard icon button element.
  *
- * @prop {String} icon
- * @prop {String} urlPrefix
- * @prop {Boolean} flipRtl
- *
- * @attr {String} icon
- * @attr {String} url-prefix
  * @attr {Boolean} flip-rtl
+ *
+ * @cssprop {String} [--comp-icon-button-color-hsl=var(--sys-color-on-surface-variant-hsl)]
  */
 @customElement('alwatr-icon-button')
 export class AlwatrStandardIconButton extends AlwatrSurface {
   static override styles = [
     AlwatrSurface.styles,
     css`
       :host {
-        --_surface-color-on: var(--sys-color-on-surface-variant-hsl);
-        display: inline-flex;
-        user-select: none;
-        align-items: center;
-        justify-content: center;
+        display: inline-block;
+        padding: calc(0.5 * var(--sys-spacing-track));
+        font-size: calc(3 * var(--sys-spacing-track)); // icon size
+
+        align-self: center;
         vertical-align: middle;
         flex-grow: 0;
         flex-shrink: 0;
 
+        user-select: none;
         cursor: pointer;
+      }
+
+      alwatr-surface {
+        --_surface-color-on: var(--comp-icon-button-color-hsl, var(--sys-color-on-surface-variant-hsl));
+        --_surface-state-color: var(--comp-icon-button-color-hsl, var(--sys-color-on-surface-variant-hsl));
         background-color: transparent;
-        width: calc(5 * var(--sys-spacing-track));
-        height: calc(5 * var(--sys-spacing-track));
         border-radius: 50%;
-        outline: 0;
-        overflow: hidden;
-        overflow: clip;
-        z-index: var(--sys-zindex-default);
-        -webkit-tap-highlight-color: transparent;
         box-shadow: none;
+        padding: var(--sys-spacing-track);
+        font-size: inherit;
       }
 
       alwatr-icon {
-        width: calc(3 * var(--sys-spacing-track));
-        height: calc(3 * var(--sys-spacing-track));
+        display: block;
       }
     `,
   ];
 
   @property()
     icon?: string;
 
-  @property({attribute: 'url-prefix'})
-    urlPrefix?: string;
-
   @property({type: Boolean, attribute: 'flip-rtl'})
     flipRtl = false;
 
-  override connectedCallback(): void {
-    super.connectedCallback();
-    this.setAttribute('stated', '');
-  }
-
   override render(): unknown {
     this._logger.logMethod('render');
-    return html`<alwatr-icon
-      part="icon"
-      ?flip-rtl=${this.flipRtl}
-      .name=${this.icon}
-      .urlPrefix=${this.urlPrefix}
-    ></alwatr-icon>`;
+    return html`<alwatr-surface stated>
+      <alwatr-icon
+        .name=${this.icon}
+        ?flip-rtl=${this.flipRtl}
+      ></alwatr-icon>
+    </alwatr-surface>`;
   }
 }
+
+/*
+  TODO:
+    1. Filled icon button
+    2. Filled tonal icon button
+    3. Outlined icon button
+    4. toggle/selected mode
+    https://m3.material.io/components/icon-buttons/specs
+*/
diff --git a/ui/ui-kit/src/card/icon-box.ts b/ui/ui-kit/src/card/icon-box.ts
@@ -51,8 +51,6 @@ export class AlwatrIconBox extends AlwatrSurface {
         line-height: var(--sys-typescale-body-small-line-height);
         user-select: none;
         -webkit-user-select: none;
-        overflow: hidden;
-        overflow: clip;
       }
 
       :host([highlight]) {