add infolabel to semantic style hooks

packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md

@@ -27,6 +27,8 @@ import { FieldState } from '@fluentui/react-field';
 import { FlatTreeState } from '@fluentui/react-tree';
 import { FluentProviderCustomStyleHooks } from '@fluentui/react-provider';
 import { ImageState } from '@fluentui/react-image';
+import { InfoButtonState } from '@fluentui/react-infolabel';
+import { InfoLabelState } from '@fluentui/react-infolabel';
 import { InlineDrawerState } from '@fluentui/react-drawer';
 import { InputState } from '@fluentui/react-input';
 import { LabelState } from '@fluentui/react-label';
@@ -137,6 +139,12 @@ export const useSemanticFlatTreeStyles: (_state: unknown) => FlatTreeState;
 // @public (undocumented)
 export const useSemanticImageStyles: (_state: unknown) => ImageState;
 
+// @public
+export const useSemanticInfoButtonStyles: (_state: unknown) => InfoButtonState;
+
+// @public
+export const useSemanticInfoLabelStyles: (_state: unknown) => InfoLabelState;
+
 // @public
 export const useSemanticInlineDrawerStyles: (_state: unknown) => InlineDrawerState;
 

packages/react-components/semantic-style-hooks-preview/library/package.json

@@ -37,6 +37,7 @@
     "@fluentui/react-input": "^9.5.6",
     "@fluentui/react-icons": "^2.0.245",
     "@fluentui/react-image": "^9.1.84",
+    "@fluentui/react-infolabel": "^9.2.0",
     "@fluentui/react-jsx-runtime": "^9.0.54",
     "@fluentui/react-label": "^9.1.87",
     "@fluentui/react-link": "^9.4.6",

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/index.ts

@@ -0,0 +1,2 @@
+export { useSemanticInfoButtonStyles } from './useSemanticInfoButtonStyles.styles';
+export { useSemanticInfoLabelStyles } from './useSemanticInfoLabelStyles.styles';

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/useSemanticInfoButtonStyles.styles.ts

@@ -0,0 +1,141 @@
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { infoButtonClassNames, type InfoButtonState } from '@fluentui/react-infolabel';
+import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
+import * as semanticTokens from '@fluentui/semantic-tokens';
+
+/**
+ * Styles for the root slot
+ */
+const useButtonStyles = makeStyles({
+  base: {
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    justifyContent: 'center',
+    textDecorationLine: 'none',
+    verticalAlign: 'middle',
+    position: 'relative',
+
+    backgroundColor: semanticTokens.nullColor,
+    color: semanticTokens.foregroundCtrlOnTransparentRest,
+
+    ...shorthands.borderStyle('none'),
+    borderRadius: semanticTokens.cornerCtrlRest,
+    margin: '0',
+    padding: semanticTokens.gapInsideCtrlSmDefault,
+
+    [`& .${iconFilledClassName}`]: {
+      display: 'none',
+    },
+    [`& .${iconRegularClassName}`]: {
+      display: 'inline-flex',
+    },
+
+    ':hover': {
+      backgroundColor: semanticTokens.backgroundCtrlOutlineHover,
+      color: semanticTokens.foregroundCtrlOnTransparentHover,
+      cursor: 'pointer',
+
+      [`& .${iconFilledClassName}`]: {
+        display: 'inline-flex',
+      },
+      [`& .${iconRegularClassName}`]: {
+        display: 'none',
+      },
+    },
+    ':hover:active': {
+      backgroundColor: semanticTokens.backgroundCtrlOutlinePressed,
+      color: semanticTokens.foregroundCtrlOnTransparentPressed,
+    },
+  },
+
+  selected: {
+    backgroundColor: semanticTokens.nullColor,
+    color: semanticTokens._ctrlInfoLabelForegroundColorSelected,
+
+    [`& .${iconFilledClassName}`]: {
+      display: 'inline-flex',
+    },
+    [`& .${iconRegularClassName}`]: {
+      display: 'none',
+    },
+
+    '@media (forced-colors: active)': {
+      backgroundColor: 'Highlight',
+      color: 'Canvas',
+    },
+  },
+
+  highContrast: {
+    '@media (forced-colors: active)': {
+      color: 'CanvasText',
+
+      ':hover,:hover:active': {
+        forcedColorAdjust: 'none',
+        backgroundColor: 'Highlight',
+        color: 'Canvas',
+      },
+    },
+  },
+
+  focusIndicator: createFocusOutlineStyle(),
+
+  large: {
+    padding: semanticTokens.gapBetweenContentXSmall,
+  },
+});
+
+const usePopoverSurfaceStyles = makeStyles({
+  base: {
+    maxWidth: '264px',
+  },
+  smallMedium: {
+    fontFamily: semanticTokens.textStyleDefaultRegularFontFamily,
+    fontSize: semanticTokens.textGlobalCaption1FontSize,
+    fontWeight: semanticTokens.textStyleDefaultRegularWeight,
+    lineHeight: semanticTokens.textGlobalCaption1LineHeight,
+  },
+  large: {
+    fontFamily: semanticTokens.textStyleDefaultRegularFontFamily,
+    fontSize: semanticTokens.textRampItemBodyFontSize,
+    fontWeight: semanticTokens.textStyleDefaultRegularWeight,
+    lineHeight: semanticTokens.textRampItemBodyLineHeight,
+  },
+});
+
+/**
+ * Apply styling to the InfoButton slots based on the state
+ */
+export const useSemanticInfoButtonStyles = (_state: unknown): InfoButtonState => {
+  'use no memo';
+
+  const state = _state as InfoButtonState;
+
+  const { size } = state;
+  const { open } = state.popover;
+  const buttonStyles = useButtonStyles();
+  const popoverSurfaceStyles = usePopoverSurfaceStyles();
+
+  state.info.className = mergeClasses(
+    state.info.className,
+    infoButtonClassNames.info,
+    popoverSurfaceStyles.base,
+    size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium,
+    getSlotClassNameProp_unstable(state.info),
+  );
+
+  state.root.className = mergeClasses(
+    state.root.className,
+    infoButtonClassNames.root,
+    buttonStyles.base,
+    buttonStyles.highContrast,
+    buttonStyles.focusIndicator,
+    open && buttonStyles.selected,
+    size === 'large' && buttonStyles.large,
+    getSlotClassNameProp_unstable(state.root),
+  );
+
+  return state;
+};

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/useSemanticInfoLabelStyles.styles.ts

@@ -0,0 +1,64 @@
+import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { infoLabelClassNames, type InfoLabelState } from '@fluentui/react-infolabel';
+import * as semanticTokens from '@fluentui/semantic-tokens';
+
+const useLabelStyles = makeStyles({
+  base: {
+    verticalAlign: 'top',
+    cursor: 'inherit',
+    color: 'inherit',
+  },
+});
+
+const useInfoButtonStyles = makeStyles({
+  base: {
+    verticalAlign: 'top',
+
+    // Negative margin to align with the text
+    marginTop: `calc(0px - ${semanticTokens.gapBetweenContentXSmall})`,
+    marginBottom: `calc(0px - ${semanticTokens.gapBetweenContentXSmall})`,
+  },
+
+  large: {
+    // Negative margin to align with the text
+    marginTop: '-1px',
+    marginBottom: '-1px',
+  },
+});
+
+/**
+ * Apply styling to the InfoLabel slots based on the state
+ */
+export const useSemanticInfoLabelStyles = (_state: unknown): InfoLabelState => {
+  'use no memo';
+
+  const state = _state as InfoLabelState;
+
+  state.root.className = mergeClasses(
+    state.root.className,
+    infoLabelClassNames.root,
+    getSlotClassNameProp_unstable(state.root),
+  );
+
+  const labelStyles = useLabelStyles();
+  state.label.className = mergeClasses(
+    state.label.className,
+    infoLabelClassNames.label,
+    labelStyles.base,
+    getSlotClassNameProp_unstable(state.label),
+  );
+
+  const infoButtonStyles = useInfoButtonStyles();
+  if (state.infoButton) {
+    state.infoButton.className = mergeClasses(
+      state.infoButton.className,
+      infoLabelClassNames.infoButton,
+      infoButtonStyles.base,
+      state.size === 'large' && infoButtonStyles.large,
+      getSlotClassNameProp_unstable(state.infoButton),
+    );
+  }
+
+  return state;
+};

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts

@@ -80,6 +80,7 @@ import {
   useSemanticToolbarToggleButtonStyles,
 } from './Toolbar';
 import { useSemanticTooltipStyles } from './Tooltip';
+import { useSemanticInfoButtonStyles, useSemanticInfoLabelStyles } from './InfoLabel';
 
 export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = {
   // Accordion styles
@@ -179,4 +180,7 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = {
   useTabListStyles_unstable: useSemanticTabListStyles,
   //Tooltip styles
   useTooltipStyles_unstable: useSemanticTooltipStyles,
+  // InfoLabel styles
+  useInfoButtonStyles_unstable: useSemanticInfoButtonStyles,
+  useInfoLabelStyles_unstable: useSemanticInfoLabelStyles,
 };

packages/react-components/semantic-style-hooks-preview/library/src/index.ts

@@ -83,3 +83,4 @@ export {
   useSemanticToolbarRadioButtonStyles,
   useSemanticToolbarToggleButtonStyles,
 } from './component-styles/Toolbar';
+export { useSemanticInfoButtonStyles, useSemanticInfoLabelStyles } from './component-styles/InfoLabel';

packages/semantic-tokens/etc/semantic-tokens.api.md

@@ -263,13 +263,13 @@ export const backgroundCtrlOutlineDisabled = "var(--smtc-background-ctrl-outline
 export const backgroundCtrlOutlineDisabledRaw = "--smtc-background-ctrl-outline-disabled";
 
 // @public (undocumented)
-export const backgroundCtrlOutlineHover = "var(--smtc-background-ctrl-outline-hover, var(--smtc-null-color, var(--colorTransparentBackground)))";
+export const backgroundCtrlOutlineHover = "var(--smtc-background-ctrl-outline-hover, var(--smtc-null-color, var(--colorTransparentBackgroundHover)))";
 
 // @public (undocumented)
 export const backgroundCtrlOutlineHoverRaw = "--smtc-background-ctrl-outline-hover";
 
 // @public (undocumented)
-export const backgroundCtrlOutlinePressed = "var(--smtc-background-ctrl-outline-pressed, var(--smtc-null-color, var(--colorTransparentBackground)))";
+export const backgroundCtrlOutlinePressed = "var(--smtc-background-ctrl-outline-pressed, var(--smtc-null-color, var(--colorTransparentBackgroundPressed)))";
 
 // @public (undocumented)
 export const backgroundCtrlOutlinePressedRaw = "--smtc-background-ctrl-outline-pressed";
@@ -1786,6 +1786,9 @@ export const ctrlFocusOuterStrokeWidth = "var(--smtc-ctrl-focus-outer-stroke-wid
 // @public (undocumented)
 export const ctrlFocusOuterStrokeWidthRaw = "--smtc-ctrl-focus-outer-stroke-width";
 
+// @public
+export const _ctrlInfoLabelForegroundColorSelected = "var(--smtc-foreground-ctrl-active-brand-rest, var(--smtc-foreground-ctrl-brand-rest, var(--colorNeutralForeground2BrandSelected)))";
+
 // @public (undocumented)
 export const ctrlInputBackgroundDisabled = "var(--smtc-ctrl-input-background-disabled, var(--smtc-background-ctrl-neutral-disabled, var(--colorNeutralBackgroundDisabled)))";
 

packages/semantic-tokens/src/fluentLegacyVariants.ts

@@ -325,6 +325,10 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = {
     f2Token: 'colorTransparentStrokeInteractive',
     originalToken: 'ctrlFocusOuterStroke',
   },
+  _ctrlInfoLabelForegroundColorSelected: {
+    f2Token: 'colorNeutralForeground2BrandSelected',
+    originalToken: 'foregroundCtrlActiveBrandRest',
+  },
   _ctrlInputBackgroundRestDarker: {
     f2Token: 'colorNeutralBackground3',
     originalToken: 'ctrlInputBackgroundRest',

packages/semantic-tokens/src/fluentOverrides.ts

@@ -22,8 +22,8 @@ export const fluentOverrides: FluentOverrides = {
   backgroundCtrlNeutralHover: { f2Token: 'colorNeutralBackground1Hover' },
   backgroundCtrlNeutralPressed: { f2Token: 'colorNeutralBackground1Pressed' },
   backgroundCtrlNeutralRest: { f2Token: 'colorNeutralBackground1' },
-  backgroundCtrlOutlineHover: { f2Token: 'colorTransparentBackground' },
-  backgroundCtrlOutlinePressed: { f2Token: 'colorTransparentBackground' },
+  backgroundCtrlOutlineHover: { f2Token: 'colorTransparentBackgroundHover' },
+  backgroundCtrlOutlinePressed: { f2Token: 'colorTransparentBackgroundPressed' },
   backgroundCtrlOutlineRest: { f2Token: 'colorTransparentBackground' },
   backgroundCtrlShapeSafeNeutralDisabled: { f2Token: 'colorNeutralForegroundDisabled' },
   backgroundCtrlShapeSafeNeutralHover: { f2Token: 'colorNeutralStrokeAccessibleHover' },

packages/semantic-tokens/src/index.ts

@@ -1860,6 +1860,7 @@ export {
   _ctrlFieldStatusSuccessTintForeground,
   _ctrlFieldStatusWarningTintForeground,
   _ctrlFocusOuterStrokeInteractive,
+  _ctrlInfoLabelForegroundColorSelected,
   _ctrlInputBackgroundRestDarker,
   _ctrlInputBackgroundRestLighter,
   _ctrlInputBottomLineStrokeBrandPressed,

packages/semantic-tokens/src/legacy/tokens.ts

@@ -49,6 +49,16 @@ export const colorNeutralBackground1Pressed = 'var(--colorNeutralBackground1Pres
  * @public
  */
 export const colorNeutralBackground1 = 'var(--colorNeutralBackground1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorTransparentBackgroundHover | `colorTransparentBackgroundHover`} design token.
+ * @public
+ */
+export const colorTransparentBackgroundHover = 'var(--colorTransparentBackgroundHover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorTransparentBackgroundPressed | `colorTransparentBackgroundPressed`} design token.
+ * @public
+ */
+export const colorTransparentBackgroundPressed = 'var(--colorTransparentBackgroundPressed)';
 /**
  * CSS custom property value for the {@link @fluentui/tokens#colorTransparentBackground | `colorTransparentBackground`} design token.
  * @public
@@ -689,6 +699,11 @@ export const spacingVerticalSNudge = 'var(--spacingVerticalSNudge)';
  * @public
  */
 export const colorPaletteDarkOrangeForeground1 = 'var(--colorPaletteDarkOrangeForeground1)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2BrandSelected | `colorNeutralForeground2BrandSelected`} design token.
+ * @public
+ */
+export const colorNeutralForeground2BrandSelected = 'var(--colorNeutralForeground2BrandSelected)';
 /**
  * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground4 | `colorNeutralForeground4`} design token.
  * @public
@@ -734,13 +749,3 @@ export const spacingHorizontalMNudge = 'var(--spacingHorizontalMNudge)';
  * @public
  */
 export const colorBrandStroke2Contrast = 'var(--colorBrandStroke2Contrast)';
-/**
- * CSS custom property value for the {@link @fluentui/tokens#colorTransparentBackgroundHover | `colorTransparentBackgroundHover`} design token.
- * @public
- */
-export const colorTransparentBackgroundHover = 'var(--colorTransparentBackgroundHover)';
-/**
- * CSS custom property value for the {@link @fluentui/tokens#colorTransparentBackgroundPressed | `colorTransparentBackgroundPressed`} design token.
- * @public
- */
-export const colorTransparentBackgroundPressed = 'var(--colorTransparentBackgroundPressed)';

packages/semantic-tokens/src/legacyVariant/tokens.ts

@@ -132,6 +132,7 @@ import {
   spacingHorizontalM,
   colorPaletteDarkOrangeForeground1,
   colorTransparentStrokeInteractive,
+  colorNeutralForeground2BrandSelected,
   colorNeutralBackground3,
   colorNeutralForeground4,
   fontSizeBase200,
@@ -181,6 +182,7 @@ import {
   backgroundCtrlActiveBrandPressedRaw,
   paddingCtrlLgTextBottomRaw,
   paddingCtrlSmTextBottomRaw,
+  foregroundCtrlActiveBrandRestRaw,
   foregroundCtrlOnSubtleHoverRaw,
   foregroundCtrlNeutralPrimaryHoverRaw,
   foregroundCtrlOnSubtlePressedRaw,
@@ -200,7 +202,6 @@ import {
   textRampItemBodyLineHeightRaw,
   foregroundCtrlActiveBrandHoverRaw,
   foregroundCtrlActiveBrandPressedRaw,
-  foregroundCtrlActiveBrandRestRaw,
   foregroundCtrlIconOnSubtleHoverRaw,
   foregroundCtrlIconOnSubtlePressedRaw,
 } from '../optional/variables';
@@ -751,6 +752,13 @@ export const _ctrlFieldStatusWarningTintForeground = `var(${statusWarningTintFor
  * please use ctrlFocusOuterStroke instead.
  */
 export const _ctrlFocusOuterStrokeInteractive = `var(${ctrlFocusOuterStrokeRaw}, var(${backgroundCtrlBrandRestRaw}, ${colorTransparentStrokeInteractive}))`;
+/**
+ * This is a legacy variant for foregroundCtrlActiveBrandRest to enable backwards compatibility.
+ * It's purpose is to support Fluent UI legacy fallback variants only.
+ * This token is not intended for use in new semantic theme implementations
+ * please use foregroundCtrlActiveBrandRest instead.
+ */
+export const _ctrlInfoLabelForegroundColorSelected = `var(${foregroundCtrlActiveBrandRestRaw}, var(${foregroundCtrlBrandRestRaw}, ${colorNeutralForeground2BrandSelected}))`;
 /**
  * This is a legacy variant for ctrlInputBackgroundRest to enable backwards compatibility.
  * It's purpose is to support Fluent UI legacy fallback variants only.