Refactor popular field list, change Add + Remove links of fields

elastic · Mar 30, 2020 · 3da56c5 · 3da56c5
1 parent 2c493d5
commit 3da56c5
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 39 deletions.
diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/components/sidebar/_sidebar.scss b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/sidebar/_sidebar.scss
@@ -30,8 +30,12 @@
   padding-right: $euiSizeS;
 }
 
+.dscFieldListHeader {
+  padding: $euiSizeS $euiSizeS 0 $euiSizeS;
+  background-color: lightOrDarkTheme(tint($euiColorPrimary, 90%), $euiColorLightShade);
+}
+
 .dscFieldList--popular {
-  padding-top: $euiSizeS;
   background-color: lightOrDarkTheme(tint($euiColorPrimary, 90%), $euiColorLightShade);
 }
 

diff --git a/...legacy/core_plugins/kibana/public/discover/np_ready/components/sidebar/discover_field.tsx b/...legacy/core_plugins/kibana/public/discover/np_ready/components/sidebar/discover_field.tsx
@@ -83,12 +83,25 @@ export function DiscoverField({
   useShortDots,
 }: DiscoverFieldProps) {
   const addLabel = i18n.translate('kbn.discover.fieldChooser.discoverField.addButtonLabel', {
-    defaultMessage: 'Add {field} to table',
-    values: { field: field.name },
+    defaultMessage: 'Add',
   });
+  const addLabelAria = i18n.translate(
+    'kbn.discover.fieldChooser.discoverField.addButtonAriaLabel',
+    {
+      defaultMessage: 'Add {field} to table',
+      values: { field: field.name },
+    }
+  );
   const removeLabel = i18n.translate('kbn.discover.fieldChooser.discoverField.removeButtonLabel', {
-    defaultMessage: 'Remove {field} from table',
+    defaultMessage: 'Remove',
   });
+  const removeLabelAria = i18n.translate(
+    'kbn.discover.fieldChooser.discoverField.removeButtonAriaLabel',
+    {
+      defaultMessage: 'Remove {field} from table',
+      values: { field: field.name },
+    }
+  );
 
   const toggleDisplay = (f: IndexPatternField) => {
     if (selected) {
@@ -138,6 +151,7 @@ export function DiscoverField({
                 toggleDisplay(field);
               }}
               data-test-subj={`fieldToggle-${field.name}`}
+              arial-label={addLabelAria}
             >
               {addLabel}
             </EuiButton>
@@ -152,6 +166,7 @@ export function DiscoverField({
                 toggleDisplay(field);
               }}
               data-test-subj={`fieldToggle-${field.name}`}
+              arial-label={removeLabelAria}
             >
               {removeLabel}
             </EuiButton>

diff --git a/...gacy/core_plugins/kibana/public/discover/np_ready/components/sidebar/discover_sidebar.tsx b/...gacy/core_plugins/kibana/public/discover/np_ready/components/sidebar/discover_sidebar.tsx
@@ -255,41 +255,44 @@ export function DiscoverSidebar({
           </>
         )}
         {popularFields.length > 0 && (
-          <ul
-            className={`dscFieldList dscFieldList--popular ${
-              !showFields ? 'hidden-sm hidden-xs' : ''
-            }`}
-            aria-labelledby="available_fields available_fields_popular"
-            data-test-subj={`fieldList-popular`}
-          >
-            <li className="dscSidebar__item">
-              <EuiTitle size="xxxs">
-                <h4 style={{ fontWeight: 'normal' }} id="available_fields_popular">
-                  <FormattedMessage
-                    id="kbn.discover.fieldChooser.filter.popularTitle"
-                    defaultMessage="Popular"
-                  />
-                </h4>
-              </EuiTitle>
-            </li>
-            {popularFields.map((field: IndexPatternField, idx: number) => {
-              return (
-                <li key={`field${idx}`} data-attr-field={field.name} className="dscSidebar__item">
-                  <DiscoverField
-                    field={field}
-                    indexPattern={selectedIndexPattern}
-                    onAddField={onAddField}
-                    onRemoveField={onRemoveField}
-                    onAddFilter={onAddFilter}
-                    onShowDetails={onShowDetails}
-                    getDetails={getDetailsByField}
-                    showDetails={openFieldMap.get(field.name) || false}
-                    useShortDots={useShortDots}
-                  />
-                </li>
-              );
-            })}
-          </ul>
+          <div>
+            <EuiTitle
+              size="xxxs"
+              className={`dscFieldListHeader ${!showFields ? 'hidden-sm hidden-xs' : ''}`}
+            >
+              <h4 style={{ fontWeight: 'normal' }} id="available_fields_popular">
+                <FormattedMessage
+                  id="kbn.discover.fieldChooser.filter.popularTitle"
+                  defaultMessage="Popular"
+                />
+              </h4>
+            </EuiTitle>
+            <ul
+              className={`dscFieldList dscFieldList--popular ${
+                !showFields ? 'hidden-sm hidden-xs' : ''
+              }`}
+              aria-labelledby="available_fields available_fields_popular"
+              data-test-subj={`fieldList-popular`}
+            >
+              {popularFields.map((field: IndexPatternField, idx: number) => {
+                return (
+                  <li key={`field${idx}`} data-attr-field={field.name} className="dscSidebar__item">
+                    <DiscoverField
+                      field={field}
+                      indexPattern={selectedIndexPattern}
+                      onAddField={onAddField}
+                      onRemoveField={onRemoveField}
+                      onAddFilter={onAddFilter}
+                      onShowDetails={onShowDetails}
+                      getDetails={getDetailsByField}
+                      showDetails={openFieldMap.get(field.name) || false}
+                      useShortDots={useShortDots}
+                    />
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
         )}
 
         <ul