diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md index 8df515a72ab825..36cd2262ca0241 100644 --- 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 index b90d9bdf778d7c..139ee16cf2af1b 100644 --- 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 = props => { +export const Text = (React.forwardRef((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 & FluentComponentStaticPro setEnd(); return element; -}; +}) as unknown) as ForwardRefWithAs<'span', HTMLSpanElement, TextProps> & FluentComponentStaticProps; 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,