From 403d49f9834b296ad5930349778198d8d3d0e668 Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 1 Jun 2018 16:30:35 -0400 Subject: [PATCH 1/4] Added `restrictWidth` to `EuiPage` - Breaking: the default is to max-width the page at 1000px --- src-docs/src/components/guide_components.scss | 5 --- src-docs/src/views/app_view.js | 2 +- .../page/__snapshots__/page.test.js.snap | 11 ++++- src/components/page/_page.scss | 11 +++++ src/components/page/page.js | 40 ++++++++++++++++++- src/components/page/page.test.js | 9 +++++ 6 files changed, 69 insertions(+), 9 deletions(-) diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss index c70766030ac..4905de52968 100644 --- a/src-docs/src/components/guide_components.scss +++ b/src-docs/src/components/guide_components.scss @@ -34,11 +34,6 @@ $guideZLevelHighest: $euiZLevel9 + 1000; background: linear-gradient(90deg, $euiColorLightestShade 50%, $euiColorEmptyShade 50%); } -#guide { - margin: auto; - max-width: 1240px; -} - .guidePage { padding: 0; } diff --git a/src-docs/src/views/app_view.js b/src-docs/src/views/app_view.js index 4b59d761d5b..90ad43a0647 100644 --- a/src-docs/src/views/app_view.js +++ b/src-docs/src/views/app_view.js @@ -52,7 +52,7 @@ export class AppView extends Component { const { navigation } = routes; return ( - + `; + +exports[`EuiPage sets a max-width 1`] = ` +
+`; diff --git a/src/components/page/_page.scss b/src/components/page/_page.scss index f0f30fc55a2..28ff7926aeb 100644 --- a/src/components/page/_page.scss +++ b/src/components/page/_page.scss @@ -1,3 +1,14 @@ .euiPage { padding: $euiSize; + background-color: $euiColorLightestShade; + + &--restrictWidth-default, + &--restrictWidth-custom { + margin-left: auto; + margin-right: auto; + } + + &--restrictWidth-default { + max-width: 1000px; + } } diff --git a/src/components/page/page.js b/src/components/page/page.js index 322640c18fb..2d45d6a4a20 100644 --- a/src/components/page/page.js +++ b/src/components/page/page.js @@ -2,12 +2,36 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -export const EuiPage = ({ children, className, ...rest }) => { - const classes = classNames('euiPage', className); +export const EuiPage = ({ children, className, restrictWidth, style, ...rest }) => { + let widthClassname; + + 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` }; + } + } + + const classes = classNames( + 'euiPage', + widthClassname, + className, + ); return (
{children} @@ -18,4 +42,16 @@ export const EuiPage = ({ children, className, ...rest }) => { EuiPage.propTypes = { children: PropTypes.node, className: 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. + */ + restrictWidth: PropTypes.any, }; + +EuiPage.defaultProps = { + restrictWidth: true, +} diff --git a/src/components/page/page.test.js b/src/components/page/page.test.js index 086759613da..78aee5a48d4 100644 --- a/src/components/page/page.test.js +++ b/src/components/page/page.test.js @@ -13,4 +13,13 @@ describe('EuiPage', () => { expect(component) .toMatchSnapshot(); }); + + test('sets a max-width', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); }); From 30b52d3a772fc15c21d1586636b5c5ffdf470e9a Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 1 Jun 2018 16:38:02 -0400 Subject: [PATCH 2/4] changelog --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 43755a9cfce..8fd9614d411 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +**Breaking changes** + +- Added `restrictWidth` to `EuiPage` which defaults to `true` and maxes out the width at 1000px ([#896](https://github.com/elastic/eui/pull/896)) + **Bug fixes** - Removed `.nvmrc` file from published npm package ([#892](https://github.com/elastic/eui/pull/892)) - `EuiComboBox` no longer shows the _clear_ icon when it's a no-op ([#890](https://github.com/elastic/eui/pull/890)) From 26633600b5726fa40ddf713d37c3b765a598695d Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 4 Jun 2018 12:24:01 -0400 Subject: [PATCH 3/4] `restrictWidth` default = false --- src-docs/src/views/page/page_example.js | 20 ++++++++++++++----- .../page/__snapshots__/page.test.js.snap | 2 +- src/components/page/page.js | 2 +- 3 files changed, 17 insertions(+), 7 deletions(-) diff --git a/src-docs/src/views/page/page_example.js b/src-docs/src/views/page/page_example.js index 0228eab41a7..7893ff9b818 100644 --- a/src-docs/src/views/page/page_example.js +++ b/src-docs/src/views/page/page_example.js @@ -7,6 +7,7 @@ import { } from '../../components'; import { + EuiCode, EuiPage, EuiPageBody, EuiPageContent, @@ -50,11 +51,20 @@ export const PageExample = { 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. -

+
+

+ 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 + size. +

+
), props: { EuiPage, diff --git a/src/components/page/__snapshots__/page.test.js.snap b/src/components/page/__snapshots__/page.test.js.snap index d513852f5f5..923def06dd4 100644 --- a/src/components/page/__snapshots__/page.test.js.snap +++ b/src/components/page/__snapshots__/page.test.js.snap @@ -3,7 +3,7 @@ exports[`EuiPage is rendered 1`] = `
`; diff --git a/src/components/page/page.js b/src/components/page/page.js index 2d45d6a4a20..1652aeb315e 100644 --- a/src/components/page/page.js +++ b/src/components/page/page.js @@ -53,5 +53,5 @@ EuiPage.propTypes = { }; EuiPage.defaultProps = { - restrictWidth: true, + restrictWidth: false, } From 93f4df5d69d31bceef89a38314c971377b726751 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 4 Jun 2018 15:14:41 -0400 Subject: [PATCH 4/4] Updating prop to be more specific and fixing strings to be numbers --- src-docs/src/views/app_view.js | 2 +- src/components/page/page.js | 5 ++++- src/components/page/page.test.js | 2 +- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src-docs/src/views/app_view.js b/src-docs/src/views/app_view.js index 90ad43a0647..f7c245d71f3 100644 --- a/src-docs/src/views/app_view.js +++ b/src-docs/src/views/app_view.js @@ -52,7 +52,7 @@ export class AppView extends Component { const { navigation } = routes; return ( - + { test('sets a max-width', () => { const component = render( - + ); expect(component)