BannerSlim: VR fixes (#3939)

pinterest · Jan 15, 2025 · e0d82eb · e0d82eb
1 parent 2828305
commit e0d82eb
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 29 deletions.
diff --git a/packages/gestalt/src/BannerSlim.tsx b/packages/gestalt/src/BannerSlim.tsx
@@ -1,4 +1,5 @@
-import { Children, ComponentProps, Fragment, ReactElement } from 'react';
+import { ComponentProps, Fragment, ReactElement, useRef } from 'react';
+import useIsParagraph from './BannerSlim/useIsParagraph';
 import Box from './Box';
 import Button from './Button';
 import ButtonLink from './ButtonLink';
@@ -207,16 +208,21 @@ export default function BannerSlim({
   // Buttons not allowed on compact BannerSlims
   const shouldShowButtons = !isBare && (primaryAction || onDismiss);
 
+  const referenceRef = useRef<null | HTMLDivElement>(null);
+  const targetRef = useRef<null | HTMLDivElement>(null);
+
+  const isParagraph = useIsParagraph({ referenceRef, targetRef });
+
   return (
     <Box
       alignItems="center"
       color={isBare ? 'transparent' : MESSAGING_TYPE_ATTRIBUTES[status[type]]?.backgroundColor}
       direction="column"
       display="flex"
       mdDirection="row"
-      padding={isBare ? 0 : 4}
-      paddingY={isBare ? 1 : 0}
+      paddingX={isBare ? 0 : 4}
       rounding={4}
+      smPaddingY={isBare ? 1 : 4}
       width="100%"
     >
       <Flex
@@ -227,12 +233,12 @@ export default function BannerSlim({
         width="100%"
       >
         {!isDefault && (
-          <Flex.Item alignSelf={shouldShowButtons ? undefined : 'start'}>
+          <Flex.Item alignSelf={isParagraph ? 'start' : undefined}>
             <Icon
               accessibilityLabel={iconAccessibilityLabel ?? getDefaultIconAccessibilityLabel()}
               color={MESSAGING_TYPE_ATTRIBUTES[status[type]]?.iconColor}
               icon={MESSAGING_TYPE_ATTRIBUTES[status[type]]?.icon}
-              size={16}
+              size={isInVRExperiment ? 20 : 16}
             />
           </Flex.Item>
         )}
@@ -244,21 +250,20 @@ export default function BannerSlim({
             }}
           >
             {typeof message === 'string' ? (
-              <Text inline>
-                {message}
-                {helperLink ? (
-                  <Fragment>
-                    {' '}
-                    <HelperLink {...helperLink} />
-                  </Fragment>
-                ) : null}
-              </Text>
+              <Fragment>
+                <Text ref={referenceRef} inline />
+                <Text ref={targetRef} inline>
+                  {message}
+                  {helperLink ? (
+                    <Fragment>
+                      {' '}
+                      <HelperLink {...helperLink} />
+                    </Fragment>
+                  ) : null}
+                </Text>
+              </Fragment>
             ) : null}
-            {typeof message !== 'string' &&
-            // @ts-expect-error - TS2339
-            Children.only<ReactElement>(message).type.displayName === 'Text'
-              ? message
-              : null}
+            {typeof message !== 'string' && message}
           </Box>
         </Flex.Item>
 

diff --git a/packages/gestalt/src/BannerSlim/useIsParagraph.ts b/packages/gestalt/src/BannerSlim/useIsParagraph.ts
@@ -0,0 +1,35 @@
+import { useCallback, useEffect, useState } from 'react';
+
+const useIsParagraph = ({
+  referenceRef,
+  targetRef,
+}: {
+  referenceRef: React.MutableRefObject<HTMLDivElement | null>;
+  targetRef: React.MutableRefObject<HTMLDivElement | null>;
+}) => {
+  const [isParagraph, setIsParagraph] = useState<boolean>(false);
+
+  const checkParagraph = useCallback(() => {
+    if (
+      referenceRef?.current?.offsetHeight &&
+      targetRef?.current?.offsetHeight &&
+      isParagraph !== referenceRef?.current?.offsetHeight < targetRef?.current?.offsetHeight
+    ) {
+      setIsParagraph(referenceRef?.current?.offsetHeight < targetRef?.current?.offsetHeight);
+    }
+  }, [referenceRef, targetRef, isParagraph]);
+
+  useEffect(() => {
+    checkParagraph();
+
+    if (typeof window !== 'undefined') window.addEventListener('resize', checkParagraph);
+
+    return () => {
+      if (typeof window !== 'undefined') window?.removeEventListener('resize', checkParagraph);
+    };
+  }, [checkParagraph]);
+
+  return isParagraph;
+};
+
+export default useIsParagraph;
diff --git a/packages/gestalt/src/__snapshots__/BannerSlim.test.tsx.snap b/packages/gestalt/src/__snapshots__/BannerSlim.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`BannerSlim renders an icon with accessibility label 1`] = `
 <div
-  className="box errorWeak mdDirectionRow paddingX400 paddingY0 paddingY400 rounding4 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+  className="box errorWeak mdDirectionRow paddingX400 rounding4 smPaddingY400 xsDirectionColumn xsDisplayFlex xsItemsCenter"
   style={
     Object {
       "width": "100%",
@@ -18,7 +18,7 @@ exports[`BannerSlim renders an icon with accessibility label 1`] = `
     }
   >
     <div
-      className="FlexItem selfStart"
+      className="FlexItem"
     >
       <svg
         aria-hidden={null}
@@ -45,6 +45,9 @@ exports[`BannerSlim renders an icon with accessibility label 1`] = `
           }
         }
       >
+        <span
+          className="default alignStart breakWord Text fontSize300 fontWeightNormal"
+        />
         <span
           className="default alignStart breakWord Text fontSize300 fontWeightNormal"
         >
@@ -58,7 +61,7 @@ exports[`BannerSlim renders an icon with accessibility label 1`] = `
 
 exports[`BannerSlim renders complex message 1`] = `
 <div
-  className="box mdDirectionRow paddingX400 paddingY0 paddingY400 rounding4 secondary xsDirectionColumn xsDisplayFlex xsItemsCenter"
+  className="box mdDirectionRow paddingX400 rounding4 secondary smPaddingY400 xsDirectionColumn xsDisplayFlex xsItemsCenter"
   style={
     Object {
       "width": "100%",
@@ -121,7 +124,7 @@ exports[`BannerSlim renders complex message 1`] = `
 
 exports[`BannerSlim renders neutral type with message 1`] = `
 <div
-  className="box mdDirectionRow paddingX400 paddingY0 paddingY400 rounding4 secondary xsDirectionColumn xsDisplayFlex xsItemsCenter"
+  className="box mdDirectionRow paddingX400 rounding4 secondary smPaddingY400 xsDirectionColumn xsDisplayFlex xsItemsCenter"
   style={
     Object {
       "width": "100%",
@@ -142,6 +145,9 @@ exports[`BannerSlim renders neutral type with message 1`] = `
       <div
         className="box"
       >
+        <span
+          className="default alignStart breakWord Text fontSize300 fontWeightNormal"
+        />
         <span
           className="default alignStart breakWord Text fontSize300 fontWeightNormal"
         >
@@ -155,7 +161,7 @@ exports[`BannerSlim renders neutral type with message 1`] = `
 
 exports[`BannerSlim renders non-neutral compact with accessibility label 1`] = `
 <div
-  className="box mdDirectionRow paddingX0 paddingY0 paddingY100 rounding4 transparent xsDirectionColumn xsDisplayFlex xsItemsCenter"
+  className="box mdDirectionRow paddingX0 rounding4 smPaddingY100 transparent xsDirectionColumn xsDisplayFlex xsItemsCenter"
   style={
     Object {
       "width": "100%",
@@ -171,7 +177,7 @@ exports[`BannerSlim renders non-neutral compact with accessibility label 1`] = `
     }
   >
     <div
-      className="FlexItem selfStart"
+      className="FlexItem"
     >
       <svg
         aria-hidden={null}
@@ -198,6 +204,9 @@ exports[`BannerSlim renders non-neutral compact with accessibility label 1`] = `
           }
         }
       >
+        <span
+          className="default alignStart breakWord Text fontSize300 fontWeightNormal"
+        />
         <span
           className="default alignStart breakWord Text fontSize300 fontWeightNormal"
         >
@@ -211,7 +220,7 @@ exports[`BannerSlim renders non-neutral compact with accessibility label 1`] = `
 
 exports[`BannerSlim renders primary action and dismiss button 1`] = `
 <div
-  className="box mdDirectionRow paddingX400 paddingY0 paddingY400 rounding4 secondary xsDirectionColumn xsDisplayFlex xsItemsCenter"
+  className="box mdDirectionRow paddingX400 rounding4 secondary smPaddingY400 xsDirectionColumn xsDisplayFlex xsItemsCenter"
   style={
     Object {
       "width": "100%",
@@ -232,6 +241,9 @@ exports[`BannerSlim renders primary action and dismiss button 1`] = `
       <div
         className="box"
       >
+        <span
+          className="default alignStart breakWord Text fontSize300 fontWeightNormal"
+        />
         <span
           className="default alignStart breakWord Text fontSize300 fontWeightNormal"
         >
@@ -364,7 +376,7 @@ exports[`BannerSlim renders primary action and dismiss button 1`] = `
 
 exports[`BannerSlim renders simple message with helper link 1`] = `
 <div
-  className="box mdDirectionRow paddingX400 paddingY0 paddingY400 rounding4 secondary xsDirectionColumn xsDisplayFlex xsItemsCenter"
+  className="box mdDirectionRow paddingX400 rounding4 secondary smPaddingY400 xsDirectionColumn xsDisplayFlex xsItemsCenter"
   style={
     Object {
       "width": "100%",
@@ -385,6 +397,9 @@ exports[`BannerSlim renders simple message with helper link 1`] = `
       <div
         className="box"
       >
+        <span
+          className="default alignStart breakWord Text fontSize300 fontWeightNormal"
+        />
         <span
           className="default alignStart breakWord Text fontSize300 fontWeightNormal"
         >

diff --git a/packages/gestalt/src/__snapshots__/TableRowDrawer.test.tsx.snap b/packages/gestalt/src/__snapshots__/TableRowDrawer.test.tsx.snap
@@ -177,7 +177,7 @@ exports[`renders correctly with drawer 1`] = `
             className="box paddingX200 paddingY200"
           >
             <div
-              className="box mdDirectionRow paddingX400 paddingY0 paddingY400 recommendationWeak rounding4 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+              className="box mdDirectionRow paddingX400 recommendationWeak rounding4 smPaddingY400 xsDirectionColumn xsDisplayFlex xsItemsCenter"
               style={
                 Object {
                   "width": "100%",
@@ -193,7 +193,7 @@ exports[`renders correctly with drawer 1`] = `
                 }
               >
                 <div
-                  className="FlexItem selfStart"
+                  className="FlexItem"
                 >
                   <svg
                     aria-hidden={null}
@@ -220,6 +220,9 @@ exports[`renders correctly with drawer 1`] = `
                       }
                     }
                   >
+                    <span
+                      className="default alignStart breakWord Text fontSize300 fontWeightNormal"
+                    />
                     <span
                       className="default alignStart breakWord Text fontSize300 fontWeightNormal"
                     >