feat: new chip button component

reown-com · Nov 21, 2024 · 65793fe · 65793fe
1 parent 2c82245
commit 65793fe
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 104 deletions.
diff --git a/apps/gallery-new/utils/PresetUtils.ts b/apps/gallery-new/utils/PresetUtils.ts
@@ -279,7 +279,7 @@ export const logoOptions: LogoType[] = [
 
 export const placementOptions: PlacementType[] = ['top', 'right', 'bottom', 'left']
 
-export const chipButtonVariants: ChipButtonVariant[] = ['main', 'accent', 'shade', 'gray', 'shade']
+export const chipButtonVariants: ChipButtonVariant[] = ['main', 'accent', 'primary']
 
 export const chipVariants: ChipType[] = [
   'fill',

diff --git a/packages/ui-new/src/assets/svg/arrow-top-right.ts b/packages/ui-new/src/assets/svg/arrow-top-right.ts
@@ -1,5 +1,5 @@
 import { svg } from 'lit'
 
-export const arrowTopRightSvg = svg`<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
-<path d="M7.31248 0.78125V5.65625C7.31248 5.80543 7.25322 5.94851 7.14773 6.054C7.04224 6.15949 6.89916 6.21875 6.74998 6.21875C6.6008 6.21875 6.45772 6.15949 6.35223 6.054C6.24674 5.94851 6.18748 5.80543 6.18748 5.65625V2.14062L1.14795 7.17922C1.04228 7.28489 0.898954 7.34426 0.749511 7.34426C0.600068 7.34426 0.456746 7.28489 0.351073 7.17922C0.245401 7.07355 0.186035 6.93022 0.186035 6.78078C0.186035 6.63134 0.245401 6.48802 0.351073 6.38234L5.3906 1.34375H1.87498C1.7258 1.34375 1.58272 1.28449 1.47723 1.179C1.37174 1.07351 1.31248 0.930434 1.31248 0.78125C1.31248 0.632066 1.37174 0.488992 1.47723 0.383502C1.58272 0.278013 1.7258 0.21875 1.87498 0.21875H6.74998C6.89916 0.21875 7.04224 0.278013 7.14773 0.383502C7.25322 0.488992 7.31248 0.632066 7.31248 0.78125Z" fill="currentColor"/>
+export const arrowTopRightSvg = svg`<svg width="12" height="13" viewBox="0 0 12 13" fill="none">
+<path fill="currentColor" d="M9.37503 3.0625V7.9375C9.37503 8.03696 9.33552 8.13234 9.26519 8.20267C9.19486 8.27299 9.09948 8.3125 9.00003 8.3125C8.90057 8.3125 8.80519 8.27299 8.73486 8.20267C8.66453 8.13234 8.62503 8.03696 8.62503 7.9375V3.96766L3.26534 9.32781C3.19497 9.39818 3.09954 9.43771 3.00003 9.43771C2.90051 9.43771 2.80508 9.39818 2.73471 9.32781C2.66435 9.25745 2.62482 9.16201 2.62482 9.0625C2.62482 8.96299 2.66435 8.86755 2.73471 8.79719L8.09487 3.4375H4.12503C4.02557 3.4375 3.93019 3.39799 3.85986 3.32766C3.78953 3.25734 3.75003 3.16196 3.75003 3.0625C3.75003 2.96304 3.78953 2.86766 3.85986 2.79734C3.93019 2.72701 4.02557 2.6875 4.12503 2.6875H9.00003C9.09948 2.6875 9.19486 2.72701 9.26519 2.79734C9.33552 2.86766 9.37503 2.96304 9.37503 3.0625Z"/>
 </svg>`
diff --git a/packages/ui-new/src/assets/svg/external-link.ts b/packages/ui-new/src/assets/svg/external-link.ts
@@ -1,10 +1,5 @@
 import { svg } from 'lit'
 
-export const externalLinkSvg = svg`<svg fill="none" viewBox="0 0 14 15">
-  <path
-    fill="currentColor"
-    fill-rule="evenodd"
-    d="M3.74 3.99a1 1 0 0 1 1-1H11a1 1 0 0 1 1 1v6.26a1 1 0 0 1-2 0V6.4l-6.3 6.3a1 1 0 0 1-1.4-1.42l6.29-6.3H4.74a1 1 0 0 1-1-1Z"
-    clip-rule="evenodd"
-  />
+export const externalLinkSvg = svg`<svg width="12" height="13" viewBox="0 0 12 13" fill="none">
+<path d="M9.37503 3.0625V7.9375C9.37503 8.03696 9.33552 8.13234 9.26519 8.20267C9.19486 8.27299 9.09948 8.3125 9.00003 8.3125C8.90057 8.3125 8.80519 8.27299 8.73486 8.20267C8.66453 8.13234 8.62503 8.03696 8.62503 7.9375V3.96766L3.26534 9.32781C3.19497 9.39818 3.09954 9.43771 3.00003 9.43771C2.90051 9.43771 2.80508 9.39818 2.73471 9.32781C2.66435 9.25745 2.62482 9.16201 2.62482 9.0625C2.62482 8.96299 2.66435 8.86755 2.73471 8.79719L8.09487 3.4375H4.12503C4.02557 3.4375 3.93019 3.39799 3.85986 3.32766C3.78953 3.25734 3.75003 3.16196 3.75003 3.0625C3.75003 2.96304 3.78953 2.86766 3.85986 2.79734C3.93019 2.72701 4.02557 2.6875 4.12503 2.6875H9.00003C9.09948 2.6875 9.19486 2.72701 9.26519 2.79734C9.33552 2.86766 9.37503 2.96304 9.37503 3.0625Z" fill="currentColor"/>
 </svg>`
diff --git a/packages/ui-new/src/composites/wui-chip-button/index.ts b/packages/ui-new/src/composites/wui-chip-button/index.ts
@@ -4,39 +4,39 @@ import '../../components/wui-icon/index.js'
 import '../../components/wui-image/index.js'
 import '../../components/wui-text/index.js'
 import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js'
-import type { ChipButtonVariant, IconType } from '../../utils/TypeUtil.js'
+import type { ChipButtonSize, ChipButtonVariant, IconType } from '../../utils/TypeUtil.js'
 import { customElement } from '../../utils/WebComponentsUtil.js'
 import styles from './styles.js'
 
+// -- Constants --------------------------------------------------------------- //
+const FONT_SIZE = {
+  sm: 'sm-regular',
+  md: 'md-regular'
+}
+
 @customElement('wui-chip-button')
 export class WuiChipButton extends LitElement {
   public static override styles = [resetStyles, elementStyles, styles]
 
   // -- State & Properties -------------------------------- //
   @property() public variant: ChipButtonVariant = 'accent'
 
+  @property() public size: ChipButtonSize = 'md'
+
   @property() public imageSrc = ''
 
   @property({ type: Boolean }) public disabled = false
 
   @property() public icon: IconType = 'externalLink'
 
-  @property() public size: 'sm' | 'md' = 'md'
-
   @property() public text = ''
 
   // -- Render -------------------------------------------- //
   public override render() {
-    const textVariant = this.size === 'sm' ? 'small-600' : 'paragraph-600'
-
     return html`
-      <button
-        class=${this.disabled ? 'disabled' : ''}
-        data-variant=${this.variant}
-        data-size=${this.size}
-      >
+      <button ?disabled=${this.disabled} data-variant=${this.variant} data-size=${this.size}>
         ${this.imageSrc ? html`<wui-image src=${this.imageSrc}></wui-image>` : null}
-        <wui-text variant=${textVariant} color="inherit"> ${this.text} </wui-text>
+        <wui-text variant=${FONT_SIZE[this.size]} color="inherit">${this.text}</wui-text>
         <wui-icon name=${this.icon} color="inherit" size="inherit"></wui-icon>
       </button>
     `

diff --git a/packages/ui-new/src/composites/wui-chip-button/styles.ts b/packages/ui-new/src/composites/wui-chip-button/styles.ts
@@ -1,122 +1,85 @@
-import { css } from 'lit'
+import { css } from '../../utils/ThemeHelperUtil.js'
 
 export default css`
   button {
     border: none;
     border-radius: var(--wui-border-radius-3xl);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: ${({ spacing }) => spacing[1]};
+    padding: ${({ spacing }) => spacing[1]};
   }
 
+  /* -- Variants --------------------------------------------------------------- */
   button[data-variant='main'] {
-    background-color: var(--wui-color-accent-100);
-    color: var(--wui-color-inverse-100);
-    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
+    background-color: ${({ tokens }) => tokens.core.backgroundAccentPrimary};
+    color: ${({ tokens }) => tokens.theme.textPrimary};
   }
 
   button[data-variant='accent'] {
-    background-color: var(--wui-color-accent-glass-010);
-    color: var(--wui-color-accent-100);
-    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
+    background-color: ${({ tokens }) => tokens.core.foregroundAccent010};
+    color: ${({ tokens }) => tokens.core.textAccentPrimary};
   }
 
-  button[data-variant='gray'] {
-    background-color: transparent;
-    color: var(--wui-color-fg-200);
-    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
-  }
-
-  button[data-variant='shade'] {
-    background-color: transparent;
-    color: var(--wui-color-accent-100);
-    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
-  }
-
-  button[data-size='sm'] {
-    height: 32px;
-    padding: 0 var(--wui-spacing-s);
-  }
-
-  button[data-size='md'] {
-    height: 40px;
-    padding: 0 var(--wui-spacing-l);
-  }
-
-  button[data-size='sm'] > wui-image {
-    width: 16px;
-    height: 16px;
-  }
-
-  button[data-size='md'] > wui-image {
-    width: 24px;
-    height: 24px;
+  button[data-variant='primary'] {
+    background-color: ${({ tokens }) => tokens.theme.foregroundSecondary};
+    color: ${({ tokens }) => tokens.theme.textPrimary};
   }
 
+  /* -- Icons and Images --------------------------------------------------------------- */
+  button[data-size='sm'] > wui-image,
   button[data-size='sm'] > wui-icon {
     width: 12px;
     height: 12px;
   }
 
+  button[data-size='md'] > wui-image,
   button[data-size='md'] > wui-icon {
-    width: 14px;
-    height: 14px;
+    width: 16px;
+    height: 16px;
   }
 
   wui-image {
-    border-radius: var(--wui-border-radius-3xl);
+    border-radius: 8px;
     overflow: hidden;
   }
 
-  button.disabled > wui-icon,
-  button.disabled > wui-image {
-    filter: grayscale(1);
-  }
-
-  button[data-variant='main'] > wui-image {
-    box-shadow: inset 0 0 0 1px var(--wui-color-accent-090);
-  }
-
-  button[data-variant='shade'] > wui-image,
-  button[data-variant='gray'] > wui-image {
-    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
-  }
-
+  /* -- States --------------------------------------------------------------- */
   @media (hover: hover) and (pointer: fine) {
-    button[data-variant='main']:focus-visible {
-      background-color: var(--wui-color-accent-090);
-    }
-
-    button[data-variant='main']:hover:enabled {
-      background-color: var(--wui-color-accent-090);
+    button[data-variant='main']:hover {
+      background-color: ${({ tokens }) => tokens.core.foregroundAccent060};
     }
 
-    button[data-variant='main']:active:enabled {
-      background-color: var(--wui-color-accent-080);
+    button[data-variant='accent']:hover {
+      box-shadow: 0 0 0 1px ${({ tokens }) => tokens.core.borderAccentPrimary};
     }
 
-    button[data-variant='accent']:hover:enabled {
-      background-color: var(--wui-color-accent-glass-015);
+    button[data-variant='primary']:hover {
+      box-shadow: 0 0 0 1px ${({ tokens }) => tokens.theme.borderSecondary};
     }
+  }
 
-    button[data-variant='accent']:active:enabled {
-      background-color: var(--wui-color-accent-glass-020);
-    }
+  button[data-variant='main']:focus-visible,
+  button[data-variant='main']:active {
+    box-shadow: 0 0 0 4px ${({ tokens }) => tokens.core.foregroundAccent020};
+  }
 
-    button[data-variant='shade']:focus-visible,
-    button[data-variant='gray']:focus-visible,
-    button[data-variant='shade']:hover,
-    button[data-variant='gray']:hover {
-      background-color: var(--wui-color-gray-glass-002);
-    }
+  button[data-variant='accent']:focus-visible,
+  button[data-variant='accent']:active {
+    box-shadow:
+      0 0 0 1px ${({ tokens }) => tokens.core.borderAccentPrimary},
+      0 0 0 4px ${({ tokens }) => tokens.core.foregroundAccent020};
+  }
 
-    button[data-variant='gray']:active,
-    button[data-variant='shade']:active {
-      background-color: var(--wui-color-gray-glass-005);
-    }
+  button[data-variant='primary']:focus-visible,
+  button[data-variant='primary']:active {
+    box-shadow:
+      0 0 0 1px ${({ tokens }) => tokens.theme.borderSecondary},
+      0 0 0 4px ${({ tokens }) => tokens.theme.foregroundSecondary};
   }
 
-  button.disabled {
-    color: var(--wui-color-gray-glass-020);
-    background-color: var(--wui-color-gray-glass-002);
-    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
-    pointer-events: none;
+  button:disabled {
+    opacity: 0.5;
   }
 `
diff --git a/packages/ui-new/src/utils/TypeUtil.ts b/packages/ui-new/src/utils/TypeUtil.ts
@@ -220,7 +220,9 @@ export type PlacementType = 'bottom' | 'left' | 'right' | 'top'
 
 export type ChipType = 'fill' | 'shade' | 'shadeSmall' | 'transparent' | 'success' | 'error'
 
-export type ChipButtonVariant = 'accent' | 'main' | 'shade' | 'gray'
+export type ChipButtonVariant = 'main' | 'accent' | 'primary'
+
+export type ChipButtonSize = 'sm' | 'md'
 
 export type ButtonSize = 'lg' | 'md' | 'sm'