Allow disabling transform for positioning by flora8984461 · Pull Request #27929 · microsoft/fluentui

flora8984461 · 2023-05-22T03:54:28Z

Previous Behavior

When using absolute position for components that use "positioning", the transform property is being added automatically and there is no way to disable it.

New Behavior

When using absolute position for components that use "positioning", the transform property can be disabled by positioning={{ useTransform: false }}. By default, this value is set to true to keep the current default behavior.

This is applicable to react-tooltip, react-popover, react-combobox, react-menu, react-datepicker-compact, react-infobutton

Related Issue(s)

Fixes [Feature]: Allow to apply styles for positioning without transform #27881

...onents/react-components/stories/Concepts/Positioning/PositioningDisableTransform.stories.tsx

codesandbox-ci · 2023-05-22T04:06:25Z

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 52626f4:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration
frosty-meadow-vtkkql	Issue #27881

size-auditor · 2023-05-22T04:07:08Z

Asset size changes

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

Baseline commit: c8bcfef7d957b2e251875c216aabac3ece374034 (build)

fabricteam · 2023-05-22T04:08:09Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-combobox` Combobox (including child components)	`87.396 kB` `28.137 kB`	`87.558 kB` `28.17 kB`	`162 B` `33 B`
`react-combobox` Dropdown (including child components)	`85.78 kB` `27.744 kB`	`85.942 kB` `27.78 kB`	`162 B` `36 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`206.09 kB` `57.742 kB`	`206.252 kB` `57.786 kB`	`162 B` `44 B`
`react-datepicker-compat` DatePicker Compat	`221.604 kB` `58.902 kB`	`221.766 kB` `58.962 kB`	`162 B` `60 B`
`react-infobutton` InfoButton	`129.836 kB` `39.619 kB`	`129.998 kB` `39.697 kB`	`162 B` `78 B`
`react-infobutton` InfoLabel	`133.305 kB` `40.691 kB`	`133.467 kB` `40.756 kB`	`162 B` `65 B`
`react-menu` Menu (including children components)	`130.537 kB` `39.824 kB`	`130.699 kB` `39.86 kB`	`162 B` `36 B`
`react-menu` Menu (including selectable components)	`133.521 kB` `40.345 kB`	`133.683 kB` `40.381 kB`	`162 B` `36 B`
`react-popover` Popover	`116.812 kB` `36.006 kB`	`116.974 kB` `36.047 kB`	`162 B` `41 B`
`react-positioning` usePositioning	`24.008 kB` `8.798 kB`	`24.17 kB` `8.838 kB`	`162 B` `40 B`
`react-tooltip` Tooltip	`46.853 kB` `16.408 kB`	`47.015 kB` `16.456 kB`	`162 B` `48 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-alert` Alert	`93.534 kB` `22.497 kB`
`react-avatar` Avatar	`57.754 kB` `15.041 kB`
`react-avatar` AvatarGroup	`15.632 kB` `6.258 kB`
`react-avatar` AvatarGroupItem	`73.968 kB` `19.552 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`64.855 kB` `17.852 kB`
`react-components` react-components: FluentProvider & webLightTheme	`36.086 kB` `11.9 kB`
`react-persona` Persona	`64.675 kB` `16.968 kB`
`react-portal-compat` PortalCompatProvider	`6.446 kB` `2.186 kB`
`react-table` DataGrid	`149.871 kB` `41.174 kB`
`react-table` Table (Primitives only)	`44.348 kB` `12.347 kB`
`react-table` Table as DataGrid	`132.427 kB` `33.748 kB`
`react-table` Table (Selection only)	`78.201 kB` `19.143 kB`
`react-table` Table (Sort only)	`77.531 kB` `18.953 kB`
`react-tags` Tag	`21.99 kB` `7.887 kB`

_{🤖 This report was generated against c8bcfef7d957b2e251875c216aabac3ece374034}

fabricteam · 2023-05-22T04:08:12Z

Perf Analysis (`@fluentui/react-components`)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
FluentProviderWithTheme	virtual-rerender	66	56	10	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	551	564	5000
Button	mount	284	278	5000
Field	mount	1008	989	5000
FluentProvider	mount	637	615	5000
FluentProviderWithTheme	mount	80	77	10
FluentProviderWithTheme	virtual-rerender	66	56	10	Possible regression
FluentProviderWithTheme	virtual-rerender-with-unmount	66	67	10
InfoButton	mount	17	9	5000
MakeStyles	mount	856	1008	50000
Persona	mount	1567	1494	5000
SpinButton	mount	1246	1220	5000

apps/vr-tests-react-components/src/stories/Positioning.stories.tsx

layershifter · 2023-05-22T09:19:39Z

@ling1726 can you please review this PR? 🙏

apps/vr-tests-react-components/src/stories/Positioning.stories.tsx

...onents/react-components/stories/Concepts/Positioning/PositioningDisableTransform.stories.tsx

packages/react-components/react-popover/src/components/Popover/Popover.cy.tsx

packages/react-components/react-positioning/src/utils/writeContainerupdates.ts

…ransform-popover

ling1726 · 2023-05-24T07:03:33Z

@flora8984461 are you ready to publish this PR?

…ransform-popover

layershifter · 2023-05-24T14:32:40Z

/azp run

azure-pipelines · 2023-05-24T14:33:05Z

Azure Pipelines successfully started running 4 pipeline(s).

flora8984461 · 2023-05-24T14:36:07Z

Thank you! @ling1726 I published it.

I have a question regarding vr test. It says you are using Screener, but in the code in apps\vr-tests-react-components I see StoryWright.

I wanted to run it locally, I did yarn vr:build and yarn vr:test. From local I can't tell if it's passing or not, and have some odd errors. Is it flakey locally or am I missing anything? How does it behave in ci?

I am also interested in using StoryWright for our project, would really appreciate your thoughts about this tool😊. And I can't find it in PlayWright's doc page. 😅

cc @layershifter

ling1726 · 2023-05-25T07:19:04Z

Thank you! @ling1726 I published it.

I have a question regarding vr test. It says you are using Screener, but in the code in apps\vr-tests-react-components I see StoryWright.

I wanted to run it locally, I did yarn vr:build and yarn vr:test. From local I can't tell if it's passing or not, and have some odd errors. Is it flakey locally or am I missing anything? How does it behave in ci?

@flora8984461 yeah we moved away from screener recently so the documentation is out of date. However your new screenshots can be viewed in the PR here #27929 (comment)

Normally the local test should run but I would say that I haven't used it in a while so am not sure about the errors

ling1726 · 2023-05-25T14:00:41Z

/azp run

azure-pipelines · 2023-05-25T14:01:40Z

Azure Pipelines successfully started running 4 pipeline(s).

msft-fluent-ui-bot · 2023-05-26T07:38:12Z

🎉@fluentui/fluent2-theme@v8.107.13 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-26T07:38:15Z

🎉@fluentui/react-charting@v5.16.33 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-26T07:38:21Z

🎉@fluentui/react-date-time@v8.7.88 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-26T07:38:24Z

🎉@fluentui/react-icons-mdl2-branded@v1.2.43 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-26T07:38:27Z

🎉@fluentui/react-icons-mdl2@v1.3.42 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-26T07:38:33Z

🎉@fluentui/react-monaco-editor@v1.7.90 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-26T07:38:36Z

🎉@fluentui/theme-samples@v8.7.88 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-26T07:38:39Z

🎉@fluentui/azure-themes@v8.6.9 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-26T07:38:42Z

🎉@fluentui/common-styles@v1.2.27 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-26T07:38:45Z

🎉@fluentui/cra-template@v8.4.89 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-26T07:38:48Z

🎉@fluentui/font-icons-mdl2@v8.5.18 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-26T07:38:51Z

🎉@fluentui/foundation-legacy@v8.2.38 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-26T07:38:54Z

🎉@fluentui/react-cards@v0.205.88 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-26T07:39:00Z

🎉@fluentui/react-docsite-components@v8.12.13 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-26T07:39:07Z

🎉@fluentui/react-experiments@v8.14.83 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-26T07:39:10Z

🎉@fluentui/react-file-type-icons@v8.8.18 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-26T07:39:13Z

🎉@fluentui/react-focus@v8.8.24 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-26T07:39:16Z

🎉@fluentui/react-icon-provider@v1.3.39 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-26T07:39:21Z

🎉@fluentui/react@v8.109.7 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-31T07:46:27Z

🎉@fluentui/react-popover@v9.6.0 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-31T07:46:51Z

🎉@fluentui/react-positioning@v9.6.0 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-31T07:50:33Z

🎉@fluentui/react-components@v9.21.0 has been released which incorporates this pull request.:tada:

Handy links:

Yi Liu added 3 commits May 21, 2023 20:26

Allow disable transform for positioning

14cdf75

Add change file

bc87234

Add reference to comment in storybook doc

7a330d5

msft-fluent-ui-bot assigned TristanWatanabe May 22, 2023

flora8984461 commented May 22, 2023

View reviewed changes

...onents/react-components/stories/Concepts/Positioning/PositioningDisableTransform.stories.tsx Outdated Show resolved Hide resolved

fabricteam reviewed May 22, 2023

View reviewed changes

apps/vr-tests-react-components/src/stories/Positioning.stories.tsx Show resolved Hide resolved