Skip to content

Conversation

ericsoderberghp
Copy link
Contributor

What does this PR do?

Changed DataTable to not default to height: 100%;

I was noticing odd layout behavior across a variety of screen resolutions with DataTable and traced it down to all DataTables having height: 100%; causing them not to get laid out correctly. In many circumstances this wouldn't be noticed. It also explain the need at times to wrap DataTable in a Box to get it to behave better.

Where should the reviewer start?

one line change

What testing has been done on this PR?

  • manual testing in scenarios I was seeing problems in, particularly in grommet-designer using the new <Data /> component
  • review storybook stories

How should this be manually tested?

evaluate storybook stories at various screen resolutions

Do Jest tests follow these best practices?

no test changes

Screenshots (if appropriate)

prior Data -> DataTable story:
Screenshot 2023-01-19 at 12 14 09 PM

new Data -> DataTable story:
Screenshot 2023-01-19 at 12 14 51 PM

Do the grommet docs need to be updated?

no

Should this PR be mentioned in the release notes?

yes

Is this change backwards compatible or is it a breaking change?

If fill is set then there is no change. If fill is not set, then some of the workarounds to get the table to layout correctly will not be needed anymore. There could be visual changes at certain resolutions but I would argue those are defects.

@jcfilben
Copy link
Collaborator

I'm having a hard time seeing the difference between the two screenshots in the PR description

@ericsoderberghp
Copy link
Contributor Author

I'm having a hard time seeing the difference between the two screenshots in the PR description

The rows are different heights. In the prior version, the table would stretch to 100% height, causing the rows to stretch out taller. In the newer version, the rows control their own height and they remain so.

@jcfilben
Copy link
Collaborator

The rows are different heights. In the prior version, the table would stretch to 100% height, causing the rows to stretch out taller. In the newer version, the rows control their own height and they remain so.

Ah okay I see it now, thanks

Copy link
Collaborator

@jcfilben jcfilben left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I checked the DataTable stories in storybook and everything looked fine there. I think once this gets merged maybe we can just check the examples on the design system site to make sure everything looks okay there too

Copy link
Collaborator

@taysea taysea left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had the same thought as Jessica re: using Design System site to observe any unexpected changes. I'm comfortable moving forward for now.

@ericsoderberghp ericsoderberghp merged commit 06965ef into master Jan 20, 2023
@ericsoderberghp ericsoderberghp deleted the fix/datatable-height branch January 20, 2023 17:40
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