From a5f5e8a830081bd924d23b86d80173963d390094 Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Sun, 28 Nov 2021 21:04:26 -0300
Subject: [PATCH 1/2] fix: Label component to properly pass down ref to root
 slot

---
 .../react-northstar/src/components/Label/Label.tsx         | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/fluentui/react-northstar/src/components/Label/Label.tsx b/packages/fluentui/react-northstar/src/components/Label/Label.tsx
index 25cf0a72edaa87..9c45396caeb51a 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<HTMLSpanElement, LabelProps>((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
       <ElementType
         {...getA11Props('root', {
           className: classes.root,
+          ref,
           ...rtlTextContainer.getAttributes({ forElements: [children] }),
           ...unhandledProps,
         })}
@@ -166,7 +167,7 @@ export const Label: ComponentWithAs<'span', LabelProps> & FluentComponentStaticP
   setEnd();
 
   return element;
-};
+}) as unknown) as ForwardRefWithAs<'span', HTMLSpanElement, LabelProps> & FluentComponentStaticProps;
 
 Label.displayName = 'Label';
 

From 704083a174d2a30041753f7fe102d153c47c2e7a Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Sun, 28 Nov 2021 21:07:05 -0300
Subject: [PATCH 2/2] add changelog

---
 packages/fluentui/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md
index af480a174a31d6..44d68427cb4ca6 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))
 
 ### Features
 - Adding `ViewPersonSparkleIcon`, `CartIcon`, and fixing `EmojiAddIcon` and `AccessibilityIcon` - @notandrew ([#20054](https://github.com/microsoft/fluentui/pull/20054))