change Container to View in planner

fixes ADMIN-1024 test plan: - grades tray should work - planner in general should look the same and work Change-Id: I0d92daa0c1629430dd6835ea13ccef6f3212d9db Reviewed-on: https://gerrit.instructure.com/149612 Tested-by: Jenkins Reviewed-by: Mysti Sadler <mysti@instructure.com> QA-Review: Deepeeca Soundarrajan <dsoundarrajan@instructure.com> Product-Review: Jon Willesen <jonw+gerrit@instructure.com>
2018-05-08 15:42:37 -06:00 · 2018-05-08 15:42:37 -06:00 · 5e218b8f20
parent e1ab28f0ef
commit 5e218b8f20
17 changed files with 188 additions and 201 deletions
--- a/packages/canvas-planner/package.json
+++ b/packages/canvas-planner/package.json
@ -41,9 +41,9 @@
  "license": "AGPL-3.0",
  "dependencies": {
    "@instructure/ui-a11y": "^5.7.0",
-    "@instructure/ui-container": "^5.7.0",
    "@instructure/ui-core": "^4.8.0",
    "@instructure/ui-forms": "^5.7.0",
+    "@instructure/ui-layout": "^5.7.0",
    "@instructure/ui-themeable": "^5.7.0",
    "@instructure/ui-toggle-details": "^5.7.0",
    "axios": "^0.16.0",
--- a/packages/canvas-planner/src/components/Day/tests/snapshots/Day.spec.js.snap
+++ b/packages/canvas-planner/src/components/Day/tests/snapshots/Day.spec.js.snap
@ -138,13 +138,13 @@ exports[`renders the base component with required props 1`] = `
    </Text>
  </Heading>
  <div>
-    <Container
+    <View
      display="block"
      margin="small 0 0 0"
      textAlign="center"
    >
      No "To-Do's" for this day yet.
-    </Container>
+    </View>
  </div>
 </div>
 `;
--- a/packages/canvas-planner/src/components/Day/index.js
+++ b/packages/canvas-planner/src/components/Day/index.js
@ -22,7 +22,7 @@ import moment from 'moment-timezone';
 import themeable from '@instructure/ui-themeable/lib';
 import Heading from '@instructure/ui-core/lib/components/Heading';
 import Text from '@instructure/ui-core/lib/components/Text';
-import Container from '@instructure/ui-core/lib/components/Container';
+import View from '@instructure/ui-layout/lib/components/View';
 import { shape, string, number, arrayOf, func } from 'prop-types';
 import { userShape, itemShape } from '../plannerPropTypes';
 import styles from './styles.css';
@ -136,13 +136,13 @@ export class Day extends Component {
                );
              })
            ) : (
-              <Container
+              <View
                textAlign="center"
                display="block"
                margin="small 0 0 0"
              >
                {formatMessage('No "To-Do\'s" for this day yet.')}
-              </Container>
+              </View>
            )
          }
        </div>
--- a/packages/canvas-planner/src/components/EmptyDays/tests/snapshots/EmptyDays.spec.js.snap
+++ b/packages/canvas-planner/src/components/EmptyDays/tests/snapshots/EmptyDays.spec.js.snap
@ -19,9 +19,9 @@ exports[`renders the component 1`] = `
      April 23 to April 26
    </Text>
  </Heading>
-  <Container
+  <View
    as="div"
-    display={null}
+    display="auto"
    padding="small 0 0 0"
  >
    <GroupedDates
@ -39,7 +39,7 @@ exports[`renders the component 1`] = `
        </Text>
      </div>
    </div>
-  </Container>
+  </View>
 </div>
 `;

@ -62,9 +62,9 @@ exports[`renders the today className when surrounds Today 1`] = `
      April 22 to April 26
    </Text>
  </Heading>
-  <Container
+  <View
    as="div"
-    display={null}
+    display="auto"
    padding="small 0 0 0"
  >
    <GroupedDates
@ -82,6 +82,6 @@ exports[`renders the today className when surrounds Today 1`] = `
        </Text>
      </div>
    </div>
-  </Container>
+  </View>
 </div>
 `;
--- a/packages/canvas-planner/src/components/EmptyDays/index.js
+++ b/packages/canvas-planner/src/components/EmptyDays/index.js
@ -23,7 +23,7 @@ import classnames from 'classnames';
 import themeable from '@instructure/ui-themeable/lib';
 import Heading from '@instructure/ui-core/lib/components/Heading';
 import Text from '@instructure/ui-core/lib/components/Text';
-import Container from '@instructure/ui-core/lib/components/Container';
+import View from '@instructure/ui-layout/lib/components/View';
 import { string } from 'prop-types';
 import styles from './styles.css';
 import theme from './theme.js';
@ -64,14 +64,14 @@ export class EmptyDays extends Component {
          <Heading border={'bottom'}>
            {this.renderDate(start, end)}
          </Heading>
-          <Container as="div" padding="small 0 0 0">
+          <View as="div" padding="small 0 0 0">
            <GroupedDates role="img" aria-hidden="true" />
            <div className={styles.nothingPlannedContainer}>
              <div className={styles.nothingPlanned}>
                <Text size="large">{formatMessage('Nothing planned')}</Text>
              </div>
            </div>
-          </Container>
+          </View>
      </div>
    );
  }
--- a/packages/canvas-planner/src/components/GradesDisplay/tests/snapshots/GradesDisplay.spec.js.snap
+++ b/packages/canvas-planner/src/components/GradesDisplay/tests/snapshots/GradesDisplay.spec.js.snap
@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`does not render caveat if no courses have grading periods 1`] = `
-<Container
-  display={null}
+<View
+  display="auto"
 >
-  <Container
-    display={null}
+  <View
+    display="auto"
    textAlign="center"
  >
    <Heading
@ -24,10 +24,10 @@ exports[`does not render caveat if no courses have grading periods 1`] = `
        My Grades
      </Text>
    </Heading>
-  </Container>
-  <Container
+  </View>
+  <View
    as="div"
-    display={null}
+    display="auto"
    margin="0 0 large 0"
  >
    <div
@ -64,16 +64,16 @@ exports[`does not render caveat if no courses have grading periods 1`] = `
    >
      No Grade
    </Text>
-  </Container>
-</Container>
+  </View>
+</View>
 `;

 exports[`renders a loading spinner when loading 1`] = `
-<Container
-  display={null}
+<View
+  display="auto"
 >
-  <Container
-    display={null}
+  <View
+    display="auto"
    textAlign="center"
  >
    <Heading
@ -92,10 +92,10 @@ exports[`renders a loading spinner when loading 1`] = `
        My Grades
      </Text>
    </Heading>
-  </Container>
-  <Container
+  </View>
+  <View
    as="div"
-    display={null}
+    display="auto"
    margin="0 0 large 0"
    textAlign="center"
  >
@ -105,21 +105,21 @@ exports[`renders a loading spinner when loading 1`] = `
      title="Grades are loading"
      variant="default"
    />
-  </Container>
-</Container>
+  </View>
+</View>
 `;

 exports[`renders an ErrorAlert if there is an error loading grades 1`] = `
-<Container
-  display={null}
+<View
+  display="auto"
 >
  <ErrorAlert
    error="There was an error"
  >
    Error loading grades
  </ErrorAlert>
-  <Container
-    display={null}
+  <View
+    display="auto"
    textAlign="center"
  >
    <Heading
@ -138,16 +138,16 @@ exports[`renders an ErrorAlert if there is an error loading grades 1`] = `
        My Grades
      </Text>
    </Heading>
-  </Container>
-</Container>
+  </View>
+</View>
 `;

 exports[`renders some course grades 1`] = `
-<Container
-  display={null}
+<View
+  display="auto"
 >
-  <Container
-    display={null}
+  <View
+    display="auto"
    textAlign="center"
  >
    <Heading
@ -166,10 +166,10 @@ exports[`renders some course grades 1`] = `
        My Grades
      </Text>
    </Heading>
-  </Container>
-  <Container
+  </View>
+  <View
    as="div"
-    display={null}
+    display="auto"
    margin="0 0 large 0"
  >
    <div
@ -206,10 +206,10 @@ exports[`renders some course grades 1`] = `
    >
      No Grade
    </Text>
-  </Container>
-  <Container
+  </View>
+  <View
    as="div"
-    display={null}
+    display="auto"
    margin="0 0 large 0"
  >
    <div
@ -246,10 +246,10 @@ exports[`renders some course grades 1`] = `
    >
      42.34%
    </Text>
-  </Container>
-  <Container
+  </View>
+  <View
    as="div"
-    display={null}
+    display="auto"
    margin="0 0 large 0"
  >
    <div
@ -286,10 +286,10 @@ exports[`renders some course grades 1`] = `
    >
      No Grade
    </Text>
-  </Container>
-  <Container
+  </View>
+  <View
    as="div"
-    display={null}
+    display="auto"
    textAlign="center"
  >
    <Text
@ -300,6 +300,6 @@ exports[`renders some course grades 1`] = `
    >
      *Only most recent grading period shown.
    </Text>
-  </Container>
-</Container>
+  </View>
+</View>
 `;
--- a/packages/canvas-planner/src/components/GradesDisplay/index.js
+++ b/packages/canvas-planner/src/components/GradesDisplay/index.js
@ -23,7 +23,7 @@ import { courseShape } from '../plannerPropTypes';
 import formatMessage from '../../format-message';
 import ErrorAlert from '../ErrorAlert';

-import Container from '@instructure/ui-container/lib/components/Container';
+import View from '@instructure/ui-layout/lib/components/View';
 import Heading from '@instructure/ui-elements/lib/components/Heading';
 import Link from '@instructure/ui-elements/lib/components/Link';
 import Spinner from '@instructure/ui-elements/lib/components/Spinner';
@ -50,7 +50,7 @@ export class GradesDisplay extends React.Component {
  }

  renderSpinner () {
-    return <Container
+    return <View
      as="div"
      textAlign="center"
      margin="0 0 large 0"
@ -59,17 +59,17 @@ export class GradesDisplay extends React.Component {
        title={formatMessage("Grades are loading")}
        size="small"
      />
-    </Container>;
+    </View>;
  }

  renderCaveat () {
    if (this.props.loading) return;
    if (this.props.courses.some(course => course.hasGradingPeriods)) {
-      return <Container as="div" textAlign="center">
+      return <View as="div" textAlign="center">
        <Text size="x-small" fontStyle="italic">{
          formatMessage('*Only most recent grading period shown.')}
        </Text>
-      </Container>;
+      </View>;
    }
  }

@ -81,7 +81,7 @@ export class GradesDisplay extends React.Component {
        borderBottomColor: course.color,
      };

-      return <Container key={course.id} as="div"
+      return <View key={course.id} as="div"
        margin="0 0 large 0"
      >
        <div className={styles.course} style={courseNameStyles}>
@ -92,7 +92,7 @@ export class GradesDisplay extends React.Component {
          </Link>
        </div>
        <Text as="div" size="large" weight="light">{this.scoreString(course.score)}</Text>
-      </Container>;
+      </View>;
    });
  }

@ -103,16 +103,16 @@ export class GradesDisplay extends React.Component {
  }

  render () {
-    return <Container>
+    return <View>
      {this.renderError()}
-      <Container textAlign="center">
+      <View textAlign="center">
        <Heading level="h2" margin="0 0 large 0">
          <Text size="medium" weight="bold">{formatMessage('My Grades')}</Text>
        </Heading>
-      </Container>
+      </View>
      {this.props.loading ? this.renderSpinner() : this.renderGrades()}
      {this.renderCaveat()}
-    </Container>;
+    </View>;
  }
 }

--- a/packages/canvas-planner/src/components/LoadingFutureIndicator/tests/snapshots/LoadingFutureIndicator.spec.js.snap
+++ b/packages/canvas-planner/src/components/LoadingFutureIndicator/tests/snapshots/LoadingFutureIndicator.spec.js.snap
@ -2,9 +2,9 @@

 exports[`renders all future items loaded regardless of other props 1`] = `
 <div>
-  <Container
+  <View
    as="div"
-    display={null}
+    display="auto"
    padding="x-large"
    textAlign="center"
  >
@ -16,15 +16,15 @@ exports[`renders all future items loaded regardless of other props 1`] = `
    >
      All items loaded
    </Text>
-  </Container>
+  </View>
 </div>
 `;

 exports[`renders load more by default 1`] = `
 <div>
-  <Container
+  <View
    as="div"
-    display={null}
+    display="auto"
    padding="x-large"
    textAlign="center"
  >
@ -40,31 +40,27 @@ exports[`renders load more by default 1`] = `
    >
      Load more
    </Button>
-  </Container>
+  </View>
 </div>
 `;

 exports[`renders loading when indicated 1`] = `
 <div>
-  <Container
+  <View
    as="div"
-    display={null}
+    display="auto"
    padding="x-large"
    textAlign="center"
  >
-    <Container
-      display={null}
+    <View
+      display="auto"
    >
-      <Container
-        display="inline"
-      >
-        <Spinner
-          margin="0 x-small 0 0"
-          size="small"
-          title="Loading..."
-          variant="default"
-        />
-      </Container>
+      <Spinner
+        margin="0 x-small 0 0"
+        size="small"
+        title="Loading..."
+        variant="default"
+      />
      <Text
        as="span"
        color="secondary"
@ -73,16 +69,16 @@ exports[`renders loading when indicated 1`] = `
      >
        Loading...
      </Text>
-    </Container>
-  </Container>
+    </View>
+  </View>
 </div>
 `;

 exports[`shows an Alert when there's a query error 1`] = `
 <div>
-  <Container
+  <View
    as="div"
-    display={null}
+    display="auto"
    padding="x-large"
    textAlign="center"
  >
@ -112,6 +108,6 @@ exports[`shows an Alert when there's a query error 1`] = `
    >
      Load more
    </Button>
-  </Container>
+  </View>
 </div>
 `;
--- a/packages/canvas-planner/src/components/LoadingFutureIndicator/index.js
+++ b/packages/canvas-planner/src/components/LoadingFutureIndicator/index.js
@ -18,7 +18,7 @@
 import React, { Component } from 'react';
 import {bool, func, string} from 'prop-types';
 import Button from '@instructure/ui-core/lib/components/Button';
-import Container from '@instructure/ui-core/lib/components/Container';
+import View from '@instructure/ui-layout/lib/components/View';
 import Spinner from '@instructure/ui-core/lib/components/Spinner';
 import Text from '@instructure/ui-core/lib/components/Text';
 import ErrorAlert from '../ErrorAlert';
@ -69,13 +69,11 @@ export default class LoadingFutureIndicator extends Component {

  renderLoading () {
    if (this.props.loadingFuture && !this.props.allFutureItemsLoaded) {
-      return <Container>
-        <Container display="inline">
-          <Spinner size="small" margin="0 x-small 0 0" title={formatMessage('Loading...')} />
-        </Container>
+      return <View>
+        <Spinner size="small" margin="0 x-small 0 0" title={formatMessage('Loading...')} />
        <Text size="small" color="secondary">
          {formatMessage('Loading...')}</Text>
-      </Container>;
+      </View>;
    }
  }

@ -88,12 +86,12 @@ export default class LoadingFutureIndicator extends Component {

  render () {
    return <div>
-      <Container as="div" padding="x-large" textAlign="center">
+      <View as="div" padding="x-large" textAlign="center">
        {this.renderError()}
        {this.renderLoadMore()}
        {this.renderLoading()}
        {this.renderEverythingLoaded()}
-      </Container>
+      </View>
    </div>;
  }
 }
--- a/packages/canvas-planner/src/components/LoadingPastIndicator/tests/snapshots/LoadingPastIndicator.spec.js.snap
+++ b/packages/canvas-planner/src/components/LoadingPastIndicator/tests/snapshots/LoadingPastIndicator.spec.js.snap
@ -2,13 +2,13 @@

 exports[`prioritizes loading complete over currently loading 1`] = `
 <div>
-  <Container
+  <View
    as="div"
-    display={null}
+    display="auto"
    padding="small"
    textAlign="center"
  >
-    <Container
+    <View
      display="block"
      margin="small"
    >
@ -16,7 +16,7 @@ exports[`prioritizes loading complete over currently loading 1`] = `
        aria-hidden="true"
        role="img"
      />
-    </Container>
+    </View>
    <Text
      as="div"
      letterSpacing="normal"
@ -31,19 +31,19 @@ exports[`prioritizes loading complete over currently loading 1`] = `
    >
      You've scrolled back to your very first To-Do!
    </Text>
-  </Container>
+  </View>
 </div>
 `;

 exports[`renders TV when all past items loaded 1`] = `
 <div>
-  <Container
+  <View
    as="div"
-    display={null}
+    display="auto"
    padding="small"
    textAlign="center"
  >
-    <Container
+    <View
      display="block"
      margin="small"
    >
@ -51,7 +51,7 @@ exports[`renders TV when all past items loaded 1`] = `
        aria-hidden="true"
        role="img"
      />
-    </Container>
+    </View>
    <Text
      as="div"
      letterSpacing="normal"
@ -66,28 +66,24 @@ exports[`renders TV when all past items loaded 1`] = `
    >
      You've scrolled back to your very first To-Do!
    </Text>
-  </Container>
+  </View>
 </div>
 `;

 exports[`renders spinner while loading 1`] = `
 <div>
-  <Container
+  <View
    as="div"
-    display={null}
+    display="auto"
    padding="small"
    textAlign="center"
  >
-    <Container
-      display="inline"
-    >
-      <Spinner
-        margin="0 x-small 0 0"
-        size="small"
-        title="Loading past items"
-        variant="default"
-      />
-    </Container>
+    <Spinner
+      margin="0 x-small 0 0"
+      size="small"
+      title="Loading past items"
+      variant="default"
+    />
    <Text
      as="span"
      color="secondary"
@ -96,7 +92,7 @@ exports[`renders spinner while loading 1`] = `
    >
      Loading past items
    </Text>
-  </Container>
+  </View>
 </div>
 `;

--- a/packages/canvas-planner/src/components/LoadingPastIndicator/index.js
+++ b/packages/canvas-planner/src/components/LoadingPastIndicator/index.js
@ -17,12 +17,11 @@
 */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Container from '@instructure/ui-core/lib/components/Container';
+import View from '@instructure/ui-layout/lib/components/View';
 import Spinner from '@instructure/ui-core/lib/components/Spinner';
 import Text from '@instructure/ui-core/lib/components/Text';
 import ErrorAlert from '../ErrorAlert';
 import formatMessage from '../../format-message';
-import {animateSlideDown} from '../../utilities/scrollUtils';
 import TV from './tv.svg';

 export default class LoadingPastIndicator extends Component {
@ -57,17 +56,17 @@ export default class LoadingPastIndicator extends Component {
  renderNoMore () {
    if (this.props.allPastItemsLoaded) {
      return (
-        <Container as="div" padding="small" textAlign="center">
-          <Container display="block" margin="small">
+        <View as="div" padding="small" textAlign="center">
+          <View display="block" margin="small">
            <TV role="img" aria-hidden="true" />
-          </Container>
+          </View>
          <Text size="large" as="div">
            {formatMessage('Beginning of Your To-Do History')}
          </Text>
          <Text size="medium" as="div">
            {formatMessage('You\'ve scrolled back to your very first To-Do!')}
          </Text>
-        </Container>
+        </View>
      );
    }
  }
@ -75,14 +74,12 @@ export default class LoadingPastIndicator extends Component {
  renderLoading () {
    if (this.props.loadingPast && !this.props.allPastItemsLoaded) {
      return (
-        <Container as="div" padding="small" textAlign="center">
-          <Container display="inline">
-            <Spinner size="small" margin="0 x-small 0 0" title={formatMessage('Loading past items')}/>
-          </Container>
+        <View as="div" padding="small" textAlign="center">
+          <Spinner size="small" margin="0 x-small 0 0" title={formatMessage('Loading past items')}/>
          <Text size="small" color="secondary">
            {formatMessage('Loading past items')}
          </Text>
-        </Container>
+        </View>
      );
    }
  }
--- a/packages/canvas-planner/src/components/PlannerApp/tests/snapshots/PlannerApp.spec.js.snap
+++ b/packages/canvas-planner/src/components/PlannerApp/tests/snapshots/PlannerApp.spec.js.snap
@ -4,9 +4,9 @@ exports[`PlannerApp empty day calculation always renders yesterday, today and to
 <div
  className="PlannerApp large"
 >
-  <Container
+  <View
    as="div"
-    display={null}
+    display="auto"
    textAlign="center"
  >
    <ShowOnFocusButton
@ -19,7 +19,7 @@ exports[`PlannerApp empty day calculation always renders yesterday, today and to
    >
      Load prior dates
    </ShowOnFocusButton>
-  </Container>
+  </View>
  <LoadingPastIndicator
    allPastItemsLoaded={false}
    loadingPast={false}
@ -88,9 +88,9 @@ exports[`PlannerApp empty day calculation merges 3 consecutive empty days in the
 <div
  className="PlannerApp large"
 >
-  <Container
+  <View
    as="div"
-    display={null}
+    display="auto"
    textAlign="center"
  >
    <ShowOnFocusButton
@ -103,7 +103,7 @@ exports[`PlannerApp empty day calculation merges 3 consecutive empty days in the
    >
      Load prior dates
    </ShowOnFocusButton>
-  </Container>
+  </View>
  <LoadingPastIndicator
    allPastItemsLoaded={false}
    loadingPast={false}
@ -166,9 +166,9 @@ exports[`PlannerApp empty day calculation only renders days with items in the pa
 <div
  className="PlannerApp large"
 >
-  <Container
+  <View
    as="div"
-    display={null}
+    display="auto"
    textAlign="center"
  >
    <ShowOnFocusButton
@ -181,7 +181,7 @@ exports[`PlannerApp empty day calculation only renders days with items in the pa
    >
      Load prior dates
    </ShowOnFocusButton>
-  </Container>
+  </View>
  <LoadingPastIndicator
    allPastItemsLoaded={false}
    loadingPast={false}
@ -244,9 +244,9 @@ exports[`PlannerApp empty day calculation renders 2 consecutive empty days in th
 <div
  className="PlannerApp large"
 >
-  <Container
+  <View
    as="div"
-    display={null}
+    display="auto"
    textAlign="center"
  >
    <ShowOnFocusButton
@ -259,7 +259,7 @@ exports[`PlannerApp empty day calculation renders 2 consecutive empty days in th
    >
      Load prior dates
    </ShowOnFocusButton>
-  </Container>
+  </View>
  <LoadingPastIndicator
    allPastItemsLoaded={false}
    loadingPast={false}
@ -328,9 +328,9 @@ exports[`PlannerApp renders base component 1`] = `
 <div
  className="PlannerApp large"
 >
-  <Container
+  <View
    as="div"
-    display={null}
+    display="auto"
    textAlign="center"
  >
    <ShowOnFocusButton
@ -343,7 +343,7 @@ exports[`PlannerApp renders base component 1`] = `
    >
      Load prior dates
    </ShowOnFocusButton>
-  </Container>
+  </View>
  <LoadingPastIndicator
    allPastItemsLoaded={false}
    loadingPast={false}
@ -400,9 +400,9 @@ exports[`PlannerApp renders empty component with no assignments 1`] = `
 <div
  className="PlannerApp large"
 >
-  <Container
+  <View
    as="div"
-    display={null}
+    display="auto"
    textAlign="center"
  >
    <ShowOnFocusButton
@ -415,7 +415,7 @@ exports[`PlannerApp renders empty component with no assignments 1`] = `
    >
      Load prior dates
    </ShowOnFocusButton>
-  </Container>
+  </View>
  <PlannerEmptyState
    changeToDashboardCardView={[Function]}
  />
@ -435,9 +435,9 @@ exports[`PlannerApp renders loading past spinner when loading past and there are
  >
    New Activity
  </StickyButton>
-  <Container
+  <View
    as="div"
-    display={null}
+    display="auto"
    textAlign="center"
  >
    <ShowOnFocusButton
@ -450,7 +450,7 @@ exports[`PlannerApp renders loading past spinner when loading past and there are
    >
      Load prior dates
    </ShowOnFocusButton>
-  </Container>
+  </View>
  <LoadingPastIndicator
    allPastItemsLoaded={false}
    loadingPast={true}
@ -474,9 +474,9 @@ exports[`PlannerApp shows new activity button when new activity is indicated 1`]
  >
    New Activity
  </StickyButton>
-  <Container
+  <View
    as="div"
-    display={null}
+    display="auto"
    textAlign="center"
  >
    <ShowOnFocusButton
@ -489,7 +489,7 @@ exports[`PlannerApp shows new activity button when new activity is indicated 1`]
    >
      Load prior dates
    </ShowOnFocusButton>
-  </Container>
+  </View>
  <LoadingPastIndicator
    allPastItemsLoaded={false}
    loadingPast={false}
@ -546,9 +546,9 @@ exports[`PlannerApp shows only the loading component when the isLoading prop is
 <div
  className="PlannerApp large"
 >
-  <Container
+  <View
    as="div"
-    display={null}
+    display="auto"
    textAlign="center"
  >
    <ShowOnFocusButton
@ -561,12 +561,12 @@ exports[`PlannerApp shows only the loading component when the isLoading prop is
    >
      Load prior dates
    </ShowOnFocusButton>
-  </Container>
+  </View>
  <LoadingPastIndicator
    allPastItemsLoaded={false}
    loadingPast={false}
  />
-  <Container
+  <View
    display="block"
    padding="xx-large medium"
    textAlign="center"
@ -576,7 +576,7 @@ exports[`PlannerApp shows only the loading component when the isLoading prop is
      title="Loading planner items"
      variant="default"
    />
-  </Container>
+  </View>
  <div
    id="planner-app-fixed-element"
  />
@ -587,9 +587,9 @@ exports[`PlannerApp shows the loading past indicator when loadingPast prop is tr
 <div
  className="PlannerApp large"
 >
-  <Container
+  <View
    as="div"
-    display={null}
+    display="auto"
    textAlign="center"
  >
    <ShowOnFocusButton
@ -602,7 +602,7 @@ exports[`PlannerApp shows the loading past indicator when loadingPast prop is tr
    >
      Load prior dates
    </ShowOnFocusButton>
-  </Container>
+  </View>
  <LoadingPastIndicator
    allPastItemsLoaded={false}
    loadingPast={true}
--- a/packages/canvas-planner/src/components/PlannerApp/index.js
+++ b/packages/canvas-planner/src/components/PlannerApp/index.js
@ -20,7 +20,7 @@ import React, { Component } from 'react';
 import classnames from 'classnames';
 import moment from 'moment-timezone';
 import { connect } from 'react-redux';
-import Container from '@instructure/ui-core/lib/components/Container';
+import View from '@instructure/ui-layout/lib/components/View';
 import Spinner from '@instructure/ui-core/lib/components/Spinner';
 import { arrayOf, oneOfType, shape, bool, object, string, number, func } from 'prop-types';
 import { momentObj } from 'react-moment-proptypes';
@ -162,7 +162,7 @@ export class PlannerApp extends Component {
  }

  renderLoading () {
-    return <Container
+    return <View
      display="block"
      padding="xx-large medium"
      textAlign="center"
@ -171,7 +171,7 @@ export class PlannerApp extends Component {
        title={formatMessage('Loading planner items')}
        size="medium"
      />
-    </Container>;
+    </View>;
  }

  renderNewActivity () {
@ -215,7 +215,7 @@ export class PlannerApp extends Component {

  renderLoadPastButton () {
    if (this.props.allPastItemsLoaded) return;
-    return <Container as="div" textAlign="center">
+    return <View as="div" textAlign="center">
      <ShowOnFocusButton
        buttonProps={{
          onClick: this.props.loadPastButtonClicked
@ -223,7 +223,7 @@ export class PlannerApp extends Component {
        >
          {formatMessage('Load prior dates')}
      </ShowOnFocusButton>
-    </Container>;
+    </View>;
  }

  renderNoAssignments() {
--- a/packages/canvas-planner/src/components/PlannerHeader/tests/snapshots/PlannerHeader.spec.js.snap
+++ b/packages/canvas-planner/src/components/PlannerHeader/tests/snapshots/PlannerHeader.spec.js.snap
@ -207,9 +207,9 @@ exports[`renders the base component correctly with buttons and trays 1`] = `
    shouldReturnFocus={true}
    size="small"
  >
-    <Container
+    <View
      as="div"
-      display={null}
+      display="auto"
      padding="large large medium"
    >
      <CloseButton
@ -235,7 +235,7 @@ exports[`renders the base component correctly with buttons and trays 1`] = `
        }
        loading={false}
      />
-    </Container>
+    </View>
  </Tray>
 </div>
 `;
--- a/packages/canvas-planner/src/components/PlannerHeader/index.js
+++ b/packages/canvas-planner/src/components/PlannerHeader/index.js
@ -20,7 +20,7 @@ import { connect } from 'react-redux';
 import themeable from '@instructure/ui-themeable/lib';
 import Button from '@instructure/ui-core/lib/components/Button';
 import CloseButton from '@instructure/ui-buttons/lib/components/CloseButton';
-import Container from '@instructure/ui-container/lib/components/Container';
+import View from '@instructure/ui-layout/lib/components/View';
 import IconPlusLine from 'instructure-icons/lib/Line/IconPlusLine';
 import IconAlertsLine from 'instructure-icons/lib/Line/IconAlertsLine';
 import IconGradebookLine from 'instructure-icons/lib/Line/IconGradebookLine';
@ -331,7 +331,7 @@ export class PlannerHeader extends Component {
          applicationElement={() => document.getElementById('application') }
          onDismiss={this.toggleGradesTray}
        >
-          <Container as="div" padding="large large medium">
+          <View as="div" padding="large large medium">
            <CloseButton placement="start" variant="icon" onClick={this.toggleGradesTray}>
              {formatMessage("Close")}
            </CloseButton>
@ -340,7 +340,7 @@ export class PlannerHeader extends Component {
              loading={this.props.loading.loadingGrades}
              loadingError={this.props.loading.gradesLoadingError}
            />
-          </Container>
+          </View>
        </Tray>
      </div>
    );
--- a/packages/canvas-planner/src/components/UpdateItemTray/tests/snapshots/UpdateItemTray.spec.js.snap
+++ b/packages/canvas-planner/src/components/UpdateItemTray/tests/snapshots/UpdateItemTray.spec.js.snap
@ -2,9 +2,9 @@

 exports[`renders the item to update if provided 1`] = `
 <div>
-  <Container
+  <View
    as="div"
-    display={null}
+    display="auto"
    padding="large medium medium"
  >
    <FormFieldGroup
@ -99,9 +99,9 @@ exports[`renders the item to update if provided 1`] = `
        value="You made this item to remind you of something, but you forgot what."
      />
    </FormFieldGroup>
-    <Container
+    <View
      as="div"
-      display={null}
+      display="auto"
      margin="small 0 0"
      textAlign="end"
    >
@ -130,16 +130,16 @@ exports[`renders the item to update if provided 1`] = `
      >
        Save
      </Button>
-    </Container>
-  </Container>
+    </View>
+  </View>
 </div>
 `;

 exports[`updates state when new note is passed in 1`] = `
 <div>
-  <Container
+  <View
    as="div"
-    display={null}
+    display="auto"
    padding="large medium medium"
  >
    <FormFieldGroup
@ -239,9 +239,9 @@ exports[`updates state when new note is passed in 1`] = `
        value="You made this item to remind you of something, but you forgot what."
      />
    </FormFieldGroup>
-    <Container
+    <View
      as="div"
-      display={null}
+      display="auto"
      margin="small 0 0"
      textAlign="end"
    >
@ -270,16 +270,16 @@ exports[`updates state when new note is passed in 1`] = `
      >
        Save
      </Button>
-    </Container>
-  </Container>
+    </View>
+  </View>
 </div>
 `;

 exports[`updates state when new note is passed in 2`] = `
 <div>
-  <Container
+  <View
    as="div"
-    display={null}
+    display="auto"
    padding="large medium medium"
  >
    <FormFieldGroup
@ -379,9 +379,9 @@ exports[`updates state when new note is passed in 2`] = `
        value="This is another reminder"
      />
    </FormFieldGroup>
-    <Container
+    <View
      as="div"
-      display={null}
+      display="auto"
      margin="small 0 0"
      textAlign="end"
    >
@ -410,7 +410,7 @@ exports[`updates state when new note is passed in 2`] = `
      >
        Save
      </Button>
-    </Container>
-  </Container>
+    </View>
+  </View>
 </div>
 `;
--- a/packages/canvas-planner/src/components/UpdateItemTray/index.js
+++ b/packages/canvas-planner/src/components/UpdateItemTray/index.js
@ -18,7 +18,7 @@
 import React, { Component } from 'react';
 import _ from 'lodash';
 import themeable from '@instructure/ui-themeable/lib';
-import Container from '@instructure/ui-core/lib/components/Container';
+import View from '@instructure/ui-layout/lib/components/View';
 import FormFieldGroup from '@instructure/ui-core/lib/components/FormFieldGroup';
 import ScreenReaderContent from '@instructure/ui-core/lib/components/ScreenReaderContent';
 import Button from '@instructure/ui-core/lib/components/Button';
@ -266,7 +266,7 @@ export class UpdateItemTray extends Component {
  render () {
    return (
      <div className={styles.root}>
-        <Container
+        <View
          as="div"
          padding="large medium medium"
        >
@ -283,11 +283,11 @@ export class UpdateItemTray extends Component {
            {this.renderCourseSelect()}
            {this.renderDetailsInput()}
          </FormFieldGroup>
-          <Container as="div" margin="small 0 0" textAlign="end">
+          <View as="div" margin="small 0 0" textAlign="end">
            {this.renderDeleteButton()}
            {this.renderSaveButton()}
-          </Container>
-        </Container>
+          </View>
+        </View>
      </div>
    );
  }