Update MessageBarTitle to support different HTML tags

Fixes microsoft#33373
vs4vijay · Dec 6, 2024 · 0ab8d63 · 0ab8d63
1 parent f42240c
commit 0ab8d63
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 9 deletions.
diff --git a/packages/react-components/react-message-bar/library/etc/react-message-bar.api.md b/packages/react-components/react-message-bar/library/etc/react-message-bar.api.md
@@ -134,11 +134,13 @@ export const MessageBarTitle: ForwardRefComponent<MessageBarTitleProps>;
 export const messageBarTitleClassNames: SlotClassNames<MessageBarTitleSlots>;
 
 // @public
-export type MessageBarTitleProps = ComponentProps<MessageBarTitleSlots>;
+export type MessageBarTitleProps = ComponentProps<MessageBarTitleSlots> & {
+    as?: 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
+};
 
 // @public (undocumented)
 export type MessageBarTitleSlots = {
-    root: Slot<'span'>;
+    root: Slot<'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p'>;
 };
 
 // @public

diff --git a/...ponents/react-message-bar/library/src/components/MessageBarTitle/MessageBarTitle.test.tsx b/...ponents/react-message-bar/library/src/components/MessageBarTitle/MessageBarTitle.test.tsx
@@ -9,10 +9,31 @@ describe('MessageBarTitle', () => {
     displayName: 'MessageBarTitle',
   });
 
-  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
-
   it('renders a default state', () => {
     const result = render(<MessageBarTitle>Default MessageBarTitle</MessageBarTitle>);
     expect(result.container).toMatchSnapshot();
   });
+
+  it('renders correctly with different as values', () => {
+    const { container: containerH1 } = render(<MessageBarTitle as="h1">MessageBarTitle as h1</MessageBarTitle>);
+    expect(containerH1).toMatchSnapshot();
+
+    const { container: containerH2 } = render(<MessageBarTitle as="h2">MessageBarTitle as h2</MessageBarTitle>);
+    expect(containerH2).toMatchSnapshot();
+
+    const { container: containerH3 } = render(<MessageBarTitle as="h3">MessageBarTitle as h3</MessageBarTitle>);
+    expect(containerH3).toMatchSnapshot();
+
+    const { container: containerH4 } = render(<MessageBarTitle as="h4">MessageBarTitle as h4</MessageBarTitle>);
+    expect(containerH4).toMatchSnapshot();
+
+    const { container: containerH5 } = render(<MessageBarTitle as="h5">MessageBarTitle as h5</MessageBarTitle>);
+    expect(containerH5).toMatchSnapshot();
+
+    const { container: containerH6 } = render(<MessageBarTitle as="h6">MessageBarTitle as h6</MessageBarTitle>);
+    expect(containerH6).toMatchSnapshot();
+
+    const { container: containerP } = render(<MessageBarTitle as="p">MessageBarTitle as p</MessageBarTitle>);
+    expect(containerP).toMatchSnapshot();
+  });
 });
diff --git a/...ponents/react-message-bar/library/src/components/MessageBarTitle/MessageBarTitle.types.ts b/...ponents/react-message-bar/library/src/components/MessageBarTitle/MessageBarTitle.types.ts
@@ -1,13 +1,15 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 
 export type MessageBarTitleSlots = {
-  root: Slot<'span'>;
+  root: Slot<'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p'>;
 };
 
 /**
  * MessageBarTitle Props
  */
-export type MessageBarTitleProps = ComponentProps<MessageBarTitleSlots>;
+export type MessageBarTitleProps = ComponentProps<MessageBarTitleSlots> & {
+  as?: 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
+};
 
 /**
  * State used in rendering MessageBarTitle

diff --git a/...components/react-message-bar/library/src/components/MessageBarTitle/useMessageBarTitle.ts b/...components/react-message-bar/library/src/components/MessageBarTitle/useMessageBarTitle.ts
@@ -20,15 +20,15 @@ export const useMessageBarTitle_unstable = (
 
   return {
     components: {
-      root: 'span',
+      root: props.as || 'span',
     },
     root: slot.always(
-      getIntrinsicElementProps('span', {
+      getIntrinsicElementProps(props.as || 'span', {
         ref,
         id: titleId,
         ...props,
       }),
-      { elementType: 'span' },
+      { elementType: props.as || 'span' },
     ),
   };
 };