-
Notifications
You must be signed in to change notification settings - Fork 2.7k
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
feat: noNativeElements
renders table with flex layout
#24913
Conversation
Native `display: table` is great for column alignment and simplifies column sizing. However, native table layout is not very virtualization friendly and does cannot handle any non-compliant element in the markup. For virtualization and other cases that involve non-compliant table elements in markup, there is a `layoutType` prop with the `native`and `flex` layouts. Flex layout is what was used before microsoft#24762 with fixes to column alignment for long content.
📊 Bundle size report
Unchanged fixtures
|
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 ad8744d:
|
Asset size changesSize Auditor did not detect a change in bundle size for any component! Baseline commit: 3b48ff5d92433635997aa69a59b138ec273172ea (build) |
Perf Analysis (
|
Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
---|---|---|---|---|---|
Avatar | mount | 1323 | 1356 | 5000 | |
Button | mount | 966 | 940 | 5000 | |
FluentProvider | mount | 1593 | 1600 | 5000 | |
FluentProviderWithTheme | mount | 634 | 638 | 10 | |
FluentProviderWithTheme | virtual-rerender | 596 | 589 | 10 | |
FluentProviderWithTheme | virtual-rerender-with-unmount | 634 | 643 | 10 | |
MakeStyles | mount | 1917 | 1875 | 50000 | |
SpinButton | mount | 2551 | 2511 | 5000 |
layoutType
prop to Table with flex optionnoNativeElements
renders table with flex layout
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
const layoutStyles = { | ||
table: useTableLayoutStyles(), | ||
flex: useFlexLayoutStyles(), | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: not sure that I understand the need to create an object there
const useTableLayoutStyles = makeStyles({ | ||
root: { | ||
display: 'table-cell', | ||
verticalAlign: 'middle', | ||
}, | ||
}); | ||
|
||
const useFlexLayoutStyles = makeStyles({ | ||
root: { | ||
display: 'flex', | ||
minWidth: '0px', | ||
alignItems: 'center', | ||
...shorthands.flex(1, 1, '0px'), | ||
}, | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can it be just this ⬇️?
const useLayoutStyles = makeStyles({
table: {
display: 'table-cell',
verticalAlign: 'middle',
},
flex: {
display: 'flex',
minWidth: '0px',
alignItems: 'center',
...shorthands.flex(1, 1, '0px'),
},
});
) * feat: Adds `layoutType` prop to Table with flex option Native `display: table` is great for column alignment and simplifies column sizing. However, native table layout is not very virtualization friendly and does cannot handle any non-compliant element in the markup. For virtualization and other cases that involve non-compliant table elements in markup, there is a `layoutType` prop with the `native`and `flex` layouts. Flex layout is what was used before microsoft#24762 with fixes to column alignment for long content. * update test and md * vr tests should test both layout types * changefiles * noNativeElements decides layout * update changefile
Native
display: table
is great for column alignment and simplifies column sizing. However, native table layout is not very virtualization friendly and does cannot handle any non-compliant element in the markup.For virtualization and other cases that involve non-compliant table elements in markup,
noNativeElements
now renders the table also in a flex layout.Flex layout is what was used before #24762 with fixes to column alignment for long content.
The recommended usage of table should be native semantic elements. This is because of:
table
elements are the most accessibledisplay: table
is simply faster at rendering tables thandisplay; flex
we did benchmarks on this here.