fix(react-tree): TreeItemLayout to use display: grid in order to match TreeItemPersonaLayout's behavior with interior flex boxes

[mindlessroman]

• Code is up-to-date with the master branch
• Your changes are covered by tests (if possible)
• You've run yarn change locally

Previous Behavior

Considering the following code in the stackblitz: https://stackblitz.com/edit/t9nbn2cb?file=src%2Fexample.tsx

Despite having the same CSS insides

    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',

The div inside TreeItemLayout was shrunken and wouldn't render in the same way as TreeItemPersonaLayout.

New Behavior

When provided the same kind of insides, now flex box divs are rendering the same way, both for regular and flat trees.

NOTE: The colors here are for visual distinction, not part of PR.

Regular:

Flat:

Also rearranging the order of styles in TreeItemPersonaLayout so that they better match regular so that a visual diff is slightly easier.

Testing: I primarily did a visual inspection since it was a challenge to write the right test for a CSS change like this. (hence the colors)

Related Issue(s)

• Fixes [Bug]: TreeItemLayout's width behavior doesn't match TreeItemPersonaLayout's #34915

[github-actions]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-components react-components: entire library	1.278 MB 321.239 kB	1.278 MB 321.198 kB	46 B -41 B
react-tree FlatTree	149.073 kB 42.66 kB	149.225 kB 42.721 kB	152 B 61 B
react-tree PersonaFlatTree	149.831 kB 42.791 kB	149.725 kB 42.803 kB	-106 B 12 B
react-tree PersonaTree	146.096 kB 41.652 kB	145.99 kB 41.663 kB	-106 B 11 B
react-tree Tree	145.346 kB 41.528 kB	145.496 kB 41.591 kB	150 B 63 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: Button, FluentProvider & webLightTheme	68.796 kB 19.903 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	236.635 kB 68.578 kB
react-components react-components: FluentProvider & webLightTheme	43.63 kB 14.257 kB
react-portal-compat PortalCompatProvider	8.386 kB 2.624 kB
react-timepicker-compat TimePicker	109.931 kB 36.336 kB

_{🤖 This report was generated against 9d7418b393fdb8d84f1a1398e9ea4ffcd2d026f7}

[github-actions]

Pull request demo site: URL

[github-actions]

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/Charts-DonutChart 3 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Charts-DonutChart.Dynamic - RTL.default.chromium.png	30793	Changed
vr-tests-react-components/Charts-DonutChart.Dynamic.default.chromium.png	27053	Changed
vr-tests-react-components/Charts-DonutChart.Dynamic - Dark Mode.default.chromium.png	12635	Changed

vr-tests-react-components/Positioning 2 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png	129	Changed
vr-tests-react-components/Positioning.Positioning end.chromium.png	488	Changed

vr-tests-react-components/Tree 15 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Tree.flat tree multi selection - High Contrast.flat tree multi selection selected 1-1.chromium.png	786	Changed
vr-tests-react-components/Tree.flat tree multi selection - Dark Mode.flat tree multi selection selected 1-1.chromium.png	465	Changed
vr-tests-react-components/Tree.flat tree multi selection.flat tree multi selection selected 1-1.chromium.png	501	Changed
vr-tests-react-components/Tree.flat tree single selection - High Contrast.chromium.png	671	Changed
vr-tests-react-components/Tree.flat tree single selection - Dark Mode.flat tree single selection selected 1.chromium.png	413	Changed
vr-tests-react-components/Tree.flat tree single selection - High Contrast.flat tree single selection selected 1.chromium.png	568	Changed
vr-tests-react-components/Tree.flat tree single selection - Dark Mode.chromium.png	405	Changed
vr-tests-react-components/Tree.flat tree single selection - RTL.chromium_1.png	437	Changed
vr-tests-react-components/Tree.flat tree single selection - RTL.flat tree single selection selected 1.chromium_2.png	437	Changed
vr-tests-react-components/Tree.flat tree single selection.flat tree single selection selected 1.chromium.png	429	Changed
vr-tests-react-components/Tree.flat tree single selection.chromium.png	431	Changed
vr-tests-react-components/Tree.layout - Dark Mode.default.chromium.png	26284	Changed
vr-tests-react-components/Tree.layout - RTL.default.chromium.png	1171	Changed
vr-tests-react-components/Tree.layout - High Contrast.default.chromium.png	31683	Changed
vr-tests-react-components/Tree.layout.default.chromium.png	1177	Changed

There were 5 duplicate changes discarded. Check the build logs for more information.

[bsunderhus]

Unfortunately, as shown in our VR tests, this might cause some breaks:

Here's a focus SS

As you can see, some items are being moved to the end of the line. This might be problematic, as it might cause breaking changes in clients that already have the current behavior as expected 🥲

[bsunderhus]

I'll sync internally and see what decision to be done about it. I agree that this is an inconsistency between both layout components, but I'm not sure if we can do something about it without a major version bump.

WDYT @jurokapsiar, @layershifter ?!