[Discover] Add wrapping to field list on sidebar (#71312) (#71897)

andreadelrio · web-flow · commit d17a80f076b8 · 2020-07-15T11:19:42.000-07:00
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field.tsx
@@ -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';
@@ -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
@@ -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 && (
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss
@@ -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);
@@ -40,8 +33,7 @@
 }
 
 .dscFieldChooser {
-  padding-left: $euiSizeS !important;
-  padding-right: $euiSizeS !important;
+  padding-left: $euiSize;
 }
 
 .dscFieldChooser__toggle {
@@ -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 {
@@ -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 {
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx
@@ -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';
@@ -199,6 +199,7 @@ export function DiscoverSidebar({
                   />
                 </h3>
               </EuiTitle>
+              <EuiSpacer size="xs" />
               <ul
                 className="dscSidebarList dscFieldList--selected"
                 aria-labelledby="selected_fields"
