forwarding refs to Box and Text component (#16062)

ui/components/component-library/text/text.js

@@ -29,61 +29,72 @@ export const ValidTags = [
   'strong',
   'ul',
   'label',
+  'input',
 ];
 
-export const Text = ({
-  variant = TEXT.BODY_MD,
-  color = TEXT_COLORS.TEXT_DEFAULT,
-  fontWeight,
-  fontStyle,
-  textTransform,
-  textAlign,
-  overflowWrap,
-  ellipsis,
-  as,
-  className,
-  children,
-  ...props
-}) => {
-  let Tag = as ?? variant;
-  let strongTagFontWeight;
-
-  if (Tag === 'strong') {
-    strongTagFontWeight = FONT_WEIGHT.BOLD;
-  }
-
-  const computedClassName = classnames(
-    'text',
-    className,
-    `text--${variant}`,
-    (strongTagFontWeight || fontWeight) &&
-      `text--font-weight-${strongTagFontWeight || fontWeight}`,
+export const Text = React.forwardRef(
+  (
     {
-      [`text--font-style-${fontStyle}`]: Boolean(fontStyle),
-      [`text--ellipsis`]: Boolean(ellipsis),
-      [`text--text-transform-${textTransform}`]: Boolean(textTransform),
-      [`text--text-align-${textAlign}`]: Boolean(textAlign),
-      [`text--color-${color}`]: Boolean(color),
-      [`text--overflow-wrap-${overflowWrap}`]: Boolean(overflowWrap),
+      variant = TEXT.BODY_MD,
+      color = TEXT_COLORS.TEXT_DEFAULT,
+      fontWeight,
+      fontStyle,
+      textTransform,
+      textAlign,
+      overflowWrap,
+      ellipsis,
+      as,
+      className,
+      children,
+      ...props
     },
-  );
+    ref,
+  ) => {
+    let Tag = as ?? variant;
+    let strongTagFontWeight;
 
-  // // Set a default tag based on variant
-  const splitTag = Tag.split('-')[0];
-  if (splitTag === 'body') {
-    Tag = 'p';
-  } else if (splitTag === 'heading') {
-    Tag = 'h2';
-  } else if (splitTag === 'display') {
-    Tag = 'h1';
-  }
+    if (Tag === 'strong') {
+      strongTagFontWeight = FONT_WEIGHT.BOLD;
+    }
 
-  return (
-    <Box {...props} className={classnames(computedClassName)} as={Tag}>
-      {children}
-    </Box>
-  );
-};
+    const computedClassName = classnames(
+      'text',
+      className,
+      `text--${variant}`,
+      (strongTagFontWeight || fontWeight) &&
+        `text--font-weight-${strongTagFontWeight || fontWeight}`,
+      {
+        [`text--font-style-${fontStyle}`]: Boolean(fontStyle),
+        [`text--ellipsis`]: Boolean(ellipsis),
+        [`text--text-transform-${textTransform}`]: Boolean(textTransform),
+        [`text--text-align-${textAlign}`]: Boolean(textAlign),
+        [`text--color-${color}`]: Boolean(color),
+        [`text--overflow-wrap-${overflowWrap}`]: Boolean(overflowWrap),
+      },
+    );
+
+    // // Set a default tag based on variant
+    const splitTag = Tag.split('-')[0];
+    if (splitTag === 'body') {
+      Tag = 'p';
+    } else if (splitTag === 'heading') {
+      Tag = 'h2';
+    } else if (splitTag === 'display') {
+      Tag = 'h1';
+    }
+
+    return (
+      <Box
+        ref={ref}
+        className={classnames(computedClassName)}
+        as={Tag}
+        {...props}
+      >
+        {children}
+      </Box>
+    );
+  },
+);
 
 Text.propTypes = {
   /**
@@ -142,4 +153,6 @@ Text.propTypes = {
   ...Box.propTypes,
 };
 
+Text.displayName = 'Text'; // Used for React DevTools profiler
+
 export default Text;

ui/components/component-library/text/text.test.js

@@ -218,4 +218,9 @@ describe('Text', () => {
       'text--text-transform-capitalize',
     );
   });
+  it('should accept a ref prop that is passed down to the html element', () => {
+    const mockRef = jest.fn();
+    render(<Text ref={mockRef} />);
+    expect(mockRef).toHaveBeenCalledTimes(1);
+  });
 });

ui/components/ui/box/box.js

@@ -163,37 +163,40 @@ const generateClassNames = memoize(
   (type, value) => [type, value],
 );
 
-export default function Box({
-  padding,
-  paddingTop,
-  paddingRight,
-  paddingBottom,
-  paddingLeft,
-  margin,
-  marginTop,
-  marginRight,
-  marginBottom,
-  marginLeft,
-  borderColor,
-  borderWidth,
-  borderRadius,
-  borderStyle,
-  alignItems,
-  justifyContent,
-  textAlign,
-  flexDirection = FLEX_DIRECTION.ROW,
-  flexWrap,
-  gap,
-  display,
-  width,
-  height,
-  children,
-  className,
-  backgroundColor,
-  color,
-  as = 'div',
-  ...props
-}) {
+const Box = React.forwardRef(function Box(
+  {
+    padding,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    margin,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    borderColor,
+    borderWidth,
+    borderRadius,
+    borderStyle,
+    alignItems,
+    justifyContent,
+    textAlign,
+    flexDirection = FLEX_DIRECTION.ROW,
+    flexWrap,
+    gap,
+    display,
+    width,
+    height,
+    children,
+    className,
+    backgroundColor,
+    color,
+    as = 'div',
+    ...props
+  },
+  ref,
+) {
   const boxClassName = classnames(
     BASE_CLASS_NAME,
     className,
@@ -252,11 +255,11 @@ export default function Box({
   }
   const Component = as;
   return (
-    <Component className={boxClassName} {...props}>
+    <Component className={boxClassName} ref={ref} {...props}>
       {children}
     </Component>
   );
-}
+});
 
 Box.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
@@ -329,3 +332,5 @@ Box.propTypes = {
    */
   color: MultipleTextColors,
 };
+
+export default Box;

ui/components/ui/box/box.test.js

@@ -781,4 +781,9 @@ describe('Box', () => {
       );
     });
   });
+  it('should accept a ref prop that is passed down to the html element', () => {
+    const mockRef = jest.fn();
+    render(<Box ref={mockRef} />);
+    expect(mockRef).toHaveBeenCalledTimes(1);
+  });
 });