add touchstart to button elements

reown-com · Aug 1, 2023 · df2e13a · df2e13a
1 parent 67f1d52
commit df2e13a
Show file tree

Hide file tree

Showing 13 changed files with 43 additions and 75 deletions.
diff --git a/packages/ui/src/composites/wui-button/index.ts b/packages/ui/src/composites/wui-button/index.ts
@@ -23,7 +23,12 @@ export class WuiButton extends LitElement {
     this.style.cssText = `--local-width: ${this.variant === 'fullWidth' ? '100%' : 'auto'};`
 
     return html`
-      <button data-variant=${this.variant} data-size=${this.size} ?disabled=${this.disabled}>
+      <button
+        data-variant=${this.variant}
+        data-size=${this.size}
+        ?disabled=${this.disabled}
+        ontouchstart
+      >
         <slot name="iconLeft"></slot>
         <wui-text variant=${textVariant} color="inherit">
           <slot></slot>

diff --git a/packages/ui/src/composites/wui-button/styles.ts b/packages/ui/src/composites/wui-button/styles.ts
@@ -64,23 +64,14 @@ export default css`
     color: var(--wui-color-fg-200);
   }
 
-  button[data-variant='fill']:hover:enabled {
-    background-color: var(--wui-color-blue-080);
-    border: 1px solid var(--wui-overlay-010);
-  }
-
-  button[data-variant='fill']:active:enabled {
-    background-color: var(--wui-color-blue-080);
-  }
-
   @media (hover: hover) and (pointer: fine) {
     button[data-variant='fill']:hover:enabled {
       background-color: var(--wui-color-blue-090);
     }
+  }
 
-    button[data-variant='fill']:active:enabled {
-      border: 1px solid var(--wui-overlay-010);
-      background-color: var(--wui-color-blue-080);
-    }
+  button[data-variant='fill']:active {
+    background-color: var(--wui-color-blue-080);
+    border: 1px solid var(--wui-overlay-010);
   }
 `
diff --git a/packages/ui/src/composites/wui-card-select/index.ts b/packages/ui/src/composites/wui-card-select/index.ts
@@ -27,7 +27,7 @@ export class WuiCardSelect extends LitElement {
   // -- Render -------------------------------------------- //
   public render() {
     return html`
-      <button data-selected=${ifDefined(this.selected)} ?disabled=${this.disabled}>
+      <button data-selected=${ifDefined(this.selected)} ?disabled=${this.disabled} ontouchstart>
         ${this.imageTemplate()}
         <wui-text variant="tiny-500" color=${this.selected ? 'blue-100' : 'inherit'}>
           ${this.name}

diff --git a/packages/ui/src/composites/wui-card-select/styles.ts b/packages/ui/src/composites/wui-card-select/styles.ts
@@ -31,21 +31,13 @@ export default css`
     background-color: var(--wui-color-blue-020);
   }
 
-  [data-selected='true']:hover:enabled {
-    background-color: var(--wui-color-blue-010);
-  }
-
-  [data-selected='true']:active:enabled {
-    background-color: var(--wui-color-blue-010);
-  }
-
   @media (hover: hover) and (pointer: fine) {
     [data-selected='true']:hover:enabled {
       background-color: var(--wui-color-blue-015);
     }
+  }
 
-    [data-selected='true']:active:enabled {
-      background-color: var(--wui-color-blue-010);
-    }
+  [data-selected='true']:active:enabled {
+    background-color: var(--wui-color-blue-010);
   }
 `
diff --git a/packages/ui/src/composites/wui-chip/styles.ts b/packages/ui/src/composites/wui-chip/styles.ts
@@ -87,30 +87,6 @@ export default css`
     background-color: var(--wui-overlay-005);
   }
 
-  a[data-variant='fill']:active {
-    background-color: var(--wui-color-blue-080);
-  }
-
-  a[data-variant='shade']:active {
-    background-color: var(--wui-overlay-020);
-  }
-
-  a[data-variant='transparent']:active {
-    background-color: var(--wui-overlay-010);
-  }
-
-  a[data-variant='fill']:hover {
-    background-color: var(--wui-color-blue-080);
-  }
-
-  a[data-variant='shade']:hover {
-    background-color: var(--wui-overlay-020);
-  }
-
-  a[data-variant='transparent']:hover {
-    background-color: var(--wui-overlay-010);
-  }
-
   @media (hover: hover) and (pointer: fine) {
     a[data-variant='fill']:hover {
       background-color: var(--wui-color-blue-090);
@@ -124,4 +100,16 @@ export default css`
       background-color: var(--wui-overlay-005);
     }
   }
+
+  a[data-variant='fill']:active {
+    background-color: var(--wui-color-blue-080);
+  }
+
+  a[data-variant='shade']:active {
+    background-color: var(--wui-overlay-020);
+  }
+
+  a[data-variant='transparent']:active {
+    background-color: var(--wui-overlay-010);
+  }
 `
diff --git a/packages/ui/src/composites/wui-icon-link/index.ts b/packages/ui/src/composites/wui-icon-link/index.ts
@@ -21,7 +21,7 @@ export class WuiIconLink extends LitElement {
   // -- Render -------------------------------------------- //
   public render() {
     return html`
-      <button ?disabled=${this.disabled}>
+      <button ?disabled=${this.disabled} ontouchstart>
         <wui-icon color=${this.iconColor} size=${this.size} name=${this.icon}></wui-icon>
       </button>
     `

diff --git a/packages/ui/src/composites/wui-input-element/styles.ts b/packages/ui/src/composites/wui-input-element/styles.ts
@@ -25,10 +25,6 @@ export default css`
     background-color: var(--wui-color-fg-225);
   }
 
-  button:hover:enabled {
-    background-color: var(--wui-color-fg-225);
-  }
-
   @media (hover: hover) and (pointer: fine) {
     button:hover:enabled {
       background-color: var(--wui-color-fg-250);

diff --git a/packages/ui/src/composites/wui-link/index.ts b/packages/ui/src/composites/wui-link/index.ts
@@ -15,7 +15,7 @@ export class WuiLink extends LitElement {
   // -- Render -------------------------------------------- //
   public render() {
     return html`
-      <button ?disabled=${this.disabled}>
+      <button ?disabled=${this.disabled} ontouchstart>
         <slot name="iconLeft"></slot>
         <wui-text variant="small-600" color="inherit">
           <slot></slot>

diff --git a/packages/ui/src/composites/wui-list-item/index.ts b/packages/ui/src/composites/wui-list-item/index.ts
@@ -29,7 +29,7 @@ export class WuiListItem extends LitElement {
   // -- Render -------------------------------------------- //
   public render() {
     return html`
-      <button ?disabled=${this.disabled}>
+      <button ?disabled=${this.disabled} ontouchstart>
         ${this.visualTemplate()}
         <wui-flex gap="3xs">
           <slot></slot>

diff --git a/packages/ui/src/composites/wui-list-transaction/index.ts b/packages/ui/src/composites/wui-list-transaction/index.ts
@@ -30,7 +30,7 @@ export class WuiListTransaction extends LitElement {
     const formattedDate = UiHelperUtil.getFormattedDate(this.date)
 
     return html`
-      <button ?disabled=${this.disabled}>
+      <button ?disabled=${this.disabled} ontouchstart>
         <wui-transaction-visual
           type=${this.type}
           imageSrc=${this.imageSrc}

diff --git a/packages/ui/src/composites/wui-list-wallet/index.ts b/packages/ui/src/composites/wui-list-wallet/index.ts
@@ -32,7 +32,7 @@ export class WuiListWallet extends LitElement {
     const textColor = this.disabled ? 'fg-300' : 'fg-100'
 
     return html`
-      <button ?disabled=${this.disabled}>
+      <button ?disabled=${this.disabled} ontouchstart>
         ${this.templateAllWallets()} ${this.templateWalletImage()}
         <wui-text variant="paragraph-500" color=${textColor}>${this.name}</wui-text>
         ${this.templateStatus()}

diff --git a/packages/ui/src/composites/wui-logo-select/index.ts b/packages/ui/src/composites/wui-logo-select/index.ts
@@ -17,7 +17,7 @@ export class WuiLogoSelect extends LitElement {
   // -- Render -------------------------------------------- //
   public render() {
     return html`
-      <button ?disabled=${this.disabled}>
+      <button ?disabled=${this.disabled} ontouchstart>
         <wui-logo logo=${this.logo}></wui-logo>
       </button>
     `

diff --git a/packages/ui/src/utils/ThemeUtil.ts b/packages/ui/src/utils/ThemeUtil.ts
@@ -265,6 +265,17 @@ export const elementStyles = css`
     text-decoration: none;
   }
 
+  @media (hover: hover) and (pointer: fine) {
+    button:hover:enabled {
+      background-color: var(--wui-overlay-005);
+    }
+
+    button:active:enabled {
+      transition: all var(--wui-ease-out-power-4) var(--wui-duration-sm);
+      background-color: var(--wui-overlay-010);
+    }
+  }
+
   button:disabled {
     cursor: not-allowed;
     background-color: var(--wui-overlay-010);
@@ -289,25 +300,10 @@ export const elementStyles = css`
     box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
   }
 
-  button:hover:enabled {
-    background-color: var(--wui-overlay-010);
-  }
-
   button:active:enabled {
     background-color: var(--wui-overlay-010);
   }
 
-  @media (hover: hover) and (pointer: fine) {
-    button:hover:enabled {
-      background-color: var(--wui-overlay-005);
-    }
-
-    button:active:enabled {
-      transition: all var(--wui-ease-out-power-4) var(--wui-duration-sm);
-      background-color: var(--wui-overlay-010);
-    }
-  }
-
   input {
     border: none;
     outline: none;