Skip to content

feat(react-headless-components-preview): expose ToastTitle intent sta… #36640

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Dmytro Kirpa (dmytrokirpa) merged 2 commits into from
Aug 29, 2026
+43 −21
Merged

feat(react-headless-components-preview): expose ToastTitle intent sta… #36640

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c0f5a59
feat(react-headless-components-preview): expose ToastTitle intent sta…
dmytrokirpa Aug 27, 2026
2facba8
fix: update toast test selectors to use TOAST_CONTAINER role
dmytrokirpa Aug 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions change/@fluentui-react-headless-components-preview-69fc269f-3430-4627-a4bf-8c12ae5f7f06.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"type": "patch",
"comment": "feat: expose ToastTitle intent state via data attribute",
"packageName": "@fluentui/react-headless-components-preview",
"email": "dmytrokirpa@microsoft.com"
}
9 changes: 7 additions & 2 deletions ...ges/react-components/react-headless-components-preview/library/etc/toast.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,9 @@ import { ToastPosition } from '@fluentui/react-toast';
import { ToastBaseProps as ToastProps } from '@fluentui/react-toast';
import { ToastSlots } from '@fluentui/react-toast';
import { ToastStatus } from '@fluentui/react-toast';
import type { ToastTitleBaseState } from '@fluentui/react-toast';
import { ToastTitleBaseProps as ToastTitleProps } from '@fluentui/react-toast';
import { ToastTitleSlots } from '@fluentui/react-toast';
import { ToastTitleBaseState as ToastTitleState } from '@fluentui/react-toast';
import { useToastBodyBase_unstable as useToastBody } from '@fluentui/react-toast';
import { useToastContainerContext } from '@fluentui/react-toast';
import { useToastController } from '@fluentui/react-toast';
Expand Down Expand Up @@ -152,7 +152,12 @@ export { ToastTitleProps }

export { ToastTitleSlots }

export { ToastTitleState }
// @public (undocumented)
export type ToastTitleState = ToastTitleBaseState & {
media?: ToastTitleBaseState['media'] & {
'data-intent'?: ToastTitleBaseState['intent'];
};
};

// @public
export const useToast: (props: ToastProps, ref: React_2.Ref<HTMLElement>) => ToastState;
Expand Down
23 changes: 11 additions & 12 deletions ...ct-components/react-headless-components-preview/library/src/components/Toast/Toast.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,9 @@ import { Provider } from '../Provider';
/**
* Selectors used by the headless tests. Unlike the styled v9 layer, the headless
* Toast does not emit Griffel class names — we target structural roles and the
* `data-intent` attribute the headless `Toast` adds to its root.
* structural roles on the headless `ToastContainer` root.
*/
const TOAST_CONTAINER = '[role="listitem"]';
const TOAST = '[data-intent]';

const mount = (element: JSXElement) =>
mountBase(
Expand Down Expand Up @@ -43,7 +42,7 @@ describe('Toast (headless)', () => {
};

mount(<Example />);
cy.get('button').click().get(TOAST).should('exist');
cy.get('button').click().get(TOAST_CONTAINER).should('exist');
});

it('should dismiss toast', () => {
Expand Down Expand Up @@ -73,8 +72,8 @@ describe('Toast (headless)', () => {
};

mount(<Example />);
cy.get('#make').click().get(TOAST).should('exist');
cy.get('#dismiss').click().get(TOAST).should('not.exist');
cy.get('#make').click().get(TOAST_CONTAINER).should('exist');
cy.get('#dismiss').click().get(TOAST_CONTAINER).should('not.exist');
});

it('should dismiss all toasts', () => {
Expand Down Expand Up @@ -105,8 +104,8 @@ describe('Toast (headless)', () => {
};

mount(<Example />);
cy.get('#make').click().get(TOAST).should('have.length', 5);
cy.get('#dismiss').click().get(TOAST).should('not.exist');
cy.get('#make').click().get(TOAST_CONTAINER).should('have.length', 5);
cy.get('#dismiss').click().get(TOAST_CONTAINER).should('not.exist');
});

it('should play and pause toast', () => {
Expand Down Expand Up @@ -138,9 +137,9 @@ describe('Toast (headless)', () => {
};

mount(<Example />);
cy.get('#make').click().get(TOAST).should('exist');
cy.get('#pause').click().wait(1000).get(TOAST).should('exist');
cy.get('#play').click().get(TOAST).should('not.exist');
cy.get('#make').click().get(TOAST_CONTAINER).should('exist');
cy.get('#pause').click().wait(1000).get(TOAST_CONTAINER).should('exist');
cy.get('#play').click().get(TOAST_CONTAINER).should('not.exist');
});

it('should update toast content', () => {
Expand Down Expand Up @@ -178,7 +177,7 @@ describe('Toast (headless)', () => {
};

mount(<Example />);
cy.get('#make').click().get(TOAST).should('exist');
cy.get('#make').click().get(TOAST_CONTAINER).should('exist');
cy.get('#update').click().get('body').contains('Foo');
});

Expand All @@ -204,7 +203,7 @@ describe('Toast (headless)', () => {
};

mount(<Example />);
cy.get('#make').click().get(TOAST).trigger('mouseenter').wait(700).get(TOAST).should('exist');
cy.get('#make').click().get(TOAST_CONTAINER).trigger('mouseenter').wait(700).get(TOAST_CONTAINER).should('exist');
});

it('should follow lifecycle', () => {
Expand Down
10 changes: 8 additions & 2 deletions .../react-headless-components-preview/library/src/components/Toast/ToastTitle/ToastTitle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,21 @@

import * as React from 'react';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { ToastTitleProps } from './ToastTitle.types';
import type { ToastTitleProps, ToastTitleState } from './ToastTitle.types';
import { useToastTitle } from './useToastTitle';
import { renderToastTitle } from './renderToastTitle';

/**
* Represents the title of a toast, which is a brief summary or headline for the toast message.
*/
export const ToastTitle: ForwardRefComponent<ToastTitleProps> = React.forwardRef((props, ref) => {
const state = useToastTitle(props, ref);
const state: ToastTitleState = useToastTitle(props, ref);

if (state.media) {
// eslint-disable-next-line react-hooks/immutability
state.media['data-intent'] = state.intent;
}

return renderToastTitle(state);
});

Expand Down
16 changes: 11 additions & 5 deletions ...t-headless-components-preview/library/src/components/Toast/ToastTitle/ToastTitle.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
export type {
ToastTitleBaseProps as ToastTitleProps,
ToastTitleBaseState as ToastTitleState,
ToastTitleSlots,
} from '@fluentui/react-toast';
import type { ToastTitleBaseState } from '@fluentui/react-toast';
export type { ToastTitleBaseProps as ToastTitleProps, ToastTitleSlots } from '@fluentui/react-toast';

export type ToastTitleState = ToastTitleBaseState & {
media?: ToastTitleBaseState['media'] & {
/**
* The intent of the toast, used for styling purposes.
*/
'data-intent'?: ToastTitleBaseState['intent'];
};
};
Loading