Skip to content

feat(kibana-visualizations): replace title props and wrap EuiButtonIcon with EuiToolTip #271490

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

Open
weronikaolejniczak wants to merge 12 commits into
base: main
Choose a base branch
from
Open

feat(kibana-visualizations): replace title props and wrap EuiButtonIcon with EuiToolTip #271490

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
209c651
feat(kibana-visualizations): replace title props and wrap EuiButtonIc…
weronikaolejniczak May 27, 2026
6453666
chore(kibana-visualizations): update snapshots
weronikaolejniczak May 27, 2026
7952a0e
fix jest
alexwizp May 28, 2026
aed743a
Merge branch 'main' into feat/replace-title-kibana-visualizations
alexwizp May 28, 2026
bc50142
Merge branch 'main' into feat/replace-title-kibana-visualizations
weronikaolejniczak May 28, 2026
3bb2644
Merge branch 'main' into feat/replace-title-kibana-visualizations
alexwizp May 28, 2026
a435c6d
Merge branch 'main' into feat/replace-title-kibana-visualizations
weronikaolejniczak May 29, 2026
32aa612
fix(charts): keep LegendToggle unwrapped to preserve absolute positio…
weronikaolejniczak May 29, 2026
d252ac6
fix(charts): disable tooltip-button-icon-wrap on LegendToggle overlay
weronikaolejniczak May 29, 2026
e2bf797
Merge branch 'main' into feat/replace-title-kibana-visualizations
weronikaolejniczak May 29, 2026
6c20d13
fix(charts): restore title attribute on LegendToggle button
weronikaolejniczak May 29, 2026
ad1e1ee
Merge origin/main into feat/replace-title-kibana-visualizations
alexwizp Jun 1, 2026
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
59 changes: 33 additions & 26 deletions ...red/kbn-coloring/src/shared_components/color_mapping/components/assignment/assignment.tsx
View file
Open in desktop
Copy link
Copy Markdown
Contributor

@andrimal andrimal May 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ checked

Image

Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

import React from 'react';
import { useDispatch } from 'react-redux';
import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { css } from '@emotion/react';
import { euiThemeVars } from '@kbn/ui-theme';
Expand Down Expand Up @@ -123,32 +123,39 @@ export function Assignment({
)}

<EuiFlexItem grow={0}>
<EuiButtonIcon
iconType="trash"
size="xs"
disabled={disableDelete}
onClick={() => dispatch(removeAssignment(index))}
aria-label={i18n.translate(
'coloring.colorMapping.assignments.deleteAssignmentButtonLabel',
{
defaultMessage: 'Delete this assignment',
<EuiToolTip
content={i18n.translate('coloring.colorMapping.assignments.deleteAssignmentButtonLabel', {
defaultMessage: 'Delete this assignment',
})}
disableScreenReaderOutput
>
<EuiButtonIcon
iconType="trash"
size="xs"
disabled={disableDelete}
onClick={() => dispatch(removeAssignment(index))}
aria-label={i18n.translate(
'coloring.colorMapping.assignments.deleteAssignmentButtonLabel',
{
defaultMessage: 'Delete this assignment',
}
)}
color="danger"
css={
!disableDelete
? css`
color: ${euiThemeVars.euiTextColor};
transition: ${euiThemeVars.euiAnimSpeedFast} ease-in-out;
transition-property: color;
&:hover,
&:focus {
color: ${euiThemeVars.euiColorDangerText};
}
`
: undefined
}
)}
color="danger"
css={
!disableDelete
? css`
color: ${euiThemeVars.euiTextColor};
transition: ${euiThemeVars.euiAnimSpeedFast} ease-in-out;
transition-property: color;
&:hover,
&:focus {
color: ${euiThemeVars.euiColorDangerText};
}
`
: undefined
}
/>
/>
</EuiToolTip>
</EuiFlexItem>
</EuiFlexGroup>
);
Expand Down
23 changes: 17 additions & 6 deletions ...red/kbn-coloring/src/shared_components/color_mapping/components/container/assignments.tsx
View file
Open in desktop
Copy link
Copy Markdown
Contributor

@andrimal andrimal May 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ checked:

Image

Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
EuiPanel,
EuiPopover,
EuiText,
EuiToolTip,
} from '@elastic/eui';
import { css } from '@emotion/react';
import React, { useCallback, useMemo, useState } from 'react';
Expand Down Expand Up @@ -241,17 +242,27 @@ export function Assignments({
}
)}
button={
<EuiButtonIcon
iconType="boxesVertical"
color="text"
aria-label={i18n.translate(
<EuiToolTip
content={i18n.translate(
'coloring.colorMapping.container.OpenAdditionalActionsButtonLabel',
{
defaultMessage: 'Open additional assignments actions',
}
)}
onClick={() => setShowOtherActions(true)}
/>
disableScreenReaderOutput
>
<EuiButtonIcon
iconType="boxesVertical"
color="text"
aria-label={i18n.translate(
'coloring.colorMapping.container.OpenAdditionalActionsButtonLabel',
{
defaultMessage: 'Open additional assignments actions',
}
)}
onClick={() => setShowOtherActions(true)}
/>
</EuiToolTip>
}
isOpen={showOtherActions}
closePopover={() => setShowOtherActions(false)}
Expand Down
23 changes: 13 additions & 10 deletions ...ges/shared/kbn-coloring/src/shared_components/coloring/color_ranges/color_ranges_item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,14 @@ import React, { useState, useCallback, useContext, useMemo } from 'react';
import { css } from '@emotion/react';

import {
EuiFieldNumber,
EuiButtonIcon,
EuiColorPicker,
EuiFlexItem,
EuiColorPickerSwatch,
EuiFieldNumber,
EuiFlexGroup,
EuiFlexItem,
EuiIcon,
EuiColorPickerSwatch,
EuiButtonIcon,
EuiToolTip,
useEuiTheme,
} from '@elastic/eui';

Expand Down Expand Up @@ -181,12 +182,14 @@ export function ColorRangeItem({
style={{ width: euiTheme.size.xl, height: euiTheme.size.xl }}
/>
) : (
<EuiButtonIcon
color="danger"
iconType="stopSlash"
iconSize="l"
aria-label={selectNewColorText}
/>
<EuiToolTip content={selectNewColorText} disableScreenReaderOutput>
<EuiButtonIcon
color="danger"
iconType="stopSlash"
iconSize="l"
aria-label={selectNewColorText}
/>
</EuiToolTip>
)
}
secondaryInputDisplay="top"
Expand Down
53 changes: 29 additions & 24 deletions ...ed/kbn-coloring/src/shared_components/coloring/color_ranges/color_ranges_item_buttons.tsx
View file
Open in desktop
Copy link
Copy Markdown
Contributor

@andrimal andrimal May 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ checked:

Image Image Image

Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import React, { useCallback, useContext } from 'react';
import { i18n } from '@kbn/i18n';

import type { EuiIconProps } from '@elastic/eui';
import { EuiButtonIcon } from '@elastic/eui';
import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
import { TooltipWrapper } from '@kbn/visualization-utils';

import type { PaletteContinuity, CustomPaletteParams } from '../../../palettes';
Expand Down Expand Up @@ -57,14 +57,15 @@ export function ColorRangeDeleteButton({ index, dispatch }: ColorRangesItemButto
});

return (
<EuiButtonIcon
iconType="trash"
color="danger"
aria-label={title}
title={title}
onClick={onExecuteAction}
data-test-subj={`lnsPalettePanel_dynamicColoring_removeColorRange_${index}`}
/>
<EuiToolTip content={title} disableScreenReaderOutput>
<EuiButtonIcon
iconType="trash"
color="danger"
aria-label={title}
onClick={onExecuteAction}
data-test-subj={`lnsPalettePanel_dynamicColoring_removeColorRange_${index}`}
/>
</EuiToolTip>
);
}

Expand Down Expand Up @@ -105,13 +106,15 @@ export function ColorRangeEditButton({

return (
<TooltipWrapper tooltipContent={tooltipContent} condition={true} position="top">
<EuiButtonIcon
iconType="pencil"
aria-label={tooltipContent}
disabled={disableSwitchingContinuity}
onClick={onExecuteAction}
data-test-subj={`lnsPalettePanel_dynamicColoring_editValue_${index}`}
/>
<EuiToolTip content={tooltipContent} disableScreenReaderOutput>
<EuiButtonIcon
iconType="pencil"
aria-label={tooltipContent}
disabled={disableSwitchingContinuity}
onClick={onExecuteAction}
data-test-subj={`lnsPalettePanel_dynamicColoring_editValue_${index}`}
/>
</EuiToolTip>
</TooltipWrapper>
);
}
Expand All @@ -137,14 +140,16 @@ export function ColorRangeAutoDetectButton({

return (
<TooltipWrapper tooltipContent={tooltipContent} condition={true} position="top">
<EuiButtonIcon
iconType={iconFactory}
aria-label={tooltipContent}
onClick={onExecuteAction}
data-test-subj={`lnsPalettePanel_dynamicColoring_autoDetect_${
isLast ? 'maximum' : 'minimum'
}`}
/>
<EuiToolTip content={tooltipContent} disableScreenReaderOutput>
<EuiButtonIcon
iconType={iconFactory}
aria-label={tooltipContent}
onClick={onExecuteAction}
data-test-subj={`lnsPalettePanel_dynamicColoring_autoDetect_${
isLast ? 'maximum' : 'minimum'
}`}
/>
</EuiToolTip>
</TooltipWrapper>
);
}
61 changes: 34 additions & 27 deletions .../shared/kbn-visualization-ui-components/components/dimension_buttons/dimension_button.tsx
View file
Open in desktop
Copy link
Copy Markdown
Contributor

@andrimal andrimal May 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ checked:

examples:
Image

Image

Original file line number Diff line number Diff line change
Expand Up @@ -103,37 +103,44 @@ function DimensionButtonImpl({
</EuiToolTip>
</EuiFlexItem>
</EuiFlexGroup>
<EuiButtonIcon
className="lnsLayerPanel__dimensionRemove"
data-test-subj="indexPattern-dimension-remove"
iconType="trash"
size="xs"
color="danger"
aria-label={i18n.translate('visualizationUiComponents.dimensionButton.removeColumnLabel', {
<EuiToolTip
content={i18n.translate('visualizationUiComponents.dimensionButton.removeColumnLabel', {
defaultMessage: 'Remove configuration from "{groupLabel}"',
values: { groupLabel },
})}
title={i18n.translate('visualizationUiComponents.dimensionButton.removeColumnLabel', {
defaultMessage: 'Remove configuration from "{groupLabel}"',
values: { groupLabel },
})}
onClick={() => onRemoveClick(accessorConfig.columnId)}
css={css`
color: ${euiTheme.colors.textSubdued}
transition: ${euiTheme.animation.fast} ease-in-out;
transition-property: color, opacity, background-color, transform;
opacity: 0;
disableScreenReaderOutput
>
<EuiButtonIcon
className="lnsLayerPanel__dimensionRemove"
data-test-subj="indexPattern-dimension-remove"
iconType="trash"
size="xs"
color="danger"
aria-label={i18n.translate(
'visualizationUiComponents.dimensionButton.removeColumnLabel',
{
defaultMessage: 'Remove configuration from "{groupLabel}"',
values: { groupLabel },
}
)}
onClick={() => onRemoveClick(accessorConfig.columnId)}
css={css`
color: ${euiTheme.colors.textSubdued}
transition: ${euiTheme.animation.fast} ease-in-out;
transition-property: color, opacity, background-color, transform;
opacity: 0;

.domDraggable:hover &,
.domDraggable:focus-within & {
opacity: 1;
}
&:hover,
&:focus {
color: ${euiTheme.colors.textDanger};
}
`}
/>
.domDraggable:hover &,
.domDraggable:focus-within & {
opacity: 1;
}
&:hover,
&:focus {
color: ${euiTheme.colors.textDanger};
}
`}
/>
</EuiToolTip>
<PaletteIndicator accessorConfig={accessorConfig} />
</div>
);
Expand Down
21 changes: 12 additions & 9 deletions .../kbn-visualization-ui-components/components/drag_drop_bucket/default_bucket_container.tsx
View file
Open in desktop
Copy link
Copy Markdown
Contributor

@andrimal andrimal May 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ checked:

Image Image Image Image

Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
EuiFlexItem,
EuiIcon,
EuiPanel,
EuiToolTip,
useEuiTheme,
} from '@elastic/eui';
import { TooltipWrapper } from '@kbn/visualization-utils';
Expand Down Expand Up @@ -88,15 +89,17 @@ export const DefaultBucketContainer = ({
)}
condition={isNotRemovable ?? false}
>
<EuiButtonIcon
iconSize="s"
iconType="trash"
color="danger"
onClick={onRemoveClick}
aria-label={removeTitle}
disabled={isNotRemovable}
data-test-subj={`${dataTestSubj}-remove-${idx}`}
/>
<EuiToolTip content={removeTitle} disableScreenReaderOutput>
<EuiButtonIcon
iconSize="s"
iconType="trash"
color="danger"
onClick={onRemoveClick}
aria-label={removeTitle}
disabled={isNotRemovable}
data-test-subj={`${dataTestSubj}-remove-${idx}`}
/>
</EuiToolTip>
</TooltipWrapper>
</EuiFlexItem>
</EuiFlexGroup>
Expand Down
19 changes: 11 additions & 8 deletions ...d/kbn-visualization-ui-components/components/drag_drop_bucket/fields_bucket_container.tsx
View file
Open in desktop
Copy link
Copy Markdown
Contributor

@andrimal andrimal May 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ checked:

Image Image

Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
EuiFlexItem,
EuiIcon,
EuiPanel,
EuiToolTip,
useEuiTheme,
} from '@elastic/eui';
import { TooltipWrapper } from '@kbn/visualization-utils';
Expand Down Expand Up @@ -78,14 +79,16 @@ export const FieldsBucketContainer = ({
)}
condition={isNotRemovable ?? false}
>
<EuiButtonIcon
iconType="trash"
color="danger"
aria-label={removeTitle}
onClick={onRemoveClick}
data-test-subj={`${dataTestSubj}-removeField-${idx}`}
isDisabled={isNotRemovable}
/>
<EuiToolTip content={removeTitle} disableScreenReaderOutput>
<EuiButtonIcon
iconType="trash"
color="danger"
aria-label={removeTitle}
onClick={onRemoveClick}
data-test-subj={`${dataTestSubj}-removeField-${idx}`}
isDisabled={isNotRemovable}
/>
</EuiToolTip>
</TooltipWrapper>
</EuiFlexItem>
</EuiFlexGroup>
Expand Down
Loading
Loading