Skip to content

Commit 5f93cec

Browse files
weronikaolejniczakalexwizp
weronikaolejniczak
and
alexwizp
authored
feat(kibana-visualizations): replace title props and wrap EuiButtonIcon with EuiToolTip (#271490)
Relates to elastic/eui#9566 > [!IMPORTANT] > These changes **should be carefully tested visually by each code owner.** Wrapping with `EuiToolTip` instead of passing `title` leads to another DOM node and can potentially break the layout. In such cases, I would appreciate committing appropriate fixes to this PR directly, I cannot possibly setup and run all Kibana functionalities to fix every regression. This PR: - wraps ALL `EuiButtonIcon` with `EuiToolTip`, the content is the same as `aria-label`, any `title` passed to `EuiButtonIcon` is removed, - changes several `title` cases (not truncation related) to use `EuiToolTip` instead (if applicable). --------- Co-authored-by: Alexey Antonov <alexwizp@gmail.com>
1 parent ba92b19 commit 5f93cec

28 files changed

Lines changed: 483 additions & 292 deletions

File tree

‎src/platform/packages/shared/kbn-coloring/src/shared_components/color_mapping/components/assignment/assignment.tsx‎

Lines changed: 33 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010
import React from 'react';
1111
import { useDispatch } from 'react-redux';
12-
import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
12+
import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
1313
import { i18n } from '@kbn/i18n';
1414
import { css } from '@emotion/react';
1515
import { euiThemeVars } from '@kbn/ui-theme';
@@ -123,32 +123,39 @@ export function Assignment({
123123
)}
124124

125125
<EuiFlexItem grow={0}>
126-
<EuiButtonIcon
127-
iconType="trash"
128-
size="xs"
129-
disabled={disableDelete}
130-
onClick={() => dispatch(removeAssignment(index))}
131-
aria-label={i18n.translate(
132-
'coloring.colorMapping.assignments.deleteAssignmentButtonLabel',
133-
{
134-
defaultMessage: 'Delete this assignment',
126+
<EuiToolTip
127+
content={i18n.translate('coloring.colorMapping.assignments.deleteAssignmentButtonLabel', {
128+
defaultMessage: 'Delete this assignment',
129+
})}
130+
disableScreenReaderOutput
131+
>
132+
<EuiButtonIcon
133+
iconType="trash"
134+
size="xs"
135+
disabled={disableDelete}
136+
onClick={() => dispatch(removeAssignment(index))}
137+
aria-label={i18n.translate(
138+
'coloring.colorMapping.assignments.deleteAssignmentButtonLabel',
139+
{
140+
defaultMessage: 'Delete this assignment',
141+
}
142+
)}
143+
color="danger"
144+
css={
145+
!disableDelete
146+
? css`
147+
color: ${euiThemeVars.euiTextColor};
148+
transition: ${euiThemeVars.euiAnimSpeedFast} ease-in-out;
149+
transition-property: color;
150+
&:hover,
151+
&:focus {
152+
color: ${euiThemeVars.euiColorDangerText};
153+
}
154+
`
155+
: undefined
135156
}
136-
)}
137-
color="danger"
138-
css={
139-
!disableDelete
140-
? css`
141-
color: ${euiThemeVars.euiTextColor};
142-
transition: ${euiThemeVars.euiAnimSpeedFast} ease-in-out;
143-
transition-property: color;
144-
&:hover,
145-
&:focus {
146-
color: ${euiThemeVars.euiColorDangerText};
147-
}
148-
`
149-
: undefined
150-
}
151-
/>
157+
/>
158+
</EuiToolTip>
152159
</EuiFlexItem>
153160
</EuiFlexGroup>
154161
);

‎src/platform/packages/shared/kbn-coloring/src/shared_components/color_mapping/components/container/assignments.tsx‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {
2222
EuiPanel,
2323
EuiPopover,
2424
EuiText,
25+
EuiToolTip,
2526
} from '@elastic/eui';
2627
import { css } from '@emotion/react';
2728
import React, { useCallback, useMemo, useState } from 'react';
@@ -241,17 +242,27 @@ export function Assignments({
241242
}
242243
)}
243244
button={
244-
<EuiButtonIcon
245-
iconType="boxesVertical"
246-
color="text"
247-
aria-label={i18n.translate(
245+
<EuiToolTip
246+
content={i18n.translate(
248247
'coloring.colorMapping.container.OpenAdditionalActionsButtonLabel',
249248
{
250249
defaultMessage: 'Open additional assignments actions',
251250
}
252251
)}
253-
onClick={() => setShowOtherActions(true)}
254-
/>
252+
disableScreenReaderOutput
253+
>
254+
<EuiButtonIcon
255+
iconType="boxesVertical"
256+
color="text"
257+
aria-label={i18n.translate(
258+
'coloring.colorMapping.container.OpenAdditionalActionsButtonLabel',
259+
{
260+
defaultMessage: 'Open additional assignments actions',
261+
}
262+
)}
263+
onClick={() => setShowOtherActions(true)}
264+
/>
265+
</EuiToolTip>
255266
}
256267
isOpen={showOtherActions}
257268
closePopover={() => setShowOtherActions(false)}

‎src/platform/packages/shared/kbn-coloring/src/shared_components/coloring/color_ranges/color_ranges_item.tsx‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,14 @@ import React, { useState, useCallback, useContext, useMemo } from 'react';
1414
import { css } from '@emotion/react';
1515

1616
import {
17-
EuiFieldNumber,
17+
EuiButtonIcon,
1818
EuiColorPicker,
19-
EuiFlexItem,
19+
EuiColorPickerSwatch,
20+
EuiFieldNumber,
2021
EuiFlexGroup,
22+
EuiFlexItem,
2123
EuiIcon,
22-
EuiColorPickerSwatch,
23-
EuiButtonIcon,
24+
EuiToolTip,
2425
useEuiTheme,
2526
} from '@elastic/eui';
2627

@@ -181,12 +182,14 @@ export function ColorRangeItem({
181182
style={{ width: euiTheme.size.xl, height: euiTheme.size.xl }}
182183
/>
183184
) : (
184-
<EuiButtonIcon
185-
color="danger"
186-
iconType="stopSlash"
187-
iconSize="l"
188-
aria-label={selectNewColorText}
189-
/>
185+
<EuiToolTip content={selectNewColorText} disableScreenReaderOutput>
186+
<EuiButtonIcon
187+
color="danger"
188+
iconType="stopSlash"
189+
iconSize="l"
190+
aria-label={selectNewColorText}
191+
/>
192+
</EuiToolTip>
190193
)
191194
}
192195
secondaryInputDisplay="top"

‎src/platform/packages/shared/kbn-coloring/src/shared_components/coloring/color_ranges/color_ranges_item_buttons.tsx‎

Lines changed: 29 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import React, { useCallback, useContext } from 'react';
1212
import { i18n } from '@kbn/i18n';
1313

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

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

5959
return (
60-
<EuiButtonIcon
61-
iconType="trash"
62-
color="danger"
63-
aria-label={title}
64-
title={title}
65-
onClick={onExecuteAction}
66-
data-test-subj={`lnsPalettePanel_dynamicColoring_removeColorRange_${index}`}
67-
/>
60+
<EuiToolTip content={title} disableScreenReaderOutput>
61+
<EuiButtonIcon
62+
iconType="trash"
63+
color="danger"
64+
aria-label={title}
65+
onClick={onExecuteAction}
66+
data-test-subj={`lnsPalettePanel_dynamicColoring_removeColorRange_${index}`}
67+
/>
68+
</EuiToolTip>
6869
);
6970
}
7071

@@ -105,13 +106,15 @@ export function ColorRangeEditButton({
105106

106107
return (
107108
<TooltipWrapper tooltipContent={tooltipContent} condition={true} position="top">
108-
<EuiButtonIcon
109-
iconType="pencil"
110-
aria-label={tooltipContent}
111-
disabled={disableSwitchingContinuity}
112-
onClick={onExecuteAction}
113-
data-test-subj={`lnsPalettePanel_dynamicColoring_editValue_${index}`}
114-
/>
109+
<EuiToolTip content={tooltipContent} disableScreenReaderOutput>
110+
<EuiButtonIcon
111+
iconType="pencil"
112+
aria-label={tooltipContent}
113+
disabled={disableSwitchingContinuity}
114+
onClick={onExecuteAction}
115+
data-test-subj={`lnsPalettePanel_dynamicColoring_editValue_${index}`}
116+
/>
117+
</EuiToolTip>
115118
</TooltipWrapper>
116119
);
117120
}
@@ -137,14 +140,16 @@ export function ColorRangeAutoDetectButton({
137140

138141
return (
139142
<TooltipWrapper tooltipContent={tooltipContent} condition={true} position="top">
140-
<EuiButtonIcon
141-
iconType={iconFactory}
142-
aria-label={tooltipContent}
143-
onClick={onExecuteAction}
144-
data-test-subj={`lnsPalettePanel_dynamicColoring_autoDetect_${
145-
isLast ? 'maximum' : 'minimum'
146-
}`}
147-
/>
143+
<EuiToolTip content={tooltipContent} disableScreenReaderOutput>
144+
<EuiButtonIcon
145+
iconType={iconFactory}
146+
aria-label={tooltipContent}
147+
onClick={onExecuteAction}
148+
data-test-subj={`lnsPalettePanel_dynamicColoring_autoDetect_${
149+
isLast ? 'maximum' : 'minimum'
150+
}`}
151+
/>
152+
</EuiToolTip>
148153
</TooltipWrapper>
149154
);
150155
}

‎src/platform/packages/shared/kbn-visualization-ui-components/components/dimension_buttons/dimension_button.tsx‎

Lines changed: 34 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -103,37 +103,44 @@ function DimensionButtonImpl({
103103
</EuiToolTip>
104104
</EuiFlexItem>
105105
</EuiFlexGroup>
106-
<EuiButtonIcon
107-
className="lnsLayerPanel__dimensionRemove"
108-
data-test-subj="indexPattern-dimension-remove"
109-
iconType="trash"
110-
size="xs"
111-
color="danger"
112-
aria-label={i18n.translate('visualizationUiComponents.dimensionButton.removeColumnLabel', {
106+
<EuiToolTip
107+
content={i18n.translate('visualizationUiComponents.dimensionButton.removeColumnLabel', {
113108
defaultMessage: 'Remove configuration from "{groupLabel}"',
114109
values: { groupLabel },
115110
})}
116-
title={i18n.translate('visualizationUiComponents.dimensionButton.removeColumnLabel', {
117-
defaultMessage: 'Remove configuration from "{groupLabel}"',
118-
values: { groupLabel },
119-
})}
120-
onClick={() => onRemoveClick(accessorConfig.columnId)}
121-
css={css`
122-
color: ${euiTheme.colors.textSubdued}
123-
transition: ${euiTheme.animation.fast} ease-in-out;
124-
transition-property: color, opacity, background-color, transform;
125-
opacity: 0;
111+
disableScreenReaderOutput
112+
>
113+
<EuiButtonIcon
114+
className="lnsLayerPanel__dimensionRemove"
115+
data-test-subj="indexPattern-dimension-remove"
116+
iconType="trash"
117+
size="xs"
118+
color="danger"
119+
aria-label={i18n.translate(
120+
'visualizationUiComponents.dimensionButton.removeColumnLabel',
121+
{
122+
defaultMessage: 'Remove configuration from "{groupLabel}"',
123+
values: { groupLabel },
124+
}
125+
)}
126+
onClick={() => onRemoveClick(accessorConfig.columnId)}
127+
css={css`
128+
color: ${euiTheme.colors.textSubdued}
129+
transition: ${euiTheme.animation.fast} ease-in-out;
130+
transition-property: color, opacity, background-color, transform;
131+
opacity: 0;
126132
127-
.domDraggable:hover &,
128-
.domDraggable:focus-within & {
129-
opacity: 1;
130-
}
131-
&:hover,
132-
&:focus {
133-
color: ${euiTheme.colors.textDanger};
134-
}
135-
`}
136-
/>
133+
.domDraggable:hover &,
134+
.domDraggable:focus-within & {
135+
opacity: 1;
136+
}
137+
&:hover,
138+
&:focus {
139+
color: ${euiTheme.colors.textDanger};
140+
}
141+
`}
142+
/>
143+
</EuiToolTip>
137144
<PaletteIndicator accessorConfig={accessorConfig} />
138145
</div>
139146
);

‎src/platform/packages/shared/kbn-visualization-ui-components/components/drag_drop_bucket/default_bucket_container.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
EuiFlexItem,
1616
EuiIcon,
1717
EuiPanel,
18+
EuiToolTip,
1819
useEuiTheme,
1920
} from '@elastic/eui';
2021
import { TooltipWrapper } from '@kbn/visualization-utils';
@@ -88,15 +89,17 @@ export const DefaultBucketContainer = ({
8889
)}
8990
condition={isNotRemovable ?? false}
9091
>
91-
<EuiButtonIcon
92-
iconSize="s"
93-
iconType="trash"
94-
color="danger"
95-
onClick={onRemoveClick}
96-
aria-label={removeTitle}
97-
disabled={isNotRemovable}
98-
data-test-subj={`${dataTestSubj}-remove-${idx}`}
99-
/>
92+
<EuiToolTip content={removeTitle} disableScreenReaderOutput>
93+
<EuiButtonIcon
94+
iconSize="s"
95+
iconType="trash"
96+
color="danger"
97+
onClick={onRemoveClick}
98+
aria-label={removeTitle}
99+
disabled={isNotRemovable}
100+
data-test-subj={`${dataTestSubj}-remove-${idx}`}
101+
/>
102+
</EuiToolTip>
100103
</TooltipWrapper>
101104
</EuiFlexItem>
102105
</EuiFlexGroup>

‎src/platform/packages/shared/kbn-visualization-ui-components/components/drag_drop_bucket/fields_bucket_container.tsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
EuiFlexItem,
1616
EuiIcon,
1717
EuiPanel,
18+
EuiToolTip,
1819
useEuiTheme,
1920
} from '@elastic/eui';
2021
import { TooltipWrapper } from '@kbn/visualization-utils';
@@ -78,14 +79,16 @@ export const FieldsBucketContainer = ({
7879
)}
7980
condition={isNotRemovable ?? false}
8081
>
81-
<EuiButtonIcon
82-
iconType="trash"
83-
color="danger"
84-
aria-label={removeTitle}
85-
onClick={onRemoveClick}
86-
data-test-subj={`${dataTestSubj}-removeField-${idx}`}
87-
isDisabled={isNotRemovable}
88-
/>
82+
<EuiToolTip content={removeTitle} disableScreenReaderOutput>
83+
<EuiButtonIcon
84+
iconType="trash"
85+
color="danger"
86+
aria-label={removeTitle}
87+
onClick={onRemoveClick}
88+
data-test-subj={`${dataTestSubj}-removeField-${idx}`}
89+
isDisabled={isNotRemovable}
90+
/>
91+
</EuiToolTip>
8992
</TooltipWrapper>
9093
</EuiFlexItem>
9194
</EuiFlexGroup>

0 commit comments

Comments
 (0)