From a9c3646c89d958aceb2f976988155da82cbec0bc Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 15 Jul 2019 16:53:32 -0400 Subject: [PATCH 1/8] Attempting to fix with EuiFlyout maxWidth --- src-docs/src/views/flyout/flyout_example.js | 16 ++-- src-docs/src/views/flyout/flyout_max_width.js | 86 ++++++++++++++++--- src/components/flyout/_flyout.scss | 6 +- 3 files changed, 86 insertions(+), 22 deletions(-) diff --git a/src-docs/src/views/flyout/flyout_example.js b/src-docs/src/views/flyout/flyout_example.js index cf9d3c0d5d6..cb36bdd4a49 100644 --- a/src-docs/src/views/flyout/flyout_example.js +++ b/src-docs/src/views/flyout/flyout_example.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { Fragment } from 'react'; import { renderToHtml } from '../../services'; @@ -9,6 +9,7 @@ import { EuiFlyout, EuiFlyoutHeader, EuiFlyoutFooter, + EuiCallOut, } from '../../../../src/components'; import { Flyout } from './flyout'; @@ -228,11 +229,14 @@ export const FlyoutExample = { }, ], text: ( -

- In this example, we set maxWidth to{' '} - 448px, to set the width of the flyout at the ideal - width for a form. -

+ +

+ In this example, we set maxWidth to{' '} + 448px, to set the width of the flyout at the + ideal width for a form. +

+ + ), snippet: flyoutMaxWidthSnippet, demo: , diff --git a/src-docs/src/views/flyout/flyout_max_width.js b/src-docs/src/views/flyout/flyout_max_width.js index aab2260b11f..2d93c330c52 100644 --- a/src-docs/src/views/flyout/flyout_max_width.js +++ b/src-docs/src/views/flyout/flyout_max_width.js @@ -4,7 +4,7 @@ import { EuiFlyout, EuiFlyoutBody, EuiFlyoutHeader, - EuiButton, + EuiLink, EuiText, EuiTitle, EuiFieldText, @@ -22,26 +22,25 @@ export class FlyoutMaxWidth extends Component { this.state = { isFlyoutVisible: false, - isSwitchChecked: true, + flyoutSize: 'm', + flyoutMaxWidth: false, }; this.closeFlyout = this.closeFlyout.bind(this); this.showFlyout = this.showFlyout.bind(this); } - onSwitchChange = () => { - this.setState({ - isSwitchChecked: !this.state.isSwitchChecked, - }); - }; - closeFlyout() { this.setState({ isFlyoutVisible: false }); } - showFlyout() { - this.setState({ isFlyoutVisible: true }); - } + showFlyout = (size = 'm', maxWidth = false) => { + this.setState({ + flyoutSize: size, + flyoutMaxWidth: maxWidth, + isFlyoutVisible: true, + }); + }; render() { let flyout; @@ -51,7 +50,8 @@ export class FlyoutMaxWidth extends Component { + size={this.state.flyoutSize} + maxWidth={this.state.flyoutMaxWidth}>

448px wide flyout

@@ -101,7 +101,67 @@ export class FlyoutMaxWidth extends Component { return (
- Show max-width flyout + this.showFlyout('s')}> + Show small flyout with no max-width + + + this.showFlyout('s', true)}> + Show small flyout with{' '} + default max-width + + + this.showFlyout('s', 448)}> + Show small flyout with{' '} + larger custom max-width + + + this.showFlyout('s', 200)}> + Show small flyout with{' '} + smaller custom max-width -- minWidth beats out except + for on small screens + + + + + this.showFlyout('m')}> + Show medium flyout with no max-width + + + this.showFlyout('m', true)}> + Show medium flyout with{' '} + default max-width + + + this.showFlyout('m', 900)}> + Show medium flyout with{' '} + larger custom max-width + + + this.showFlyout('m', 200)}> + Show medium flyout with{' '} + smaller custom max-width -- minWidth beats out + + + + + this.showFlyout('l')}> + Show large flyout with no max-width + + + this.showFlyout('l', true)}> + Show large flyout with{' '} + default max-width + + + this.showFlyout('l', 1600)}> + Show large flyout with{' '} + larger custom max-width + + + this.showFlyout('l', 200)}> + Show large flyout with{' '} + smaller custom max-width -- minWidth beats out + {flyout}
diff --git a/src/components/flyout/_flyout.scss b/src/components/flyout/_flyout.scss index 226c6f6a741..e437d28b9bc 100644 --- a/src/components/flyout/_flyout.scss +++ b/src/components/flyout/_flyout.scss @@ -33,7 +33,7 @@ $flyoutSizes: ( 'small': ( min: map-get($euiBreakpoints, 'm') * .5, /* 1 */ width: 25vw, - max: map-get($euiBreakpoints, 's'), + max: map-get($euiBreakpoints, 's') * .7, ), 'medium': ( min: map-get($euiBreakpoints, 'm') * .7, /* 1 */ @@ -85,8 +85,8 @@ $flyoutSizes: ( } .euiFlyout--small { - width: 80vw; // ensure that it's only partially showing the main content + width: 90vw; // ensure that it's only partially showing the main content min-width: 0; /* 1 */ - max-width: 80vw !important; /* 2 */ + max-width: map-get(map-get($flyoutSizes, 'small'), 'max'); } } From 897cfbef8ff93d9b94518751caa440ac8106e34d Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 15 Jul 2019 17:26:09 -0400 Subject: [PATCH 2/8] Set minWidth to 0 IF NOT small size --- src-docs/src/views/flyout/flyout_max_width.js | 10 ++++++---- .../flyout/__snapshots__/flyout.test.js.snap | 4 ++-- src/components/flyout/flyout.js | 3 ++- 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src-docs/src/views/flyout/flyout_max_width.js b/src-docs/src/views/flyout/flyout_max_width.js index 2d93c330c52..91d1bbfcd42 100644 --- a/src-docs/src/views/flyout/flyout_max_width.js +++ b/src-docs/src/views/flyout/flyout_max_width.js @@ -137,9 +137,10 @@ export class FlyoutMaxWidth extends Component { larger custom max-width - this.showFlyout('m', 200)}> + this.showFlyout('m', 448)}> Show medium flyout with{' '} - smaller custom max-width -- minWidth beats out + smaller custom max-width -- full 100vw wins out on + small screens @@ -158,9 +159,10 @@ export class FlyoutMaxWidth extends Component { larger custom max-width - this.showFlyout('l', 200)}> + this.showFlyout('l', 448)}> Show large flyout with{' '} - smaller custom max-width -- minWidth beats out + smaller custom max-width -- full 100vw wins out on + small screens {flyout} diff --git a/src/components/flyout/__snapshots__/flyout.test.js.snap b/src/components/flyout/__snapshots__/flyout.test.js.snap index a9fc7512c54..bbcc1ac4f8d 100644 --- a/src/components/flyout/__snapshots__/flyout.test.js.snap +++ b/src/components/flyout/__snapshots__/flyout.test.js.snap @@ -69,7 +69,7 @@ exports[`EuiFlyout max width can be set to a custom number 1`] = ` ); diff --git a/src/components/flyout/_flyout.scss b/src/components/flyout/_flyout.scss index 5fed6195c32..cda11c8a26b 100644 --- a/src/components/flyout/_flyout.scss +++ b/src/components/flyout/_flyout.scss @@ -1,3 +1,5 @@ +@import '../form/variables'; + .euiFlyout { border-left: $euiBorderThin; // The mixin augments the above @@ -36,7 +38,8 @@ $flyoutSizes: ( max: round(map-get($euiBreakpoints, 's') * .7), ), 'medium': ( - min: round(map-get($euiBreakpoints, 'm') * .7), /* 1 */ + // Calculated for forms plus padding + min: $euiFormMaxWidth + ($euiSizeM * 2), width: 50vw, max: map-get($euiBreakpoints, 'm'), ), From 9c682b473725d53a102b65eda745a1813e53536c Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 17 Jul 2019 14:40:52 -0400 Subject: [PATCH 6/8] cl --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 932a368fbfd..e8255121914 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ - Fixed `EuiComboBox`'s padding on the right ([#2135](https://github.com/elastic/eui/pull/2135)) - Fixed `EuiAccordion` to correctly account for changing computed height of child elements ([#2136](https://github.com/elastic/eui/pull/2136)) +- Fixed some `EuiFlyout` sizing ([#2125](https://github.com/elastic/eui/pull/2125)) **Breaking changes** From 4a74085d2a393e87b7696448a980a3425ae51e20 Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Fri, 19 Jul 2019 19:23:45 -0400 Subject: [PATCH 7/8] Update src-docs/src/views/not_found/not_found_view.js Co-Authored-By: dave.snider@gmail.com --- src-docs/src/views/not_found/not_found_view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/not_found/not_found_view.js b/src-docs/src/views/not_found/not_found_view.js index 882936f58a4..cfedd417ca0 100644 --- a/src-docs/src/views/not_found/not_found_view.js +++ b/src-docs/src/views/not_found/not_found_view.js @@ -8,7 +8,7 @@ export const NotFoundView = () => (

- Wow, a 404! You just created something from nothing. + 404

From 54318390a6e57ba36aea8aa7954368fcdf0066a5 Mon Sep 17 00:00:00 2001 From: cchaos Date: Sat, 20 Jul 2019 00:20:51 -0400 Subject: [PATCH 8/8] prettier --- src-docs/src/views/not_found/not_found_view.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src-docs/src/views/not_found/not_found_view.js b/src-docs/src/views/not_found/not_found_view.js index cfedd417ca0..d17729d6477 100644 --- a/src-docs/src/views/not_found/not_found_view.js +++ b/src-docs/src/views/not_found/not_found_view.js @@ -7,9 +7,7 @@ export const NotFoundView = () => (

-

- 404 -

+

404

You visited a page which doesn’t exist, causing this{' '}