[Canvas] Fix sharable runtime styles and remove color="ghost" where…

… unnecessary (#169313) See PR description and comments
elastic · Oct 24, 2023 · 8ef12b2 · 8ef12b2
1 parent 78a6a24
commit 8ef12b2
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 796 deletions.
diff --git a/x-pack/plugins/canvas/shareable_runtime/api/__snapshots__/shareable.test.tsx.snap b/x-pack/plugins/canvas/shareable_runtime/api/__snapshots__/shareable.test.tsx.snap
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/__snapshots__/app.test.tsx.snap b/x-pack/plugins/canvas/shareable_runtime/components/__snapshots__/app.test.tsx.snap
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/app.tsx b/x-pack/plugins/canvas/shareable_runtime/components/app.tsx
@@ -6,6 +6,7 @@
  */
 
 import React, { FC } from 'react';
+import { EuiProvider } from '@elastic/eui';
 import { CanvasRenderedWorkpad, CanvasShareableState, Stage } from '../types';
 import { RendererSpec } from '../../types';
 import { initialCanvasShareableState, CanvasShareableStateProvider } from '../context';
@@ -43,8 +44,10 @@ export const App: FC<Props> = ({ workpad, stage }) => {
   };
 
   return (
-    <CanvasShareableStateProvider initialState={initialState}>
-      <Canvas />
-    </CanvasShareableStateProvider>
+    <EuiProvider>
+      <CanvasShareableStateProvider initialState={initialState}>
+        <Canvas />
+      </CanvasShareableStateProvider>
+    </EuiProvider>
   );
 };
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/footer.module.scss b/x-pack/plugins/canvas/shareable_runtime/components/footer/footer.module.scss
@@ -5,10 +5,6 @@
   position: absolute;
 }
 
-.bar {
-  composes: euiBottomBar from global;
-}
-
 :global .kbnCanvas :local .bar {
   transition: bottom .25s;
   padding: $euiSizeM;

diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/footer.tsx b/x-pack/plugins/canvas/shareable_runtime/components/footer/footer.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { FC } from 'react';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiBottomBar } from '@elastic/eui';
 import { useCanvasShareableState } from '../../context';
 import { Scrubber } from './scrubber';
 import { Title } from './title';
@@ -33,24 +33,24 @@ export interface Props {
  * The Footer of the Shareable Canvas Workpad.
  */
 export const FooterComponent: FC<Props> = ({ isAutohide = false, isHidden = false }) => {
-  const { root, bar, title } = css;
+  const { root, title } = css;
 
   return (
     <div className={root} style={{ height: FOOTER_HEIGHT }}>
       <Scrubber />
-      <div className={bar} style={{ bottom: isAutohide && isHidden ? -FOOTER_HEIGHT : 0 }}>
-        <EuiFlexGroup gutterSize="none">
+      <EuiBottomBar style={{ bottom: isAutohide && isHidden ? -FOOTER_HEIGHT : 0 }}>
+        <EuiFlexGroup gutterSize="none" responsive={false} wrap={true}>
           <EuiFlexItem className={title}>
             <Title />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiFlexGroup gutterSize="s">
+            <EuiFlexGroup gutterSize="m" responsive={false}>
               <PageControls />
               <Settings />
             </EuiFlexGroup>
           </EuiFlexItem>
         </EuiFlexGroup>
-      </div>
+      </EuiBottomBar>
     </div>
   );
 };

diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/page_controls.tsx b/x-pack/plugins/canvas/shareable_runtime/components/footer/page_controls.tsx
@@ -6,14 +6,7 @@
  */
 
 import React, { FC } from 'react';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiButtonIcon,
-  EuiButtonEmpty,
-  EuiText,
-  EuiThemeProvider,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiButtonIcon, EuiButtonEmpty, EuiText } from '@elastic/eui';
 
 import {
   useCanvasShareableState,
@@ -59,43 +52,41 @@ export const PageControlsComponent: FC<Props> = ({
   const currentPage = page + 1;
 
   return (
-    <EuiThemeProvider colorMode="dark" wrapperProps={{ cloneElement: true }}>
-      <EuiFlexGroup alignItems="center" gutterSize="none" style={{ margin: '0 12px' }}>
-        <EuiFlexItem grow={false}>
-          <EuiButtonIcon
-            color="text"
-            data-test-subj="pageControlsPrevPage"
-            onClick={() => onSetPageNumber(page - 1)}
-            iconType="arrowLeft"
-            disabled={currentPage <= 1}
-            aria-label="Previous Page"
-          />
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiButtonEmpty
-            color="text"
-            size="s"
-            onClick={onToggleScrubber}
-            data-test-subj="pageControlsCurrentPage"
-          >
-            <EuiText color="text" size="s">
-              Page {currentPage}
-              {totalPages > 1 ? ` of ${totalPages}` : null}
-            </EuiText>
-          </EuiButtonEmpty>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiButtonIcon
-            color="text"
-            data-test-subj="pageControlsNextPage"
-            onClick={() => onSetPageNumber(page + 1)}
-            iconType="arrowRight"
-            disabled={currentPage >= totalPages}
-            aria-label="Next Page"
-          />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiThemeProvider>
+    <EuiFlexGroup alignItems="center" gutterSize="none" responsive={false}>
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon
+          color="text"
+          data-test-subj="pageControlsPrevPage"
+          onClick={() => onSetPageNumber(page - 1)}
+          iconType="arrowLeft"
+          disabled={currentPage <= 1}
+          aria-label="Previous Page"
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonEmpty
+          color="text"
+          size="s"
+          onClick={onToggleScrubber}
+          data-test-subj="pageControlsCurrentPage"
+        >
+          <EuiText color="text" size="s">
+            Page {currentPage}
+            {totalPages > 1 ? ` of ${totalPages}` : null}
+          </EuiText>
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon
+          color="text"
+          data-test-subj="pageControlsNextPage"
+          onClick={() => onSetPageNumber(page + 1)}
+          iconType="arrowRight"
+          disabled={currentPage >= totalPages}
+          aria-label="Next Page"
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 };
 

diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/settings.tsx b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/settings.tsx
@@ -26,7 +26,7 @@ export const SettingsComponent: FC<Props> = ({ refs }) => {
   const [isPopoverOpen, setPopoverOpen] = useState(false);
   const button = (
     <EuiButtonIcon
-      color="ghost"
+      color="text"
       iconType="gear"
       aria-label="Settings"
       onClick={() => setPopoverOpen(!isPopoverOpen)}

diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/title.tsx b/x-pack/plugins/canvas/shareable_runtime/components/footer/title.tsx
@@ -20,7 +20,7 @@ interface Props {
  * The title of the workpad displayed in the left-hand of the footer.
  */
 export const TitleComponent: FC<Props> = ({ title }) => (
-  <EuiFlexGroup gutterSize="s" justifyContent="flexStart" alignItems="center">
+  <EuiFlexGroup gutterSize="s" justifyContent="flexStart" alignItems="center" responsive={false}>
     <EuiFlexItem grow={false} style={{ flexShrink: 0 }}>
       <EuiLink href="https://www.elastic.co" title="Powered by Elastic.co">
         <EuiIcon type="logoElastic" size="l" />