change icons and improved title

elastic · Jun 26, 2020 · bec6210 · bec6210
1 parent d259b58
commit bec6210
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx
@@ -53,7 +53,11 @@ export function DiscoverFieldBucket({ field, bucket, onAddFilter }: Props) {
           <EuiFlexGroup justifyContent="spaceBetween" gutterSize="xs" responsive={false}>
             <EuiFlexItem grow={1} className="eui-textTruncate">
               <EuiText
-                title={bucket.display === '' ? emptyTxt : bucket.display}
+                title={
+                  bucket.display === ''
+                    ? emptyTxt
+                    : `${bucket.display}: ${bucket.count} (${bucket.percent}%)`
+                }
                 size="xs"
                 className="eui-textTruncate"
               >
@@ -77,7 +81,7 @@ export function DiscoverFieldBucket({ field, bucket, onAddFilter }: Props) {
             <div>
               <EuiButtonIcon
                 iconSize="s"
-                iconType="magnifyWithPlus"
+                iconType="plusInCircle"
                 onClick={() => onAddFilter(field, bucket.value, '+')}
                 aria-label={addLabel}
                 data-test-subj={`plus-${field.name}-${bucket.value}`}
@@ -92,7 +96,7 @@ export function DiscoverFieldBucket({ field, bucket, onAddFilter }: Props) {
               />
               <EuiButtonIcon
                 iconSize="s"
-                iconType="magnifyWithMinus"
+                iconType="minusInCircle"
                 onClick={() => onAddFilter(field, bucket.value, '-')}
                 aria-label={removeLabel}
                 data-test-subj={`minus-${field.name}-${bucket.value}`}

diff --git a/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx b/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx
@@ -26,9 +26,9 @@ interface Props {
 }
 
 export function StringFieldProgressBar({ value, percent, count }: Props) {
-  const tooltipContent = `${value}: ${count} (${percent}%)`;
+  const ariaLabel = `${value}: ${count} (${percent}%)`;
 
   return (
-    <EuiProgress value={percent} max={100} color="secondary" aria-label={tooltipContent} size="s" />
+    <EuiProgress value={percent} max={100} color="secondary" aria-label={ariaLabel} size="s" />
   );
 }