From 393088e669540233730fdaa194aaab7b08cd3b46 Mon Sep 17 00:00:00 2001 From: George Marshall Date: Tue, 4 Oct 2022 10:05:55 -0700 Subject: [PATCH] forwarding refs to Box and Text component (#16062) --- ui/components/component-library/text/text.js | 111 ++++++++++-------- .../component-library/text/text.test.js | 5 + ui/components/ui/box/box.js | 71 +++++------ ui/components/ui/box/box.test.js | 5 + 4 files changed, 110 insertions(+), 82 deletions(-) diff --git a/ui/components/component-library/text/text.js b/ui/components/component-library/text/text.js index 3ca747b6904e..d252f59efd46 100644 --- a/ui/components/component-library/text/text.js +++ b/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 ( - - {children} - - ); -}; + 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 ( + + {children} + + ); + }, +); Text.propTypes = { /** @@ -142,4 +153,6 @@ Text.propTypes = { ...Box.propTypes, }; +Text.displayName = 'Text'; // Used for React DevTools profiler + export default Text; diff --git a/ui/components/component-library/text/text.test.js b/ui/components/component-library/text/text.test.js index 84a8f16721fe..5849edbe5b10 100644 --- a/ui/components/component-library/text/text.test.js +++ b/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(); + expect(mockRef).toHaveBeenCalledTimes(1); + }); }); diff --git a/ui/components/ui/box/box.js b/ui/components/ui/box/box.js index 716247f9a7c0..446f314cd7dd 100644 --- a/ui/components/ui/box/box.js +++ b/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 ( - + {children} ); -} +}); Box.propTypes = { children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]), @@ -329,3 +332,5 @@ Box.propTypes = { */ color: MultipleTextColors, }; + +export default Box; diff --git a/ui/components/ui/box/box.test.js b/ui/components/ui/box/box.test.js index 894691d807b5..7fdfe1737629 100644 --- a/ui/components/ui/box/box.test.js +++ b/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(); + expect(mockRef).toHaveBeenCalledTimes(1); + }); });