diff --git a/CHANGELOG.md b/CHANGELOG.md index 72b427dcde3..910a34fab9c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,19 +1,24 @@ ## [`main`](https://github.com/elastic/eui/tree/main) -- Added `lettering` glyph to `EuiIcon` ([#5525](https://github.com/elastic/eui/pull/5525)) -- Updated the outline color in `euiCustomControlFocused` mixin to use -`$euiFocusRingColor` instead of `currentColor` ([#5479](https://github.com/elastic/eui/pull/5479)) - **[Beta]** Added `optimize` build as a lighter weight option more suited to prodcution environments ([#5527](https://github.com/elastic/eui/pull/5527)) +- Added `lettering` glyph to `EuiIcon` ([#5525](https://github.com/elastic/eui/pull/5525)) +- Updated the outline color in `euiCustomControlFocused` mixin to use `$euiFocusRingColor` instead of `currentColor` ([#5479](https://github.com/elastic/eui/pull/5479)) +- Added `betaBadgeTooltipProps` to `EuiKeyPadMenuItem` to extend the wrapping `EuiToolTip` ([#5541](https://github.com/elastic/eui/pull/5541)) **Bug fixes** - Updated the outline color in `euiCustomControlFocused` mixin to use `$euiFocusRingColor` instead of `currentColor` ([#5479](https://github.com/elastic/eui/pull/5479)) - Fixed keyboard navigation in `EuiDataGrid` not fully scrolling cells into view ([#5515](https://github.com/elastic/eui/pull/5515)) +- Fixed `EuiKeyPadMenuItem` accessibility issue where there was a nested focusable element ([#5541](https://github.com/elastic/eui/pull/5541)) **Deprecations** - Deprecated `data-gridcell-id` from `EuiDataGrid` in favor of 4 new and more flexible props - `data-gridcell-column-id`, `data-gridcell-column-index`, `data-gridcell-row-index`, and `data-gridcell-visible-row-index` ([#5515](https://github.com/elastic/eui/pull/5515)) +**Breaking changes** + +- `EuiKeyPadMenuItem` now wraps itself with `EuiToolTip` when `betaBadgeLabel` is supplied forcing top element style props to be passed via `betaBadgeTooltipProps` ([#5541](https://github.com/elastic/eui/pull/5541)) + ## [`45.0.0`](https://github.com/elastic/eui/tree/v45.0.0) - Added virtulized rendering option to `EuiSelectableList` with `isVirtualized` ([#5521](https://github.com/elastic/eui/pull/5521)) diff --git a/src/components/badge/beta_badge/beta_badge.tsx b/src/components/badge/beta_badge/beta_badge.tsx index 5d04870c7e7..4034543f0d0 100644 --- a/src/components/badge/beta_badge/beta_badge.tsx +++ b/src/components/badge/beta_badge/beta_badge.tsx @@ -210,7 +210,7 @@ export const EuiBetaBadge: FunctionComponent = ({ content={tooltipContent} title={title || label} > - {content} + {content} ); } else { @@ -224,7 +224,7 @@ export const EuiBetaBadge: FunctionComponent = ({ content={tooltipContent} title={title || label} > - + {icon || label} diff --git a/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap b/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap index c2bda9567db..fe61b3b78cf 100644 --- a/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap +++ b/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap @@ -94,96 +94,140 @@ exports[`EuiKeyPadMenuItem is rendered 1`] = ` `; exports[`EuiKeyPadMenuItem props betaBadge renders 1`] = ` - + +`; + +exports[`EuiKeyPadMenuItem props betaBadge renders extra betaBadgeTooltipProps 1`] = ` + + + + `; exports[`EuiKeyPadMenuItem props betaBadge renders with betaBadgeIconType 1`] = ` - + + `; exports[`EuiKeyPadMenuItem props betaBadge renders with betaBadgeTooltipContent 1`] = ` - + + `; exports[`EuiKeyPadMenuItem props isDisabled renders with href 1`] = ` diff --git a/src/components/key_pad_menu/key_pad_menu_item.test.tsx b/src/components/key_pad_menu/key_pad_menu_item.test.tsx index 4cf36ebb623..1826bde2047 100644 --- a/src/components/key_pad_menu/key_pad_menu_item.test.tsx +++ b/src/components/key_pad_menu/key_pad_menu_item.test.tsx @@ -110,6 +110,21 @@ describe('EuiKeyPadMenuItem', () => { expect(component).toMatchSnapshot(); }); + + test('renders extra betaBadgeTooltipProps', () => { + const component = render( + + Icon + + ); + + expect(component).toMatchSnapshot(); + }); }); }); diff --git a/src/components/key_pad_menu/key_pad_menu_item.tsx b/src/components/key_pad_menu/key_pad_menu_item.tsx index 62c5bd6b128..bbfacc61631 100644 --- a/src/components/key_pad_menu/key_pad_menu_item.tsx +++ b/src/components/key_pad_menu/key_pad_menu_item.tsx @@ -29,6 +29,7 @@ import { getSecureRelForTarget, useGeneratedHtmlId } from '../../services'; import { IconType } from '../icon'; import { EuiRadio, EuiCheckbox } from '../form'; import { validateHref } from '../../services/security/href_validator'; +import { EuiToolTip, EuiToolTipProps } from '../tool_tip'; export type EuiKeyPadMenuItemCheckableType = 'single' | 'multi'; @@ -70,6 +71,12 @@ type EuiKeyPadMenuItemPropsForUncheckable = { * Add a description to the beta badge (will appear in a tooltip) */ betaBadgeTooltipContent?: ReactNode; + /** + * Extends the wrapping EuiToolTip props when `betaBadgeLabel` is provided + */ + betaBadgeTooltipProps?: Partial< + Omit + >; /** * Use `onClick` instead when the item is not `checkable` */ @@ -153,6 +160,7 @@ export const EuiKeyPadMenuItem: FunctionComponent = ({ betaBadgeLabel, betaBadgeTooltipContent, betaBadgeIconType, + betaBadgeTooltipProps, href, rel, target, @@ -225,25 +233,18 @@ export const EuiKeyPadMenuItem: FunctionComponent = ({ return (