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 index d294af758d489..bd51e9c0e7bbe 100644 --- 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 @@ -121,153 +121,6 @@ exports[`Canvas Shareable Workpad API Placed successfully with default propertie -
-
-
-
-
- - - -
-
-
-
- My Canvas Workpad -
-
-
-
-
-
-
-
-
- -
-
- -
-
- -
-
-
-
-
-
- -
-
-
-
-
-
-
-
@@ -395,153 +248,6 @@ exports[`Canvas Shareable Workpad API Placed successfully with height specified -
-
-
-
-
- - - -
-
-
-
- My Canvas Workpad -
-
-
-
-
-
-
-
-
- -
-
- -
-
- -
-
-
-
-
-
- -
-
-
-
-
-
-
-
@@ -669,153 +375,6 @@ exports[`Canvas Shareable Workpad API Placed successfully with page specified 2` -
-
-
-
-
- - - -
-
-
-
- My Canvas Workpad -
-
-
-
-
-
-
-
-
- -
-
- -
-
- -
-
-
-
-
-
- -
-
-
-
-
-
-
-
@@ -944,153 +503,6 @@ exports[`Canvas Shareable Workpad API Placed successfully with width and height -
-
-
-
-
- - - -
-
-
-
- My Canvas Workpad -
-
-
-
-
-
-
-
-
- -
-
- -
-
- -
-
-
-
-
-
- -
-
-
-
-
-
-
-
@@ -1218,153 +630,6 @@ exports[`Canvas Shareable Workpad API Placed successfully with width specified 2 -
-
-
-
-
- - - -
-
-
-
- My Canvas Workpad -
-
-
-
-
-
-
-
-
- -
-
- -
-
- -
-
-
-
-
-
- -
-
-
-
-
-
-
-
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 index cad8af4172051..5932b2418e8c8 100644 --- 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 @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` App renders properly 1`] = `"
markdown mock
markdown mock
My Canvas Workpad
"`; +exports[` App renders properly 1`] = `"
markdown mock
markdown mock

Page level controls

My Canvas Workpad

There is a new region landmark with page level controls at the end of the document.

"`; diff --git a/x-pack/plugins/canvas/shareable_runtime/components/app.tsx b/x-pack/plugins/canvas/shareable_runtime/components/app.tsx index 35c40168cbea4..3104ed4ac0628 100644 --- 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 = ({ workpad, stage }) => { }; return ( - - - + + + + + ); }; 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 index a9a6e9d1cc196..08dcfa00130f5 100644 --- 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 index 08c4008dc0b23..24070ac54c280 100644 --- 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 = ({ isAutohide = false, isHidden = false }) => { - const { root, bar, title } = css; + const { root, title } = css; return (
-
- + + </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 index c7c3322f79636..baaac34e679a6 100644 --- 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 index 8081ce9390593..390afff459dfe 100644 --- 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 index bb7e8b09e37c1..44c168ba7d565 100644 --- 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" />