feat(DataTable): option to show overflow menu on hover #5822
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
This change introduces `overflowMenuOnHover` prop to `<DataTable>` that
determines whether or not to show overflow menu on hover, by changing
CSS class of `<Table>` as follows:
* `overflowMenuOnHover={true}` _unsets_
`bx--data-table--visible-overflow-menu`
* `overflowMenuOnHover={false}` _sets_
`bx--data-table--visible-overflow-menu`
That CSS class changes the behavior of overflow menu in
`<TableCell className="bx--table-column-menu">`; The former above shows
overflow menu only on hover, the latter above shows overflow menu
always.
Though our latest design dictates that showing overflow menu on hover
should be optional, this change sets `overflowMenuOnHover={true}` as the
default. This is because of the following reasons:
1. `<DataTable>` has never set `bx--data-table--visible-overflow-menu`
before and thus setting it by default will be a breaking change
2. Showing overflow menu always can alternately be (and has been in our
stories) achieved by _not_ setting
`className="bx--table-column-menu"` to `<TableCell>`
Fixes carbon-design-system#5804.
asudoh
requested review from
emyarod,
a team and
laurenmrice
and removed request for
a team
ghost
requested review from
|
Deploy preview for carbon-elements ready! Built with commit 846fc3a |
|
Deploy preview for carbon-components-react ready! Built with commit 846fc3a https://deploy-preview-5822--carbon-components-react.netlify.com |
emyarod
approved these changes
Apr 8, 2020
laurenmrice
requested changes
Apr 8, 2020
There was a problem hiding this comment.
Yes to what @emyarod said. The overflows should be centered vertically within each row.
|
Thanks you for reviewing @emyarod @laurenmrice - Fixed. |
laurenmrice
approved these changes
Apr 9, 2020
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.
This change introduces
overflowMenuOnHoverprop to<DataTable>that determines whether or not to show overflow menu on hover, by changing CSS class of<Table>as follows:overflowMenuOnHover={true}unsetsbx--data-table--visible-overflow-menuoverflowMenuOnHover={false}setsbx--data-table--visible-overflow-menuThat CSS class changes the behavior of overflow menu in
<TableCell className="bx--table-column-menu">; The former above shows overflow menu only on hover, the latter above shows overflow menu always.Though our latest design dictates that showing overflow menu on hover should be optional, this change sets
overflowMenuOnHover={true}as the default. This is because of the following reasons:<DataTable>has never setbx--data-table--visible-overflow-menubefore and thus setting it by default will be a breaking changeclassName="bx--table-column-menu"to<TableCell>Fixes #5804.
Changelog
New
overflowMenuOnHoverprop to<DataTable>Testing / Reviewing
Testing should make sure
<DataTable>with overflow menu isn't broken.