fix(NumberIcon): address QA design notes (#1947)

- update typography tokens to label presets - support isInteractive properly
chanzuckerberg · May 17, 2024 · 007d757 · 007d757
1 parent 921a086
commit 007d757
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 17 deletions.
diff --git a/src/components/Accordion/__snapshots__/Accordion-v2.test.tsx.snap b/src/components/Accordion/__snapshots__/Accordion-v2.test.tsx.snap
@@ -314,7 +314,7 @@ exports[`<Accordion /> HasLeadingNumberIcon story renders snapshot 1`] = `
         >
           <span
             aria-label="Numero uno"
-            class="text text--caption-sm number-icon number-icon--size-md number-icon--status-default"
+            class="text text--label-md-subtle number-icon number-icon--size-md number-icon--status-default"
             role="img"
             tabindex="-1"
           >

diff --git a/src/components/NumberIcon/NumberIcon-v2.module.css b/src/components/NumberIcon/NumberIcon-v2.module.css
@@ -20,7 +20,9 @@
   border-color: inherit;
   border-radius: calc(var(--eds-border-radius-full) * 1px);
 
-  cursor: pointer;
+  &.number-icon--is-interactive {
+    cursor: pointer;
+  }
 }
 
 /**
@@ -48,14 +50,16 @@
   border-color: var(--eds-theme-color-border-utility-interactive);
   background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis);
 
-  &:hover {
-    border-color: var(--eds-theme-color-border-utility-interactive-hover);
-    background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis-hover);
-  }
+  &.number-icon--is-interactive {
+    &:hover {
+      border-color: var(--eds-theme-color-border-utility-interactive-hover);
+      background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis-hover);
+    }
 
-  &:active {
-    border-color: var(--eds-theme-color-border-utility-interactive-active);
-    background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis-active);
+    &:active {
+      border-color: var(--eds-theme-color-border-utility-interactive-active);
+      background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis-active);
+    }
   }
 }
 
@@ -64,14 +68,16 @@
   border-color: var(--eds-theme-color-background-utility-favorable-high-emphasis);
   background-color: var(--eds-theme-color-background-utility-favorable-high-emphasis);
 
-  &:hover {
-    border-color: var(--eds-theme-color-background-utility-favorable-high-emphasis-hover);
-    background-color: var(--eds-theme-color-background-utility-favorable-high-emphasis-hover);
-  }
+  &.number-icon--is-interactive {
+    &:hover {
+      border-color: var(--eds-theme-color-background-utility-favorable-high-emphasis-hover);
+      background-color: var(--eds-theme-color-background-utility-favorable-high-emphasis-hover);
+    }
 
-  &:active {
-    border-color: var(--eds-theme-color-background-utility-favorable-high-emphasis-active);
-    background-color: var(--eds-theme-color-background-utility-favorable-high-emphasis-active);
+    &:active {
+      border-color: var(--eds-theme-color-background-utility-favorable-high-emphasis-active);
+      background-color: var(--eds-theme-color-background-utility-favorable-high-emphasis-active);
+    }
   }
 }
 

diff --git a/src/components/NumberIcon/NumberIcon-v2.stories.tsx b/src/components/NumberIcon/NumberIcon-v2.stories.tsx
@@ -38,6 +38,17 @@ export const Sizes: Story = {
   ],
 };
 
+/**
+ * `NumberIcon` can be used in interactive contexts, when wrapped by a navigable or interactive element.
+ */
+export const IsInteractive: Story = {
+  args: {
+    ...Sizes.args,
+    isInteractive: true,
+  },
+  render: Sizes.render,
+};
+
 export const Completed: Story = {
   args: {
     ...Sizes.args,

diff --git a/src/components/NumberIcon/NumberIcon-v2.tsx b/src/components/NumberIcon/NumberIcon-v2.tsx
@@ -54,6 +54,7 @@ export const NumberIcon = ({
   const componentClassName = clsx(
     className,
     styles['number-icon'],
+    isInteractive && styles['number-icon--is-interactive'],
     size && styles[`number-icon--size-${size}`],
     status && styles[`number-icon--status-${status}`],
   );
@@ -62,7 +63,7 @@ export const NumberIcon = ({
     <Text
       as="span"
       className={componentClassName}
-      preset={['sm', 'md'].includes(size) ? 'caption-sm' : 'caption-lg'}
+      preset={size === 'md' ? 'label-md-subtle' : 'label-lg-subtle'}
       role="img"
       tabIndex={isInteractive ? 0 : -1}
       {...other}