Skip to content

Commit af8d7ff

Browse files
authored
[Discover Tabs] Tab preview improvements (elastic#235176)
- Closes elastic#231426 ## Summary This PR: - decreases tab label text size inside the tab preview - removes the browser title for the tab - changes the length limit to 120 - and allows to select text inside the tab preview popover (previously the popover was getting closed too soon) <img width="396" height="274" alt="Screenshot 2025-09-16 at 11 19 41" src="https://github.com/user-attachments/assets/866f5dec-5ae6-462e-b539-bc883a1c0ace" /> ### Checklist - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) - [x] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels.
1 parent 4748462 commit af8d7ff

4 files changed

Lines changed: 11 additions & 7 deletions

File tree

src/platform/packages/shared/kbn-unified-tabs/src/components/tab/edit_tab_label.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const EditTabLabel: React.FC<EditTabLabelProps> = ({ item, onLabelEdited,
4141

4242
const onSubmit = useCallback(
4343
async (newLabel: string) => {
44-
if (!newLabel) {
44+
if (!newLabel || newLabel.length > MAX_TAB_LABEL_LENGTH) {
4545
return;
4646
}
4747

@@ -93,7 +93,9 @@ export const EditTabLabel: React.FC<EditTabLabelProps> = ({ item, onLabelEdited,
9393
value={value}
9494
maxLength={MAX_TAB_LABEL_LENGTH}
9595
isLoading={submitState === SubmitState.submitting}
96-
isInvalid={submitState === SubmitState.error || !value.trim()}
96+
isInvalid={
97+
submitState === SubmitState.error || !value.trim() || value.length > MAX_TAB_LABEL_LENGTH
98+
}
9799
onChange={onChange}
98100
onKeyDown={onKeyDown}
99101
onBlur={submitState !== SubmitState.submitting ? onExit : undefined}

src/platform/packages/shared/kbn-unified-tabs/src/components/tab/tab.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -210,6 +210,7 @@ export const Tab: React.FC<TabProps> = (props) => {
210210
// Truncation width must be equal to max tab width minus padding
211211
width={tabsSizeConfig.regularTabMaxWidth - euiTheme.base}
212212
truncation="middle"
213+
title=""
213214
/>
214215
</EuiText>
215216
</div>

src/platform/packages/shared/kbn-unified-tabs/src/components/tab_preview/tab_preview.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -140,8 +140,8 @@ export const TabPreview: React.FC<TabPreviewProps> = ({
140140
}, [previewTimer, setShowPreview]);
141141

142142
return (
143-
<div>
144-
<span onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} ref={tabRef}>
143+
<div onMouseLeave={handleMouseLeave}>
144+
<span onMouseEnter={handleMouseEnter} ref={tabRef}>
145145
{children}
146146
</span>
147147
<EuiPortal>
@@ -166,6 +166,7 @@ export const TabPreview: React.FC<TabPreviewProps> = ({
166166
grow={false}
167167
color="subdued"
168168
paddingSize="none"
169+
className="eui-textBreakWord"
169170
css={getSplitPanelCss(euiTheme)}
170171
>
171172
{tabPreviewData.status === TabStatus.RUNNING ? (
@@ -174,11 +175,11 @@ export const TabPreview: React.FC<TabPreviewProps> = ({
174175
<EuiLoadingSpinner />
175176
</EuiFlexItem>
176177
<EuiFlexItem>
177-
<EuiText>{tabItem.label}</EuiText>
178+
<EuiText size="s">{tabItem.label}</EuiText>
178179
</EuiFlexItem>
179180
</EuiFlexGroup>
180181
) : (
181-
<EuiHealth color={tabPreviewData.status} textSize="m">
182+
<EuiHealth color={tabPreviewData.status} textSize="s">
182183
{tabItem.label}
183184
</EuiHealth>
184185
)}

src/platform/packages/shared/kbn-unified-tabs/src/constants.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* License v3.0 only", or the "Server Side Public License, v 1".
88
*/
99

10-
export const MAX_TAB_LABEL_LENGTH = 500;
10+
export const MAX_TAB_LABEL_LENGTH = 120;
1111

1212
export const MAX_TAB_WIDTH = 280;
1313
export const MIN_TAB_WIDTH = 112;

0 commit comments

Comments
 (0)