feat: Table toolbar v10 #2247
feat: Table toolbar v10 #2247
Conversation
|
Deploy preview for carbon-components-react ready! Built with commit 7fc03fa https://deploy-preview-2247--carbon-components-react.netlify.com |
vpicone
added
status: ready for review 👀
status: WIP 👩💻
and removed
status: ready for review 👀
status: visual review 🔍
labels
…table-toolbar-v10
This commit adds all of the new modifiers and removes the unusued ones. All of the datatable stories have been updated to reflect new markup and to expose knobs to adjust shared modifiers. The dynamic content story was updated to use the new menu system. This also adds support for styles that have not been added yet (row size).
vpicone
added
status: visual review 🔍
status: ready for review 👀
and removed
status: WIP 👩💻
labels
|
@asudoh fixed thank you! |
|
Thanks @vpicone for your quick update! Would you update the snapshot? |
…table-toolbar-v10
…-components-react into table-toolbar-v10
|
@dakahn The TableToolBarSearch is a weird component (button-div encapsulating/hiding an input). I'm happy with the keyboard navigation but definitely open to an a11y insight. I played with having the div be a button, but styling get really wild with an input nested in a button. As a result, I needed to add a tabindex="0" to make the div tabable and direct focus to the input. |
There was a problem hiding this comment.
@vpicone Thanks for the ping! 🏄🏽♂️
Testing in latest Chrome on macOS, and Windows 10 on IE11/latest Chrome are five points of interest:
- inadequate/inconsistent focus state on dropdown menu button on click
- when dropdown is activated via keyboard the first menuItem should receive focus
- there is no grouping element telling a user they're currently interacting with a landmarked group data table toolbar. Making skipping to table content/returning to toolbar frustrating (in the example the unordered list is our sidebar)
- when the user inputs a filter/search there is no feedback indicating the table has been updated as a live region
- Funny lookin' business on IE11. Resizing DataTable and cutoff search bar focus style
This updates the stories so that they only use the feature they are showcasing. This will prevent users from bringing in DataTable features that they don't need. A "kitchen sink" data table might be useful as well.
@dakahn I'm going to make a new issue for the first two incomplete tasks since I believe they're inherent to the overflow menu itself and might require breaking changes. If you don't mind making an issue for the ie11 one, I don't have ie11 going atm so can't reproduce or debug |
|
It's looking really good! I noticed the IE11 bug that @dakahn was talking about is also happening in Chrome when you type in the search bar. |
|
@jnm2377 the size of the table is based off of the wrapper width and the contents. Since we don't define a wrapper here, the table is only stretched by the width of its rows. When there's no content, there's no width (up until the min-width) Search isn't working in vanilla, but if you delete the tr you can see the same thing happening here: https://www.carbondesignsystem.com/components/data-table/code |
Co-Authored-By: vpicone <[email protected]>
Received the following linting error when attempting to define tabindex on the section component: `tabIndex` should only be declared on interactive elements.eslint(jsx-a11y/no-noninteractive-tabindex)
There was a problem hiding this comment.
Toolbar is working as expected 👍 I think if there are specific a11y concerns regarding other components used for the toolbar, it would make sense to open a separate PR fixing that specific component just so that we can keep the scope of this PR to just data table.
|
LORD SAVE ME FROM THESE SNAPSHOTS |
Closes IBM/carbon-components-react#2166
Add support for new v10 features
TODO:
Changelog
New
Changed
Removed