Update from design feedback

elastic · Jun 9, 2021 · e2e4e6d · e2e4e6d
1 parent fd8bbc9
commit e2e4e6d
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 36 deletions.
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.scss b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.scss
@@ -2,6 +2,14 @@
   height: 100%;
 }
 
+.lnsIndexPatternDimensionEditor__header {
+  position: sticky;
+  top: 0;
+  background: $euiColorEmptyShade;
+  // Raise it above the elements that are after it in DOM order
+  z-index: $euiZLevel1;
+}
+
 .lnsIndexPatternDimensionEditor-isFullscreen {
   position: absolute;
   left: 0;

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx
@@ -344,25 +344,24 @@ export function DimensionEditor(props: DimensionEditorProps) {
 
   const quickFunctions = (
     <>
-      <div className="lnsIndexPatternDimensionEditor__section lnsIndexPatternDimensionEditor__section--padded lnsIndexPatternDimensionEditor__section--shaded">
-        {temporaryQuickFunction && selectedColumn?.operationType === 'formula' && (
-          <>
-            <EuiCallOut
-              size="s"
-              title={i18n.translate('xpack.lens.indexPattern.formulaWarning', {
-                defaultMessage: 'Staged formula',
+      {temporaryQuickFunction && selectedColumn?.operationType === 'formula' && (
+        <>
+          <EuiCallOut
+            size="s"
+            title={i18n.translate('xpack.lens.indexPattern.formulaWarning', {
+              defaultMessage: 'Staged formula',
+            })}
+            color="warning"
+          >
+            <p>
+              {i18n.translate('xpack.lens.indexPattern.formulaWarningText', {
+                defaultMessage: 'Picking a quick function will erase your formula.',
               })}
-              color="warning"
-            >
-              <p>
-                {i18n.translate('xpack.lens.indexPattern.formulaWarningText', {
-                  defaultMessage: 'Picking a quick function will erase your formula.',
-                })}
-              </p>
-            </EuiCallOut>
-            <EuiSpacer size="s" />
-          </>
-        )}
+            </p>
+          </EuiCallOut>
+        </>
+      )}
+      <div className="lnsIndexPatternDimensionEditor__section lnsIndexPatternDimensionEditor__section--padded lnsIndexPatternDimensionEditor__section--shaded">
         <EuiFormLabel>
           {i18n.translate('xpack.lens.indexPattern.functionsLabel', {
             defaultMessage: 'Select a function',
@@ -636,7 +635,7 @@ export function DimensionEditor(props: DimensionEditorProps) {
   return (
     <div id={columnId}>
       {!isFullscreen && operationSupportMatrix.operationWithoutField.has('formula') ? (
-        <EuiTabs size="s">
+        <EuiTabs size="s" className="lnsIndexPatternDimensionEditor__header">
           <EuiTab
             isSelected={temporaryQuickFunction || selectedColumn?.operationType !== 'formula'}
             data-test-subj="lens-dimensionTabs-quickFunctions"

diff --git a/...s/public/indexpattern_datasource/operations/definitions/formula/editor/formula_editor.tsx b/...s/public/indexpattern_datasource/operations/definitions/formula/editor/formula_editor.tsx
@@ -697,12 +697,18 @@ export function FormulaEditor({
                         closePopover={() => setIsHelpOpen(false)}
                         ownFocus={false}
                         button={
-                          <EuiButtonEmpty
+                          <EuiButtonIcon
                             className="lnsFormula__editorHelp lnsFormula__editorHelp--overlay"
                             onClick={() => setIsHelpOpen(!isHelpOpen)}
                             iconType="help"
                             color="text"
                             size="s"
+                            aria-label={i18n.translate(
+                              'xpack.lens.formula.editorHelpInlineShowToolTip',
+                              {
+                                defaultMessage: 'Show function reference',
+                              }
+                            )}
                           />
                         }
                       >
@@ -726,36 +732,39 @@ export function FormulaEditor({
                         <EuiButtonEmpty
                           color={errorCount ? 'danger' : 'warning'}
                           className="lnsFormula__editorError"
+                          iconType="alert"
+                          size="xs"
                           onClick={() => {
                             setIsWarningOpen(!isWarningOpen);
                           }}
                         >
-                          {errorCount ? (
-                            <EuiText size="xs">
-                              <EuiIcon type="alert" />{' '}
-                              {i18n.translate('xpack.lens.formulaErrorCount', {
+                          {errorCount
+                            ? i18n.translate('xpack.lens.formulaErrorCount', {
                                 defaultMessage:
                                   '{count} {count, plural, one {error} other {errors}}',
                                 values: { count: errorCount },
-                              })}
-                            </EuiText>
-                          ) : null}
-                          {warningCount ? (
-                            <EuiText size="xs">
-                              <EuiIcon type="alert" />{' '}
-                              {i18n.translate('xpack.lens.formulaWarningCount', {
+                              })
+                            : null}
+                          {warningCount
+                            ? i18n.translate('xpack.lens.formulaWarningCount', {
                                 defaultMessage:
                                   '{count} {count, plural, one {warning} other {warnings}}',
                                 values: { count: warningCount },
-                              })}
-                            </EuiText>
-                          ) : null}
+                              })
+                            : null}
                         </EuiButtonEmpty>
                       }
                     >
-                      {warnings.map(({ message }, index) => (
+                      {warnings.map(({ message, severity }, index) => (
                         <div key={index} className="lnsFormula__warningText">
-                          <EuiText>{message}</EuiText>
+                          <EuiText
+                            size="s"
+                            color={
+                              severity === monaco.MarkerSeverity.Warning ? 'warning' : 'danger'
+                            }
+                          >
+                            {message}
+                          </EuiText>
                         </div>
                       ))}
                     </EuiPopover>