Skip to content

Commit

Permalink
Nest badge into the button level
Browse files Browse the repository at this point in the history
  • Loading branch information
stratoula committed Feb 14, 2022
1 parent 068b077 commit 6047c9d
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 12 deletions.
7 changes: 6 additions & 1 deletion src/plugins/navigation/public/top_nav_menu/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,11 @@
margin-right: $euiSizeM;
}

.kbnTopNavMenu__betaBadgeWrapper {
display: flex;
align-items: center;
}

.kbnTopNavMenu__betaBadgeItem {
margin-left: $euiSizeXS;
margin-right: $euiSizeS;
}
27 changes: 16 additions & 11 deletions src/plugins/navigation/public/top_nav_menu/top_nav_menu_item.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,19 @@ export function TopNavMenuItem(props: TopNavMenuData) {
return val!;
}

function getButtonContainer() {
if (props.badge) {
return (
<div className="kbnTopNavMenu__betaBadgeWrapper">
<EuiBetaBadge className="kbnTopNavMenu__betaBadgeItem" {...props.badge} size="s" />
{upperFirst(props.label || props.id!)}
</div>
);
} else {
return upperFirst(props.label || props.id!);
}
}

function handleClick(e: MouseEvent<HTMLButtonElement>) {
if (isDisabled()) return;
props.run(e.currentTarget);
Expand All @@ -37,24 +50,16 @@ export function TopNavMenuItem(props: TopNavMenuData) {
className: props.className,
};

let btn = props.emphasize ? (
const btn = props.emphasize ? (
<EuiButton size="s" {...commonButtonProps} fill>
{upperFirst(props.label || props.id!)}
{getButtonContainer()}
</EuiButton>
) : (
<EuiHeaderLink size="s" color="primary" {...commonButtonProps}>
{upperFirst(props.label || props.id!)}
{getButtonContainer()}
</EuiHeaderLink>
);

if (props.badge) {
btn = (
<div className="kbnTopNavMenu__badgeWrapper">
<EuiBetaBadge className="kbnTopNavMenu__betaBadgeItem" {...props.badge} size="s" /> {btn}
</div>
);
}

const tooltip = getTooltip();
if (tooltip) {
return <EuiToolTip content={tooltip}>{btn}</EuiToolTip>;
Expand Down

0 comments on commit 6047c9d

Please sign in to comment.