Badge: Badge improves VR focus interaction (#3873)

pinterest · Nov 15, 2024 · b98049c · b98049c
1 parent a7c58dd
commit b98049c
Show file tree

Hide file tree

Showing 13 changed files with 105 additions and 118 deletions.
diff --git a/packages/gestalt-design-tokens/tests/__snapshots__/web.test.js.snap b/packages/gestalt-design-tokens/tests/__snapshots__/web.test.js.snap
diff --git a/packages/gestalt-design-tokens/tokens/vr-theme-web-mapping/comp-web-color-dark.json b/packages/gestalt-design-tokens/tokens/vr-theme-web-mapping/comp-web-color-dark.json
@@ -486,17 +486,6 @@
       }
     },
     "border": {
-      "badge": {
-        "default": {
-          "value": "{sema.color.border.focus.inner.default.value}"
-        },
-        "light": {
-          "value": "{sema.color.border.focus.inner.light.value}"
-        },
-        "dark": {
-          "value": "{sema.color.border.focus.inner.dark.value}"
-        }
-      },
       "button": {
         "hover": {
           "value": "{sema.color.hover.border.interactive.value}"

diff --git a/packages/gestalt-design-tokens/tokens/vr-theme-web-mapping/comp-web-color-light.json b/packages/gestalt-design-tokens/tokens/vr-theme-web-mapping/comp-web-color-light.json
@@ -464,17 +464,6 @@
       }
     },
     "border": {
-      "badge": {
-        "default": {
-          "value": "{sema.color.border.focus.inner.default.value}"
-        },
-        "light": {
-          "value": "{sema.color.border.focus.inner.light.value}"
-        },
-        "dark": {
-          "value": "{sema.color.border.focus.inner.dark.value}"
-        }
-      },
       "button": {
         "hover": {
           "value": "{sema.color.hover.border.interactive.value}"

diff --git a/packages/gestalt/src/Accordion/__snapshots__/ExpandableItem.test.tsx.snap b/packages/gestalt/src/Accordion/__snapshots__/ExpandableItem.test.tsx.snap
@@ -174,7 +174,6 @@ exports[`AccordionExpandableItem renders correctly with badge 1`] = `
                           </div>
                         </div>
                       </div>
-                       
                     </div>
                   </div>
                 </div>

diff --git a/packages/gestalt/src/Badge.css b/packages/gestalt/src/Badge.css
@@ -3,42 +3,60 @@
   composes: rounding1 from "./Borders.css";
   align-content: center;
   display: flex;
+  height: 20px;
   white-space: nowrap;
 }
 
 .padding {
   padding: var(--space-0) 6px;
 }
 
-.paddingVR {
-  padding: var(--sema-space-0) var(--sema-space-100);
+.middle {
+  composes: inlineBlock from "./Layout.css";
+  vertical-align: middle;
 }
 
-.focusInnerBorder {
-  border: 2px solid var(--color-border-badge-default);
-  padding: var(--space-0) var(--space-100);
+.top {
+  composes: inlineBlock from "./Layout.css";
+  vertical-align: super;
 }
 
-.focusInnerBorderLight {
-  border: 2px solid var(--color-border-badge-light);
-  padding: var(--space-0) var(--space-100);
+.badgeVR {
+  composes: borderBox from "./Layout.css";
+  align-content: center;
+  border-radius: var(--sema-rounding-100);
+  display: flex;
+  height: 20px;
+  white-space: nowrap;
 }
 
-.focusInnerBorderDark {
-  border: 2px solid var(--color-border-badge-dark);
-  padding: var(--space-0) var(--space-100);
+.innerBorder {
+  border: var(--sema-space-50) solid var(--base-color-transparent);
 }
 
-.middle {
-  composes: inlineBlock from "./Layout.css";
-  height: 20px;
-  vertical-align: middle;
+.paddingVR {
+  padding: var(--space-0) var(--sema-space-100);
 }
 
-.top {
-  composes: inlineBlock from "./Layout.css";
-  height: 20px;
-  vertical-align: super;
+.paddingInteractiveVR {
+  padding: var(--space-0) calc(var(--sema-space-100) - var(--sema-space-50));
+}
+
+.focusedDefaultOutline {
+  border: var(--sema-space-50) solid
+    var(--sema-color-border-focus-inner-default);
+  outline: var(--sema-space-50) solid
+    var(--sema-color-border-focus-outer-default);
+}
+
+.focusedDarkOutline {
+  border: var(--sema-space-50) solid var(--sema-color-border-focus-inner-light);
+  outline: var(--sema-space-50) solid var(--sema-color-border-focus-outer-dark);
+}
+
+.focusedLightOutline {
+  border: var(--sema-space-50) solid var(--sema-color-border-focus-inner-dark);
+  outline: var(--sema-space-50) solid var(--sema-color-border-focus-outer-light);
 }
 
 /* Color */

diff --git a/packages/gestalt/src/Badge.tsx b/packages/gestalt/src/Badge.tsx
@@ -144,31 +144,10 @@ export default function Badge({
   const { handleOnBlur, handleOnFocus, handleOnMouseEnter, handleOnMouseLeave, isFocused } =
     useInteractiveStates();
 
-  const cxStyles = cx(styles.badge, styles[styleType], {
-    [styles.padding]: !isInVRExperiment,
-    [styles.paddingVR]: isInVRExperiment,
-    [styles.middle]: !shouldUseTooltip && position === 'middle',
-    [styles.top]: !shouldUseTooltip && position === 'top',
-    [styles.focusInnerBorder]:
-      isInVRExperiment &&
-      isFocused &&
-      isFocusVisible &&
-      !['darkWash', 'lightWash'].some((color) => color === type),
-    [styles.focusInnerBorderLight]:
-      isInVRExperiment && isFocused && isFocusVisible && type === 'darkWash',
-    [styles.focusInnerBorderDark]:
-      isInVRExperiment && isFocused && isFocusVisible && type === 'lightWash',
-  });
-
-  const cxPositionStyles = cx({
-    [styles.middle]: position === 'middle',
-    [styles.top]: position === 'top',
-  });
-
   const badgeComponent = (
     <Flex alignItems="center" gap={{ row: 1, column: 0 }}>
       {shouldUseTooltip ? (
-        <Box alignContent="center" display="flex">
+        <Box alignContent="center" display="flex" height="100%">
           {isInVRExperiment ? (
             <IconCompact
               accessibilityLabel=""
@@ -203,6 +182,46 @@ export default function Badge({
     </Flex>
   );
 
+  if (isInVRExperiment)
+    return shouldUseTooltip ? (
+      <Tooltip
+        accessibilityLabel=""
+        dataTestId={dataTestIdTooltip}
+        idealDirection={tooltip.idealDirection}
+        inline
+        text={tooltip.text}
+        zIndex={tooltip.zIndex}
+      >
+        <div
+          aria-label={tooltip.accessibilityLabel}
+          className={cx(styles.badgeVR, styles[styleType], styles.paddingInteractiveVR, {
+            [styles.focusedDefaultOutline]:
+              isFocused && isFocusVisible && type !== 'lightWash' && type !== 'darkWash',
+            [styles.focusedDarkOutline]: isFocused && isFocusVisible && type === 'darkWash',
+            [styles.focusedLightOutline]: isFocused && isFocusVisible && type === 'lightWash',
+            [styles.innerBorder]: !isFocused || !isFocusVisible,
+          })}
+          onBlur={handleOnBlur}
+          onFocus={handleOnFocus}
+          onMouseEnter={handleOnMouseEnter}
+          onMouseLeave={handleOnMouseLeave}
+          role="button"
+          tabIndex={0}
+        >
+          {badgeComponent}
+        </div>
+      </Tooltip>
+    ) : (
+      <div
+        className={cx(styles.badgeVR, styles.paddingVR, styles[styleType], {
+          [styles.middle]: position === 'middle',
+          [styles.top]: position === 'top',
+        })}
+      >
+        {badgeComponent}
+      </div>
+    );
+
   return shouldUseTooltip ? (
     <Tooltip
       accessibilityLabel=""
@@ -212,26 +231,33 @@ export default function Badge({
       text={tooltip.text}
       zIndex={tooltip.zIndex}
     >
-      <div className={cxPositionStyles}>
-        <TapArea
-          accessibilityLabel={tooltip.accessibilityLabel}
-          fullHeight
-          mouseCursor="default"
-          onBlur={handleOnBlur}
-          onFocus={handleOnFocus}
-          onMouseEnter={handleOnMouseEnter}
-          onMouseLeave={handleOnMouseLeave}
-          rounding={1}
-          tapStyle="none"
-        >
-          <Box alignContent="center" display="flex" height="100%">
-            <div className={cxStyles}>{badgeComponent} </div>
-          </Box>
-        </TapArea>
-      </div>
+      <TapArea
+        accessibilityLabel={tooltip.accessibilityLabel}
+        fullHeight
+        mouseCursor="default"
+        onBlur={handleOnBlur}
+        onFocus={handleOnFocus}
+        onMouseEnter={handleOnMouseEnter}
+        onMouseLeave={handleOnMouseLeave}
+        rounding={1}
+        tapStyle="none"
+      >
+        <Box alignContent="center" display="flex" height="100%">
+          <div className={cx(styles.badge, styles[styleType], styles.padding)}>
+            {badgeComponent}
+          </div>
+        </Box>
+      </TapArea>
     </Tooltip>
   ) : (
-    <div className={cxStyles}>{badgeComponent} </div>
+    <div
+      className={cx(styles.badge, styles[styleType], styles.padding, {
+        [styles.middle]: position === 'middle',
+        [styles.top]: position === 'top',
+      })}
+    >
+      {badgeComponent}
+    </div>
   );
 }
 

diff --git a/packages/gestalt/src/__snapshots__/Accordion.test.tsx.snap b/packages/gestalt/src/__snapshots__/Accordion.test.tsx.snap
@@ -70,7 +70,6 @@ exports[`Accordion renders a badge correctly 1`] = `
                   </div>
                 </div>
               </div>
-               
             </div>
           </div>
         </div>

diff --git a/packages/gestalt/src/__snapshots__/Badge.test.tsx.snap b/packages/gestalt/src/__snapshots__/Badge.test.tsx.snap
@@ -21,6 +21,5 @@ exports[`Badge renders 1`] = `
       </div>
     </div>
   </div>
-   
 </div>
 `;
diff --git a/packages/gestalt/src/__snapshots__/Datapoint.test.tsx.snap b/packages/gestalt/src/__snapshots__/Datapoint.test.tsx.snap
@@ -169,7 +169,6 @@ exports[`Datapoint renders a badge 1`] = `
               </div>
             </div>
           </div>
-           
         </div>
       </div>
     </div>

diff --git a/packages/gestalt/src/__snapshots__/Dropdown.jsdom.test.tsx.snap b/packages/gestalt/src/__snapshots__/Dropdown.jsdom.test.tsx.snap
@@ -797,7 +797,6 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
                                 </div>
                               </div>
                             </div>
-                             
                           </div>
                         </div>
                       </div>
@@ -876,7 +875,6 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
                                   </div>
                                 </div>
                               </div>
-                               
                             </div>
                           </div>
                         </div>

diff --git a/packages/gestalt/src/__snapshots__/PageHeader.test.tsx.snap b/packages/gestalt/src/__snapshots__/PageHeader.test.tsx.snap
@@ -234,7 +234,6 @@ exports[`PageHeader renders badge with type 1`] = `
                                   </div>
                                 </div>
                               </div>
-                               
                             </div>
                           </div>
                         </div>

diff --git a/packages/gestalt/src/__snapshots__/SideNavigation.test.tsx.snap b/packages/gestalt/src/__snapshots__/SideNavigation.test.tsx.snap
@@ -377,7 +377,6 @@ exports[`SideNavigation renders Icon + Badge/Notification + Counter + Border 1`]
                                         </div>
                                       </div>
                                     </div>
-                                     
                                   </div>
                                 </div>
                               </span>

diff --git a/packages/gestalt/src/contexts/__snapshots__/ColorSchemeProvider.jsdom.test.tsx.snap b/packages/gestalt/src/contexts/__snapshots__/ColorSchemeProvider.jsdom.test.tsx.snap
@@ -3429,9 +3429,6 @@ exports[`visual refresh tokens uses visual refresh dark mode theme when specifie
   --color-border-default: #c7c6c1;
   --color-border-error: #ff9494;
   --color-border-focus: #c5eaf7;
-  --color-border-badge-default: #000000;
-  --color-border-badge-light: #ffffff;
-  --color-border-badge-dark: #000000;
   --color-border-button-hover: #b2b0ae;
   --color-border-button-pressed: #969292;
   --color-border-checkbox-checked-default: #e8e7e1;
@@ -4425,9 +4422,6 @@ exports[`visual refresh tokens uses visual refresh light mode theme when specifi
   --color-border-default: #757570;
   --color-border-error: #b2001a;
   --color-border-focus: #007db8;
-  --color-border-badge-default: #ffffff;
-  --color-border-badge-light: #ffffff;
-  --color-border-badge-dark: #000000;
   --color-border-button-hover: #626260;
   --color-border-button-pressed: #585856;
   --color-border-checkbox-checked-default: #000000;
@@ -5422,9 +5416,6 @@ exports[`visual refresh tokens uses visual refresh with ck line height 1`] = `
   --color-border-default: #757570;
   --color-border-error: #b2001a;
   --color-border-focus: #007db8;
-  --color-border-badge-default: #ffffff;
-  --color-border-badge-light: #ffffff;
-  --color-border-badge-dark: #000000;
   --color-border-button-hover: #626260;
   --color-border-button-pressed: #585856;
   --color-border-checkbox-checked-default: #000000;
@@ -6419,9 +6410,6 @@ exports[`visual refresh tokens uses visual refresh with ja line height 1`] = `
   --color-border-default: #757570;
   --color-border-error: #b2001a;
   --color-border-focus: #007db8;
-  --color-border-badge-default: #ffffff;
-  --color-border-badge-light: #ffffff;
-  --color-border-badge-dark: #000000;
   --color-border-button-hover: #626260;
   --color-border-button-pressed: #585856;
   --color-border-checkbox-checked-default: #000000;
@@ -7416,9 +7404,6 @@ exports[`visual refresh tokens uses visual refresh with tall line height 1`] = `
   --color-border-default: #757570;
   --color-border-error: #b2001a;
   --color-border-focus: #007db8;
-  --color-border-badge-default: #ffffff;
-  --color-border-badge-light: #ffffff;
-  --color-border-badge-dark: #000000;
   --color-border-button-hover: #626260;
   --color-border-button-pressed: #585856;
   --color-border-checkbox-checked-default: #000000;
@@ -8413,9 +8398,6 @@ exports[`visual refresh tokens uses visual refresh with th line height 1`] = `
   --color-border-default: #757570;
   --color-border-error: #b2001a;
   --color-border-focus: #007db8;
-  --color-border-badge-default: #ffffff;
-  --color-border-badge-light: #ffffff;
-  --color-border-badge-dark: #000000;
   --color-border-button-hover: #626260;
   --color-border-button-pressed: #585856;
   --color-border-checkbox-checked-default: #000000;
@@ -9410,9 +9392,6 @@ exports[`visual refresh tokens uses visual refresh with vi line height 1`] = `
   --color-border-default: #757570;
   --color-border-error: #b2001a;
   --color-border-focus: #007db8;
-  --color-border-badge-default: #ffffff;
-  --color-border-badge-light: #ffffff;
-  --color-border-badge-dark: #000000;
   --color-border-button-hover: #626260;
   --color-border-button-pressed: #585856;
   --color-border-checkbox-checked-default: #000000;
-Original file line number
+Diff line change
@@ Expand Up @@
                               </div>
                             </div>
                           </div>
                         </div>
                       </div>
                     </div>
@@ Expand Down @@