Skip to content
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.

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

fix: Table row height is determined by cells #25717

Merged
merged 3 commits into from
Nov 21, 2022

Conversation

ling1726
Copy link
Member

@ling1726 ling1726 commented Nov 18, 2022

Table rows no longer determine the row height. The height styles are set of each table cell. This is actually necessary for flex layout so that the cells aren't smaller than the row.

Also fixes a bug where the header should have height 32px

Before

msedge_outVyG6LJd

After

msedge_yUPccgtioR

Addresses #25706

Table rows no longer determine the row height. The height styles are set
of each table cell. This allows for better flexibility and fixes a bug
where table header cell height should be different from other cells.

Addresses microsoft#25706
@ling1726 ling1726 closed this Nov 18, 2022
@ling1726 ling1726 reopened this Nov 18, 2022
@ling1726 ling1726 mentioned this pull request Nov 18, 2022
16 tasks
@size-auditor
Copy link

size-auditor bot commented Nov 18, 2022

Asset size changes

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

Baseline commit: d2a957c632af5cc995b4582a3b8e8f075139df7b (build)

@fabricteam
Copy link
Collaborator

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
62.951 kB
17.675 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
190.427 kB
53.087 kB
react-components
react-components: FluentProvider & webLightTheme
33.456 kB
11.029 kB
react-portal-compat
PortalCompatProvider
5.857 kB
1.978 kB
🤖 This report was generated against d2a957c632af5cc995b4582a3b8e8f075139df7b

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1264 1266 5000
Button mount 929 904 5000
FluentProvider mount 1475 1510 5000
FluentProviderWithTheme mount 595 572 10
FluentProviderWithTheme virtual-rerender 536 547 10
FluentProviderWithTheme virtual-rerender-with-unmount 582 573 10
MakeStyles mount 1957 1940 50000
SpinButton mount 2367 2327 5000

@fabricteam
Copy link
Collaborator

🕵 fluentuiv9 Open the Visual Regressions report to inspect the 146 screenshots

✅ There was 0 screenshots added, 0 screenshots removed, 1605 screenshots unchanged, 0 screenshots with different dimensions and 146 screenshots with visible difference.

unknown 146 screenshots
Image Name Diff(in Pixels) Image Type
Avatar Converged.size+active+badge.normal.chromium.png 8 Changed
Avatar Converged.size+active+ring-shadow.normal.chromium.png 14 Changed
Table flex - subtle selection.rest.chromium.png 13378 Changed
Table flex - subtle selection.rest.hover unselected row.chromium.png 13177 Changed
Table layout flex - cell actions.always visible - Dark Mode.chromium.png 25824 Changed
Table layout flex - cell actions.always visible - Dark Mode.hover row.chromium.png 27500 Changed
Table layout flex - cell actions.always visible - High Contrast.chromium.png 44035 Changed
Table layout flex - cell actions.always visible - High Contrast.hover row.chromium.png 64998 Changed
Table layout flex - cell actions.always visible - RTL.chromium.png 13575 Changed
Table layout flex - cell actions.always visible - RTL.hover row.chromium.png 13270 Changed
Table layout flex - cell actions.always visible.chromium.png 13577 Changed
Table layout flex - cell actions.always visible.hover row.chromium.png 13272 Changed
Table layout flex - cell actions.default - Dark Mode.chromium.png 25500 Changed
Table layout flex - cell actions.default - Dark Mode.hover row.chromium.png 27257 Changed
Table layout flex - cell actions.default - High Contrast.chromium.png 43557 Changed
Table layout flex - cell actions.default - High Contrast.hover row.chromium.png 64640 Changed
Table layout flex - cell actions.default - RTL.chromium.png 13220 Changed
Table layout flex - cell actions.default - RTL.hover row.chromium.png 13003 Changed
Table layout flex - cell actions.default.chromium.png 13222 Changed
Table layout flex - cell actions.default.hover row.chromium.png 13006 Changed
Table layout flex - cell actions.in header cell.chromium.png 13385 Changed
Table layout flex - cell actions.in header cell.hover row.chromium.png 13167 Changed
Table layout flex - headers.sortable - Dark Mode.chromium.png 25582 Changed
Table layout flex - headers.sortable - Dark Mode.hover header.chromium.png 25853 Changed
Table layout flex - headers.sortable - Dark Mode.press header.chromium.png 25570 Changed
Table layout flex - headers.sortable - High Contrast.chromium.png 43654 Changed
Table layout flex - headers.sortable - High Contrast.hover header.chromium.png 46811 Changed
Table layout flex - headers.sortable - High Contrast.press header.chromium.png 46811 Changed
Table layout flex - headers.sortable.chromium.png 13306 Changed
Table layout flex - headers.sortable.hover header.chromium.png 13282 Changed
Table layout flex - headers.sortable.press header.chromium.png 13866 Changed
Table layout flex.multiselect (checked) - brand - Dark Mode.chromium.png 24481 Changed
Table layout flex.multiselect (checked) - brand - High Contrast.chromium.png 52902 Changed
Table layout flex.multiselect (checked) - brand - RTL.chromium.png 13980 Changed
Table layout flex.multiselect (checked) - brand.chromium.png 13984 Changed
Table layout flex.multiselect (checked) - neutral - Dark Mode.chromium.png 23185 Changed
Table layout flex.multiselect (checked) - neutral - High Contrast.chromium.png 42669 Changed
Table layout flex.multiselect (checked) - neutral - RTL.chromium.png 14761 Changed
Table layout flex.multiselect (checked) - neutral.chromium.png 14764 Changed
Table layout flex.multiselect (mixed) - brand - Dark Mode.chromium.png 26267 Changed
Table layout flex.multiselect (mixed) - brand - High Contrast.chromium.png 78525 Changed
Table layout flex.multiselect (mixed) - brand - RTL.chromium.png 15871 Changed
Table layout flex.multiselect (mixed) - brand.chromium.png 15875 Changed
Table layout flex.multiselect (mixed) - neutral - Dark Mode.chromium.png 24366 Changed
Table layout flex.multiselect (mixed) - neutral - High Contrast.chromium.png 64391 Changed
Table layout flex.multiselect (mixed) - neutral - RTL.chromium.png 17327 Changed
Table layout flex.multiselect (mixed) - neutral.chromium.png 17330 Changed
Table layout flex.multiselect - Dark Mode.chromium.png 25746 Changed
Table layout flex.multiselect - High Contrast.chromium.png 44032 Changed
Table layout flex.multiselect - RTL.chromium.png 13515 Changed
Table layout flex.multiselect.chromium.png 13517 Changed
Table layout flex.primary cell.chromium.png 16494 Changed
Table layout flex.single select (checked) - Dark Mode.chromium.png 25715 Changed
Table layout flex.single select (checked) - High Contrast.chromium.png 43955 Changed
Table layout flex.single select (checked) - RTL.chromium.png 13523 Changed
Table layout flex.single select (checked) - brand - Dark Mode.chromium.png 26116 Changed
Table layout flex.single select (checked) - brand - High Contrast.chromium.png 76113 Changed
Table layout flex.single select (checked) - brand - RTL.chromium.png 14724 Changed
Table layout flex.single select (checked) - brand.chromium.png 14727 Changed
Table layout flex.single select (checked) - neutral - Dark Mode.chromium.png 24893 Changed
Table layout flex.single select (checked) - neutral - High Contrast.chromium.png 63635 Changed
Table layout flex.single select (checked) - neutral - RTL.chromium.png 15539 Changed
Table layout flex.single select (checked) - neutral.chromium.png 15541 Changed
Table layout flex.single select (checked).chromium.png 13525 Changed
Table layout flex.single select - Dark Mode.chromium.png 25661 Changed
Table layout flex.single select - High Contrast.chromium.png 43868 Changed
Table layout flex.single select - RTL.chromium.png 13415 Changed
Table layout flex.single select.chromium.png 13417 Changed
Table layout flex.size - medium - Dark Mode.chromium.png 25500 Changed
Table layout flex.size - medium - High Contrast.chromium.png 43557 Changed
Table layout flex.size - medium - RTL.chromium.png 13220 Changed
Table layout flex.size - medium.chromium.png 13222 Changed
Table layout flex.size - small.chromium.png 12890 Changed
Table layout flex.size - smaller.chromium.png 8161 Changed
Table layout table - cell actions.always visible - Dark Mode.chromium.png 25824 Changed
Table layout table - cell actions.always visible - Dark Mode.hover row.chromium.png 27500 Changed
Table layout table - cell actions.always visible - High Contrast.chromium.png 44035 Changed
Table layout table - cell actions.always visible - High Contrast.hover row.chromium.png 64998 Changed
Table layout table - cell actions.always visible - RTL.chromium.png 13575 Changed
Table layout table - cell actions.always visible - RTL.hover row.chromium.png 13270 Changed
Table layout table - cell actions.always visible.chromium.png 13577 Changed
Table layout table - cell actions.always visible.hover row.chromium.png 13272 Changed
Table layout table - cell actions.default - Dark Mode.chromium.png 25500 Changed
Table layout table - cell actions.default - Dark Mode.hover row.chromium.png 27257 Changed
Table layout table - cell actions.default - High Contrast.chromium.png 43557 Changed
Table layout table - cell actions.default - High Contrast.hover row.chromium.png 64640 Changed
Table layout table - cell actions.default - RTL.chromium.png 13220 Changed
Table layout table - cell actions.default - RTL.hover row.chromium.png 13003 Changed
Table layout table - cell actions.default.chromium.png 13222 Changed
Table layout table - cell actions.default.hover row.chromium.png 13006 Changed
Table layout table - cell actions.in header cell.chromium.png 13385 Changed
Table layout table - cell actions.in header cell.hover row.chromium.png 13167 Changed
Table layout table - headers.sortable - Dark Mode.chromium.png 25582 Changed
Table layout table - headers.sortable - Dark Mode.hover header.chromium.png 25853 Changed
Table layout table - headers.sortable - Dark Mode.press header.chromium.png 25570 Changed
Table layout table - headers.sortable - High Contrast.chromium.png 43654 Changed
Table layout table - headers.sortable - High Contrast.hover header.chromium.png 46811 Changed
Table layout table - headers.sortable - High Contrast.press header.chromium.png 46811 Changed
Table layout table - headers.sortable.chromium.png 13306 Changed
Table layout table - headers.sortable.hover header.chromium.png 13282 Changed
Table layout table - headers.sortable.press header.chromium.png 13866 Changed
Table layout table.multiselect (checked) - brand - Dark Mode.chromium.png 24481 Changed
Table layout table.multiselect (checked) - brand - High Contrast.chromium.png 52902 Changed
Table layout table.multiselect (checked) - brand - RTL.chromium.png 13980 Changed
Table layout table.multiselect (checked) - brand.chromium.png 13984 Changed
Table layout table.multiselect (checked) - neutral - Dark Mode.chromium.png 23185 Changed
Table layout table.multiselect (checked) - neutral - High Contrast.chromium.png 42669 Changed
Table layout table.multiselect (checked) - neutral - RTL.chromium.png 14761 Changed
Table layout table.multiselect (checked) - neutral.chromium.png 14764 Changed
Table layout table.multiselect (mixed) - brand - Dark Mode.chromium.png 26267 Changed
Table layout table.multiselect (mixed) - brand - High Contrast.chromium.png 78525 Changed
Table layout table.multiselect (mixed) - brand - RTL.chromium.png 15871 Changed
Table layout table.multiselect (mixed) - brand.chromium.png 15875 Changed
Table layout table.multiselect (mixed) - neutral - Dark Mode.chromium.png 24366 Changed
Table layout table.multiselect (mixed) - neutral - High Contrast.chromium.png 64391 Changed
Table layout table.multiselect (mixed) - neutral - RTL.chromium.png 17327 Changed
Table layout table.multiselect (mixed) - neutral.chromium.png 17330 Changed
Table layout table.multiselect - Dark Mode.chromium.png 25746 Changed
Table layout table.multiselect - High Contrast.chromium.png 44032 Changed
Table layout table.multiselect - RTL.chromium.png 13515 Changed
Table layout table.multiselect.chromium.png 13517 Changed
Table layout table.primary cell.chromium.png 16503 Changed
Table layout table.single select (checked) - Dark Mode.chromium.png 25715 Changed
Table layout table.single select (checked) - High Contrast.chromium.png 43955 Changed
Table layout table.single select (checked) - RTL.chromium.png 13523 Changed
Table layout table.single select (checked) - brand - Dark Mode.chromium.png 26116 Changed
Table layout table.single select (checked) - brand - High Contrast.chromium.png 76113 Changed
Table layout table.single select (checked) - brand - RTL.chromium.png 14724 Changed
Table layout table.single select (checked) - brand.chromium.png 14727 Changed
Table layout table.single select (checked) - neutral - Dark Mode.chromium.png 24893 Changed
Table layout table.single select (checked) - neutral - High Contrast.chromium.png 63635 Changed
Table layout table.single select (checked) - neutral - RTL.chromium.png 15539 Changed
Table layout table.single select (checked) - neutral.chromium.png 15541 Changed
Table layout table.single select (checked).chromium.png 13525 Changed
Table layout table.single select - Dark Mode.chromium.png 25661 Changed
Table layout table.single select - High Contrast.chromium.png 43868 Changed
Table layout table.single select - RTL.chromium.png 13415 Changed
Table layout table.single select.chromium.png 13417 Changed
Table layout table.size - medium - Dark Mode.chromium.png 25500 Changed
Table layout table.size - medium - High Contrast.chromium.png 43557 Changed
Table layout table.size - medium - RTL.chromium.png 13220 Changed
Table layout table.size - medium.chromium.png 13222 Changed
Table layout table.size - small.chromium.png 12890 Changed
Table layout table.size - smaller.chromium.png 8161 Changed
Table table - subtle selection.rest.chromium.png 13378 Changed
Table table - subtle selection.rest.hover unselected row.chromium.png 13177 Changed

@ling1726 ling1726 merged commit 3ca7917 into microsoft:master Nov 21, 2022
Hotell pushed a commit to Hotell/fluentui that referenced this pull request Feb 9, 2023
* fix: Table row height is determined by cells

Table rows no longer determine the row height. The height styles are set
of each table cell. This allows for better flexibility and fixes a bug
where table header cell height should be different from other cells.

Addresses microsoft#25706

* changefile

* update md
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants