Skip to content

Commit

Permalink
[Discover] Add wrapping to field list on sidebar (#71312)
Browse files Browse the repository at this point in the history
  • Loading branch information
andreadelrio authored Jul 15, 2020
1 parent 59f3722 commit 4e13c68
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 29 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
* under the License.
*/
import React from 'react';
import { EuiButton, EuiText } from '@elastic/eui';
import { EuiButton } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { DiscoverFieldDetails } from './discover_field_details';
import { FieldIcon } from '../../../../../kibana_react/public';
Expand Down Expand Up @@ -108,6 +108,13 @@ export function DiscoverField({
}
};

function wrapOnDot(str?: string) {
// u200B is a non-width white-space character, which allows
// the browser to efficiently word-wrap right after the dot
// without us having to draw a lot of extra DOM elements, etc
return str ? str.replace(/\./g, '.\u200B') : '';
}

return (
<>
<div
Expand All @@ -124,15 +131,12 @@ export function DiscoverField({
scripted={field.scripted}
/>
</span>
<span className="dscSidebarField__name eui-textTruncate">
<EuiText
size="xs"
data-test-subj={`field-${field.name}`}
className="eui-textTruncate"
title={field.name}
>
{useShortDots ? shortenDottedString(field.name) : field.displayName}
</EuiText>
<span
data-test-subj={`field-${field.name}`}
title={field.name}
className="dscSidebarField__name"
>
{useShortDots ? wrapOnDot(shortenDottedString(field.name)) : wrapOnDot(field.displayName)}
</span>
<span>
{field.name !== '_source' && !selected && (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,6 @@
margin-bottom: 0;
}

.dscFieldList--selected,
.dscFieldList--unpopular,
.dscFieldList--popular {
padding-left: $euiSizeS;
padding-right: $euiSizeS;
}

.dscFieldListHeader {
padding: $euiSizeS $euiSizeS 0 $euiSizeS;
background-color: lightOrDarkTheme(tint($euiColorPrimary, 90%), $euiColorLightShade);
Expand All @@ -40,8 +33,7 @@
}

.dscFieldChooser {
padding-left: $euiSizeS !important;
padding-right: $euiSizeS !important;
padding-left: $euiSize;
}

.dscFieldChooser__toggle {
Expand All @@ -55,12 +47,12 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 2px;
cursor: pointer;
font-size: $euiFontSizeXS;
border-top: solid 1px transparent;
border-bottom: solid 1px transparent;
line-height: normal;
margin-bottom: $euiSizeXS * 0.5;

&:hover,
&:focus {
Expand All @@ -72,28 +64,25 @@

.dscSidebarItem--active {
border-top: 1px solid $euiColorLightShade;
background: shade($euiColorLightestShade, 5%);
color: $euiColorFullShade;
.euiText {
font-weight: bold;
}
}

.dscSidebarField {
padding: $euiSizeXS 0;
padding: $euiSizeXS;
display: flex;
align-items: flex-start;
align-items: center;
max-width: 100%;
margin: 0;
width: 100%;
border: none;
border-radius: 0;
border-radius: $euiBorderRadius - 1px;
text-align: left;
}

.dscSidebarField__name {
margin-left: $euiSizeS;
flex-grow: 1;
word-break: break-word;
padding-right: 1px;
}

.dscSidebarField__fieldIcon {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
import './discover_sidebar.scss';
import React, { useCallback, useEffect, useState, useMemo } from 'react';
import { i18n } from '@kbn/i18n';
import { EuiButtonIcon, EuiTitle } from '@elastic/eui';
import { EuiButtonIcon, EuiTitle, EuiSpacer } from '@elastic/eui';
import { sortBy } from 'lodash';
import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
import { DiscoverField } from './discover_field';
Expand Down Expand Up @@ -199,6 +199,7 @@ export function DiscoverSidebar({
/>
</h3>
</EuiTitle>
<EuiSpacer size="xs" />
<ul
className="dscSidebarList dscFieldList--selected"
aria-labelledby="selected_fields"
Expand Down

0 comments on commit 4e13c68

Please sign in to comment.