Skip to content

[EuiKeyPadMenuItem] Moves beta badge tooltip props to a wrapping EuiToolTip #5541

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.

Sign up for GitHub

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

Merged
cchaos merged 5 commits into from
Jan 18, 2022
Merged

[EuiKeyPadMenuItem] Moves beta badge tooltip props to a wrapping EuiToolTip #5541

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
611495e
Idea: Move betaBadge tooltip contents to a EuiToolTip wrapper that wr…
Jan 14, 2022
b657a49
Added `betaBadgeTooltipProps` to allow extending the outer wrapper if…
Jan 14, 2022
b11b895
Merge remote-tracking branch '2_upstream/main' into keypad_beta
Jan 18, 2022
c526551
Added `aria-hidden` and CL
Jan 18, 2022
6bf4f7b
cl
Jan 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/badge/beta_badge/beta_badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,7 @@ export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
content={tooltipContent}
title={title || label}
>
<Fragment>{content}</Fragment>
{content}
</EuiToolTip>
);
} else {
Expand All @@ -224,7 +224,7 @@ export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
content={tooltipContent}
title={title || label}
>
<span tabIndex={0} className={classes} {...rest}>
<span tabIndex={0} className={classes} role="button" {...rest}>
{icon || label}
</span>
</EuiToolTip>
Expand Down
160 changes: 100 additions & 60 deletions src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,96 +94,136 @@ exports[`EuiKeyPadMenuItem is rendered 1`] = `
`;

exports[`EuiKeyPadMenuItem props betaBadge renders 1`] = `
<button
class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge"
type="button"
<span
class="euiToolTipAnchor"
>
<span
class="euiKeyPadMenuItem__inner"
<button
class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge"
type="button"
>
<span
class="euiBetaBadge euiBetaBadge--singleLetter euiBetaBadge--subdued euiBetaBadge--small euiKeyPadMenuItem__betaBadge"
title="Beta"
class="euiKeyPadMenuItem__inner"
>
B
</span>
<span
class="euiKeyPadMenuItem__icon"
>
Icon
<span
class="euiBetaBadge euiBetaBadge--singleLetter euiBetaBadge--subdued euiBetaBadge--small euiKeyPadMenuItem__betaBadge"
title="B"
>
B
</span>
<span
class="euiKeyPadMenuItem__icon"
>
Icon
</span>
<span
class="euiKeyPadMenuItem__label"
>
Label
</span>
</span>
</button>
</span>
`;

exports[`EuiKeyPadMenuItem props betaBadge renders extra betaBadgeTooltipProps 1`] = `
<span
class="euiToolTipAnchor customTooltipClass"
>
<button
class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge"
type="button"
>
<span
class="euiKeyPadMenuItem__label"
class="euiKeyPadMenuItem__inner"
>
Label
<span
class="euiBetaBadge euiBetaBadge--singleLetter euiBetaBadge--subdued euiBetaBadge--small euiKeyPadMenuItem__betaBadge"
title="B"
>
B
</span>
<span
class="euiKeyPadMenuItem__icon"
>
Icon
</span>
<span
class="euiKeyPadMenuItem__label"
>
Label
</span>
</span>
</span>
</button>
</button>
</span>
`;

exports[`EuiKeyPadMenuItem props betaBadge renders with betaBadgeIconType 1`] = `
<button
class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge"
type="button"
<span
class="euiToolTipAnchor"
>
<span
class="euiKeyPadMenuItem__inner"
<button
class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge"
type="button"
>
<span
class="euiBetaBadge euiBetaBadge--iconOnly euiBetaBadge--singleLetter euiBetaBadge--subdued euiBetaBadge--small euiKeyPadMenuItem__betaBadge"
title="Beta"
class="euiKeyPadMenuItem__inner"
>
<span
aria-hidden="true"
class="euiBetaBadge__icon"
color="inherit"
data-euiicon-type="bolt"
/>
</span>
<span
class="euiKeyPadMenuItem__icon"
>
Icon
</span>
<span
class="euiKeyPadMenuItem__label"
>
Label
class="euiBetaBadge euiBetaBadge--iconOnly euiBetaBadge--singleLetter euiBetaBadge--subdued euiBetaBadge--small euiKeyPadMenuItem__betaBadge"
title="B"
>
<span
aria-hidden="true"
class="euiBetaBadge__icon"
color="inherit"
data-euiicon-type="bolt"
/>
</span>
<span
class="euiKeyPadMenuItem__icon"
>
Icon
</span>
<span
class="euiKeyPadMenuItem__label"
>
Label
</span>
</span>
</span>
</button>
</button>
</span>
`;

exports[`EuiKeyPadMenuItem props betaBadge renders with betaBadgeTooltipContent 1`] = `
<button
class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge"
type="button"
<span
class="euiToolTipAnchor"
>
<span
class="euiKeyPadMenuItem__inner"
<button
class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge"
type="button"
>
<span
class="euiToolTipAnchor"
class="euiKeyPadMenuItem__inner"
>
<span
class="euiBetaBadge euiBetaBadge--singleLetter euiBetaBadge--subdued euiBetaBadge--small euiKeyPadMenuItem__betaBadge"
tabindex="0"
title="B"
>
B
</span>
<span
class="euiKeyPadMenuItem__icon"
>
Icon
</span>
<span
class="euiKeyPadMenuItem__label"
>
Label
</span>
</span>
<span
class="euiKeyPadMenuItem__icon"
>
Icon
</span>
<span
class="euiKeyPadMenuItem__label"
>
Label
</span>
</span>
</button>
</button>
</span>
`;

exports[`EuiKeyPadMenuItem props isDisabled renders with href 1`] = `
Expand Down
15 changes: 15 additions & 0 deletions src/components/key_pad_menu/key_pad_menu_item.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,21 @@ describe('EuiKeyPadMenuItem', () => {

expect(component).toMatchSnapshot();
});

test('renders extra betaBadgeTooltipProps', () => {
const component = render(
<EuiKeyPadMenuItem
betaBadgeLabel="Beta"
betaBadgeTooltipContent="Content"
betaBadgeTooltipProps={{ anchorClassName: 'customTooltipClass' }}
label="Label"
>
Icon
</EuiKeyPadMenuItem>
);

expect(component).toMatchSnapshot();
});
});
});

Expand Down
41 changes: 29 additions & 12 deletions src/components/key_pad_menu/key_pad_menu_item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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<EuiToolTipProps, 'title' | 'content' | 'delay'>
>;
/**
* Use `onClick` instead when the item is not `checkable`
*/
Expand Down Expand Up @@ -153,6 +160,7 @@ export const EuiKeyPadMenuItem: FunctionComponent<EuiKeyPadMenuItemProps> = ({
betaBadgeLabel,
betaBadgeTooltipContent,
betaBadgeIconType,
betaBadgeTooltipProps,
href,
rel,
target,
Expand Down Expand Up @@ -229,21 +237,13 @@ export const EuiKeyPadMenuItem: FunctionComponent<EuiKeyPadMenuItemProps> = ({
color="subdued"
Comment thread
1Copenut marked this conversation as resolved.
className="euiKeyPadMenuItem__betaBadge"
label={betaBadgeLabel.charAt(0)}
title={betaBadgeLabel}
// title={betaBadgeLabel}
iconType={betaBadgeIconType}
tooltipContent={betaBadgeTooltipContent}
// tooltipContent={betaBadgeTooltipContent}
/>
);
};

const renderContent = () => (
<span className="euiKeyPadMenuItem__inner">
{checkable ? renderCheckableElement() : renderBetaBadge()}
<span className="euiKeyPadMenuItem__icon">{children}</span>
<span className="euiKeyPadMenuItem__label">{label}</span>
</span>
);

const relObj: {
disabled?: boolean;
type?: string;
Expand All @@ -268,15 +268,32 @@ export const EuiKeyPadMenuItem: FunctionComponent<EuiKeyPadMenuItemProps> = ({
relObj['aria-pressed'] = isSelected;
}

return (
const button = (
<Element
className={classes}
{...(relObj as ElementType)}
{...(rest as ElementType)}
// Unable to get past `LegacyRef` conflicts
ref={buttonRef as Ref<any>}
>
{renderContent()}
<span className="euiKeyPadMenuItem__inner">
{checkable ? renderCheckableElement() : renderBetaBadge()}
<span className="euiKeyPadMenuItem__icon">{children}</span>
<span className="euiKeyPadMenuItem__label">{label}</span>
</span>
</Element>
);

return betaBadgeLabel ? (
<EuiToolTip
{...betaBadgeTooltipProps}
title={betaBadgeLabel}
content={betaBadgeTooltipContent}
delay="long"
>
{button}
</EuiToolTip>
) : (
button
);
};