Merge pull request #1606 from Shopify/narrow-width-page

[v4][Page] Narrow width page

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)).

src/components/Page/Page.scss

@@ -25,7 +25,7 @@ body {
   max-width: none;
 }
 
-.singleColumn {
+.narrowWidth {
   max-width: layout-width(primary, max);
 }
 

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<ComposedProps, never> {
   }
 
   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<ComposedProps, never> {
   }
 }
 
-export default withAppProvider<Props>()(Page);
+export default withAppProvider<Props & DeprecatedProps>()(Page);

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
 </Page>
 ```
 
-### Single-column page
+### Narrow width page
 
 <!-- example-for: web -->
 
-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
 <Page
-  singleColumn
+  narrowWidth
   breadcrumbs={[{content: 'Orders', url: '/orders'}]}
   title="Add payment method"
   primaryAction={{content: 'Save', disabled: true}}

src/components/Page/tests/Page.test.tsx

@@ -383,6 +383,20 @@ describe('<Page />', () => {
       restoreTitleBarCreateMock();
     });
   });
+
+  describe('deprecations', () => {
+    it('warns the singleColumn prop has been renamed', () => {
+      const warningSpy = jest
+        .spyOn(console, 'warn')
+        .mockImplementation(() => {});
+      mountWithAppProvider(<Page title="title" singleColumn />);
+
+      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() {}

src/components/Sheet/README.md

@@ -166,7 +166,7 @@ class SheetExample extends React.Component {
           }}
         >
           <Frame topBar={<TopBar />}>
-            <Page singleColumn title="Big yellow socks">
+            <Page narrowWidth title="Big yellow socks">
               <Card sectioned>
                 <FormLayout>
                   <TextField

src/components/SkeletonPage/SkeletonPage.scss

@@ -10,7 +10,7 @@ $primary-action-button-width: rem(100px);
   max-width: none;
 }
 
-.singleColumn {
+.narrowWidth {
   max-width: layout-width(primary, max);
 }
 

src/components/SkeletonPage/SkeletonPage.tsx

@@ -13,7 +13,7 @@ export interface Props {
   /** Remove the normal max-width on the page */
   fullWidth?: boolean;
   /** Decreases the maximum layout width. Intended for single-column layouts */
-  singleColumn?: boolean;
+  narrowWidth?: boolean;
   /** Shows a skeleton over the primary action */
   primaryAction?: boolean;
   /** Number of secondary page-level actions to display */
@@ -24,13 +24,21 @@ export interface Props {
   children?: React.ReactNode;
 }
 
-export type CombinedProps = Props & WithAppProviderProps;
+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/feedback-indicators/skeleton-page#props-narrow-width}
+   */
+  singleColumn?: boolean;
+}
+
+export type CombinedProps = Props & DeprecatedProps & WithAppProviderProps;
 
 export class SkeletonPage extends React.PureComponent<CombinedProps, never> {
   render() {
     const {
       children,
       fullWidth,
+      narrowWidth,
       singleColumn,
       primaryAction,
       secondaryActions,
@@ -39,10 +47,17 @@ export class SkeletonPage extends React.PureComponent<CombinedProps, never> {
       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 <div className={styles.Title}>{titleContent}</div>;
 }
 
-export default withAppProvider<Props>()(SkeletonPage);
+export default withAppProvider<Props & DeprecatedProps>()(SkeletonPage);

src/components/SkeletonPage/tests/SkeletonPage.test.tsx

@@ -94,4 +94,19 @@ describe('<SkeletonPage />', () => {
       expect(skeletonPage.find(SkeletonDisplayText)).toHaveLength(1);
     });
   });
+
+  describe('deprecations', () => {
+    it('warns the singleColumn prop has been renamed', () => {
+      const warningSpy = jest
+        .spyOn(console, 'warn')
+        .mockImplementation(() => {});
+
+      mountWithAppProvider(<SkeletonPage title="title" singleColumn />);
+
+      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();
+    });
+  });
 });