From 5591dba4a9ab1cb841cf2c250fde114502dda830 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 6 Aug 2018 16:09:32 -0400 Subject: [PATCH 1/4] Adding `maxWidth` prop to `EuiFlyout` --- src-docs/src/views/flyout/flyout.js | 2 + .../flyout/__snapshots__/flyout.test.js.snap | 83 +++++++++++++++++++ src/components/flyout/_flyout.scss | 13 ++- src/components/flyout/flyout.js | 32 ++++++- src/components/flyout/flyout.test.js | 27 +++++- 5 files changed, 152 insertions(+), 5 deletions(-) diff --git a/src-docs/src/views/flyout/flyout.js b/src-docs/src/views/flyout/flyout.js index 437860d156e..37b45b0c895 100644 --- a/src-docs/src/views/flyout/flyout.js +++ b/src-docs/src/views/flyout/flyout.js @@ -57,6 +57,8 @@ export class Flyout extends Component { if (this.state.isFlyoutVisible) { flyout = ( diff --git a/src/components/flyout/__snapshots__/flyout.test.js.snap b/src/components/flyout/__snapshots__/flyout.test.js.snap index e1acc04f82e..93ce540a181 100644 --- a/src/components/flyout/__snapshots__/flyout.test.js.snap +++ b/src/components/flyout/__snapshots__/flyout.test.js.snap @@ -43,6 +43,89 @@ exports[`EuiFlyout is rendered 1`] = ` `; +exports[`EuiFlyout max width can be set to a custom number 1`] = ` + +
+ +
+ +`; + +exports[`EuiFlyout max width can be set to a default 1`] = ` + +
+ +
+ +`; + exports[`EuiFlyout props close button is not rendered 1`] = `
diff --git a/src/components/flyout/_flyout.scss b/src/components/flyout/_flyout.scss index 72b34e768d6..b10ebc707be 100644 --- a/src/components/flyout/_flyout.scss +++ b/src/components/flyout/_flyout.scss @@ -30,15 +30,18 @@ $flyoutSizes: ( "small": ( min: map-get($euiBreakpoints, "m") * .5, /* 1 */ - width: 25vw + width: 25vw, + max: map-get($euiBreakpoints, "s"), ), "medium": ( min: map-get($euiBreakpoints, "m") * .7, /* 1 */ - width: 50vw + width: 50vw, + max: map-get($euiBreakpoints, "m"), ), "large": ( min: map-get($euiBreakpoints, "m") * .9, /* 1 */ - width: 75vw + width: 75vw, + max: map-get($euiBreakpoints, "l"), ) ); @@ -46,6 +49,10 @@ $flyoutSizes: ( .euiFlyout--#{$name} { min-width: map-get($sizing, min); width: map-get($sizing, width); + + &.euiFlyout--maxWidth-default { + max-width: map-get($sizing, max); + } } } diff --git a/src/components/flyout/flyout.js b/src/components/flyout/flyout.js index abf031b280d..f65b06b11bf 100644 --- a/src/components/flyout/flyout.js +++ b/src/components/flyout/flyout.js @@ -34,10 +34,28 @@ export class EuiFlyout extends Component { ownFocus, size, closeButtonAriaLabel, + maxWidth, + style, ...rest } = this.props; - const classes = classnames('euiFlyout', sizeToClassNameMap[size], className); + let newStyle; + let widthClassName; + if (maxWidth === true) { + widthClassName = 'euiFlyout--maxWidth-default'; + } else if (maxWidth !== false) { + // if style has been passed as a prop, add to it + if (style) { + newStyle = style; + newStyle.maxWidth = `${maxWidth}px`; + } + // otherwise create a new object + else { + newStyle = { maxWidth: `${maxWidth}px` }; + } + } + + const classes = classnames('euiFlyout', sizeToClassNameMap[size], widthClassName, className); let closeButton; if (onClose && !hideCloseButton) { @@ -62,6 +80,7 @@ export class EuiFlyout extends Component { className={classes} tabIndex={0} onKeyDown={this.onKeyDown} + style={newStyle} {...rest} > {closeButton} @@ -111,6 +130,16 @@ EuiFlyout.propTypes = { * Specify an aria-label for the close button of the flyout */ closeButtonAriaLabel: PropTypes.string, + /** + * Sets the max-width of the page, + * set to `true` to use the default size, + * set to `false` to not restrict the width, + * set to a number for a custom width. + */ + maxWidth: PropTypes.oneOfType([ + PropTypes.bool, + PropTypes.number + ]), }; EuiFlyout.defaultProps = { @@ -118,4 +147,5 @@ EuiFlyout.defaultProps = { hideCloseButton: false, ownFocus: false, closeButtonAriaLabel: 'Closes this dialog', + maxWidth: false, }; diff --git a/src/components/flyout/flyout.test.js b/src/components/flyout/flyout.test.js index a24395a6774..d4109d1af07 100644 --- a/src/components/flyout/flyout.test.js +++ b/src/components/flyout/flyout.test.js @@ -57,7 +57,6 @@ describe('EuiFlyout', () => { }); }); - describe('size', () => { SIZES.forEach(size => { it(`${size} is rendered`, () => { @@ -73,4 +72,30 @@ describe('EuiFlyout', () => { }); }); }); + + describe('max width', () => { + test('can be set to a default', () => { + const component = render( + {}} + maxWidth={true} + /> + ); + + expect(component) + .toMatchSnapshot(); + }); + + test('can be set to a custom number', () => { + const component = render( + {}} + maxWidth={1024} + /> + ); + + expect(component) + .toMatchSnapshot(); + }); + }); }); From e2f7cc2a2382c45d285be51d46ae30b040baea5a Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 6 Aug 2018 16:55:38 -0400 Subject: [PATCH 2/4] Update documentation and changelog --- CHANGELOG.md | 1 + src-docs/src/views/flyout/flyout_example.js | 99 +++++++++++---------- 2 files changed, 53 insertions(+), 47 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5d19884bff4..20bd905e7ec 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ - Added `!default` to border SASS props ([#1079](https://github.com/elastic/eui/pull/1079)) - Added `repositionOnScroll` prop to `EuiPopover` which enables repositioning the popover when the window is scrolled. ([#1064](https://github.com/elastic/eui/pull/1064)) - Allow `_` and `*` characters to be used in `EuiSearchBar` query terms ([#1058](https://github.com/elastic/eui/pull/1058)) +- Added `maxWidth` prop `EuiFlyout` ([#1090](https://github.com/elastic/eui/pull/1090)) **Bug fixes** diff --git a/src-docs/src/views/flyout/flyout_example.js b/src-docs/src/views/flyout/flyout_example.js index bc2ebb63339..9f4a3027ea9 100644 --- a/src-docs/src/views/flyout/flyout_example.js +++ b/src-docs/src/views/flyout/flyout_example.js @@ -2,16 +2,9 @@ import React from 'react'; import { renderToHtml } from '../../services'; -import { - GuideSectionTypes, -} from '../../components'; +import { GuideSectionTypes } from '../../components'; -import { - EuiCode, - EuiFlyout, - EuiFlyoutHeader, - EuiFlyoutFooter, -} from '../../../../src/components'; +import { EuiCode, EuiFlyout, EuiFlyoutHeader, EuiFlyoutFooter } from '../../../../src/components'; import { Flyout } from './flyout'; const flyoutSource = require('!!raw-loader!./flyout'); @@ -29,36 +22,43 @@ export const FlyoutExample = { title: 'Flyout', sections: [ { - source: [{ - type: GuideSectionTypes.JS, - code: flyoutSource, - }, { - type: GuideSectionTypes.HTML, - code: flyoutHtml, - }], + source: [ + { + type: GuideSectionTypes.JS, + code: flyoutSource, + }, + { + type: GuideSectionTypes.HTML, + code: flyoutHtml, + }, + ], text: (

- EuiFlyout is a fixed position panel that pops in - from the right side of the screen. It should be used any time you - need to perform quick, individual actions to a larger page or list. + EuiFlyout is a fixed position panel that pops in from the right side + of the screen. It should be used any time you need to perform quick, individual actions + to a larger page or list.

  • - size accepts s / m / l and - defines the width of the panel. + size accepts s / m / l and defines the width of + the panel.
  • - ownFocus is a boolean that - when true will lock the mouse / keyboard focus - to within the flyout. It is off by default. + ownFocus is a boolean that when true will lock + the mouse / keyboard focus to within the flyout. It is off by default. +
    • +
  • + maxWidth accepts a boolean or number. When set to{' '} + true, it adds a predefined maxWidth or you can pass an integer set + the max width to a custom size.

- Notice how these examples use aria-labelledby to - announce the flyout to screen readers when the user opens it. + Notice how these examples use aria-labelledby to announce the flyout + to screen readers when the user opens it.

), @@ -67,19 +67,22 @@ export const FlyoutExample = { }, { title: 'More complicated Flyout', - source: [{ - type: GuideSectionTypes.JS, - code: flyoutComplicatedSource, - }, { - type: GuideSectionTypes.HTML, - code: flyoutComplicatedHtml, - }], + source: [ + { + type: GuideSectionTypes.JS, + code: flyoutComplicatedSource, + }, + { + type: GuideSectionTypes.HTML, + code: flyoutComplicatedHtml, + }, + ], text: (

In this example we use EuiFlyoutHeader and - EuiFlyoutFooter to allow for fixed position navigation - and actions within a flyout. Note that any content - within EuiContentBody will automatcially overflow. + EuiFlyoutFooter to allow for fixed position navigation and actions + within a flyout. Note that any content within EuiContentBody will + automatcially overflow.

), props: { EuiFlyoutFooter }, @@ -87,19 +90,21 @@ export const FlyoutExample = { }, { title: 'Flyout sizing and focus', - source: [{ - type: GuideSectionTypes.JS, - code: flyoutSizeSource, - }, { - type: GuideSectionTypes.HTML, - code: flyoutSizeHtml, - }], + source: [ + { + type: GuideSectionTypes.JS, + code: flyoutSizeSource, + }, + { + type: GuideSectionTypes.HTML, + code: flyoutSizeHtml, + }, + ], text: (

- In this example, we set size to s and - apply the ownFocus prop. The latter not only traps the - focus of our flyout, but also adds background overlay to reinforce your - boundries. + In this example, we set size to s and apply the{' '} + ownFocus prop. The latter not only traps the focus of our flyout, but + also adds background overlay to reinforce your boundries.

), demo: , From 7e9d483de91550e35ac59110a54db64f336b942e Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 6 Aug 2018 16:56:39 -0400 Subject: [PATCH 3/4] Forgot to remove test code --- src-docs/src/views/flyout/flyout.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src-docs/src/views/flyout/flyout.js b/src-docs/src/views/flyout/flyout.js index 37b45b0c895..437860d156e 100644 --- a/src-docs/src/views/flyout/flyout.js +++ b/src-docs/src/views/flyout/flyout.js @@ -57,8 +57,6 @@ export class Flyout extends Component { if (this.state.isFlyoutVisible) { flyout = ( From 04c3127a2bb66b53c5b8267f18afb5efb99b7204 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 6 Aug 2018 18:32:05 -0400 Subject: [PATCH 4/4] Addressing PR comments && - Added `string` to allowed `restrictWidth` prop type of `EuiPage` and `EuiPageBody` - Fixed wrong class name being added to `EuiPageBody` when `restrictWidth !== false` - Added these props to their TS defs --- CHANGELOG.md | 2 + src-docs/src/views/flyout/flyout_example.js | 2 +- src-docs/src/views/page/page_example.js | 231 ++++++++++-------- .../flyout/__snapshots__/flyout.test.js.snap | 42 ++++ src/components/flyout/flyout.js | 19 +- src/components/flyout/flyout.test.js | 12 + src/components/flyout/index.d.ts | 8 + .../page/__snapshots__/page.test.js.snap | 21 +- src/components/page/index.d.ts | 54 ++-- src/components/page/page.js | 24 +- src/components/page/page.test.js | 30 ++- .../__snapshots__/page_body.test.js.snap | 28 ++- src/components/page/page_body/page_body.js | 29 +-- .../page/page_body/page_body.test.js | 27 +- 14 files changed, 331 insertions(+), 198 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 20bd905e7ec..5227800e7db 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ - Added `repositionOnScroll` prop to `EuiPopover` which enables repositioning the popover when the window is scrolled. ([#1064](https://github.com/elastic/eui/pull/1064)) - Allow `_` and `*` characters to be used in `EuiSearchBar` query terms ([#1058](https://github.com/elastic/eui/pull/1058)) - Added `maxWidth` prop `EuiFlyout` ([#1090](https://github.com/elastic/eui/pull/1090)) +- Added `string` to allowed `restrictWidth` prop type of `EuiPage` and `EuiPageBody` ([#1090](https://github.com/elastic/eui/pull/1090)) **Bug fixes** @@ -12,6 +13,7 @@ - Fixed large drop shadows so they work on darker backgrounds ([#1079](https://github.com/elastic/eui/pull/1079)) - Added `resize-observer-polyfill` as a dependency (was previously a devDependency) ([#1085](https://github.com/elastic/eui/pull/1085)) - Fixed `EuiBasicTable` to inform its parent about a selection change triggered by a different set of `items` ([#1086](https://github.com/elastic/eui/pull/1086)) +- Fixed wrong class name being added to `EuiPageBody` when `restrictWidth !== false` ([#1090](https://github.com/elastic/eui/pull/1090)) ## [`3.3.0`](https://github.com/elastic/eui/tree/v3.3.0) diff --git a/src-docs/src/views/flyout/flyout_example.js b/src-docs/src/views/flyout/flyout_example.js index 9f4a3027ea9..ad91f436ec1 100644 --- a/src-docs/src/views/flyout/flyout_example.js +++ b/src-docs/src/views/flyout/flyout_example.js @@ -52,7 +52,7 @@ export const FlyoutExample = {
  • maxWidth accepts a boolean or number. When set to{' '} true, it adds a predefined maxWidth or you can pass an integer set - the max width to a custom size. + the max width to a custom pixel value or a string to set it to a custom measurement.
    • diff --git a/src-docs/src/views/page/page_example.js b/src-docs/src/views/page/page_example.js index 7893ff9b818..56acc063a3e 100644 --- a/src-docs/src/views/page/page_example.js +++ b/src-docs/src/views/page/page_example.js @@ -2,9 +2,7 @@ import React from 'react'; import { renderToHtml } from '../../services'; -import { - GuideSectionTypes, -} from '../../components'; +import { GuideSectionTypes } from '../../components'; import { EuiCode, @@ -41,105 +39,140 @@ const PageContentCenterWithSideBarHtml = renderToHtml(Page); export const PageExample = { title: 'Page', - sections: [{ - title: 'Page with everything on', - source: [{ - type: GuideSectionTypes.JS, - code: pageSource, - }, { - type: GuideSectionTypes.HTML, - code: pageHtml, - }], - text: ( -
    + sections: [ + { + title: 'Page with everything on', + source: [ + { + type: GuideSectionTypes.JS, + code: pageSource, + }, + { + type: GuideSectionTypes.HTML, + code: pageHtml, + }, + ], + text: ( +
    +

    + Page layouts are modular and have the ability to add or remove components as needed for + the design. These examples are colored for illustrative purposes only. +

    +

    + By default, the entire page will always be 100% of the window's width, to max this + out the typical width and center the page, set the restrictWidth prop + to true. You can also pass an integer to this property to max out the + width at a custom pixel value or a string with a custom measurement. +

    +
    + ), + props: { + EuiPage, + EuiPageBody, + EuiPageContent, + EuiPageContentBody, + EuiPageContentHeader, + EuiPageContentHeaderSection, + EuiPageHeader, + EuiPageHeaderSection, + EuiPageSideBar, + }, + demo: ( +
    + +
    + ), + }, + { + title: 'Simple page with title', + source: [ + { + type: GuideSectionTypes.JS, + code: pageSimpleSource, + }, + { + type: GuideSectionTypes.HTML, + code: pageSimpleHtml, + }, + ], + text: (

    - Page layouts are modular and have the ability to add or remove components - as needed for the design. These examples are colored for illustrative - purposes only. + Most pages don’t have sidebars. A lot of our pages don’t have extra abilities + next to the title. Simply exclude those components and everything will still line up.

    + ), + demo: ( +
    + +
    + ), + }, + { + title: 'Page with content only', + source: [ + { + type: GuideSectionTypes.JS, + code: pageContentOnlySource, + }, + { + type: GuideSectionTypes.HTML, + code: pageContentOnlyHtml, + }, + ], + text:

    We can further simplify pages by only showing the content.

    , + demo: ( +
    + +
    + ), + }, + { + title: 'Page content centered', + source: [ + { + type: GuideSectionTypes.JS, + code: pageContentCenterSource, + }, + { + type: GuideSectionTypes.HTML, + code: pageContentCenterHtml, + }, + ], + text: ( +

    + The page content can be optionally centered either vertically or horizontally. This is + useful for various empty states. +

    + ), + demo: ( +
    + +
    + ), + }, + { + title: 'Page content centered in a full layout', + source: [ + { + type: GuideSectionTypes.JS, + code: PageContentCenterWithSideBarSource, + }, + { + type: GuideSectionTypes.HTML, + code: PageContentCenterWithSideBarHtml, + }, + ], + text: (

    - By default, the entire page will always be 100% of the window's width, - to max this out the typical width and center the page, set - the restrictWidth prop to true. You - can also pass an integer to this property to max out the width at a custom - size. + Centering the content can happen regardless of layout configuration. In this example, + we’re cetnering within a complex sidebar layout.

    -
    - ), - props: { - EuiPage, - EuiPageBody, - EuiPageContent, - EuiPageContentBody, - EuiPageContentHeader, - EuiPageContentHeaderSection, - EuiPageHeader, - EuiPageHeaderSection, - EuiPageSideBar, + ), + demo: ( +
    + +
    + ), }, - demo:
    , - }, { - title: 'Simple page with title', - source: [{ - type: GuideSectionTypes.JS, - code: pageSimpleSource, - }, { - type: GuideSectionTypes.HTML, - code: pageSimpleHtml, - }], - text: ( -

    - Most pages don’t have sidebars. A lot of our pages don’t have extra abilities next to the title. - Simply exclude those components and everything will still line up. -

    - ), - demo:
    , - }, { - title: 'Page with content only', - source: [{ - type: GuideSectionTypes.JS, - code: pageContentOnlySource, - }, { - type: GuideSectionTypes.HTML, - code: pageContentOnlyHtml, - }], - text: ( -

    - We can further simplify pages by only showing the content. -

    - ), - demo:
    , - }, { - title: 'Page content centered', - source: [{ - type: GuideSectionTypes.JS, - code: pageContentCenterSource, - }, { - type: GuideSectionTypes.HTML, - code: pageContentCenterHtml, - }], - text: ( -

    - The page content can be optionally centered either vertically - or horizontally. This is useful for various empty states. -

    - ), - demo:
    , - }, { - title: 'Page content centered in a full layout', - source: [{ - type: GuideSectionTypes.JS, - code: PageContentCenterWithSideBarSource, - }, { - type: GuideSectionTypes.HTML, - code: PageContentCenterWithSideBarHtml, - }], - text: ( -

    - Centering the content can happen regardless of layout configuration. - In this example, we’re cetnering within a complex sidebar layout. -

    - ), - demo:
    , - }], + ], }; diff --git a/src/components/flyout/__snapshots__/flyout.test.js.snap b/src/components/flyout/__snapshots__/flyout.test.js.snap index 93ce540a181..f3178669bb2 100644 --- a/src/components/flyout/__snapshots__/flyout.test.js.snap +++ b/src/components/flyout/__snapshots__/flyout.test.js.snap @@ -85,6 +85,48 @@ exports[`EuiFlyout max width can be set to a custom number 1`] = ` `; +exports[`EuiFlyout max width can be set to a custom value and measurement 1`] = ` + +
    + +
    +     +`; + exports[`EuiFlyout max width can be set to a default 1`] = `
    diff --git a/src/components/flyout/flyout.js b/src/components/flyout/flyout.js index f65b06b11bf..251b8961066 100644 --- a/src/components/flyout/flyout.js +++ b/src/components/flyout/flyout.js @@ -44,15 +44,8 @@ export class EuiFlyout extends Component { if (maxWidth === true) { widthClassName = 'euiFlyout--maxWidth-default'; } else if (maxWidth !== false) { - // if style has been passed as a prop, add to it - if (style) { - newStyle = style; - newStyle.maxWidth = `${maxWidth}px`; - } - // otherwise create a new object - else { - newStyle = { maxWidth: `${maxWidth}px` }; - } + const value = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth; + newStyle = { ...style, maxWidth: value }; } const classes = classnames('euiFlyout', sizeToClassNameMap[size], widthClassName, className); @@ -80,7 +73,7 @@ export class EuiFlyout extends Component { className={classes} tabIndex={0} onKeyDown={this.onKeyDown} - style={newStyle} + style={newStyle || style} {...rest} > {closeButton} @@ -134,11 +127,13 @@ EuiFlyout.propTypes = { * Sets the max-width of the page, * set to `true` to use the default size, * set to `false` to not restrict the width, - * set to a number for a custom width. + * set to a number for a custom width in px, + * set to a string for a custom width in custom measurement. */ maxWidth: PropTypes.oneOfType([ PropTypes.bool, - PropTypes.number + PropTypes.number, + PropTypes.string, ]), }; diff --git a/src/components/flyout/flyout.test.js b/src/components/flyout/flyout.test.js index d4109d1af07..046973fa87b 100644 --- a/src/components/flyout/flyout.test.js +++ b/src/components/flyout/flyout.test.js @@ -97,5 +97,17 @@ describe('EuiFlyout', () => { expect(component) .toMatchSnapshot(); }); + + test('can be set to a custom value and measurement', () => { + const component = render( + {}} + maxWidth="24rem" + /> + ); + + expect(component) + .toMatchSnapshot(); + }); }); }); diff --git a/src/components/flyout/index.d.ts b/src/components/flyout/index.d.ts index 00ed8058b79..918a526f2e2 100644 --- a/src/components/flyout/index.d.ts +++ b/src/components/flyout/index.d.ts @@ -14,6 +14,14 @@ declare module '@elastic/eui' { * Specify an aria-label for the close button of the flyout. */ closeButtonAriaLabel?: string; + /** + * Sets the max-width of the page, + * set to `true` to use the default size, + * set to `false` to not restrict the width, + * set to a number for a custom width in px, + * set to a string for a custom width in custom measurement. + */ + maxWidth?: boolean | number | string; } export const EuiFlyout: React.SFC< diff --git a/src/components/page/__snapshots__/page.test.js.snap b/src/components/page/__snapshots__/page.test.js.snap index 923def06dd4..622d924aabd 100644 --- a/src/components/page/__snapshots__/page.test.js.snap +++ b/src/components/page/__snapshots__/page.test.js.snap @@ -3,12 +3,12 @@ exports[`EuiPage is rendered 1`] = `
    `; -exports[`EuiPage sets a max-width 1`] = ` +exports[`EuiPage restrict width can be set to a custom number 1`] = `
    `; + +exports[`EuiPage restrict width can be set to a custom value and measurement 1`] = ` +
    +`; + +exports[`EuiPage restrict width can be set to a default 1`] = ` +
    +`; diff --git a/src/components/page/index.d.ts b/src/components/page/index.d.ts index 286a42af198..f8b538df508 100644 --- a/src/components/page/index.d.ts +++ b/src/components/page/index.d.ts @@ -4,38 +4,36 @@ import { SFC, HTMLAttributes } from 'react'; declare module '@elastic/eui' { + export interface EuiPageWidthProps { + /** + * Sets the max-width of the page, + * set to `true` to use the default size, + * set to `false` to not restrict the width, + * set to a number for a custom width in px, + * set to a string for a custom width in custom measurement. + */ + restrictWidth?: boolean | number | string; + } /** * @see './page.js' */ - export const EuiPage: SFC< - CommonProps & HTMLAttributes - >; - + export const EuiPage: SFC>; /** * @see ./page_header/page_header.js */ - export const EuiPageHeader: SFC< - CommonProps & HTMLAttributes - >; - + export const EuiPageHeader: SFC>; /** * @see ./page_header/page_header_section.js */ - export const EuiPageHeaderSection: SFC< - CommonProps & HTMLAttributes - >; - + export const EuiPageHeaderSection: SFC>; /** * @see ./page_body/page_body.js */ - export const EuiPageBody: SFC< - CommonProps & HTMLAttributes - >; - + export const EuiPageBody: SFC>; /** * @see ./page_content/page_content.js @@ -51,39 +49,25 @@ declare module '@elastic/eui' { horizontalPosition?: EuiPageContentHorizontalPosition; } - export const EuiPageContent: SFC< - CommonProps & EuiPanelProps & EuiPageContentProps - >; - + export const EuiPageContent: SFC; /** * @see ./page_content/page_content_body.js */ - export const EuiPageContentBody: SFC< - CommonProps & HTMLAttributes - >; - + export const EuiPageContentBody: SFC>; /** * @see ./page_content/page_content_header.js */ - export const EuiPageContentHeader: SFC< - CommonProps & HTMLAttributes - >; - + export const EuiPageContentHeader: SFC>; /** * @see ./page_content/page_content_header_section.js */ - export const EuiPageContentHeaderSection: SFC< - CommonProps & HTMLAttributes - >; + export const EuiPageContentHeaderSection: SFC>; /** * @see ./page_side_bar/page_side_bar.js */ - export const EuiPageSideBar: SFC< - CommonProps & HTMLAttributes - >; - + export const EuiPageSideBar: SFC>; } diff --git a/src/components/page/page.js b/src/components/page/page.js index a4ba36dd1e4..e93b90c8a76 100644 --- a/src/components/page/page.js +++ b/src/components/page/page.js @@ -4,22 +4,14 @@ import classNames from 'classnames'; export const EuiPage = ({ children, className, restrictWidth, style, ...rest }) => { let widthClassname; + let newStyle; if (restrictWidth === true) { widthClassname = 'euiPage--restrictWidth-default'; - } else if (restrictWidth === false) { - widthClassname = 'euiPage--widthIsNotRestricted'; - } else { + } else if (restrictWidth !== false) { widthClassname = 'euiPage--restrictWidth-custom'; - - // if style has been passed as a prop, add to it - if (style) { - style.maxWidth = `${restrictWidth}px`; - } - // otherwise create a new object - else { - style = { maxWidth: `${restrictWidth}px` }; - } + const value = typeof maxWidth === 'number' ? `${restrictWidth}px` : restrictWidth; + newStyle = { ...style, maxWidth: value }; } const classes = classNames( @@ -31,7 +23,7 @@ export const EuiPage = ({ children, className, restrictWidth, style, ...rest }) return (
    {children} @@ -47,11 +39,13 @@ EuiPage.propTypes = { * Sets the max-width of the page, * set to `true` to use the default size, * set to `false` to not restrict the width, - * set to a number for a custom width. + * set to a number for a custom width in px, + * set to a string for a custom width in custom measurement. */ restrictWidth: PropTypes.oneOfType([ PropTypes.bool, - PropTypes.number + PropTypes.number, + PropTypes.string, ]), }; diff --git a/src/components/page/page.test.js b/src/components/page/page.test.js index 98bac1462a8..3c0d895bc7e 100644 --- a/src/components/page/page.test.js +++ b/src/components/page/page.test.js @@ -6,20 +6,28 @@ import { EuiPage } from './page'; describe('EuiPage', () => { test('is rendered', () => { - const component = render( - - ); + const component = render(); - expect(component) - .toMatchSnapshot(); + expect(component).toMatchSnapshot(); }); - test('sets a max-width', () => { - const component = render( - - ); + describe('restrict width', () => { + test('can be set to a default', () => { + const component = render(); - expect(component) - .toMatchSnapshot(); + expect(component).toMatchSnapshot(); + }); + + test('can be set to a custom number', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + + test('can be set to a custom value and measurement', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); }); }); diff --git a/src/components/page/page_body/__snapshots__/page_body.test.js.snap b/src/components/page/page_body/__snapshots__/page_body.test.js.snap index 35574c6eb50..e9b1a25ef9f 100644 --- a/src/components/page/page_body/__snapshots__/page_body.test.js.snap +++ b/src/components/page/page_body/__snapshots__/page_body.test.js.snap @@ -3,7 +3,33 @@ exports[`EuiPageBody is rendered 1`] = `
    +`; + +exports[`EuiPageBody restrict width can be set to a custom number 1`] = ` +
    +`; + +exports[`EuiPageBody restrict width can be set to a custom value and measurement 1`] = ` +
    +`; + +exports[`EuiPageBody restrict width can be set to a default 1`] = ` +
    `; diff --git a/src/components/page/page_body/page_body.js b/src/components/page/page_body/page_body.js index 7c1ba034314..9d6b123506f 100644 --- a/src/components/page/page_body/page_body.js +++ b/src/components/page/page_body/page_body.js @@ -5,21 +5,14 @@ import classNames from 'classnames'; export const EuiPageBody = ({ children, restrictWidth, style, className, ...rest }) => { let widthClassname; + let newStyle; + if (restrictWidth === true) { - widthClassname = 'euiPage--restrictWidth-default'; - } else if (restrictWidth === false) { - widthClassname = 'euiPage--widthIsNotRestricted'; - } else { - widthClassname = 'euiPage--restrictWidth-custom'; - - // if style has been passed as a prop, add to it - if (style) { - style.maxWidth = `${restrictWidth}px`; - } - // otherwise create a new object - else { - style = { maxWidth: `${restrictWidth}px` }; - } + widthClassname = 'euiPageBody--restrictWidth-default'; + } else if (restrictWidth !== false) { + widthClassname = 'euiPageBody--restrictWidth-custom'; + const value = typeof maxWidth === 'number' ? `${restrictWidth}px` : restrictWidth; + newStyle = { ...style, maxWidth: value }; } const classes = classNames('euiPageBody', widthClassname, className); @@ -27,7 +20,7 @@ export const EuiPageBody = ({ children, restrictWidth, style, className, ...rest return (
    {children} @@ -43,11 +36,13 @@ EuiPageBody.propTypes = { * Sets the max-width of the page, * set to `true` to use the default size, * set to `false` to not restrict the width, - * set to a number for a custom width. + * set to a number for a custom width in px, + * set to a string for a custom width in custom measurement. */ restrictWidth: PropTypes.oneOfType([ PropTypes.bool, - PropTypes.number + PropTypes.number, + PropTypes.string, ]), }; diff --git a/src/components/page/page_body/page_body.test.js b/src/components/page/page_body/page_body.test.js index f08a2d896bc..a455e3827e3 100644 --- a/src/components/page/page_body/page_body.test.js +++ b/src/components/page/page_body/page_body.test.js @@ -6,11 +6,28 @@ import { EuiPageBody } from './page_body'; describe('EuiPageBody', () => { test('is rendered', () => { - const component = render( - - ); + const component = render(); - expect(component) - .toMatchSnapshot(); + expect(component).toMatchSnapshot(); + }); + + describe('restrict width', () => { + test('can be set to a default', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + + test('can be set to a custom number', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + + test('can be set to a custom value and measurement', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); }); });