From 0ab8d636f70ccfd16e505b557e40b418aff2bdd7 Mon Sep 17 00:00:00 2001 From: Vijay Soni Date: Fri, 6 Dec 2024 20:19:49 +0530 Subject: [PATCH 1/2] Update MessageBarTitle to support different HTML tags Fixes #33373 --- .../library/etc/react-message-bar.api.md | 6 +++-- .../MessageBarTitle/MessageBarTitle.test.tsx | 25 +++++++++++++++++-- .../MessageBarTitle/MessageBarTitle.types.ts | 6 +++-- .../MessageBarTitle/useMessageBarTitle.ts | 6 ++--- 4 files changed, 34 insertions(+), 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 index f542397433e67..bd78f88940ff5 100644 --- 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; export const messageBarTitleClassNames: SlotClassNames; // @public -export type MessageBarTitleProps = ComponentProps; +export type MessageBarTitleProps = ComponentProps & { + 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/packages/react-components/react-message-bar/library/src/components/MessageBarTitle/MessageBarTitle.test.tsx b/packages/react-components/react-message-bar/library/src/components/MessageBarTitle/MessageBarTitle.test.tsx index c34b6a2446dbc..1a0fee879c85e 100644 --- a/packages/react-components/react-message-bar/library/src/components/MessageBarTitle/MessageBarTitle.test.tsx +++ b/packages/react-components/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(Default MessageBarTitle); expect(result.container).toMatchSnapshot(); }); + + it('renders correctly with different as values', () => { + const { container: containerH1 } = render(MessageBarTitle as h1); + expect(containerH1).toMatchSnapshot(); + + const { container: containerH2 } = render(MessageBarTitle as h2); + expect(containerH2).toMatchSnapshot(); + + const { container: containerH3 } = render(MessageBarTitle as h3); + expect(containerH3).toMatchSnapshot(); + + const { container: containerH4 } = render(MessageBarTitle as h4); + expect(containerH4).toMatchSnapshot(); + + const { container: containerH5 } = render(MessageBarTitle as h5); + expect(containerH5).toMatchSnapshot(); + + const { container: containerH6 } = render(MessageBarTitle as h6); + expect(containerH6).toMatchSnapshot(); + + const { container: containerP } = render(MessageBarTitle as p); + expect(containerP).toMatchSnapshot(); + }); }); diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBarTitle/MessageBarTitle.types.ts b/packages/react-components/react-message-bar/library/src/components/MessageBarTitle/MessageBarTitle.types.ts index 6a36a9db8aa90..f8821c73b6f42 100644 --- a/packages/react-components/react-message-bar/library/src/components/MessageBarTitle/MessageBarTitle.types.ts +++ b/packages/react-components/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; +export type MessageBarTitleProps = ComponentProps & { + as?: 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p'; +}; /** * State used in rendering MessageBarTitle diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBarTitle/useMessageBarTitle.ts b/packages/react-components/react-message-bar/library/src/components/MessageBarTitle/useMessageBarTitle.ts index d464ea18cd771..037b03f08cd38 100644 --- a/packages/react-components/react-message-bar/library/src/components/MessageBarTitle/useMessageBarTitle.ts +++ b/packages/react-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' }, ), }; }; From 85267169238cbe400cdbd97566fede501af0b64e Mon Sep 17 00:00:00 2001 From: Vijay Soni Date: Fri, 6 Dec 2024 20:50:21 +0530 Subject: [PATCH 2/2] --- ...t-message-bar-b5465d7d-4102-46d7-8987-43dc139443de.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-message-bar-b5465d7d-4102-46d7-8987-43dc139443de.json diff --git a/change/@fluentui-react-message-bar-b5465d7d-4102-46d7-8987-43dc139443de.json b/change/@fluentui-react-message-bar-b5465d7d-4102-46d7-8987-43dc139443de.json new file mode 100644 index 0000000000000..01930a7e9dd10 --- /dev/null +++ b/change/@fluentui-react-message-bar-b5465d7d-4102-46d7-8987-43dc139443de.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix", + "packageName": "@fluentui/react-message-bar", + "email": "vs4vijay@gmail.com", + "dependentChangeType": "patch" +}