Show horizontal table scrollbar only if necessary #200
Conversation
This file contains 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
solimant
requested changes
Feb 29, 2024
README.md
Outdated
Comment on lines
56
to
59
| This project uses [Storybook](http://storybook.js.org/) for testing the look and behavior of its UI components. | ||
|
|
||
| ```bash | ||
| yarn storybook | ||
| yarn start-storybook |
There was a problem hiding this comment.
Can we omit these changes? While they're good changes and I would generally accept them, they're out of scope for this PR.
There was a problem hiding this comment.
Hi again - I filed a separate PR for this: #204
solimant
requested changes
Mar 1, 2024
solimant
approved these changes
Mar 1, 2024
solimant
force-pushed
the
hide_table_scrollbar_when_not_needed
branch
from
8fba50e to
996c709
Compare
solimant
added a commit
that referenced
this pull request
Mar 1, 2024
Bump version to publish changes in #200
solimant
added a commit
that referenced
this pull request
Mar 1, 2024
Bump version to publish changes in #200
10 tasks
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.
Description
Main change
This pull request proposes setting the overflow-x CSS property of the table component to 'auto' to show the scrollbar only when it overflows its parent container.
Boyscouting
Furthermore, this pull request includes some boy-scouting changes to fix a link in the README and update the command to spin up the storybook to 'yarn start-storybook'. The old command, 'yarn storybook' did not work for me and, apparently, for many other people that asked about this on Slack. The answer to this question was usually: "Have you tried using 'start-storybook' instead? I took advantage of this pull request to update it.
Related Issue
N/A
Motivation and Context
Large tables were made scrollable back in 2021 by setting its overflow-x CSS property to 'scroll' 5343d38. While this indeed makes large tables scrollable, setting it to 'scroll' caused a horizontal scrollbar to appear also for smaller tables that do not require scrolling — see grey bar below table in screenshot. The aim of this pull request is to remove that scrollbar for small tables and show it only when necessary.
How Has This Been Tested?
This change was tested by manually opening a Parliament page with Google Chrome and updating the CSS property with its dev tools tab. See video demo below.
Screen.Recording.2024-02-28.at.23.33.15.mov
I tested the change locally with the storybook to assert that the change to src/Table/index.js updates the expected property.
Screenshots (if appropriate):
See above.
Types of changes
Checklist: