[v4] Simplify withinContentContext

UNRELEASED-V4.md

@@ -34,6 +34,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Code quality
 
+- Simplified `WithinContentContainer` context type ([#1602](https://github.com/Shopify/polaris-react/pull/1602))
 - Remove `withRef` and `withContext` from `DropZone.FileUpload` ([#1491](https://github.com/Shopify/polaris-react/pull/1491))
 - Updated `OptionList` to no longer use `componentWillReceiveProps`([#1557](https://github.com/Shopify/polaris-react/pull/1557))
 - Updated all our context files to export react context rather than a provider and consumer ([#1459](https://github.com/Shopify/polaris-react/pull/1459))

src/components/Banner/Banner.tsx

@@ -48,7 +48,7 @@ export default class Banner extends React.PureComponent<Props, never> {
   render() {
     return (
       <WithinContentContext.Consumer>
-        {({withinContentContainer}) => {
+        {(withinContentContainer) => {
           const {
             icon,
             action,

src/components/Banner/tests/Banner.test.tsx

@@ -96,12 +96,8 @@ describe('<Banner />', () => {
     expect(unstyledLink.prop('rel')).toBe('noopener noreferrer');
   });
 
-  const mockContext = {
-    withinContentContainer: true,
-  };
-
   const bannerWithContentContext = mountWithAppProvider(
-    <WithinContentContext.Provider value={mockContext}>
+    <WithinContentContext.Provider value>
       <Banner
         action={{
           content: 'Primary action',

src/components/Card/Card.tsx

@@ -66,12 +66,8 @@ export default class Card extends React.PureComponent<Props, never> {
         </div>
       ) : null;
 
-    const context = {
-      withinContentContainer: true,
-    };
-
     return (
-      <WithinContentContext.Provider value={context}>
+      <WithinContentContext.Provider value>
         <div className={className}>
           {headerMarkup}
           {content}

src/components/Card/tests/Card.test.tsx

@@ -2,22 +2,22 @@ import React from 'react';
 import {mountWithAppProvider} from 'test-utilities';
 import {Card, Badge, Button} from 'components';
 
-import WithinContentContext, {
-  WithinContentContextType,
-} from '../../WithinContentContext';
+import WithinContentContext from '../../WithinContentContext';
 import {Section} from '../components';
 
 describe('<Card />', () => {
   it('has a child with prop withinContentContainer set to true', () => {
-    function TestComponent(_: WithinContentContextType) {
+    function TestComponent(_: {withinContentContainer: any}) {
       return null;
     }
 
     const component = mountWithAppProvider(
       <Card>
         <WithinContentContext.Consumer>
-          {(props) => {
-            return <TestComponent {...props} />;
+          {(withinContentContext) => {
+            return (
+              <TestComponent withinContentContainer={withinContentContext} />
+            );
           }}
         </WithinContentContext.Consumer>
       </Card>,

src/components/Modal/Modal.tsx

@@ -301,12 +301,8 @@ export class Modal extends React.Component<CombinedProps, State> {
 
     const animated = !instant;
 
-    const context = {
-      withinContentContainer: true,
-    };
-
     return (
-      <WithinContentContext.Provider value={context}>
+      <WithinContentContext.Provider value>
         <Portal idPrefix="modal">
           <TransitionGroup appear={animated} enter={animated} exit={animated}>
             {dialog}

src/components/Modal/tests/Modal.test.tsx

@@ -6,9 +6,7 @@ import {Badge, Spinner, Portal, Scrollable} from 'components';
 import {Footer, Dialog} from '../components';
 import Modal from '../Modal';
 
-import WithinContentContext, {
-  WithinContentContextType,
-} from '../../WithinContentContext';
+import WithinContentContext from '../../WithinContentContext';
 
 jest.mock('../../../utilities/app-bridge-transformers', () => ({
   ...require.requireActual('../../../utilities/app-bridge-transformers'),
@@ -25,15 +23,17 @@ describe('<Modal>', () => {
   });
 
   it('has a child with contentContext', () => {
-    function TestComponent(_: WithinContentContextType) {
+    function TestComponent(_: {withinContentContainer: any}) {
       return null;
     }
 
     const component = mountWithAppProvider(
       <Modal onClose={jest.fn()} open>
         <WithinContentContext.Consumer>
-          {(props) => {
-            return <TestComponent {...props} />;
+          {(withinContentContext) => {
+            return (
+              <TestComponent withinContentContainer={withinContentContext} />
+            );
           }}
         </WithinContentContext.Consumer>
       </Modal>,

src/components/Navigation/Navigation.tsx

@@ -55,7 +55,7 @@ export default class Navigation extends React.Component<Props, never> {
 
     return (
       <NavigationContext.Provider value={context}>
-        <WithinContentContext.Provider value={{withinContentContainer: true}}>
+        <WithinContentContext.Provider value>
           <nav className={styles.Navigation}>
             {contextControlMarkup}
             <div className={styles.UserMenu}>{userMenu}</div>

src/components/Navigation/tests/Navigation.test.tsx

@@ -41,7 +41,7 @@ describe('<Navigation />', () => {
       const Child: React.SFC<{}> = (_props) => {
         return (
           <WithinContentContext.Consumer>
-            {({withinContentContainer}) =>
+            {(withinContentContainer) =>
               withinContentContainer ? <div /> : null
             }
           </WithinContentContext.Consumer>

src/components/WithinContentContext/context.tsx

@@ -1,11 +1,5 @@
 import React from 'react';
 
-export interface WithinContentContextType {
-  withinContentContainer: boolean;
-}
-
-const WithinContentContext = React.createContext<WithinContentContextType>({
-  withinContentContainer: false,
-});
+const WithinContentContext = React.createContext<boolean>(false);
 
 export default WithinContentContext;

src/components/WithinContentContext/index.ts

@@ -1,4 +1,3 @@
 import WithinContentContext from './context';
 
-export {WithinContentContextType} from './context';
 export default WithinContentContext;