Table/DataGrid: fix visuals for overflow #28940

george-cz · 2023-08-22T10:52:46Z

Previous Behavior

Previously when Table or DataGrid component was inside a component which didn't have enough space for it and it would overflow, the borders on the rows didn't quite reach to the end, since the table was technically the width of the parent. This resulted in a UI like this:

New Behavior

The new behavior allows for a parent with overflow: auto and makes sure the rows always reach the end of the table as they should:

Related Issue(s)

Fixes [Bug]: Table/DataGrid when overflows parent, the borders don't fill the whole table #28941
Fixes [Bug]: DataGrid / Table: Row border does not extend horizontally when rows overflow horizontally #27570

fabricteam · 2023-08-22T11:04:56Z

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

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

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	629	589	5000
Button	mount	305	317	5000
Field	mount	1131	1124	5000
FluentProvider	mount	645	669	5000
FluentProviderWithTheme	mount	84	86	10
FluentProviderWithTheme	virtual-rerender	60	66	10	Possible regression
FluentProviderWithTheme	virtual-rerender-with-unmount	65	68	10
InfoButton	mount	18	15	5000
MakeStyles	mount	870	853	50000
Persona	mount	1716	1664	5000
SpinButton	mount	1376	1359	5000

codesandbox-ci · 2023-08-22T11:05:58Z

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 e3d9ace:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration
Fluent UI v9 DataGrid	Issue #27570

fabricteam · 2023-08-22T11:07:11Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-table` DataGrid	`152.77 kB` `42.242 kB`	`152.991 kB` `42.325 kB`	`221 B` `83 B`
`react-table` Table as DataGrid	`126.224 kB` `33.612 kB`	`126.247 kB` `33.617 kB`	`23 B` `5 B`
`react-table` Table (Selection only)	`71.594 kB` `18.91 kB`	`71.617 kB` `18.915 kB`	`23 B` `5 B`
`react-table` Table (Sort only)	`70.213 kB` `18.511 kB`	`70.236 kB` `18.516 kB`	`23 B` `5 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-components` react-components: Button, FluentProvider & webLightTheme	`66.614 kB` `18.512 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`203.786 kB` `57.921 kB`
`react-components` react-components: FluentProvider & webLightTheme	`37.787 kB` `12.387 kB`
`react-portal-compat` PortalCompatProvider	`6.48 kB` `2.203 kB`
`react-table` Table (Primitives only)	`39.638 kB` `12.129 kB`

_{🤖 This report was generated against f0afca3be87768300ce58c4629fbf135f23699ff}

size-auditor · 2023-08-22T11:14:30Z

Asset size changes

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

Baseline commit: f0afca3be87768300ce58c4629fbf135f23699ff (build)

packages/react-components/react-table/src/hooks/useTableColumnSizing.tsx

change/@fluentui-react-table-1a06bc91-0c0f-464f-a1c3-4523427d45a1.json

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

* master: (23 commits) feat: add closeOnIframeFocus prop to Popover (microsoft#28881) chore: updates .devcontainer to follow new format (microsoft#28990) Line Chart and Area Chart - Component tests (microsoft#28235) applying package updates 28576 small button is using 3px border radius (microsoft#28589) In PeoplePicker, we can now use arrow keys to move cursor around microsoft#28655 (microsoft#28975) chore: Migrate bot config to yml (microsoft#28981) fix(react-card): CardHeader grid layout ignoring line-height of content (microsoft#28968) fix(react-tags-preview): tag with secondary text has no top border under windows high contrast (microsoft#28963) applying package updates feat(Stack): Add deprecated flag to render null when receiving a falsy value (microsoft#28978) feat(react-infobutton): Add inline prop to InfoButton and make it inline by default (microsoft#28605) fix(Dialog): Add displayName for dialog footer and content (microsoft#28939) Revert "Keytips: Align keytipData with visible instance for dupes" (microsoft#28977) Vertical stacked bar chart - Component tests (microsoft#28594) docs: update drawer spec to be inline with changes to component (microsoft#28934) Table/DataGrid: fix visuals for overflow (microsoft#28940) Focus indicator bug in bar charts (microsoft#28414) Pie chart focus spacing (microsoft#28504) applying package updates ...

* master: (24 commits) feat(react-motion): add useMotion hook (microsoft#28699) feat: add closeOnIframeFocus prop to Popover (microsoft#28881) chore: updates .devcontainer to follow new format (microsoft#28990) Line Chart and Area Chart - Component tests (microsoft#28235) applying package updates 28576 small button is using 3px border radius (microsoft#28589) In PeoplePicker, we can now use arrow keys to move cursor around microsoft#28655 (microsoft#28975) chore: Migrate bot config to yml (microsoft#28981) fix(react-card): CardHeader grid layout ignoring line-height of content (microsoft#28968) fix(react-tags-preview): tag with secondary text has no top border under windows high contrast (microsoft#28963) applying package updates feat(Stack): Add deprecated flag to render null when receiving a falsy value (microsoft#28978) feat(react-infobutton): Add inline prop to InfoButton and make it inline by default (microsoft#28605) fix(Dialog): Add displayName for dialog footer and content (microsoft#28939) Revert "Keytips: Align keytipData with visible instance for dupes" (microsoft#28977) Vertical stacked bar chart - Component tests (microsoft#28594) docs: update drawer spec to be inline with changes to component (microsoft#28934) Table/DataGrid: fix visuals for overflow (microsoft#28940) Focus indicator bug in bar charts (microsoft#28414) Pie chart focus spacing (microsoft#28504) ...

* master: (26 commits) chore: Make triage bot add needs triage label to new issues (microsoft#28994) fix(react-tags-preview): use regular icon for dismiss (microsoft#28958) feat(react-motion): add useMotion hook (microsoft#28699) feat: add closeOnIframeFocus prop to Popover (microsoft#28881) chore: updates .devcontainer to follow new format (microsoft#28990) Line Chart and Area Chart - Component tests (microsoft#28235) applying package updates 28576 small button is using 3px border radius (microsoft#28589) In PeoplePicker, we can now use arrow keys to move cursor around microsoft#28655 (microsoft#28975) chore: Migrate bot config to yml (microsoft#28981) fix(react-card): CardHeader grid layout ignoring line-height of content (microsoft#28968) fix(react-tags-preview): tag with secondary text has no top border under windows high contrast (microsoft#28963) applying package updates feat(Stack): Add deprecated flag to render null when receiving a falsy value (microsoft#28978) feat(react-infobutton): Add inline prop to InfoButton and make it inline by default (microsoft#28605) fix(Dialog): Add displayName for dialog footer and content (microsoft#28939) Revert "Keytips: Align keytipData with visible instance for dupes" (microsoft#28977) Vertical stacked bar chart - Component tests (microsoft#28594) docs: update drawer spec to be inline with changes to component (microsoft#28934) Table/DataGrid: fix visuals for overflow (microsoft#28940) ...

Table/DataGrid: fix visuals for overflow

f0afa75

george-cz requested a review from a team as a code owner August 22, 2023 10:52

george-cz commented Aug 22, 2023

View reviewed changes

packages/react-components/react-table/src/hooks/useTableColumnSizing.tsx Show resolved Hide resolved

fabricteam reviewed Aug 22, 2023

View reviewed changes

change/@fluentui-react-table-1a06bc91-0c0f-464f-a1c3-4523427d45a1.json Show resolved Hide resolved

only use fit-content for resizable columns

3cc1511

george-cz requested a review from a team as a code owner August 22, 2023 14:06

george-cz added 6 commits August 22, 2023 16:07

props order

1e674c3

fix storybook examples

8da7b10

formatting

2e9c2fd

fix missing default state

dfe5a74

fix unit tests

a26d800

Merge branch 'master' into table-overflow-border-fix

9e805d8

ling1726 reviewed Aug 23, 2023

View reviewed changes

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

ling1726 approved these changes Aug 23, 2023

View reviewed changes

dashed border in vr test

e3d9ace

george-cz merged commit 0bd698a into microsoft:master Aug 24, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Table/DataGrid: fix visuals for overflow #28940

Table/DataGrid: fix visuals for overflow #28940

Uh oh!

george-cz commented Aug 22, 2023 •

edited by ling1726

Loading

Uh oh!

fabricteam commented Aug 22, 2023 •

edited

Loading

Uh oh!

codesandbox-ci bot commented Aug 22, 2023 •

edited

Loading

Uh oh!

fabricteam commented Aug 22, 2023 •

edited

Loading

Uh oh!

size-auditor bot commented Aug 22, 2023 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Table/DataGrid: fix visuals for overflow #28940

Table/DataGrid: fix visuals for overflow #28940

Uh oh!

Conversation

george-cz commented Aug 22, 2023 • edited by ling1726 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Previous Behavior

New Behavior

Related Issue(s)

Uh oh!

fabricteam commented Aug 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

codesandbox-ci bot commented Aug 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Aug 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

size-auditor bot commented Aug 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

george-cz commented Aug 22, 2023 •

edited by ling1726

Loading

fabricteam commented Aug 22, 2023 •

edited

Loading

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

codesandbox-ci bot commented Aug 22, 2023 •

edited

Loading

fabricteam commented Aug 22, 2023 •

edited

Loading

size-auditor bot commented Aug 22, 2023 •

edited

Loading