Fix for dialog title not taking whole row for dialog without actions

[nanabear0]

Previous Behavior

For dialog's without actions the title isn't taking up the whole row. This is a regression from an earlier version.

New Behavior

After the change you can see the title is taking the full row as expected.

Here is also an dialog with action to show there isn't a regression

These images are taken from the story book opened by running yarn start @fluentui/react-dialog

Related Issue(s)

• Fixes #28036

[fabricteam]

Perf Analysis (@fluentui/react-components)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
InfoButton	mount	11	13	5000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	586	579	5000
Button	mount	290	291	5000
Field	mount	1036	991	5000
FluentProvider	mount	648	664	5000
FluentProviderWithTheme	mount	81	81	10
FluentProviderWithTheme	virtual-rerender	65	63	10
FluentProviderWithTheme	virtual-rerender-with-unmount	77	73	10
InfoButton	mount	11	13	5000	Possible regression
MakeStyles	mount	867	862	50000
Persona	mount	1623	1560	5000
SpinButton	mount	1262	1279	5000

[size-auditor[bot]]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 71fcadc8347a9c547066b631eb7f3ec527ca9775 (build)

[fabricteam]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	206.461 kB 57.925 kB	211.151 kB 58.715 kB	4.69 kB 790 B
react-dialog Dialog (including children components)	92.112 kB 27.498 kB	92.16 kB 27.502 kB	48 B 4 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: Button, FluentProvider & webLightTheme	64.935 kB 17.918 kB
react-components react-components: FluentProvider & webLightTheme	36.168 kB 11.964 kB
react-portal-compat PortalCompatProvider	6.473 kB 2.196 kB

_{🤖 This report was generated against 8f51f158b2fd9ab7ff766d6e1441895b64752178}

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 3e945b193b6541221fed36fafff501f8d4fb8f43:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[fabricteam]

🕵 fluentuiv9 No visual regressions between this PR and main

[ling1726]

FYI @bsunderhus

[micahgodbolt]

For clarify, this is the figma spec

I'm not sure if the size of the title when the close button is there is intentional or not. Will check with component author.

[nanabear0]

I was more focused on the behaviour when we don't have a close icon. But I guess we also need a different fix to also fix the title size when there is are actions.

[azure-pipelines[bot]]

Azure Pipelines successfully started running 4 pipeline(s).

[ling1726]

/azp run

[azure-pipelines[bot]]

Azure Pipelines successfully started running 4 pipeline(s).

[nanabear0]

@nanabear0 I'll merge this after you update the changelog entry

@ling1726 I have updated the change file using your suggestion. Do I need to do anything else?

[msft-fluent-ui-bot]

:tada:@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-fluent-ui-bot]

:tada:@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release