diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md index cd59241d60f69..54154d92f6d8d 100644 --- a/packages/fluentui/CHANGELOG.md +++ b/packages/fluentui/CHANGELOG.md @@ -57,6 +57,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Fix `Chat` components to properly pass ref to root slots @chpalac ([#20691](https://github.com/microsoft/fluentui/pull/20691)) - Fix `Flex` component to properly pass ref to root slots @chpalac ([#20752](https://github.com/microsoft/fluentui/pull/20752)) - Fix `Animation` to expose `Transition` state for the consumer @chpalac ([#20776](https://github.com/microsoft/fluentui/pull/20776)) +- Fix `Label` component to properly pass ref to root slots @chpalac ([#20813](https://github.com/microsoft/fluentui/pull/20813)) - Fix `MenuItemIcon` to allow icon `size` to be in effect @yuanboxue-amber ([#20803](https://github.com/microsoft/fluentui/pull/20803)) ### Features diff --git a/packages/fluentui/react-northstar/src/components/Label/Label.tsx b/packages/fluentui/react-northstar/src/components/Label/Label.tsx index 25cf0a72edaa8..9c45396caeb51 100644 --- a/packages/fluentui/react-northstar/src/components/Label/Label.tsx +++ b/packages/fluentui/react-northstar/src/components/Label/Label.tsx @@ -1,12 +1,12 @@ import { Accessibility } from '@fluentui/accessibility'; import { - ComponentWithAs, getElementType, useUnhandledProps, useAccessibility, useFluentContext, useStyles, useTelemetry, + ForwardRefWithAs, } from '@fluentui/react-bindings'; import * as customPropTypes from '@fluentui/react-proptypes'; import * as _ from 'lodash'; @@ -68,7 +68,7 @@ export const labelClassName = 'ui-label'; /** * A Label allows user to classify content. */ -export const Label: ComponentWithAs<'span', LabelProps> & FluentComponentStaticProps = props => { +export const Label = (React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(Label.displayName, context.telemetry); setStart(); @@ -116,6 +116,7 @@ export const Label: ComponentWithAs<'span', LabelProps> & FluentComponentStaticP & FluentComponentStaticP setEnd(); return element; -}; +}) as unknown) as ForwardRefWithAs<'span', HTMLSpanElement, LabelProps> & FluentComponentStaticProps; Label.displayName = 'Label';