forwarding refs to Box and Text component (#16062)

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

@@ -29,9 +29,12 @@ export const ValidTags = [
   'strong',
   'ul',
   'label',
+  'input',
 ];
 
-export const Text = ({
+export const Text = React.forwardRef(
+  (
+    {
       variant = TEXT.BODY_MD,
       color = TEXT_COLORS.TEXT_DEFAULT,
       fontWeight,
@@ -44,7 +47,9 @@ export const Text = ({
       className,
       children,
       ...props
-}) => {
+    },
+    ref,
+  ) => {
     let Tag = as ?? variant;
     let strongTagFontWeight;
 
@@ -79,11 +84,17 @@ export const Text = ({
     }
 
     return (
-    <Box {...props} className={classnames(computedClassName)} as={Tag}>
+      <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,7 +163,8 @@ const generateClassNames = memoize(
   (type, value) => [type, value],
 );
 
-export default function Box({
+const Box = React.forwardRef(function Box(
+  {
     padding,
     paddingTop,
     paddingRight,
@@ -193,7 +194,9 @@ export default function Box({
     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);
+  });
 });