fix: design changes

elastic · Apr 30, 2020 · 594210d · 594210d
1 parent 1615f23
commit 594210d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/x-pack/plugins/lens/public/datatable_visualization/_visualization.scss b/x-pack/plugins/lens/public/datatable_visualization/_visualization.scss
@@ -4,10 +4,11 @@
 
 .lnsDataTable__filter {
   opacity: 0;
-  transition: opacity 250ms ease-in-out;
+  transition: opacity $euiAnimSpeedNormal ease-in-out;
 }
 
-.lnsDataTable__cell:hover  {
+.lnsDataTable__cell:hover,
+.lnsDataTable__cell:focus-within {
   .lnsDataTable__filter {
     opacity: 1;
   }

diff --git a/x-pack/plugins/lens/public/datatable_visualization/expression.tsx b/x-pack/plugins/lens/public/datatable_visualization/expression.tsx
@@ -196,6 +196,8 @@ export function DatatableComponent(props: DatatableRenderProps) {
               name: (col && col.name) || '',
               render: (value: unknown) => {
                 const formattedValue = formatters[field]?.convert(value);
+                const fieldName = col?.meta?.aggConfigParams.field;
+
                 if (filterable) {
                   return (
                     <EuiFlexGroup
@@ -223,7 +225,10 @@ export function DatatableComponent(props: DatatableRenderProps) {
                               aria-label={i18n.translate(
                                 'xpack.lens.filterForValueButtonAriaLabel',
                                 {
-                                  defaultMessage: 'Filter for value',
+                                  defaultMessage: `Filter for {value}`,
+                                  values: {
+                                    value: `${fieldName ? `${fieldName}: ` : ''}${formattedValue}`,
+                                  },
                                 }
                               )}
                               data-test-subj="lensDatatableFilterFor"
@@ -243,7 +248,12 @@ export function DatatableComponent(props: DatatableRenderProps) {
                                 aria-label={i18n.translate(
                                   'xpack.lens.filterOutValueButtonAriaLabel',
                                   {
-                                    defaultMessage: 'Filter out value',
+                                    defaultMessage: `Filter out {value}`,
+                                    values: {
+                                      value: `${
+                                        fieldName ? `${fieldName}: ` : ''
+                                      }${formattedValue}`,
+                                    },
                                   }
                                 )}
                                 data-test-subj="lensDatatableFilterOut"