chore: edit typography and push ellipsis text support

reown-com · Nov 20, 2024 · 826fd7d · 826fd7d
1 parent e9982a7
commit 826fd7d
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 36 deletions.
diff --git a/apps/gallery-new/stories/composites/wui-list-select-account.stories.ts b/apps/gallery-new/stories/composites/wui-list-select-account.stories.ts
@@ -1,4 +1,4 @@
- import { html } from 'lit'
+import { html } from 'lit'
 import type { Meta } from '@storybook/web-components'
 import '@reown/appkit-ui-new/src/composites/wui-list-select-account'
 import '../../components/gallery-container'
@@ -17,7 +17,7 @@ export default {
     icon: 'mail',
     disabled: false
   },
-  transparent: {
+  argTypes: {
     dollars: {
       control: { type: 'text' }
     },

diff --git a/packages/ui-new/src/assets/svg/mail.ts b/packages/ui-new/src/assets/svg/mail.ts
@@ -1,10 +1,6 @@
 import { svg } from 'lit'
 
-export const mailSvg = svg`<svg fill="none" viewBox="0 0 16 16">
-  <path
-    fill="currentColor"
-    fill-rule="evenodd"
-    d="M4.83 1.34h6.34c.68 0 1.26 0 1.73.04.5.05.97.15 1.42.4.52.3.95.72 1.24 1.24.26.45.35.92.4 1.42.04.47.04 1.05.04 1.73v3.71c0 .69 0 1.26-.04 1.74-.05.5-.14.97-.4 1.41-.3.52-.72.95-1.24 1.25-.45.25-.92.35-1.42.4-.47.03-1.05.03-1.73.03H4.83c-.68 0-1.26 0-1.73-.04-.5-.04-.97-.14-1.42-.4-.52-.29-.95-.72-1.24-1.24a3.39 3.39 0 0 1-.4-1.41A20.9 20.9 0 0 1 0 9.88v-3.7c0-.7 0-1.27.04-1.74.05-.5.14-.97.4-1.42.3-.52.72-.95 1.24-1.24.45-.25.92-.35 1.42-.4.47-.04 1.05-.04 1.73-.04ZM3.28 3.38c-.36.03-.51.08-.6.14-.21.11-.39.29-.5.5a.8.8 0 0 0-.08.19l5.16 3.44c.45.3 1.03.3 1.48 0L13.9 4.2a.79.79 0 0 0-.08-.2c-.11-.2-.29-.38-.5-.5-.09-.05-.24-.1-.6-.13-.37-.04-.86-.04-1.6-.04H4.88c-.73 0-1.22 0-1.6.04ZM14 6.54 9.85 9.31a3.33 3.33 0 0 1-3.7 0L2 6.54v3.3c0 .74 0 1.22.03 1.6.04.36.1.5.15.6.11.2.29.38.5.5.09.05.24.1.6.14.37.03.86.03 1.6.03h6.25c.73 0 1.22 0 1.6-.03.35-.03.5-.09.6-.14.2-.12.38-.3.5-.5.05-.1.1-.24.14-.6.03-.38.03-.86.03-1.6v-3.3Z"
-    clip-rule="evenodd"
-  />
-</svg>`
+export const mailSvg = svg`<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5 2.75H1.5C1.40054 2.75 1.30516 2.78951 1.23483 2.85984C1.16451 2.93016 1.125 3.02554 1.125 3.125V9.5C1.125 9.69891 1.20402 9.88968 1.34467 10.0303C1.48532 10.171 1.67609 10.25 1.875 10.25H10.125C10.3239 10.25 10.5147 10.171 10.6553 10.0303C10.796 9.88968 10.875 9.69891 10.875 9.5V3.125C10.875 3.02554 10.8355 2.93016 10.7652 2.85984C10.6948 2.78951 10.5995 2.75 10.5 2.75ZM10.125 9.5H1.875V3.97766L5.74641 7.52656C5.81559 7.59007 5.90609 7.62531 6 7.62531C6.09391 7.62531 6.18441 7.59007 6.25359 7.52656L10.125 3.97766V9.5Z" fill="#9A9A9A"/>
+</svg>
+`
diff --git a/packages/ui-new/src/components/wui-text/styles.ts b/packages/ui-new/src/components/wui-text/styles.ts
@@ -9,10 +9,6 @@ export default css`
     width: 100%;
     display: inline-block;
     font-style: normal;
-    font-feature-settings:
-      'tnum' on,
-      'lnum' on,
-      'case' on;
     overflow: inherit;
     text-overflow: inherit;
     text-align: var(--local-align);
@@ -48,6 +44,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['h1-regular'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.regular};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-h1-medium {
@@ -56,6 +55,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['h1-medium'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.medium};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-h2-regular-mono {
@@ -72,6 +74,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['h2-regular'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.regular};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-h2-medium {
@@ -80,6 +85,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['h2-medium'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.medium};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-h3-regular-mono {
@@ -96,6 +104,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['h3-regular'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.regular};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-h3-medium {
@@ -104,6 +115,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['h3-medium'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.medium};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-h4-regular-mono {
@@ -120,6 +134,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['h4-regular'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.regular};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-h4-medium {
@@ -128,6 +145,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['h4-medium'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.medium};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-h5-regular-mono {
@@ -144,6 +164,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['h5-regular'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.regular};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-h5-medium {
@@ -152,6 +175,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['h5-medium'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.medium};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-h6-regular-mono {
@@ -168,6 +194,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['h6-regular'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.regular};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-h6-medium {
@@ -176,6 +205,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['h6-medium'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.medium};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-lg-regular-mono {
@@ -192,6 +224,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['lg-regular'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.regular};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-lg-medium {
@@ -200,6 +235,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['lg-medium'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.medium};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-md-regular-mono {
@@ -216,6 +254,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['md-regular'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.regular};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-md-medium {
@@ -224,6 +265,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['md-medium'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.medium};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-sm-regular-mono {
@@ -240,6 +284,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['sm-regular'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.regular};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-sm-medium {
@@ -248,5 +295,8 @@ export default css`
     letter-spacing: ${({ typography }) => typography['sm-medium'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.medium};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 `
diff --git a/packages/ui-new/src/composites/wui-list-select-account/index.ts b/packages/ui-new/src/composites/wui-list-select-account/index.ts
@@ -6,7 +6,6 @@ import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js'
 import '../../components/wui-text/index.js'
 import '../../components/wui-icon/index.js'
 import '../wui-avatar/index.js'
-import '../wui-icon-box/index.js'
 import { UiHelperUtil } from '../../utils/UiHelperUtil.js'
 import type { IconType } from '../../utils/TypeUtil.js'
 
@@ -32,31 +31,34 @@ export class WuiListSelectAccount extends LitElement {
     return html`
       <button ?disabled=${this.disabled} ontouchstart>
         <wui-avatar size="sm" address=${this.address}></wui-avatar>
-        <wui-icon-box
-          size="xs"
-          iconcolor="fg-200"
-          backgroundcolor="fg-300"
-          icon=${this.icon}
-          background="fg-300"
-          borderColor=${undefined}
-        ></wui-icon-box>
+        <wui-icon class="avatarIcon" size="xs" name=${this.icon}></wui-icon>
 
-        <wui-flex flexDirection="column" alignItems="start" justifyContent="center" rowGap="2">
-          <wui-text color="primary" variant="lg-regular-mono">
+        <wui-flex
+          flexDirection="column"
+          alignItems="start"
+          justifyContent="center"
+          flexGrow="1"
+          flexShrink="1"
+          rowGap="2"
+          class="description"
+        >
+          <wui-text color="primary" variant="lg-regular">
             ${UiHelperUtil.getTruncateString({
               string: this.address,
               charsStart: 4,
-              charsEnd: 6,
+              charsEnd: 4,
               truncate: 'middle'
             })}
           </wui-text>
 
-          <wui-text color="secondary" variant="md-regular">${this.description}</wui-text>
+          <wui-text color="secondary" variant="md-regular" lineClamp="1">
+            ${this.description}
+          </wui-text>
         </wui-flex>
 
         <wui-flex flexDirection="row" alignItems="center" justifyContent="center" columnGap="2">
-          <wui-text color="secondary" variant="lg-regular-mono">
-            $${this.dollars}<span class="pennies">.${this.pennies}</span>
+          <wui-text color="secondary" variant="lg-regular-mono" lineClamp="1">
+            $${this.dollars}.${this.pennies}
           </wui-text>
           <wui-icon name="chevronRight" size="md"></wui-icon>
         </wui-flex>

diff --git a/packages/ui-new/src/composites/wui-list-select-account/styles.ts b/packages/ui-new/src/composites/wui-list-select-account/styles.ts
@@ -1,5 +1,10 @@
 import { css } from '../../utils/ThemeHelperUtil.js'
 
+/*
+ * @TODO: Instead of using fixed height and width for <wui-avatar>,
+ * use icon/avatar spacing variables once the become available
+ */
+
 export default css`
   button {
     align-items: center;
@@ -17,15 +22,28 @@ export default css`
     flex-shrink: 0;
   }
 
-  wui-icon-box {
-    position: relative;
-    right: 15px;
-    top: 15px;
-    border: 2px solid ${({ tokens }) => tokens.theme.backgroundPrimary};
+  wui-flex {
+    width: fit-content;
+  }
+
+  wui-icon:last-child {
+    color: ${({ tokens }) => tokens.theme.textSecondary};
   }
 
-  wui-flex:nth-child(1) {
-    flex: 1;
+  wui-text {
+    word-break: break-all;
+  }
+
+  .avatarIcon {
+    position: relative;
+    margin-left: -25px;
+    margin-top: 16px;
+    z-index: 2;
+    border: 2px solid ${({ tokens }) => tokens.theme.backgroundPrimary};
+    background: ${({ tokens }) => tokens.theme.foregroundPrimary};
+    border-radius: ${({ borderRadius }) => borderRadius.round};
+    padding: ${({ spacing }) => spacing[1]};
+    color: ${({ tokens }) => tokens.theme.iconDefault};
   }
 
   /* -- Focus states --------------------------------------------------- */