[Inline editor] correct the icon alignment, tooltip design and font s…

…ize for the button (elastic#192457) ## Summary Aligns the technical preview badge with the Create visualization title and reduce the Edit in Lens link text size to xs. (extracted from elastic#192073) Before: <img width="289" alt="Screenshot 2024-09-10 at 12 52 16" src="https://github.com/user-attachments/assets/d0fffc8e-f4ea-49a8-885d-b8bd2beafbda"> <img width="287" alt="Screenshot 2024-09-10 at 13 09 25" src="https://github.com/user-attachments/assets/16b3bcef-0ab8-4360-b77f-d1f79a32ec87"> After: <img width="378" alt="Screenshot 2024-09-10 at 12 59 33" src="https://github.com/user-attachments/assets/e5835a52-a9fe-4c07-809a-4c3fa6842581"> <img width="311" alt="Screenshot 2024-09-10 at 13 09 14" src="https://github.com/user-attachments/assets/e2abc06b-c736-450b-bd18-059205ff807e">
bhapas · Sep 11, 2024 · e3d48e3 · e3d48e3
1 parent bc9f45d
commit e3d48e3
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 35 deletions.
diff --git a/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/flyout_wrapper.tsx b/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/flyout_wrapper.tsx
@@ -18,6 +18,7 @@ import {
   EuiButton,
   EuiLink,
   EuiBetaBadge,
+  EuiText,
 } from '@elastic/eui';
 import { euiThemeVars } from '@kbn/ui-theme';
 import { css } from '@emotion/react';
@@ -52,40 +53,54 @@ export const FlyoutWrapper = ({
             <EuiFlexItem grow={false}>
               <EuiTitle size="xs" data-test-subj="inlineEditingFlyoutLabel">
                 <h2>
-                  {isNewPanel
-                    ? i18n.translate('xpack.lens.config.createVisualizationLabel', {
-                        defaultMessage: 'Create {lang} visualization',
-                        values: { lang: language },
-                      })
-                    : i18n.translate('xpack.lens.config.editVisualizationLabel', {
-                        defaultMessage: 'Edit {lang} visualization',
-                        values: { lang: language },
-                      })}
-                  <EuiToolTip
-                    content={i18n.translate('xpack.lens.config.experimentalLabelDataview', {
-                      defaultMessage:
-                        'Technical preview, inline editing currently offers limited configuration options',
-                    })}
-                  >
-                    <EuiBetaBadge
-                      label="Lab"
-                      iconType="beaker"
-                      size="s"
-                      css={css`
-                        margin-left: ${euiThemeVars.euiSizeXS};
-                      `}
-                    />
-                  </EuiToolTip>
+                  <EuiFlexGroup alignItems="center" responsive={false} gutterSize="xs">
+                    <EuiFlexItem grow={false}>
+                      {isNewPanel
+                        ? i18n.translate('xpack.lens.config.createVisualizationLabel', {
+                            defaultMessage: 'Create {lang} visualization',
+                            values: { lang: language },
+                          })
+                        : i18n.translate('xpack.lens.config.editVisualizationLabel', {
+                            defaultMessage: 'Edit {lang} visualization',
+                            values: { lang: language },
+                          })}
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                      <EuiToolTip
+                        title={i18n.translate('xpack.lens.config.experimentalLabelDataview.title', {
+                          defaultMessage: 'Technical preview',
+                        })}
+                        content={i18n.translate(
+                          'xpack.lens.config.experimentalLabelDataview.content',
+                          {
+                            defaultMessage:
+                              'Inline editing currently offers limited configuration options.',
+                          }
+                        )}
+                      >
+                        <EuiBetaBadge
+                          label=""
+                          iconType="beaker"
+                          size="s"
+                          css={css`
+                            vertical-align: middle;
+                          `}
+                        />
+                      </EuiToolTip>
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
                 </h2>
               </EuiTitle>
             </EuiFlexItem>
             {navigateToLensEditor && (
               <EuiFlexItem grow={false}>
-                <EuiLink onClick={navigateToLensEditor} data-test-subj="navigateToLensEditorLink">
-                  {i18n.translate('xpack.lens.config.editLinkLabel', {
-                    defaultMessage: 'Edit in Lens',
-                  })}
-                </EuiLink>
+                <EuiText size="xs">
+                  <EuiLink onClick={navigateToLensEditor} data-test-subj="navigateToLensEditorLink">
+                    {i18n.translate('xpack.lens.config.editLinkLabel', {
+                      defaultMessage: 'Edit in Lens',
+                    })}
+                  </EuiLink>
+                </EuiText>
               </EuiFlexItem>
             )}
           </EuiFlexGroup>

diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
@@ -25100,7 +25100,6 @@
     "xpack.lens.config.editLabel": "Modifier la configuration",
     "xpack.lens.config.editLinkLabel": "Modifier dans Lens",
     "xpack.lens.config.editVisualizationLabel": "Modifier la visualisation {lang}",
-    "xpack.lens.config.experimentalLabelDataview": "Version d'évaluation technique, l'édition en ligne propose actuellement des options de configuration limitées",
     "xpack.lens.config.visualizationConfigurationLabel": "Configuration de la visualisation",
     "xpack.lens.configPanel.addLayerButton": "Ajouter un calque",
     "xpack.lens.configPanel.loadFromLibrary": "Charger depuis la bibliothèque",
@@ -47949,4 +47948,4 @@
     "xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "Ce champ est requis.",
     "xpack.watcher.watcherDescription": "Détectez les modifications survenant dans vos données en créant, gérant et monitorant des alertes."
   }
-}
+}
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -25089,7 +25089,6 @@
     "xpack.lens.config.editLabel": "構成の編集",
     "xpack.lens.config.editLinkLabel": "Lensで編集",
     "xpack.lens.config.editVisualizationLabel": "{lang}ビジュアライゼーションを編集",
-    "xpack.lens.config.experimentalLabelDataview": "テクニカルプレビュー。現在、インライン編集では、構成オプションは限られています。",
     "xpack.lens.config.visualizationConfigurationLabel": "ビジュアライゼーション構成",
     "xpack.lens.configPanel.addLayerButton": "レイヤーを追加",
     "xpack.lens.configPanel.loadFromLibrary": "ライブラリから読み込み",
@@ -47932,4 +47931,4 @@
     "xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "フィールドを選択してください。",
     "xpack.watcher.watcherDescription": "アラートの作成、管理、監視によりデータへの変更を検知します。"
   }
-}
+}
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -25120,7 +25120,6 @@
     "xpack.lens.config.editLabel": "编辑配置",
     "xpack.lens.config.editLinkLabel": "在 Lens 中编辑",
     "xpack.lens.config.editVisualizationLabel": "编辑 {lang} 可视化",
-    "xpack.lens.config.experimentalLabelDataview": "技术预览，内联编辑当前提供的配置选项数量有限",
     "xpack.lens.config.visualizationConfigurationLabel": "可视化配置",
     "xpack.lens.configPanel.addLayerButton": "添加图层",
     "xpack.lens.configPanel.loadFromLibrary": "从库中加载",
@@ -47983,4 +47982,4 @@
     "xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "此字段必填。",
     "xpack.watcher.watcherDescription": "通过创建、管理和监测警报来检测数据中的更改。"
   }
-}
+}