-
Notifications
You must be signed in to change notification settings - Fork 6
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
[Resolve Errors] [Review Warnings] Tables - selectively enable borders based on if the table is overflowing #547
Comments
@shindigira @meissadia |
@natalia-fitzgerald What is the main UX aspect we are trying to convey? Having a certain borders styling which will emphasize that the table is overflowing and thus horizontal scrolling is enabled? |
Yes, that is the aspect that any visual styling difference would be meant to convey. This is why it isn't ideal when tables that don't require horizontal scrolling receive this bordered styling. Generally I prefer the open styling of no borders (standard table styling). Since our app has the need for some horizontal scrolling tables we end up with visual inconsistency on the page. I'd like to have the horizontal scroll styling (borders) affect only the tables that require it. |
closes #359 ## Changes - Adds ref forwarding - adds a `divRef` and a `tableRef` ## How to test - yarn test Table` Reference cfpb/sbl-frontend#547
…ow when overflowing (horizontal scrolling active) (#583) closes #547 Note: Requires cfpb/design-system-react#358 to be merged in first ## Changes - enhancement-style(tables): full borders will only show for overflowing - chore(tables): removed the need for `showTableBorders` ## How to test this PR 1. `yarn install` to get the latest DSR update with the table ref change 2. use [all-errors-warnings-no-syntax-errors.csv](https://github.com/cfpb/sbl-frontend/files/15444623/all-errors-warnings-no-syntax-errors.csv) or any register with multifield errors that causes overflowing/horizontal scrolling 3. Verify that tables without overflowing don't have full borders, tables that do have overflowing/horizontal scrolling have full borders ## Screenshot <img width="638" alt="Screenshot 2024-05-25 at 11 47 57 AM" src="https://github.com/cfpb/sbl-frontend/assets/13324863/635e1840-4ef4-4e86-8fc9-679f62cc3903">
useIsOverflowing
hook already added to the appThe text was updated successfully, but these errors were encountered: