[EuiListGroupItem] Render extraAction button when showToolTip is true #7159
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
nickpeihl
changed the title
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_7159/ |
+ grab the disabled test/snapshot while we're here too
cee-chen
approved these changes
Sep 6, 2023
There was a problem hiding this comment.
Thanks so much for finding and fixing this bug @nickpeihl! ❤️🔥
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_7159/ |
💚 Build Succeeded
History
|
jbudz
added a commit
to elastic/kibana
that referenced
this pull request
Sep 18, 2023
EUI `88.2.0` ➡️ `88.3.0` ## [`88.3.0`](https://github.com/elastic/eui/tree/v88.3.0) - `EuiGlobalToastList` now shows a "Clear all" button by default once above a certain number of toasts (defaults to 3). This threshold is configurable with the `showClearAllButtonAt` prop ([#7111](elastic/eui#7111)) - Added an optional `onClearAllToasts` callback to `EuiGlobalToastList` ([#7111](elastic/eui#7111)) - Added the `value`, `onChange`, and `onCancel` props that allow `EuiInlineEdit` to be used as a controlled component ([#7157](elastic/eui#7157)) - Added `grabOmnidirectional`, `transitionLeftIn`, `transitionLeftOut`, `transitionTopIn`, and `transitionTopOut` icon glyphs. ([#7168](elastic/eui#7168)) **Bug fixes** - Fixed `EuiInlineEdit` components to correctly spread `...rest` attributes to the parent wrapper ([#7157](elastic/eui#7157)) - Fixed `EuiListGroupItem` to correctly render the `extraAction` button when `showToolTip` is also passed ([#7159](elastic/eui#7159)) **Dependency updates** - Updated `@hello-pangea/dnd` to v16.3.0 ([#7125](elastic/eui#7125)) - Updated `@types/lodash` to v4.14.198 ([#7126](elastic/eui#7126)) **Accessibility** - `EuiAccordion` now correctly respects reduced motion settings ([#7161](elastic/eui#7161)) - `EuiAccordion` now shows a focus outline to keyboard users around its revealed children on open ([#7161](elastic/eui#7161)) **CSS-in-JS conversions** - Converted `EuiSplitPanel` to Emotion ([#7172](elastic/eui#7172))⚠️ As a quick heads up, serverless tests appear to have been extremely flake/failure-prone the last couple weeks, particularly Cypress tests. We've evaluated the listed failures and fixed ones that were related to changes in this PR, and we're relatively confident the remaining failures are not related to changes from EUI. Please let us know if you think this is not the case. --------- Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Cee Chen <constance.chen@elastic.co> Co-authored-by: Jon <jon@elastic.co>
jbudz
added a commit
to elastic/kibana
that referenced
this pull request
Sep 20, 2023
⚠️ NOTE: This PR is a copy of #166292 (which was reverted due to failing Storybook builds). This is the same exact PR but with Storybook building fixed. --- EUI `88.2.0` ➡️ `88.3.0` ## [`88.3.0`](https://github.com/elastic/eui/tree/v88.3.0) - `EuiGlobalToastList` now shows a "Clear all" button by default once above a certain number of toasts (defaults to 3). This threshold is configurable with the `showClearAllButtonAt` prop ([#7111](elastic/eui#7111)) - Added an optional `onClearAllToasts` callback to `EuiGlobalToastList` ([#7111](elastic/eui#7111)) - Added the `value`, `onChange`, and `onCancel` props that allow `EuiInlineEdit` to be used as a controlled component ([#7157](elastic/eui#7157)) - Added `grabOmnidirectional`, `transitionLeftIn`, `transitionLeftOut`, `transitionTopIn`, and `transitionTopOut` icon glyphs. ([#7168](elastic/eui#7168)) **Bug fixes** - Fixed `EuiInlineEdit` components to correctly spread `...rest` attributes to the parent wrapper ([#7157](elastic/eui#7157)) - Fixed `EuiListGroupItem` to correctly render the `extraAction` button when `showToolTip` is also passed ([#7159](elastic/eui#7159)) **Dependency updates** - Updated `@hello-pangea/dnd` to v16.3.0 ([#7125](elastic/eui#7125)) - Updated `@types/lodash` to v4.14.198 ([#7126](elastic/eui#7126)) **Accessibility** - `EuiAccordion` now correctly respects reduced motion settings ([#7161](elastic/eui#7161)) - `EuiAccordion` now shows a focus outline to keyboard users around its revealed children on open ([#7161](elastic/eui#7161)) **CSS-in-JS conversions** - Converted `EuiSplitPanel` to Emotion ([#7172](elastic/eui#7172)) --------- Co-authored-by: Bree Hall <briannajdhall@gmail.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Jon <jon@elastic.co>
delanni
pushed a commit
to delanni/kibana
that referenced
this pull request
Sep 21, 2023
⚠️ NOTE: This PR is a copy of elastic#166292 (which was reverted due to failing Storybook builds). This is the same exact PR but with Storybook building fixed. --- EUI `88.2.0` ➡️ `88.3.0` ## [`88.3.0`](https://github.com/elastic/eui/tree/v88.3.0) - `EuiGlobalToastList` now shows a "Clear all" button by default once above a certain number of toasts (defaults to 3). This threshold is configurable with the `showClearAllButtonAt` prop ([elastic#7111](elastic/eui#7111)) - Added an optional `onClearAllToasts` callback to `EuiGlobalToastList` ([elastic#7111](elastic/eui#7111)) - Added the `value`, `onChange`, and `onCancel` props that allow `EuiInlineEdit` to be used as a controlled component ([elastic#7157](elastic/eui#7157)) - Added `grabOmnidirectional`, `transitionLeftIn`, `transitionLeftOut`, `transitionTopIn`, and `transitionTopOut` icon glyphs. ([elastic#7168](elastic/eui#7168)) **Bug fixes** - Fixed `EuiInlineEdit` components to correctly spread `...rest` attributes to the parent wrapper ([elastic#7157](elastic/eui#7157)) - Fixed `EuiListGroupItem` to correctly render the `extraAction` button when `showToolTip` is also passed ([elastic#7159](elastic/eui#7159)) **Dependency updates** - Updated `@hello-pangea/dnd` to v16.3.0 ([elastic#7125](elastic/eui#7125)) - Updated `@types/lodash` to v4.14.198 ([elastic#7126](elastic/eui#7126)) **Accessibility** - `EuiAccordion` now correctly respects reduced motion settings ([elastic#7161](elastic/eui#7161)) - `EuiAccordion` now shows a focus outline to keyboard users around its revealed children on open ([elastic#7161](elastic/eui#7161)) **CSS-in-JS conversions** - Converted `EuiSplitPanel` to Emotion ([elastic#7172](elastic/eui#7172)) --------- Co-authored-by: Bree Hall <briannajdhall@gmail.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Jon <jon@elastic.co>
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.
Summary
Renders the
extraActionbutton in theEuiListGroupItemwhenshowToolTip === true.When providing a list of links in an
EuiListGroupI wanted to show which links open in a new tab by adding thepopouticon, similar to external links inEuiLink. However, theextraActionbutton was not rendering when theshowToolTipprop was included.Here is an example testing this PR where I am showing the links I'm creating with tooltips and the external icon indicator. Notice how the Dashboard links have tooltips and the first link can also show the extra action button. The second link does not include the
extraActionprop so the button is not rendered.extra-actions-with-tooltip.mp4
Using the extra action button to show that the link will pop open a new tab is maybe a bit of a hack. The extra action button accomplishes the same effect as clicking the link. But I do prefer how the button is still visible while the text may be truncated since users can change the size of the links panel on the dashboard.
truncated-with-tooltips.mp4
QA
Remove or strikethrough items that do not apply to your PR.
General checklist