fix styling issues (#135406)

elastic · Jun 29, 2022 · b590240 · b590240
1 parent d1ac92c
commit b590240
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 76 deletions.
diff --git a/src/plugins/charts/public/static/components/empty_placeholder.tsx b/src/plugins/charts/public/static/components/empty_placeholder.tsx
@@ -34,16 +34,11 @@ export const EmptyPlaceholder = ({
   dataTestSubj = 'emptyPlaceholder',
   className,
 }: EmptyPlaceholderProps) => (
-  <EuiText
-    data-test-subj={dataTestSubj}
-    css={style}
-    className={className}
-    textAlign="center"
-    color="subdued"
-    size="xs"
-  >
-    <EuiIcon type={icon} color={iconColor} size="l" />
-    <EuiSpacer size="s" />
-    <p>{message}</p>
-  </EuiText>
+  <div className={className} css={style}>
+    <EuiText data-test-subj={dataTestSubj} textAlign="center" color="subdued" size="xs">
+      <EuiIcon type={icon} color={iconColor} size="l" />
+      <EuiSpacer size="s" />
+      <p>{message}</p>
+    </EuiText>
+  </div>
 );
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx
@@ -146,7 +146,7 @@ const SuggestionPreview = ({
     <EuiToolTip content={preview.title}>
       <div data-test-subj={`lnsSuggestion-${camelCase(preview.title)}`}>
         <EuiPanel
-          hasBorder
+          hasBorder={true}
           hasShadow={false}
           className={classNames('lnsSuggestionPanel__button', {
             'lnsSuggestionPanel__button-isSelected': selected,

diff --git a/...plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx b/...plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
@@ -374,46 +374,48 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({
         data-test-subj="workspace-drag-drop-prompt"
         size="s"
       >
-        <DropIllustration
-          aria-hidden={true}
-          className={classNames(
-            'lnsWorkspacePanel__promptIllustration',
-            'lnsWorkspacePanel__dropIllustration'
-          )}
-        />
-        <h2>
-          <strong>
-            {!expressionExists
-              ? i18n.translate('xpack.lens.editorFrame.emptyWorkspace', {
-                  defaultMessage: 'Drop some fields here to start',
-                })
-              : i18n.translate('xpack.lens.editorFrame.emptyWorkspaceSimple', {
-                  defaultMessage: 'Drop field here',
-                })}
-          </strong>
-        </h2>
-        {!expressionExists && (
-          <>
-            <EuiTextColor color="subdued" component="div">
-              <p>
-                {i18n.translate('xpack.lens.editorFrame.emptyWorkspaceHeading', {
-                  defaultMessage: 'Lens is the recommended editor for creating visualizations',
-                })}
+        <div>
+          <DropIllustration
+            aria-hidden={true}
+            className={classNames(
+              'lnsWorkspacePanel__promptIllustration',
+              'lnsWorkspacePanel__dropIllustration'
+            )}
+          />
+          <h2>
+            <strong>
+              {!expressionExists
+                ? i18n.translate('xpack.lens.editorFrame.emptyWorkspace', {
+                    defaultMessage: 'Drop some fields here to start',
+                  })
+                : i18n.translate('xpack.lens.editorFrame.emptyWorkspaceSimple', {
+                    defaultMessage: 'Drop field here',
+                  })}
+            </strong>
+          </h2>
+          {!expressionExists && (
+            <>
+              <EuiTextColor color="subdued" component="div">
+                <p>
+                  {i18n.translate('xpack.lens.editorFrame.emptyWorkspaceHeading', {
+                    defaultMessage: 'Lens is the recommended editor for creating visualizations',
+                  })}
+                </p>
+              </EuiTextColor>
+              <p className="lnsWorkspacePanel__actions">
+                <EuiLink
+                  href="https://www.elastic.co/products/kibana/feedback"
+                  target="_blank"
+                  external
+                >
+                  {i18n.translate('xpack.lens.editorFrame.goToForums', {
+                    defaultMessage: 'Make requests and give feedback',
+                  })}
+                </EuiLink>
               </p>
-            </EuiTextColor>
-            <p className="lnsWorkspacePanel__actions">
-              <EuiLink
-                href="https://www.elastic.co/products/kibana/feedback"
-                target="_blank"
-                external
-              >
-                {i18n.translate('xpack.lens.editorFrame.goToForums', {
-                  defaultMessage: 'Make requests and give feedback',
-                })}
-              </EuiLink>
-            </p>
-          </>
-        )}
+            </>
+          )}
+        </div>
       </EuiText>
     );
   };
@@ -430,30 +432,32 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({
         data-test-subj="workspace-apply-changes-prompt"
         size="s"
       >
-        <img
-          aria-hidden={true}
-          src={IS_DARK_THEME ? applyChangesIllustrationDark : applyChangesIllustrationLight}
-          alt={applyChangesString}
-          className="lnsWorkspacePanel__promptIllustration"
-        />
-        <h2>
-          <strong>
-            {i18n.translate('xpack.lens.editorFrame.applyChangesWorkspacePrompt', {
-              defaultMessage: 'Apply changes to render visualization',
-            })}
-          </strong>
-        </h2>
-        <p className="lnsWorkspacePanel__actions">
-          <EuiButtonEmpty
-            size="s"
-            className={DONT_CLOSE_DIMENSION_CONTAINER_ON_CLICK_CLASS}
-            iconType="checkInCircleFilled"
-            onClick={() => dispatchLens(applyChanges())}
-            data-test-subj="lnsApplyChanges__workspace"
-          >
-            {applyChangesString}
-          </EuiButtonEmpty>
-        </p>
+        <div>
+          <img
+            aria-hidden={true}
+            src={IS_DARK_THEME ? applyChangesIllustrationDark : applyChangesIllustrationLight}
+            alt={applyChangesString}
+            className="lnsWorkspacePanel__promptIllustration"
+          />
+          <h2>
+            <strong>
+              {i18n.translate('xpack.lens.editorFrame.applyChangesWorkspacePrompt', {
+                defaultMessage: 'Apply changes to render visualization',
+              })}
+            </strong>
+          </h2>
+          <p className="lnsWorkspacePanel__actions">
+            <EuiButtonEmpty
+              size="s"
+              className={DONT_CLOSE_DIMENSION_CONTAINER_ON_CLICK_CLASS}
+              iconType="checkInCircleFilled"
+              onClick={() => dispatchLens(applyChanges())}
+              data-test-subj="lnsApplyChanges__workspace"
+            >
+              {applyChangesString}
+            </EuiButtonEmpty>
+          </p>
+        </div>
       </EuiText>
     );
   };