From 468dff72e840bce0ffda448d8ab516893f149212 Mon Sep 17 00:00:00 2001 From: Clint Andrew Hall Date: Mon, 11 Nov 2019 19:32:14 -0600 Subject: [PATCH] Fixing bugs in the Shareable Runtime (#49965) * Fixing bugs in the Shareable Runtime * Updating snapshots --- .../control_settings/custom_interval.tsx | 2 +- .../__snapshots__/shareable.test.tsx.snap | 10 +- .../__snapshots__/canvas.examples.storyshot | 243 ++++++++++-------- .../__tests__/__snapshots__/app.test.tsx.snap | 2 +- .../components/canvas.module.scss | 4 +- .../__snapshots__/footer.examples.storyshot | 126 ++++----- .../__snapshots__/scrubber.examples.storyshot | 120 ++++----- .../__snapshots__/title.examples.storyshot | 15 ++ .../footer/page_preview.module.scss | 1 + .../components/footer/page_preview.tsx | 12 +- .../autoplay_settings.examples.storyshot | 36 +-- .../__snapshots__/settings.test.tsx.snap | 12 +- .../components/footer/title.tsx | 2 +- .../canvas/shareable_runtime/template.html | 1 + .../shareable_runtime/webpack.config.js | 1 + 15 files changed, 296 insertions(+), 291 deletions(-) diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/custom_interval.tsx b/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/custom_interval.tsx index 0bcb0c89ba1c..ab34f332dc12 100644 --- a/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/custom_interval.tsx +++ b/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/custom_interval.tsx @@ -54,7 +54,7 @@ export const CustomInterval = ({ gutterSize, buttonSize, onSubmit, defaultValue - +
markdown mock
markdown mock
markdown mock
My Canvas Workpad
" @@ -18,7 +18,7 @@ exports[`Canvas Shareable Workpad API Placed successfully with height specified "
markdown mock
markdown mock
markdown mock
My Canvas Workpad
" @@ -30,7 +30,7 @@ exports[`Canvas Shareable Workpad API Placed successfully with page specified 2` "
markdown mock
markdown mock
markdown mock
My Canvas Workpad
" @@ -42,7 +42,7 @@ exports[`Canvas Shareable Workpad API Placed successfully with width and height "
markdown mock
markdown mock
markdown mock
My Canvas Workpad
" @@ -54,7 +54,7 @@ exports[`Canvas Shareable Workpad API Placed successfully with width specified 2 "
markdown mock
markdown mock
markdown mock
My Canvas Workpad
" diff --git a/x-pack/legacy/plugins/canvas/shareable_runtime/components/__examples__/__snapshots__/canvas.examples.storyshot b/x-pack/legacy/plugins/canvas/shareable_runtime/components/__examples__/__snapshots__/canvas.examples.storyshot index 1b351e9ac0f6..c3352b52c591 100644 --- a/x-pack/legacy/plugins/canvas/shareable_runtime/components/__examples__/__snapshots__/canvas.examples.storyshot +++ b/x-pack/legacy/plugins/canvas/shareable_runtime/components/__examples__/__snapshots__/canvas.examples.storyshot @@ -88,9 +88,9 @@ exports[`Storyshots shareables/Canvas component 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -126,9 +126,9 @@ exports[`Storyshots shareables/Canvas component 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -165,9 +165,9 @@ exports[`Storyshots shareables/Canvas component 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -205,9 +205,9 @@ exports[`Storyshots shareables/Canvas component 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -249,9 +249,9 @@ exports[`Storyshots shareables/Canvas component 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -290,9 +290,9 @@ exports[`Storyshots shareables/Canvas component 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -332,9 +332,9 @@ exports[`Storyshots shareables/Canvas component 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -368,9 +368,9 @@ exports[`Storyshots shareables/Canvas component 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -418,9 +418,9 @@ exports[`Storyshots shareables/Canvas component 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -471,9 +471,9 @@ exports[`Storyshots shareables/Canvas component 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -509,9 +509,9 @@ exports[`Storyshots shareables/Canvas component 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -545,9 +545,9 @@ exports[`Storyshots shareables/Canvas component 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -582,9 +582,9 @@ exports[`Storyshots shareables/Canvas component 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -620,9 +620,9 @@ exports[`Storyshots shareables/Canvas component 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -658,9 +658,9 @@ exports[`Storyshots shareables/Canvas component 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -698,9 +698,9 @@ exports[`Storyshots shareables/Canvas component 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -735,9 +735,9 @@ exports[`Storyshots shareables/Canvas component 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -772,9 +772,9 @@ exports[`Storyshots shareables/Canvas component 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -811,9 +811,9 @@ exports[`Storyshots shareables/Canvas component 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -862,9 +862,9 @@ exports[`Storyshots shareables/Canvas component 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -905,9 +905,9 @@ exports[`Storyshots shareables/Canvas component 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -996,9 +996,9 @@ exports[`Storyshots shareables/Canvas component 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -1065,9 +1065,9 @@ exports[`Storyshots shareables/Canvas component 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -1105,9 +1105,9 @@ exports[`Storyshots shareables/Canvas component 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -1146,9 +1146,9 @@ exports[`Storyshots shareables/Canvas component 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -1188,9 +1188,9 @@ exports[`Storyshots shareables/Canvas component 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -1228,9 +1228,9 @@ exports[`Storyshots shareables/Canvas component 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -1268,9 +1268,9 @@ exports[`Storyshots shareables/Canvas component 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -1312,6 +1312,11 @@ exports[`Storyshots shareables/Canvas component 1`] = ` >
@@ -1620,9 +1625,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -1659,9 +1664,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -1699,9 +1704,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -1743,9 +1748,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -1784,9 +1789,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -1826,9 +1831,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -1862,9 +1867,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -1912,9 +1917,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -1965,9 +1970,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -2003,9 +2008,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -2039,9 +2044,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -2076,9 +2081,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -2114,9 +2119,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -2152,9 +2157,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -2192,9 +2197,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -2229,9 +2234,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -2266,9 +2271,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -2305,9 +2310,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -2356,9 +2361,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -2399,9 +2404,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -2490,9 +2495,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -2559,9 +2564,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -2599,9 +2604,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -2640,9 +2645,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -2682,9 +2687,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -2722,9 +2727,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -2762,9 +2767,9 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -2806,6 +2811,11 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = ` >
@@ -3116,6 +3126,11 @@ exports[`Storyshots shareables/Canvas contextual: hello 1`] = ` >
App renders properly 1`] = ` "
markdown mock
markdown mock
markdown mock
My Canvas Workpad
" diff --git a/x-pack/legacy/plugins/canvas/shareable_runtime/components/canvas.module.scss b/x-pack/legacy/plugins/canvas/shareable_runtime/components/canvas.module.scss index 88619c150c1f..f7e47d8ddeb2 100644 --- a/x-pack/legacy/plugins/canvas/shareable_runtime/components/canvas.module.scss +++ b/x-pack/legacy/plugins/canvas/shareable_runtime/components/canvas.module.scss @@ -18,5 +18,7 @@ :global .kbnCanvas :local .page { position: absolute; - transform-origin: center center; + transform-origin: left top; + top: 0; + left: 0; } diff --git a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/footer.examples.storyshot b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/footer.examples.storyshot index bad95ca4fb5b..6570016336d9 100644 --- a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/footer.examples.storyshot +++ b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/footer.examples.storyshot @@ -41,9 +41,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -79,9 +79,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -118,9 +118,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -158,9 +158,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -202,9 +202,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -243,9 +243,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -285,9 +285,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -321,9 +321,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -371,9 +371,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -424,9 +424,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -462,9 +462,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -498,9 +498,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -535,9 +535,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -573,9 +573,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -611,9 +611,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -651,9 +651,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -688,9 +688,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -725,9 +725,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -764,9 +764,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -815,9 +815,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -858,9 +858,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -949,9 +949,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -1018,9 +1018,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -1058,9 +1058,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -1099,9 +1099,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -1141,9 +1141,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -1181,9 +1181,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -1221,9 +1221,9 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -1265,6 +1265,11 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = ` >
@@ -1529,6 +1534,11 @@ exports[`Storyshots shareables/Footer contextual: hello 1`] = ` >
@@ -92,9 +92,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -130,9 +130,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -169,9 +169,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -209,9 +209,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -253,9 +253,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -294,9 +294,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -336,9 +336,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -372,9 +372,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -422,9 +422,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -475,9 +475,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -513,9 +513,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -549,9 +549,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -586,9 +586,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -624,9 +624,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -662,9 +662,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -702,9 +702,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -739,9 +739,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -776,9 +776,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -815,9 +815,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -866,9 +866,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -909,9 +909,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -1000,9 +1000,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -1069,9 +1069,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -1109,9 +1109,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -1150,9 +1150,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -1192,9 +1192,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -1232,9 +1232,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -1272,9 +1272,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: austin 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 177.77777777777777, + "width": 1280, } } > @@ -1333,9 +1333,9 @@ exports[`Storyshots shareables/Footer/Scrubber contextual: hello 1`] = ` className="preview" style={ Object { - "height": 100, + "height": 720, "transform": "scale3d(0.1388888888888889, 0.1388888888888889, 1)", - "width": 150, + "width": 1080, } } > diff --git a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/title.examples.storyshot b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/title.examples.storyshot index 6bb60b8e574a..8d0ced56d147 100644 --- a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/title.examples.storyshot +++ b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/title.examples.storyshot @@ -19,6 +19,11 @@ exports[`Storyshots shareables/Footer/Title component 1`] = ` >
= ({ workpadWidth, }) => { const scale = height / workpadHeight; - const style = { - height: workpadHeight * scale, - width: workpadWidth * scale, - }; const transform = { - ...style, + height: workpadHeight, + width: workpadWidth, transform: `scale3d(${scale}, ${scale}, 1)`, }; @@ -73,7 +70,10 @@ export const PagePreviewComponent: FC = ({ className={css.root} onClick={() => onClick(index)} onKeyPress={() => onClick(index)} - style={style} + style={{ + height: workpadHeight * scale, + width: workpadWidth * scale, + }} >
diff --git a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/autoplay_settings.examples.storyshot b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/autoplay_settings.examples.storyshot index 7c4395820776..b159e6499ed9 100644 --- a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/autoplay_settings.examples.storyshot +++ b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/autoplay_settings.examples.storyshot @@ -128,18 +128,8 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings component: off, className="euiFlexItem euiFlexItem--flexGrowZero" >
-
- -
@@ -303,18 +293,8 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings component: on, 5 className="euiFlexItem euiFlexItem--flexGrowZero" >
-
- -
@@ -478,18 +458,8 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings contextual 1`] = className="euiFlexItem euiFlexItem--flexGrowZero" >
-
- -
diff --git a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/__snapshots__/settings.test.tsx.snap b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/__snapshots__/settings.test.tsx.snap index 072cf01255a0..8c1437737429 100644 --- a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/__snapshots__/settings.test.tsx.snap +++ b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/__snapshots__/settings.test.tsx.snap @@ -396,18 +396,8 @@ exports[` can navigate Autoplay Settings 2`] = ` class="euiFlexItem euiFlexItem--flexGrowZero" >
-
- -
diff --git a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/title.tsx b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/title.tsx index 955a8ee530db..6e3eba7be08d 100644 --- a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/title.tsx +++ b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/title.tsx @@ -20,7 +20,7 @@ interface Props { */ export const TitleComponent: FC = ({ title }) => ( - + diff --git a/x-pack/legacy/plugins/canvas/shareable_runtime/template.html b/x-pack/legacy/plugins/canvas/shareable_runtime/template.html index 94fe20858266..cb43ceb9af13 100644 --- a/x-pack/legacy/plugins/canvas/shareable_runtime/template.html +++ b/x-pack/legacy/plugins/canvas/shareable_runtime/template.html @@ -1,3 +1,4 @@ + diff --git a/x-pack/legacy/plugins/canvas/shareable_runtime/webpack.config.js b/x-pack/legacy/plugins/canvas/shareable_runtime/webpack.config.js index f0f98f0f4484..c711f9510a10 100644 --- a/x-pack/legacy/plugins/canvas/shareable_runtime/webpack.config.js +++ b/x-pack/legacy/plugins/canvas/shareable_runtime/webpack.config.js @@ -41,6 +41,7 @@ module.exports = { KIBANA_ROOT, 'src/legacy/core_plugins/interpreter/public/types' ), + tinymath: path.resolve(KIBANA_ROOT, 'node_modules/tinymath/lib/tinymath.es5.js'), }, extensions: ['.js', '.json', '.ts', '.tsx', '.scss'], },