From 394a393eeb3872317ee6e59f264ffdee967794d6 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Fri, 17 Aug 2018 08:16:53 -0700 Subject: [PATCH 1/4] Fix bug with EuiFlyout maxWidth interfering with responsive mode. Add size and maxWidth examples. --- CHANGELOG.md | 4 + src-docs/src/views/flyout/flyout.js | 8 +- .../src/views/flyout/flyout_complicated.js | 6 +- src-docs/src/views/flyout/flyout_example.js | 61 ++++++++++-- src-docs/src/views/flyout/flyout_large.js | 78 +++++++++++++++ src-docs/src/views/flyout/flyout_max_width.js | 96 +++++++++++++++++++ .../{flyout_size.js => flyout_small.js} | 10 +- src/components/flyout/_flyout.scss | 11 ++- 8 files changed, 251 insertions(+), 23 deletions(-) create mode 100644 src-docs/src/views/flyout/flyout_large.js create mode 100644 src-docs/src/views/flyout/flyout_max_width.js rename src-docs/src/views/flyout/{flyout_size.js => flyout_small.js} (88%) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3d21fee81f0..b29a3092e5e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,10 @@ - Added `zIndexAdjustment` to `EuiPopover` which allows tweaking the popover content's `z-index` ([#1097](https://github.com/elastic/eui/pull/1097)) - Added new `EuiSuperSelect` component and `hasArrow` prop to `EuiPopover` ([#921](https://github.com/elastic/eui/pull/921)) +**Bug fixes** + +- `EuiFlyout` responsive mode now gracefully overrides a custom `maxWidth` ([]() + ## [`3.6.1`](https://github.com/elastic/eui/tree/v3.6.1) - Added TypeScript definition for `findTestSubject` test util ([#1106](https://github.com/elastic/eui/pull/1106)) diff --git a/src-docs/src/views/flyout/flyout.js b/src-docs/src/views/flyout/flyout.js index 437860d156e..f5b26a87b7c 100644 --- a/src-docs/src/views/flyout/flyout.js +++ b/src-docs/src/views/flyout/flyout.js @@ -45,7 +45,7 @@ export class Flyout extends Component { const htmlCode = ` -

+

@@ -62,9 +62,9 @@ export class Flyout extends Component { > -

+

A typical flyout -

+ @@ -85,7 +85,7 @@ export class Flyout extends Component { return (
- Show Flyout + Show flyout {flyout} diff --git a/src-docs/src/views/flyout/flyout_complicated.js b/src-docs/src/views/flyout/flyout_complicated.js index 81b4ecdcf01..706d263e5f1 100644 --- a/src-docs/src/views/flyout/flyout_complicated.js +++ b/src-docs/src/views/flyout/flyout_complicated.js @@ -159,9 +159,9 @@ export class FlyoutComplicated extends Component { > -

+

Flyout header -

+ @@ -212,7 +212,7 @@ export class FlyoutComplicated extends Component { return (
- Show Flyout + Show flyout {flyout} diff --git a/src-docs/src/views/flyout/flyout_example.js b/src-docs/src/views/flyout/flyout_example.js index ad91f436ec1..571d0ce60f2 100644 --- a/src-docs/src/views/flyout/flyout_example.js +++ b/src-docs/src/views/flyout/flyout_example.js @@ -14,9 +14,17 @@ import { FlyoutComplicated } from './flyout_complicated'; const flyoutComplicatedSource = require('!!raw-loader!./flyout_complicated'); const flyoutComplicatedHtml = renderToHtml(FlyoutComplicated); -import { FlyoutSize } from './flyout_size'; -const flyoutSizeSource = require('!!raw-loader!./flyout_size'); -const flyoutSizeHtml = renderToHtml(FlyoutSize); +import { FlyoutSmall } from './flyout_small'; +const flyoutSmallSource = require('!!raw-loader!./flyout_small'); +const flyoutSmallHtml = renderToHtml(FlyoutSmall); + +import { FlyoutLarge } from './flyout_large'; +const flyoutLargeSource = require('!!raw-loader!./flyout_large'); +const flyoutLargeHtml = renderToHtml(FlyoutLarge); + +import { FlyoutMaxWidth } from './flyout_max_width'; +const flyoutMaxWidthSource = require('!!raw-loader!./flyout_max_width'); +const flyoutMaxWidthHtml = renderToHtml(FlyoutMaxWidth); export const FlyoutExample = { title: 'Flyout', @@ -89,15 +97,15 @@ export const FlyoutExample = { demo: , }, { - title: 'Flyout sizing and focus', + title: 'Small flyout, ownFocus', source: [ { type: GuideSectionTypes.JS, - code: flyoutSizeSource, + code: flyoutSmallSource, }, { type: GuideSectionTypes.HTML, - code: flyoutSizeHtml, + code: flyoutSmallHtml, }, ], text: ( @@ -107,7 +115,46 @@ export const FlyoutExample = { also adds background overlay to reinforce your boundries.

), - demo: , + demo: , + }, + { + title: 'Large flyout', + source: [ + { + type: GuideSectionTypes.JS, + code: flyoutLargeSource, + }, + { + type: GuideSectionTypes.HTML, + code: flyoutLargeHtml, + }, + ], + text: ( +

+ In this example, we set size to l. +

+ ), + demo: , + }, + { + title: 'maxWidth', + source: [ + { + type: GuideSectionTypes.JS, + code: flyoutMaxWidthSource, + }, + { + type: GuideSectionTypes.HTML, + code: flyoutMaxWidthHtml, + }, + ], + text: ( +

+ In this example, we set maxWidth to 33vw, to + set the width of the flyout at 33% the width of the viewport. +

+ ), + demo: , }, ], }; diff --git a/src-docs/src/views/flyout/flyout_large.js b/src-docs/src/views/flyout/flyout_large.js new file mode 100644 index 00000000000..77ab4cdbe19 --- /dev/null +++ b/src-docs/src/views/flyout/flyout_large.js @@ -0,0 +1,78 @@ +import React, { + Component, +} from 'react'; + +import { + EuiFlyout, + EuiFlyoutHeader, + EuiFlyoutBody, + EuiButton, + EuiText, + EuiTitle, +} from '../../../../src/components'; + +export class FlyoutLarge extends Component { + constructor(props) { + super(props); + + this.state = { + isFlyoutVisible: false, + isSwitchChecked: true, + }; + + 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 }); + } + + render() { + + let flyout; + if (this.state.isFlyoutVisible) { + flyout = ( + + + +

+ A large flyout +

+ + + + +

+ The large flyout is very wide. +

+ + + + ); + } + return ( +
+ + Show large flyout + + + {flyout} +
+ ); + } +} diff --git a/src-docs/src/views/flyout/flyout_max_width.js b/src-docs/src/views/flyout/flyout_max_width.js new file mode 100644 index 00000000000..ca011c1de92 --- /dev/null +++ b/src-docs/src/views/flyout/flyout_max_width.js @@ -0,0 +1,96 @@ +import React, { + Component, +} from 'react'; + +import { + EuiFlyout, + EuiFlyoutBody, + EuiFlyoutHeader, + EuiButton, + EuiText, + EuiTitle, + EuiCodeBlock, +} from '../../../../src/components'; + +export class FlyoutMaxWidth extends Component { + constructor(props) { + super(props); + + this.state = { + isFlyoutVisible: false, + isSwitchChecked: true, + }; + + 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 }); + } + + render() { + let flyout; + + const htmlCode = ` + + +

+ + + + ... + + +`; + + if (this.state.isFlyoutVisible) { + flyout = ( + + + +

+ 33% wide flyout +

+ + + + +

+ For consistency across the many flyouts, please utilize the following code for + implementing the flyout with a header. +

+ + + {htmlCode} + + + + ); + } + + return ( +
+ + Show max-width flyout + + + {flyout} +
+ ); + } +} diff --git a/src-docs/src/views/flyout/flyout_size.js b/src-docs/src/views/flyout/flyout_small.js similarity index 88% rename from src-docs/src/views/flyout/flyout_size.js rename to src-docs/src/views/flyout/flyout_small.js index e774d0e1dbf..5cd16394f1d 100644 --- a/src-docs/src/views/flyout/flyout_size.js +++ b/src-docs/src/views/flyout/flyout_small.js @@ -11,7 +11,7 @@ import { EuiTitle, } from '../../../../src/components'; -export class FlyoutSize extends Component { +export class FlyoutSmall extends Component { constructor(props) { super(props); @@ -47,13 +47,13 @@ export class FlyoutSize extends Component { ownFocus onClose={this.closeFlyout} size="s" - aria-labelledby="flyoutSizeTitle" + aria-labelledby="flyoutSmallTitle" > -

+

A small flyout -

+ @@ -69,7 +69,7 @@ export class FlyoutSize extends Component { return (
- Show Flyout + Show small flyout {flyout} diff --git a/src/components/flyout/_flyout.scss b/src/components/flyout/_flyout.scss index b10ebc707be..81a23ed7f04 100644 --- a/src/components/flyout/_flyout.scss +++ b/src/components/flyout/_flyout.scss @@ -23,10 +23,6 @@ z-index: 3; } -/** - * 1. Calculating the minimum width based on the screen takover breakpoint - * 2. Only small flyouts should NOT takover the entire screen - */ $flyoutSizes: ( "small": ( min: map-get($euiBreakpoints, "m") * .5, /* 1 */ @@ -67,16 +63,23 @@ $flyoutSizes: ( } } +/** + * 1. Calculating the minimum width based on the screen takover breakpoint + * 2. Only small flyouts should NOT takover the entire screen + * 3. If a custom maxWidth is set, we need to override it. + */ @include euiBreakpoint('xs','s') { .euiFlyout:not(.euiFlyout--small) { /* 2 */ left: 0; min-width: 0; width: auto; border-left: none; + max-width: 100vw !important; /* 3 */ } .euiFlyout--small { width: 80vw; // ensure that it's only partially showing the main content min-width: 0; /* 2 */ + max-width: 80vw !important; /* 3 */ } } From cba9343e2c0cf5d0122f91455322fcb530c084ce Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Fri, 17 Aug 2018 08:19:59 -0700 Subject: [PATCH 2/4] CHANGELOG. --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b29a3092e5e..268f91b2e30 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,7 +5,7 @@ **Bug fixes** -- `EuiFlyout` responsive mode now gracefully overrides a custom `maxWidth` ([]() +- `EuiFlyout` responsive mode now gracefully overrides a custom `maxWidth` ([#1124](https://github.com/elastic/eui/pull/1124) ## [`3.6.1`](https://github.com/elastic/eui/tree/v3.6.1) From 7ed13af94ee31eaab131133c44fab332f2396f0e Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Fri, 17 Aug 2018 10:49:35 -0700 Subject: [PATCH 3/4] Set flyout width to 448px. --- src-docs/src/views/flyout/flyout_example.js | 4 +- src-docs/src/views/flyout/flyout_max_width.js | 72 +++++++++++++------ 2 files changed, 54 insertions(+), 22 deletions(-) diff --git a/src-docs/src/views/flyout/flyout_example.js b/src-docs/src/views/flyout/flyout_example.js index 571d0ce60f2..335ea4b0fa9 100644 --- a/src-docs/src/views/flyout/flyout_example.js +++ b/src-docs/src/views/flyout/flyout_example.js @@ -150,8 +150,8 @@ export const FlyoutExample = { ], text: (

- In this example, we set maxWidth to 33vw, to - set the width of the flyout at 33% the width of the viewport. + In this example, we set maxWidth to 448px, to + set the width of the flyout at the ideal width for a form.

), demo: , diff --git a/src-docs/src/views/flyout/flyout_max_width.js b/src-docs/src/views/flyout/flyout_max_width.js index ca011c1de92..c8373c16591 100644 --- a/src-docs/src/views/flyout/flyout_max_width.js +++ b/src-docs/src/views/flyout/flyout_max_width.js @@ -9,7 +9,13 @@ import { EuiButton, EuiText, EuiTitle, - EuiCodeBlock, + EuiFieldText, + EuiForm, + EuiFormRow, + EuiFilePicker, + EuiRange, + EuiSelect, + EuiSpacer, } from '../../../../src/components'; export class FlyoutMaxWidth extends Component { @@ -42,42 +48,68 @@ export class FlyoutMaxWidth extends Component { render() { let flyout; - const htmlCode = ` - - -

- - - - ... - - -`; - if (this.state.isFlyoutVisible) { flyout = (

- 33% wide flyout + 448px wide flyout

- For consistency across the many flyouts, please utilize the following code for - implementing the flyout with a header. + In many cases, you’ll want to set a custom width that”s tailored to your content. + In this case, the flyout is an ideal width for form elements.

- - {htmlCode} - + + + + + + + + + + + + + + + + + + + + ); From c719e07b4adeedb3f6fc0dbd1164c0cccb4758c0 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Fri, 17 Aug 2018 11:16:16 -0700 Subject: [PATCH 4/4] Feedback --- src-docs/src/views/flyout/flyout_max_width.js | 2 +- src/components/flyout/_flyout.scss | 16 +++++++++------- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src-docs/src/views/flyout/flyout_max_width.js b/src-docs/src/views/flyout/flyout_max_width.js index c8373c16591..67b3de88fb9 100644 --- a/src-docs/src/views/flyout/flyout_max_width.js +++ b/src-docs/src/views/flyout/flyout_max_width.js @@ -53,7 +53,7 @@ export class FlyoutMaxWidth extends Component { diff --git a/src/components/flyout/_flyout.scss b/src/components/flyout/_flyout.scss index 81a23ed7f04..c06df9963e6 100644 --- a/src/components/flyout/_flyout.scss +++ b/src/components/flyout/_flyout.scss @@ -23,6 +23,9 @@ z-index: 3; } +/** + * 1. Calculating the minimum width based on the screen takover breakpoint + */ $flyoutSizes: ( "small": ( min: map-get($euiBreakpoints, "m") * .5, /* 1 */ @@ -64,22 +67,21 @@ $flyoutSizes: ( } /** - * 1. Calculating the minimum width based on the screen takover breakpoint - * 2. Only small flyouts should NOT takover the entire screen - * 3. If a custom maxWidth is set, we need to override it. + * 1. Only small flyouts should NOT takover the entire screen + * 2. If a custom maxWidth is set, we need to override it. */ @include euiBreakpoint('xs','s') { - .euiFlyout:not(.euiFlyout--small) { /* 2 */ + .euiFlyout:not(.euiFlyout--small) { /* 1 */ left: 0; min-width: 0; width: auto; border-left: none; - max-width: 100vw !important; /* 3 */ + max-width: 100vw !important; /* 2 */ } .euiFlyout--small { width: 80vw; // ensure that it's only partially showing the main content - min-width: 0; /* 2 */ - max-width: 80vw !important; /* 3 */ + min-width: 0; /* 1 */ + max-width: 80vw !important; /* 2 */ } }