diff --git a/UNRELEASED-V4.md b/UNRELEASED-V4.md index 1ae496c0..6c063a8b 100644 --- a/UNRELEASED-V4.md +++ b/UNRELEASED-V4.md @@ -64,3 +64,5 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Update React imports to use the default imports intead of `import * as` ([1523](https://github.com/Shopify/polaris-react/pull/1523)) ### Deprecations + +- Renamed `singleColumn`on`Page`to`narrowWidth` ([#1606](https://github.com/Shopify/polaris-react/pull/1606)). diff --git a/src/components/Page/Page.scss b/src/components/Page/Page.scss index c6368c32..7361c01b 100644 --- a/src/components/Page/Page.scss +++ b/src/components/Page/Page.scss @@ -25,7 +25,7 @@ body { max-width: none; } -.singleColumn { +.narrowWidth { max-width: layout-width(primary, max); } diff --git a/src/components/Page/Page.tsx b/src/components/Page/Page.tsx index 10b6d675..41991c80 100644 --- a/src/components/Page/Page.tsx +++ b/src/components/Page/Page.tsx @@ -22,7 +22,7 @@ export interface Props extends HeaderProps { /** Remove the normal max-width on the page */ fullWidth?: boolean; /** Decreases the maximum layout width. Intended for single-column layouts */ - singleColumn?: boolean; + narrowWidth?: boolean; /** * Force render in page and do not delegate to the app bridge TitleBar action * @default false @@ -32,7 +32,14 @@ export interface Props extends HeaderProps { forceRender?: boolean; } -export type ComposedProps = Props & WithAppProviderProps; +export interface DeprecatedProps { + /** Decreases the maximum layout width. Intended for single-column layouts + * @deprecated As of release 4.0, replaced by {@link https://polaris.shopify.com/components/structure/page#props-narrow-width} + */ + singleColumn?: boolean; +} + +export type ComposedProps = Props & DeprecatedProps & WithAppProviderProps; const APP_BRIDGE_PROPS: (keyof Props)[] = [ 'title', @@ -90,12 +97,25 @@ export class Page extends React.PureComponent { } render() { - const {children, fullWidth, singleColumn, ...rest} = this.props; + const { + children, + fullWidth, + narrowWidth, + singleColumn, + ...rest + } = this.props; + + if (singleColumn) { + // eslint-disable-next-line no-console + console.warn( + 'Deprecation: The singleColumn prop has been renamed to narrowWidth to better represents its use and will be removed in v5.0.', + ); + } const className = classNames( styles.Page, fullWidth && styles.fullWidth, - singleColumn && styles.singleColumn, + (narrowWidth || singleColumn) && styles.narrowWidth, ); const headerMarkup = @@ -180,4 +200,4 @@ export class Page extends React.PureComponent { } } -export default withAppProvider()(Page); +export default withAppProvider()(Page); diff --git a/src/components/Page/README.md b/src/components/Page/README.md index b75bccac..e52013f2 100644 --- a/src/components/Page/README.md +++ b/src/components/Page/README.md @@ -17,7 +17,7 @@ keywords: - page without primary action in header - page without pagination - full-width page - - single-column page + - narrow-width page - page with action groups - page with separator - outer wrapper @@ -310,15 +310,15 @@ Use for layouts that benefit from more screen width, such as wide tables or list ``` -### Single-column page +### Narrow width page -Use a single column layout if the page supports a single unified task. When merchants must review the entire page contents to complete their goal, this layout helps focus their attention in a single path from top to bottom. +Use a narrow width layout if the page supports a single unified task. When merchants must review the entire page contents to complete their goal, this layout helps focus their attention in a single path from top to bottom. ```jsx ', () => { restoreTitleBarCreateMock(); }); }); + + describe('deprecations', () => { + it('warns the singleColumn prop has been renamed', () => { + const warningSpy = jest + .spyOn(console, 'warn') + .mockImplementation(() => {}); + mountWithAppProvider(); + + expect(warningSpy).toHaveBeenCalledWith( + 'Deprecation: The singleColumn prop has been renamed to narrowWidth to better represents its use and will be removed in v5.0.', + ); + warningSpy.mockRestore(); + }); + }); }); function noop() {} diff --git a/src/components/Sheet/README.md b/src/components/Sheet/README.md index c4be8bca..154abe94 100644 --- a/src/components/Sheet/README.md +++ b/src/components/Sheet/README.md @@ -166,7 +166,7 @@ class SheetExample extends React.Component { }} > }> - + { render() { const { children, fullWidth, + narrowWidth, singleColumn, primaryAction, secondaryActions, @@ -39,10 +47,17 @@ export class SkeletonPage extends React.PureComponent { polaris: {intl}, } = this.props; + if (singleColumn) { + // eslint-disable-next-line no-console + console.warn( + 'Deprecation: The singleColumn prop has been renamed to narrowWidth to better represents its use and will be removed in v5.0.', + ); + } + const className = classNames( styles.Page, fullWidth && styles.fullWidth, - singleColumn && styles.singleColumn, + (narrowWidth || singleColumn) && styles.narrowWidth, ); const headerClassName = classNames( @@ -118,4 +133,4 @@ function renderTitle(title: string) { return
{titleContent}
; } -export default withAppProvider()(SkeletonPage); +export default withAppProvider()(SkeletonPage); diff --git a/src/components/SkeletonPage/tests/SkeletonPage.test.tsx b/src/components/SkeletonPage/tests/SkeletonPage.test.tsx index 7e12a551..8454969e 100644 --- a/src/components/SkeletonPage/tests/SkeletonPage.test.tsx +++ b/src/components/SkeletonPage/tests/SkeletonPage.test.tsx @@ -94,4 +94,19 @@ describe('', () => { expect(skeletonPage.find(SkeletonDisplayText)).toHaveLength(1); }); }); + + describe('deprecations', () => { + it('warns the singleColumn prop has been renamed', () => { + const warningSpy = jest + .spyOn(console, 'warn') + .mockImplementation(() => {}); + + mountWithAppProvider(); + + expect(warningSpy).toHaveBeenCalledWith( + 'Deprecation: The singleColumn prop has been renamed to narrowWidth to better represents its use and will be removed in v5.0.', + ); + warningSpy.mockRestore(); + }); + }); });