[pull] master from microsoft:master

change/@fluentui-eslint-plugin-react-components-29e79141-9ead-403f-90e9-acf2e988b420.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: expand component coverage",
+  "packageName": "@fluentui/eslint-plugin-react-components",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-message-bar-4a6b8620-f010-4128-b5a0-4c68e73bc7de.json

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

change/@fluentui-react-toolbar-c4d2e81f-6a3b-4c90-d5e7-1f8b2a3c4d5e.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: expose base hooks for Toolbar components",
+  "packageName": "@fluentui/react-toolbar",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/eslint-plugin-react-components/src/rules/prefer-fluentui-v9.ts

@@ -84,22 +84,25 @@ const MIGRATIONS = {
   Announced: { import: 'useAnnounce', package: '@fluentui/react-components' },
   Breadcrumb: { import: 'Breadcrumb', package: '@fluentui/react-components' },
   Button: { import: 'Button', package: '@fluentui/react-components' },
-  Callout: { import: 'Popover', package: '@fluentui/react-components' },
   Calendar: { import: 'Calendar', package: '@fluentui/react-calendar-compat' },
-  CommandBar: { import: 'Toolbar', package: '@fluentui/react-components' },
-  CommandBarButton: { import: 'Toolbar', package: '@fluentui/react-components' },
-  CommandButton: { import: 'MenuButton', package: '@fluentui/react-components' },
-  CompoundButton: { import: 'CompoundButton', package: '@fluentui/react-components' },
+  Callout: { import: 'Popover', package: '@fluentui/react-components' },
   Checkbox: { import: 'Checkbox', package: '@fluentui/react-components' },
   ChoiceGroup: { import: 'RadioGroup', package: '@fluentui/react-components' },
   Coachmark: { import: 'TeachingPopover', package: '@fluentui/react-components' },
   ComboBox: { import: 'Combobox', package: '@fluentui/react-components' },
+  CommandBar: { import: 'Toolbar', package: '@fluentui/react-components' },
+  CommandBarButton: { import: 'Toolbar', package: '@fluentui/react-components' },
+  CommandButton: { import: 'MenuButton', package: '@fluentui/react-components' },
+  CompoundButton: { import: 'CompoundButton', package: '@fluentui/react-components' },
   ContextualMenu: { import: 'Menu', package: '@fluentui/react-components' },
-  DefaultButton: { import: 'Button', package: '@fluentui/react-components' },
+  ContextualMenuItem: { import: 'MenuItem', package: '@fluentui/react-components' },
   DatePicker: { import: 'DatePicker', package: '@fluentui/react-datepicker-compat' },
+  DefaultButton: { import: 'Button', package: '@fluentui/react-components' },
   DetailsList: { import: 'DataGrid', package: '@fluentui/react-components' },
   Dialog: { import: 'Dialog', package: '@fluentui/react-components' },
   DocumentCard: { import: 'Card', package: '@fluentui/react-components' },
+  DocumentCardTitle: { import: 'CardHeader', package: '@fluentui/react-components' },
+  DocumentCardPreview: { import: 'CardPreview', package: '@fluentui/react-components' },
   Dropdown: { import: 'Dropdown', package: '@fluentui/react-components' },
   Fabric: { import: 'FluentProvider', package: '@fluentui/react-components' },
   Facepile: { import: 'AvatarGroup', package: '@fluentui/react-components' },
@@ -113,13 +116,16 @@ const MIGRATIONS = {
   Label: { import: 'Label', package: '@fluentui/react-components' },
   Layer: { import: 'Portal', package: '@fluentui/react-components' },
   Link: { import: 'Link', package: '@fluentui/react-components' },
+  List: { import: 'List', package: '@fluentui/react-components' },
   MessageBar: { import: 'MessageBar', package: '@fluentui/react-components' },
   Modal: { import: 'Dialog', package: '@fluentui/react-components' },
+  Nav: { import: 'Nav', package: '@fluentui/react-components' },
   OverflowSet: { import: 'Overflow', package: '@fluentui/react-components' },
   Overlay: { import: 'Portal', package: '@fluentui/react-components' },
   Panel: { import: 'Drawer', package: '@fluentui/react-components' },
   PeoplePicker: { import: 'TagPicker', package: '@fluentui/react-components' },
   Persona: { import: 'Persona', package: '@fluentui/react-components' },
+  PersonaPresence: { import: 'Persona', package: '@fluentui/react-components' },
   Pivot: { import: 'TabList', package: '@fluentui/react-components' },
   PivotItem: { import: 'Tab', package: '@fluentui/react-components' },
   ProgressIndicator: { import: 'ProgressBar', package: '@fluentui/react-components' },
@@ -128,19 +134,20 @@ const MIGRATIONS = {
   Separator: { import: 'Divider', package: '@fluentui/react-components' },
   Shimmer: { import: 'Skeleton', package: '@fluentui/react-components' },
   Slider: { import: 'Slider', package: '@fluentui/react-components' },
-  SplitButton: { import: 'SplitButton', package: '@fluentui/react-components' },
   SpinButton: { import: 'SpinButton', package: '@fluentui/react-components' },
   Spinner: { import: 'Spinner', package: '@fluentui/react-components' },
+  SplitButton: { import: 'SplitButton', package: '@fluentui/react-components' },
   Stack: { import: 'StackShim', package: '@fluentui/react-components' },
   SwatchColorPicker: { import: 'SwatchPicker', package: '@fluentui/react-components' },
   TagPicker: { import: 'TagPicker', package: '@fluentui/react-components' },
   TeachingBubble: { import: 'TeachingPopover', package: '@fluentui/react-components' },
   Text: { import: 'Text', package: '@fluentui/react-components' },
   TextField: { import: 'Input', package: '@fluentui/react-components' },
   TimePicker: { import: 'TimePicker', package: '@fluentui/react-timepicker-compat' },
-  ToggleButton: { import: 'ToggleButton', package: '@fluentui/react-components' },
   Toggle: { import: 'Switch', package: '@fluentui/react-components' },
+  ToggleButton: { import: 'ToggleButton', package: '@fluentui/react-components' },
   Tooltip: { import: 'Tooltip', package: '@fluentui/react-components' },
+  TooltipHost: { import: 'Tooltip', package: '@fluentui/react-components' },
 };
 
 /**

packages/react-components/react-message-bar/library/etc/react-message-bar.api.md

@@ -7,6 +7,7 @@
 import type { ButtonContextValue } from '@fluentui/react-button';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
+import type { DistributiveOmit } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
@@ -41,12 +42,25 @@ export type MessageBarActionsState = ComponentState<MessageBarActionsSlots> & Pi
     hasActions: boolean;
 };
 
+// @public (undocumented)
+export type MessageBarBaseProps = DistributiveOmit<MessageBarProps, 'shape'>;
+
+// @public (undocumented)
+export type MessageBarBaseState = DistributiveOmit<MessageBarState, 'shape'>;
+
 // @public
 export const MessageBarBody: ForwardRefComponent<MessageBarBodyProps>;
 
 // @public (undocumented)
 export const messageBarBodyClassNames: SlotClassNames<MessageBarBodySlots>;
 
+// @public (undocumented)
+export type MessageBarBodyContextValues = {
+    link: {
+        inline?: boolean;
+    };
+};
+
 // @public
 export type MessageBarBodyProps = ComponentProps<MessageBarBodySlots>;
 
@@ -156,7 +170,7 @@ export type MessageBarTransitionContextValue = {
 };
 
 // @public
-export const renderMessageBar_unstable: (state: MessageBarState, contexts: MessageBarContextValues) => JSXElement;
+export const renderMessageBar_unstable: (state: MessageBarBaseState, contexts: MessageBarContextValues) => JSXElement;
 
 // @public
 export const renderMessageBarActions_unstable: (state: MessageBarActionsState, contexts: MessageBarActionsContextValues) => JSXElement;
@@ -182,9 +196,15 @@ export function useMessageBarActionsContextValue_unstable(): MessageBarActionsCo
 // @public
 export const useMessageBarActionsStyles_unstable: (state: MessageBarActionsState) => MessageBarActionsState;
 
+// @public
+export const useMessageBarBase_unstable: (props: MessageBarBaseProps, ref: React_2.Ref<HTMLDivElement>) => MessageBarBaseState;
+
 // @public
 export const useMessageBarBody_unstable: (props: MessageBarBodyProps, ref: React_2.Ref<HTMLDivElement>) => MessageBarBodyState;
 
+// @public (undocumented)
+export function useMessageBarBodyContextValues_unstable(state: MessageBarBodyState): MessageBarBodyContextValues;
+
 // @public
 export const useMessageBarBodyStyles_unstable: (state: MessageBarBodyState) => MessageBarBodyState;
 

packages/react-components/react-message-bar/library/src/MessageBar.ts

@@ -1,4 +1,6 @@
 export type {
+  MessageBarBaseProps,
+  MessageBarBaseState,
   MessageBarContextValues,
   MessageBarIntent,
   MessageBarProps,
@@ -11,5 +13,6 @@ export {
   renderMessageBar_unstable,
   useMessageBarContextValue_unstable,
   useMessageBarStyles_unstable,
+  useMessageBarBase_unstable,
   useMessageBar_unstable,
 } from './components/MessageBar/index';

packages/react-components/react-message-bar/library/src/MessageBarBody.ts

@@ -10,4 +10,5 @@ export {
   renderMessageBarBody_unstable,
   useMessageBarBodyStyles_unstable,
   useMessageBarBody_unstable,
+  useMessageBarBodyContextValues_unstable,
 } from './components/MessageBarBody/index';

packages/react-components/react-message-bar/library/src/components/MessageBar/MessageBar.types.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';
 import type { MessageBarContextValue } from '../../contexts/messageBarContext';
 
 export type MessageBarSlots = {
@@ -53,3 +53,6 @@ export type MessageBarState = ComponentState<MessageBarSlots> &
      */
     transitionClassName: string;
   };
+
+export type MessageBarBaseProps = DistributiveOmit<MessageBarProps, 'shape'>;
+export type MessageBarBaseState = DistributiveOmit<MessageBarState, 'shape'>;

packages/react-components/react-message-bar/library/src/components/MessageBar/index.ts

@@ -1,12 +1,14 @@
 export { MessageBar } from './MessageBar';
 export type {
+  MessageBarBaseProps,
+  MessageBarBaseState,
   MessageBarContextValues,
   MessageBarIntent,
   MessageBarProps,
   MessageBarSlots,
   MessageBarState,
 } from './MessageBar.types';
 export { renderMessageBar_unstable } from './renderMessageBar';
-export { useMessageBar_unstable } from './useMessageBar';
+export { useMessageBarBase_unstable, useMessageBar_unstable } from './useMessageBar';
 export { messageBarClassNames, useMessageBarStyles_unstable } from './useMessageBarStyles.styles';
 export { useMessageBarContextValue_unstable } from './useMessageBarContextValues';

packages/react-components/react-message-bar/library/src/components/MessageBar/renderMessageBar.tsx

@@ -3,13 +3,16 @@
 
 import { assertSlots } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
-import type { MessageBarState, MessageBarSlots, MessageBarContextValues } from './MessageBar.types';
+import type { MessageBarBaseState, MessageBarSlots, MessageBarContextValues } from './MessageBar.types';
 import { MessageBarContextProvider } from '../../contexts/messageBarContext';
 
 /**
  * Render the final JSX of MessageBar
  */
-export const renderMessageBar_unstable = (state: MessageBarState, contexts: MessageBarContextValues): JSXElement => {
+export const renderMessageBar_unstable = (
+  state: MessageBarBaseState,
+  contexts: MessageBarContextValues,
+): JSXElement => {
   assertSlots<MessageBarSlots>(state);
 
   return (

packages/react-components/react-message-bar/library/src/components/MessageBar/useMessageBar.test.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+
+import { useMessageBar_unstable } from './useMessageBar';
+
+describe('useMessageBar', () => {
+  it('should return state for default props', () => {
+    const { result } = renderHook(() => useMessageBar_unstable({}, React.createRef<HTMLDivElement>()));
+
+    expect(result.current).toMatchObject({
+      intent: 'info',
+      layout: 'singleline',
+      shape: 'rounded',
+    });
+
+    expect(result.current.icon?.children).toBeDefined();
+  });
+
+  it('should return state for custom props', () => {
+    const { result } = renderHook(() =>
+      useMessageBar_unstable(
+        {
+          intent: 'error',
+          layout: 'multiline',
+          shape: 'square',
+          icon: { children: null },
+        },
+        React.createRef<HTMLDivElement>(),
+      ),
+    );
+
+    expect(result.current).toMatchObject({
+      intent: 'error',
+      layout: 'multiline',
+      shape: 'square',
+    });
+
+    expect(result.current.icon?.children).toBeNull();
+  });
+});

packages/react-components/react-message-bar/library/src/components/MessageBar/useMessageBar.ts

@@ -3,23 +3,23 @@
 import * as React from 'react';
 import { getIntrinsicElementProps, slot, useId, useMergedRefs } from '@fluentui/react-utilities';
 import { useAnnounce } from '@fluentui/react-shared-contexts';
-import type { MessageBarProps, MessageBarState } from './MessageBar.types';
+import type { MessageBarBaseProps, MessageBarBaseState, MessageBarProps, MessageBarState } from './MessageBar.types';
 import { getIntentIcon } from './getIntentIcon';
 import { useMessageBarReflow } from './useMessageBarReflow';
 import { useMessageBarTransitionContext } from '../../contexts/messageBarTransitionContext';
 import { useMotionForwardedRef } from '@fluentui/react-motion';
 
 /**
- * Create the state required to render MessageBar.
- *
- * The returned state can be modified with hooks such as useMessageBarStyles_unstable,
- * before being passed to renderMessageBar_unstable.
+ * Create the base state required to render MessageBar without design-specific props.
  *
- * @param props - props from this instance of MessageBar
+ * @param props - props from this instance of MessageBar (without shape)
  * @param ref - reference to root HTMLElement of MessageBar
  */
-export const useMessageBar_unstable = (props: MessageBarProps, ref: React.Ref<HTMLDivElement>): MessageBarState => {
-  const { layout = 'auto', intent = 'info', politeness, shape = 'rounded' } = props;
+export const useMessageBarBase_unstable = (
+  props: MessageBarBaseProps,
+  ref: React.Ref<HTMLDivElement>,
+): MessageBarBaseState => {
+  const { layout = 'auto', intent = 'info', politeness } = props;
   const computedPoliteness = politeness ?? intent === 'info' ? 'polite' : 'assertive';
   const autoReflow = layout === 'auto';
   const { ref: reflowRef, reflowing } = useMessageBarReflow(autoReflow);
@@ -57,11 +57,9 @@ export const useMessageBar_unstable = (props: MessageBarProps, ref: React.Ref<HT
       }),
       { elementType: 'div' },
     ),
-
     icon: slot.optional(props.icon, {
       renderByDefault: true,
       elementType: 'div',
-      defaultProps: { children: getIntentIcon(intent) },
     }),
     bottomReflowSpacer: slot.optional(props.bottomReflowSpacer, {
       renderByDefault: computedLayout === 'multiline',
@@ -73,6 +71,32 @@ export const useMessageBar_unstable = (props: MessageBarProps, ref: React.Ref<HT
     actionsRef,
     bodyRef,
     titleId,
+  };
+};
+
+/**
+ * Create the state required to render MessageBar.
+ *
+ * The returned state can be modified with hooks such as useMessageBarStyles_unstable,
+ * before being passed to renderMessageBar_unstable.
+ *
+ * @param props - props from this instance of MessageBar
+ * @param ref - reference to root HTMLElement of MessageBar
+ */
+export const useMessageBar_unstable = (props: MessageBarProps, ref: React.Ref<HTMLDivElement>): MessageBarState => {
+  const { shape = 'rounded', ...baseProps } = props;
+
+  const state = useMessageBarBase_unstable(baseProps, ref);
+
+  return {
+    ...state,
     shape,
+    icon: slot.optional(props.icon, {
+      defaultProps: {
+        children: getIntentIcon(state.intent),
+      },
+      renderByDefault: true,
+      elementType: 'div',
+    }),
   };
 };

packages/react-components/react-message-bar/library/src/components/MessageBarBody/index.ts

@@ -7,4 +7,5 @@ export type {
 } from './MessageBarBody.types';
 export { renderMessageBarBody_unstable } from './renderMessageBarBody';
 export { useMessageBarBody_unstable } from './useMessageBarBody';
+export { useMessageBarBodyContextValues_unstable } from './useMessageBarBodyContextValues';
 export { messageBarBodyClassNames, useMessageBarBodyStyles_unstable } from './useMessageBarBodyStyles.styles';

packages/react-components/react-message-bar/library/src/index.ts

@@ -1,13 +1,16 @@
 export {
   MessageBar,
   useMessageBarStyles_unstable,
+  useMessageBarBase_unstable,
   useMessageBar_unstable,
   useMessageBarContextValue_unstable,
   renderMessageBar_unstable,
   messageBarClassNames,
 } from './MessageBar';
 
 export type {
+  MessageBarBaseProps,
+  MessageBarBaseState,
   MessageBarProps,
   MessageBarSlots,
   MessageBarState,
@@ -45,11 +48,17 @@ export {
   MessageBarBody,
   useMessageBarBodyStyles_unstable,
   useMessageBarBody_unstable,
+  useMessageBarBodyContextValues_unstable,
   renderMessageBarBody_unstable,
   messageBarBodyClassNames,
 } from './MessageBarBody';
 
-export type { MessageBarBodyProps, MessageBarBodySlots, MessageBarBodyState } from './MessageBarBody';
+export type {
+  MessageBarBodyProps,
+  MessageBarBodySlots,
+  MessageBarBodyState,
+  MessageBarBodyContextValues,
+} from './MessageBarBody';
 
 export {
   MessageBarContextProvider,