Fix DataTable flex and pagination issue #6501
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
britt6612
approved these changes
Nov 16, 2022
taysea
reviewed
Nov 18, 2022
| alignSelf="end" | ||
| // flex none needed for Pagination controls to stay in correct | ||
| // location and prevent overflow outside container | ||
| style={{ flex: 'none' }} |
There was a problem hiding this comment.
Is there any way this can be handled in paginationProps or something other than style?
There was a problem hiding this comment.
Good comment, I changed this to be flex={false} to avoid using the style prop.
| alignSelf="end" | ||
| // flex false is needed for Pagination controls to stay in | ||
| // correct location and prevent overflow outside container | ||
| flex={false} |
There was a problem hiding this comment.
Should Pagination set this itself internally? When would we ever want Pagination to flex?
There was a problem hiding this comment.
Good question. I couldn't think of a case where we want Pagination to flex. I went back and added flex={false} to Pagination
| <Pagination alignSelf="end" {...paginationProps} /> | ||
| <Pagination | ||
| alignSelf="end" | ||
| // flex false is needed for Pagination controls to stay in |
There was a problem hiding this comment.
Can probably remove this comment now.
There was a problem hiding this comment.
Oops yes forgot to remove that
ericsoderberghp
approved these changes
Nov 21, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What does this PR do?
Fixed an issue introduced in #6439 that caused cells to stretch (see screenshots). This PR reverts the change from #6439 but still fixes the original issue #6333.
Cells are stretching:
Fixed:
Where should the reviewer start?
What testing has been done on this PR?
Tested with the code from #6333 and tested with the MultiplePins story by adding
step={3}andpaginate.How should this be manually tested?
Do Jest tests follow these best practices?
screenis used for querying.userEventis used in place offireEvent.asFragment()is used for snapshot testing.Any background context you want to provide?
What are the relevant issues?
#6333
grommet/hpe-design-system#2949
Screenshots (if appropriate)
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?
Backwards compatible