feat(react-label): [CAP] visual refresh – add optional icon slot

change/@fluentui-react-label-0c145c1c-dd96-48f9-8d7f-3b351f94548d.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add optional `icon` slot to Label, rendered before the label content",
+  "packageName": "@fluentui/react-label",
+  "email": "egianoglio@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-label/library/docs/MIGRATION.md

@@ -31,7 +31,7 @@ The v9 API does not support many of the features offered in v0. Some could poten
 |                | `design`        |            |
 | `disabled`     |                 | `disabled` |
 |                | `fluid`         |            |
-|                | `icon`          |            |
+|                | `icon`          | `icon`     |
 |                | `iconPosition`  |            |
 |                | `image`         |            |
 |                | `imagePosition` |            |

packages/react-components/react-label/library/docs/Spec.md

@@ -68,11 +68,14 @@ The Label component should be simple as shown below. It will just need the text
 <Label required="**">
   Label
 </Label>
+
+<Label icon={<InfoRegular />}>Label</Label>
 ```
 
 ## Variants
 
 - A Label can be rendered with an asterisk or custom text when is set as `required`.
+- A Label can render an optional `icon` slot before its content.
 
 ## API
 
@@ -83,13 +86,16 @@ See API at [Label.types.ts](./src/components/Label/Label.types.ts).
 ### Public
 
 ```tsx
-<Label required>I'm a Label</Label>
+<Label required icon={<InfoRegular />}>
+  I'm a Label
+</Label>
 ```
 
 ### DOM
 
 ```tsx
 <label {/*Label*/} class="...">
+  <span {/*icon*/} class="..."><svg>...</svg></span>
   I'm a Label
   <span {/*required*/} class="...">*</span>
 </label>
@@ -99,6 +105,7 @@ See API at [Label.types.ts](./src/components/Label/Label.types.ts).
 
 ```tsx
 <slots.root {...slotProps.root}>
+  {state.icon && <slots.icon {...slotProps.icon} />}
   {state.children}
   <slots.required {...slotProps.required} />
 </slots.root>

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

@@ -36,6 +36,7 @@ export type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> & {
 export type LabelSlots = {
     root: Slot<'label'>;
     required?: Slot<'span'>;
+    icon?: Slot<'span'>;
 };
 
 // @public

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

@@ -11,7 +11,7 @@ describe('Label', () => {
     testOptions: {
       'has-static-classnames': [
         {
-          props: { required: 'Required Test' },
+          props: { required: 'Required Test', icon: 'Icon Test' },
         },
       ],
     },

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

@@ -33,6 +33,11 @@ export type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> & {
 export type LabelSlots = {
   root: Slot<'label'>;
   required?: Slot<'span'>;
+
+  /**
+   * Optional icon rendered alongside the label text, before the label content.
+   */
+  icon?: Slot<'span'>;
 };
 
 /**

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

@@ -13,6 +13,7 @@ export const renderLabel_unstable = (state: LabelBaseState): JSXElement => {
 
   return (
     <state.root>
+      {state.icon && <state.icon />}
       {state.root.children}
       {state.required && <state.required />}
     </state.root>

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

@@ -31,14 +31,15 @@ export const useLabel_unstable = (props: LabelProps, ref: React.Ref<HTMLElement>
  * @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;
+  const { disabled = false, required = false, icon, ...rest } = props;
   return {
     disabled,
     required: slot.optional(required === true ? '*' : required || undefined, {
       defaultProps: { 'aria-hidden': 'true' },
       elementType: 'span',
     }),
-    components: { root: 'label', required: 'span' },
+    icon: slot.optional(icon, { elementType: 'span' }),
+    components: { root: 'label', required: 'span', icon: 'span' },
     root: slot.always(
       getIntrinsicElementProps('label', {
         ref: ref as React.Ref<HTMLLabelElement>,

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

@@ -8,6 +8,7 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 export const labelClassNames: SlotClassNames<LabelSlots> = {
   root: 'fui-Label',
   required: 'fui-Label__required',
+  icon: 'fui-Label__icon',
 };
 
 /**
@@ -31,6 +32,11 @@ const useStyles = makeStyles({
     paddingLeft: tokens.spacingHorizontalXS,
   },
 
+  withIcon: {
+    display: 'inline-flex',
+    alignItems: 'center',
+  },
+
   small: {
     fontSize: tokens.fontSizeBase200,
     lineHeight: tokens.lineHeightBase200,
@@ -52,18 +58,60 @@ const useStyles = makeStyles({
   },
 });
 
+/**
+ * Styles for the icon slot
+ */
+const useIconStyles = makeStyles({
+  base: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: tokens.borderRadiusMedium,
+    backgroundColor: tokens.colorNeutralBackground3,
+    color: tokens.colorNeutralForeground3,
+    marginRight: tokens.spacingHorizontalXS,
+  },
+
+  small: {
+    fontSize: tokens.fontSizeBase200,
+    height: tokens.fontSizeBase500,
+    width: tokens.fontSizeBase500,
+  },
+
+  smallSemibold: {
+    height: tokens.fontSizeBase400,
+    width: tokens.fontSizeBase400,
+  },
+
+  medium: {
+    fontSize: tokens.fontSizeBase400,
+    height: tokens.fontSizeBase500,
+    width: tokens.fontSizeBase500,
+  },
+
+  large: {
+    fontSize: tokens.fontSizeBase500,
+    height: tokens.fontSizeBase600,
+    width: tokens.fontSizeBase600,
+    borderRadius: tokens.borderRadiusLarge,
+    marginRight: tokens.spacingHorizontalSNudge,
+  },
+});
+
 /**
  * Apply styling to the Label slots based on the state
  */
 export const useLabelStyles_unstable = (state: LabelState): LabelState => {
   const styles = useStyles();
+  const iconStyles = useIconStyles();
   // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(
     labelClassNames.root,
     styles.root,
     state.disabled && styles.disabled,
     styles[state.size],
     state.weight === 'semibold' && styles.semibold,
+    state.icon && styles.withIcon,
     state.root.className,
   );
 
@@ -77,5 +125,16 @@ export const useLabelStyles_unstable = (state: LabelState): LabelState => {
     );
   }
 
+  if (state.icon) {
+    // eslint-disable-next-line react-hooks/immutability
+    state.icon.className = mergeClasses(
+      labelClassNames.icon,
+      iconStyles.base,
+      iconStyles[state.size],
+      state.size === 'small' && state.weight === 'semibold' && iconStyles.smallSemibold,
+      state.icon.className,
+    );
+  }
+
   return state;
 };

packages/react-components/react-label/stories/src/Label/LabelIcon.stories.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { JSXElement } from '@fluentui/react-components';
+import { Label } from '@fluentui/react-components';
+import { InfoRegular } from '@fluentui/react-icons';
+
+export const Icon = (): JSXElement => {
+  return (
+    <Label icon={<InfoRegular />} required>
+      Label with icon
+    </Label>
+  );
+};
+
+Icon.parameters = {
+  docs: {
+    description: {
+      story: 'A Label can render an optional `icon` slot before its content.',
+    },
+  },
+};

packages/react-components/react-label/stories/src/Label/index.stories.tsx

@@ -8,6 +8,7 @@ export { Size } from './LabelSize.stories';
 export { Weight } from './LabelWeight.stories';
 export { Disabled } from './LabelDisabled.stories';
 export { Required } from './LabelRequired.stories';
+export { Icon } from './LabelIcon.stories';
 
 const meta = {
   title: 'Components/Label',