fix: Text component to properly pass down ref (#20874)

chpalac · layershifter · web-flow · commit a960656c6653 · 2021-12-01T12:23:47.000Z
* fix: Text component to properly pass down ref

* add changelog

Co-authored-by: Oleksandr Fediashov &lt;olfedias@microsoft.com&gt;
diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md
@@ -68,6 +68,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix `MenuItemIcon` to allow icon `size` to be in effect @yuanboxue-amber ([#20803](https://github.com/microsoft/fluentui/pull/20803))
 - Fix `Pill` components to properly pass ref to root slots @chpalac ([#20838](https://github.com/microsoft/fluentui/pull/20838))
 - Fix `MenuButton` component to properly pass ref to root slots @chpalac ([#20837](https://github.com/microsoft/fluentui/pull/20837))
+- Fix `Text` component to properly pass ref to root slots @chpalac ([#20874](https://github.com/microsoft/fluentui/pull/20874))
 - Fix `TextArea` component to properly pass ref to root slots @chpalac ([#20875](https://github.com/microsoft/fluentui/pull/20875))
 - Fix `Tree` component to properly pass ref to root slots @chpalac ([#20877](https://github.com/microsoft/fluentui/pull/20877))
 - Fix `Video` component to properly pass ref to root slots @chpalac ([#20878](https://github.com/microsoft/fluentui/pull/20878))
diff --git a/packages/fluentui/react-northstar/src/components/Text/Text.tsx b/packages/fluentui/react-northstar/src/components/Text/Text.tsx
@@ -18,13 +18,13 @@ import { Accessibility } from '@fluentui/accessibility';
 
 import { FluentComponentStaticProps } from '../../types';
 import {
-  ComponentWithAs,
   getElementType,
   useUnhandledProps,
   useFluentContext,
   useAccessibility,
   useStyles,
   useTelemetry,
+  ForwardRefWithAs,
 } from '@fluentui/react-bindings';
 
 export interface TextProps
@@ -92,7 +92,7 @@ export const textClassName = 'ui-text';
 /**
  * A Text consistently styles and formats occurrences of text.
  */
-export const Text: ComponentWithAs<'span', TextProps> & FluentComponentStaticProps<TextProps> = props => {
+export const Text = (React.forwardRef<HTMLSpanElement, TextProps>((props, ref) => {
   const context = useFluentContext();
   const { setStart, setEnd } = useTelemetry(Text.displayName, context.telemetry);
   setStart();
@@ -155,6 +155,7 @@ export const Text: ComponentWithAs<'span', TextProps> & FluentComponentStaticPro
     <ElementType
       {...getA11Props('root', {
         className: classes.root,
+        ref,
         ...rtlTextContainer.getAttributes({ forElements: [children, content] }),
         ...unhandledProps,
       })}
@@ -166,12 +167,12 @@ export const Text: ComponentWithAs<'span', TextProps> & FluentComponentStaticPro
   setEnd();
 
   return element;
-};
+}) as unknown) as ForwardRefWithAs<'span', HTMLSpanElement, TextProps> & FluentComponentStaticProps<TextProps>;
 
 Text.displayName = 'Text';
 
 Text.defaultProps = {
-  as: 'span',
+  as: 'span' as const,
 };
 Text.propTypes = {
   ...commonPropTypes.createCommon({ color: true }),
@@ -180,7 +181,13 @@ Text.propTypes = {
   error: PropTypes.bool,
   important: PropTypes.bool,
   size: customPropTypes.size,
-  weight: PropTypes.oneOf(['light', 'semilight', 'regular', 'semibold', 'bold']),
+  weight: PropTypes.oneOf<'light' | 'semilight' | 'regular' | 'semibold' | 'bold'>([
+    'light',
+    'semilight',
+    'regular',
+    'semibold',
+    'bold',
+  ]),
   success: PropTypes.bool,
   temporary: PropTypes.bool,
   align: customPropTypes.align,
