feat(react-label): add useLabelBase_unstable hook (#35905)

Author: dmytrokirpa

change/@fluentui-react-label-e6f7a8b9-c0d1-4e2f-3a4b-5c6d7e8f9a0b.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add useLabelBase_unstable hook",
+  "packageName": "@fluentui/react-label",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-label/library/etc/react-label.api.md

@@ -15,6 +15,12 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 // @public
 export const Label: ForwardRefComponent<LabelProps>;
 
+// @public
+export type LabelBaseProps = Omit<LabelProps, 'size' | 'weight'>;
+
+// @public
+export type LabelBaseState = Omit<LabelState, 'size' | 'weight'>;
+
 // @public (undocumented)
 export const labelClassNames: SlotClassNames<LabelSlots>;
 
@@ -36,11 +42,14 @@ export type LabelSlots = {
 export type LabelState = ComponentState<LabelSlots> & Required<Pick<LabelProps, 'disabled' | 'size' | 'weight'>>;
 
 // @public
-export const renderLabel_unstable: (state: LabelState) => JSXElement;
+export const renderLabel_unstable: (state: LabelBaseState) => JSXElement;
 
 // @public
 export const useLabel_unstable: (props: LabelProps, ref: React_2.Ref<HTMLElement>) => LabelState;
 
+// @public
+export const useLabelBase_unstable: (props: LabelBaseProps, ref: React_2.Ref<HTMLLabelElement>) => LabelBaseState;
+
 // @public
 export const useLabelStyles_unstable: (state: LabelState) => LabelState;
 

packages/react-components/react-label/library/src/Label.ts

@@ -1,8 +1,9 @@
-export type { LabelProps, LabelSlots, LabelState } from './components/Label/index';
+export type { LabelBaseProps, LabelBaseState, LabelProps, LabelSlots, LabelState } from './components/Label/index';
 export {
   Label,
   labelClassNames,
   renderLabel_unstable,
   useLabelStyles_unstable,
   useLabel_unstable,
+  useLabelBase_unstable,
 } from './components/Label/index';

packages/react-components/react-label/library/src/components/Label/Label.types.ts

@@ -39,3 +39,14 @@ export type LabelSlots = {
  * State used in rendering Label
  */
 export type LabelState = ComponentState<LabelSlots> & Required<Pick<LabelProps, 'disabled' | 'size' | 'weight'>>;
+
+/**
+ * Label props without design-specific props (size, weight).
+ * Use this when building a label that is unstyled or uses a custom design system.
+ */
+export type LabelBaseProps = Omit<LabelProps, 'size' | 'weight'>;
+
+/**
+ * Label state without design-specific state (size, weight).
+ */
+export type LabelBaseState = Omit<LabelState, 'size' | 'weight'>;

packages/react-components/react-label/library/src/components/Label/index.ts

@@ -1,5 +1,5 @@
 export { Label } from './Label';
-export type { LabelProps, LabelSlots, LabelState } from './Label.types';
+export type { LabelBaseProps, LabelBaseState, LabelProps, LabelSlots, LabelState } from './Label.types';
 export { renderLabel_unstable } from './renderLabel';
-export { useLabel_unstable } from './useLabel';
+export { useLabel_unstable, useLabelBase_unstable } from './useLabel';
 export { labelClassNames, useLabelStyles_unstable } from './useLabelStyles.styles';

packages/react-components/react-label/library/src/components/Label/renderLabel.tsx

@@ -3,12 +3,12 @@
 
 import { assertSlots } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
-import type { LabelState, LabelSlots } from './Label.types';
+import type { LabelBaseState, LabelSlots } from './Label.types';
 
 /**
  * Render the final JSX of Label
  */
-export const renderLabel_unstable = (state: LabelState): JSXElement => {
+export const renderLabel_unstable = (state: LabelBaseState): JSXElement => {
   assertSlots<LabelSlots>(state);
 
   return (

packages/react-components/react-label/library/src/components/Label/useLabel.tsx

@@ -1,6 +1,8 @@
+'use client';
+
 import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
-import type { LabelProps, LabelState } from './Label.types';
+import type { LabelBaseProps, LabelBaseState, LabelProps, LabelState } from './Label.types';
 
 /**
  * Create the state required to render Label.
@@ -12,23 +14,35 @@ import type { LabelProps, LabelState } from './Label.types';
  * @param ref - reference to root HTMLElement of Label
  */
 export const useLabel_unstable = (props: LabelProps, ref: React.Ref<HTMLElement>): LabelState => {
-  const { disabled = false, required = false, weight = 'regular', size = 'medium' } = props;
+  const { weight = 'regular', size = 'medium', ...baseProps } = props;
+  const state = useLabelBase_unstable(baseProps, ref as React.Ref<HTMLLabelElement>);
+
+  return {
+    weight,
+    size,
+    ...state,
+  };
+};
+
+/**
+ * Create the base state required to render Label, without design-specific props (size, weight).
+ *
+ * @param props - props from this instance of Label
+ * @param ref - reference to root HTMLElement of Label
+ */
+export const useLabelBase_unstable = (props: LabelBaseProps, ref: React.Ref<HTMLLabelElement>): LabelBaseState => {
+  const { disabled = false, required = false, ...rest } = props;
   return {
     disabled,
     required: slot.optional(required === true ? '*' : required || undefined, {
       defaultProps: { 'aria-hidden': 'true' },
       elementType: 'span',
     }),
-    weight,
-    size,
     components: { root: 'label', required: 'span' },
     root: slot.always(
       getIntrinsicElementProps('label', {
-        // FIXME:
-        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLLabelElement`
-        // but since it would be a breaking change to fix it, we are casting ref to it's proper type
         ref: ref as React.Ref<HTMLLabelElement>,
-        ...props,
+        ...rest,
       }),
       { elementType: 'label' },
     ),

packages/react-components/react-label/library/src/index.ts

@@ -1,2 +1,9 @@
-export { Label, labelClassNames, renderLabel_unstable, useLabelStyles_unstable, useLabel_unstable } from './Label';
-export type { LabelProps, LabelSlots, LabelState } from './Label';
+export {
+  Label,
+  labelClassNames,
+  renderLabel_unstable,
+  useLabelStyles_unstable,
+  useLabel_unstable,
+  useLabelBase_unstable,
+} from './Label';
+export type { LabelBaseProps, LabelBaseState, LabelProps, LabelSlots, LabelState } from './Label';