canvas-planner: upgrade to instUI 5

closes: ADMIN-1073 test plan: * make sure the themeing stuff still works * generally click around on all the components, they have been upgraded to use instUI 5 (from instUI 4) * look at this changelog for things that might be interesting here: https://instructure.design/#CHANGELOG * especially make sure that any of the <Select> elements still work, they changed from using a native <select> to some custom stuff. * make sure that changing them works and what they send to the server is correct (as-in if you refresh it has what you changed it to) Change-Id: I4afbeb03beda42106815de28983a418627d271e9 Reviewed-on: https://gerrit.instructure.com/150263 Tested-by: Jenkins Reviewed-by: Jon Willesen <jonw+gerrit@instructure.com> Reviewed-by: Ryan Shaw <ryan@instructure.com> QA-Review: Luke Kingsley <lkingsley@instructure.com> Product-Review: Jon Willesen <jonw+gerrit@instructure.com>
2018-05-14 17:45:05 -06:00 · 2018-05-14 17:45:05 -06:00 · aaab29c91f
parent 5259afeb73
commit aaab29c91f
38 changed files with 2167 additions and 1680 deletions
--- a/packages/canvas-planner/babel-preset.js
+++ b/packages/canvas-planner/babel-preset.js
@ -6,7 +6,7 @@ if (env === 'test') {
      ['env', {
        modules: 'commonjs',
        // use the same polyfills we use in the code we send to browsers
-        targets: { browsers: require('@instructure/ui-presets/browserslist') }
+        targets: { browsers: require('@instructure/canvas-supported-browsers') }
      }],
      'stage-1',
      'react'
--- a/packages/canvas-planner/package.json
+++ b/packages/canvas-planner/package.json
@ -41,11 +41,16 @@
  "license": "AGPL-3.0",
  "dependencies": {
    "@instructure/ui-a11y": "^5",
-    "@instructure/ui-core": "^4.8.0",
+    "@instructure/ui-alerts": "^5",
+    "@instructure/ui-buttons": "^5",
+    "@instructure/ui-elements": "^5",
    "@instructure/ui-forms": "^5",
+    "@instructure/ui-icons": "^5",
    "@instructure/ui-layout": "^5",
+    "@instructure/ui-overlays": "^5",
    "@instructure/ui-themeable": "^5",
    "@instructure/ui-toggle-details": "^5",
+    "@instructure/ui-utils": "^5",
    "axios": "^0.16.0",
    "babel-plugin-inline-react-svg": "^0.4.0",
    "change-case": "^3.0.1",
@ -54,7 +59,6 @@
    "format-message": "^5.1.2",
    "format-message-parse": "^5.1.2",
    "format-message-print": "^5.1.2",
-    "instructure-icons": "^4.3.0",
    "keycode": "^2.1.9",
    "lodash": "^4",
    "moment-timezone": "^0.5.13",
@ -73,7 +77,8 @@
    "velocity-animate": "^1.5.0"
  },
  "devDependencies": {
-    "@instructure/ui-presets": "^4.7.2",
+    "@instructure/canvas-supported-browsers": "latest",
+    "@instructure/ui-presets": "^5",
    "babel-cli": "^6",
    "babel-core": "^6",
    "babel-eslint": "^7",
--- a/packages/canvas-planner/src/components/BadgeList/tests/BadgeList.spec.js
+++ b/packages/canvas-planner/src/components/BadgeList/tests/BadgeList.spec.js
@ -18,7 +18,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import BadgeList from '../index';
-import Pill from '@instructure/ui-core/lib/components/Pill';
+import Pill from '@instructure/ui-elements/lib/components/Pill';

 it('renders Pill components as list items', () => {
  const wrapper = shallow(
--- a/packages/canvas-planner/src/components/BadgeList/index.js
+++ b/packages/canvas-planner/src/components/BadgeList/index.js
@ -18,7 +18,7 @@
 import React, { Children, Component } from 'react';
 import themeable from '@instructure/ui-themeable/lib';
 import CustomPropTypes from '@instructure/ui-utils/lib/react/CustomPropTypes';
-import Pill from '@instructure/ui-core/lib/components/Pill';
+import Pill from '@instructure/ui-elements/lib/components/Pill';

 import styles from './styles.css';
 import theme from './theme.js';
--- a/packages/canvas-planner/src/components/CompletedItemsFacade/index.js
+++ b/packages/canvas-planner/src/components/CompletedItemsFacade/index.js
@ -19,7 +19,7 @@ import React, { Component } from 'react';
 import classnames from 'classnames';
 import themeable from '@instructure/ui-themeable/lib';
 import ToggleDetails from '@instructure/ui-toggle-details/lib/components/ToggleDetails';
-import Pill from '@instructure/ui-core/lib/components/Pill';
+import Pill from '@instructure/ui-elements/lib/components/Pill';
 import BadgeList from '../BadgeList';
 import NotificationBadge, { MissingIndicator, NewActivityIndicator} from '../NotificationBadge';
 import { func, number, string, arrayOf, shape, oneOf } from 'prop-types';
--- a/packages/canvas-planner/src/components/Day/index.js
+++ b/packages/canvas-planner/src/components/Day/index.js
@ -20,8 +20,8 @@ import React, { Component } from 'react';
 import classnames from 'classnames';
 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 Heading from '@instructure/ui-elements/lib/components/Heading';
+import Text from '@instructure/ui-elements/lib/components/Text';
 import View from '@instructure/ui-layout/lib/components/View';
 import { shape, string, number, arrayOf, func } from 'prop-types';
 import { userShape, itemShape } from '../plannerPropTypes';
--- a/packages/canvas-planner/src/components/EmptyDays/index.js
+++ b/packages/canvas-planner/src/components/EmptyDays/index.js
@ -21,8 +21,8 @@ import React, { Component } from 'react';
 import moment from 'moment-timezone';
 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 Heading from '@instructure/ui-elements/lib/components/Heading';
+import Text from '@instructure/ui-elements/lib/components/Text';
 import View from '@instructure/ui-layout/lib/components/View';
 import { string } from 'prop-types';
 import styles from './styles.css';
--- a/packages/canvas-planner/src/components/ErrorAlert/tests/snapshots/ErrorAlert.spec.js.snap
+++ b/packages/canvas-planner/src/components/ErrorAlert/tests/snapshots/ErrorAlert.spec.js.snap
@ -2,8 +2,10 @@

 exports[`renders 1`] = `
 <Alert
+  liveRegionPoliteness="assertive"
  margin="small"
  open={true}
+  screenReaderOnly={false}
  timeout={0}
  transition="fade"
  variant="error"
@ -14,8 +16,10 @@ exports[`renders 1`] = `

 exports[`renders with Error details 1`] = `
 <Alert
+  liveRegionPoliteness="assertive"
  margin="small"
  open={true}
+  screenReaderOnly={false}
  timeout={0}
  transition="fade"
  variant="error"
@ -35,8 +39,10 @@ exports[`renders with Error details 1`] = `

 exports[`renders with string details 1`] = `
 <Alert
+  liveRegionPoliteness="assertive"
  margin="small"
  open={true}
+  screenReaderOnly={false}
  timeout={0}
  transition="fade"
  variant="error"
--- a/packages/canvas-planner/src/components/ErrorAlert/index.js
+++ b/packages/canvas-planner/src/components/ErrorAlert/index.js
@ -17,7 +17,7 @@
 */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Alert from '@instructure/ui-core/lib/components/Alert';
+import Alert from '@instructure/ui-alerts/lib/components/Alert';

 export default class ErrorAlert extends Component {
  static propTypes = {
--- 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
@ -56,6 +56,7 @@ exports[`renders loading when indicated 1`] = `
      display="auto"
    >
      <Spinner
+        as="div"
        margin="0 x-small 0 0"
        size="small"
        title="Loading..."
--- a/packages/canvas-planner/src/components/LoadingFutureIndicator/index.js
+++ b/packages/canvas-planner/src/components/LoadingFutureIndicator/index.js
@ -17,10 +17,10 @@
 */
 import React, { Component } from 'react';
 import {bool, func, string} from 'prop-types';
-import Button from '@instructure/ui-core/lib/components/Button';
+import Button from '@instructure/ui-buttons/lib/components/Button';
 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 Spinner from '@instructure/ui-elements/lib/components/Spinner';
+import Text from '@instructure/ui-elements/lib/components/Text';
 import ErrorAlert from '../ErrorAlert';
 import formatMessage from '../../format-message';

--- 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
@ -79,6 +79,7 @@ exports[`renders spinner while loading 1`] = `
    textAlign="center"
  >
    <Spinner
+      as="div"
      margin="0 x-small 0 0"
      size="small"
      title="Loading past items"
--- a/packages/canvas-planner/src/components/LoadingPastIndicator/index.js
+++ b/packages/canvas-planner/src/components/LoadingPastIndicator/index.js
@ -18,8 +18,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 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 Spinner from '@instructure/ui-elements/lib/components/Spinner';
+import Text from '@instructure/ui-elements/lib/components/Text';
 import ErrorAlert from '../ErrorAlert';
 import formatMessage from '../../format-message';
 import TV from './tv.svg';
--- a/packages/canvas-planner/src/components/NotificationBadge/Indicator.js
+++ b/packages/canvas-planner/src/components/NotificationBadge/Indicator.js
@ -18,8 +18,8 @@

 import React, { Component } from 'react';
 import { string, func } from 'prop-types';
-import Badge from '@instructure/ui-core/lib/components/Badge';
-import ScreenReaderContent from '@instructure/ui-core/lib/components/ScreenReaderContent';
+import Badge from '@instructure/ui-elements/lib/components/Badge';
+import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent';

 export default class Indicator extends Component {
  static propTypes = {
--- a/packages/canvas-planner/src/components/Opportunities/tests/snapshots/Opportunities.spec.js.snap
+++ b/packages/canvas-planner/src/components/Opportunities/tests/snapshots/Opportunities.spec.js.snap
@ -26,7 +26,7 @@ exports[`renders nothing if no opportunities 1`] = `
        <span>
          Close
        </span>
-        <IconXLine />
+        <IconX />
      </div>
    </Button>
  </div>
@ -62,7 +62,7 @@ exports[`renders the base component correctly with one opportunity 1`] = `
        <span>
          Close
        </span>
-        <IconXLine />
+        <IconX />
      </div>
    </Button>
  </div>
@ -110,7 +110,7 @@ exports[`renders the right course with the right opportunity 1`] = `
        <span>
          Close
        </span>
-        <IconXLine />
+        <IconX />
      </div>
    </Button>
  </div>
--- a/packages/canvas-planner/src/components/Opportunities/index.js
+++ b/packages/canvas-planner/src/components/Opportunities/index.js
@ -23,12 +23,12 @@ import scopeTab from '@instructure/ui-a11y/lib/utils/scopeTab';
 import keycode from 'keycode';

 import Opportunity from '../Opportunity';
-import Button from '@instructure/ui-core/lib/components/Button';
+import Button from '@instructure/ui-buttons/lib/components/Button';
 import { findDOMNode } from 'react-dom';
 import { array, string, func, number, oneOfType} from 'prop-types';
 import formatMessage from '../../format-message';

-import IconXLine from 'instructure-icons/lib/Line/IconXLine';
+import IconXLine from '@instructure/ui-icons/lib/Line/IconX';

 import styles from './styles.css';
 import theme from './theme.js';
--- a/packages/canvas-planner/src/components/Opportunity/tests/Opportunity.spec.js
+++ b/packages/canvas-planner/src/components/Opportunity/tests/Opportunity.spec.js
@ -18,7 +18,7 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 import { Opportunity } from '../index';
-import Pill from '@instructure/ui-core/lib/components/Pill';
+import Pill from '@instructure/ui-elements/lib/components/Pill';

 function defaultProps (options) {
  return {
--- a/packages/canvas-planner/src/components/Opportunity/tests/snapshots/Opportunity.spec.js.snap
+++ b/packages/canvas-planner/src/components/Opportunity/tests/snapshots/Opportunity.spec.js.snap
@ -30,7 +30,7 @@ exports[`renders the base component correctly 1`] = `
        type="button"
        variant="icon"
      >
-        <IconXLine
+        <IconX
          title="Dismiss this is a description about the opportunity"
        />
      </Button>
@ -99,7 +99,7 @@ exports[`renders the base component correctly without points 1`] = `
        type="button"
        variant="icon"
      >
-        <IconXLine
+        <IconX
          title="Dismiss this is a description about the opportunity"
        />
      </Button>
--- a/packages/canvas-planner/src/components/Opportunity/index.js
+++ b/packages/canvas-planner/src/components/Opportunity/index.js
@ -21,12 +21,12 @@ import {animatable} from '../../dynamic-ui';
 import formatMessage from '../../format-message';
 import moment from 'moment-timezone';
 import { getFullDateAndTime } from '../../utilities/dateUtils';
-import Button from '@instructure/ui-core/lib/components/Button';
-import Link from '@instructure/ui-core/lib/components/Link';
-import Pill from '@instructure/ui-core/lib/components/Pill';
-import PresentationContent from '@instructure/ui-core/lib/components/PresentationContent';
-import ScreenReaderContent from '@instructure/ui-core/lib/components/ScreenReaderContent';
-import IconXLine from 'instructure-icons/lib/Line/IconXLine';
+import Button from '@instructure/ui-buttons/lib/components/Button';
+import Link from '@instructure/ui-elements/lib/components/Link';
+import Pill from '@instructure/ui-elements/lib/components/Pill';
+import PresentationContent from '@instructure/ui-a11y/lib/components/PresentationContent';
+import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent';
+import IconXLine from '@instructure/ui-icons/lib/Line/IconX';
 import { bool, string, number, func, object } from 'prop-types';
 import styles from './styles.css';
 import theme from './theme.js';
--- 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
@ -524,6 +524,7 @@ exports[`PlannerApp shows only the loading component when the isLoading prop is
    textAlign="center"
  >
    <Spinner
+      as="div"
      size="medium"
      title="Loading planner items"
      variant="default"
--- a/packages/canvas-planner/src/components/PlannerApp/index.js
+++ b/packages/canvas-planner/src/components/PlannerApp/index.js
@ -21,7 +21,7 @@ import classnames from 'classnames';
 import moment from 'moment-timezone';
 import { connect } from 'react-redux';
 import View from '@instructure/ui-layout/lib/components/View';
-import Spinner from '@instructure/ui-core/lib/components/Spinner';
+import Spinner from '@instructure/ui-elements/lib/components/Spinner';
 import { arrayOf, oneOfType, shape, bool, object, string, number, func } from 'prop-types';
 import { momentObj } from 'react-moment-proptypes';
 import { userShape, sizeShape } from '../plannerPropTypes';
--- a/packages/canvas-planner/src/components/PlannerEmptyState/index.js
+++ b/packages/canvas-planner/src/components/PlannerEmptyState/index.js
@ -20,8 +20,8 @@ import classnames from 'classnames';
 import themeable from '@instructure/ui-themeable/lib';
 import { func } from 'prop-types';

-import Heading from '@instructure/ui-core/lib/components/Heading';
-import Link from '@instructure/ui-core/lib/components/Link';
+import Heading from '@instructure/ui-elements/lib/components/Heading';
+import Link from '@instructure/ui-elements/lib/components/Link';

 import formatMessage from '../../format-message';
 import DesertSvg from './empty-desert.svg'; // Currently uses react-svg-loader
--- a/packages/canvas-planner/src/components/PlannerHeader/tests/PlannerHeader.spec.js
+++ b/packages/canvas-planner/src/components/PlannerHeader/tests/PlannerHeader.spec.js
@ -136,7 +136,7 @@ it('toggles aria-hidden on the ariaHideElement when opening the add to do item t
    <PlannerHeader {...defaultProps()} ariaHideElement={fakeElement} />
  );

-  const button = wrapper.find('IconPlusLine').parent();
+  const button = wrapper.find('IconPlus').parent();

  button.simulate('click');
  expect(fakeElement.getAttribute('aria-hidden')).toBe('true');
--- 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
@ -25,7 +25,7 @@ exports[`new activity button does not show when there is no new activity 1`] = `
    type="button"
    variant="icon"
  >
-    <IconPlusLine
+    <IconPlus
      title="Add To Do"
    />
  </Button>
@ -39,21 +39,19 @@ exports[`new activity button does not show when there is no new activity 1`] = `
    type="button"
    variant="icon"
  >
-    <IconGradebookLine
+    <IconGradebook
      title="Show My Grades"
    />
  </Button>
  <Popover
    alignArrow={false}
-    applicationElement={null}
-    closeButtonLabel={null}
-    closeButtonRef={[Function]}
    constrain="none"
    contentRef={[Function]}
    defaultFocusElement={null}
    defaultShow={false}
    insertAt="bottom"
    label={null}
+    liveRegion={null}
    mountNode={null}
    offsetX={0}
    offsetY={0}
@ -76,6 +74,7 @@ exports[`new activity button does not show when there is no new activity 1`] = `
    shouldRenderOffscreen={false}
    shouldReturnFocus={true}
    show={false}
+    stacking="topmost"
    trackPosition={true}
    variant="default"
    withArrow={true}
@ -93,6 +92,7 @@ exports[`new activity button does not show when there is no new activity 1`] = `
      >
        <Badge
          count={1}
+          elementRef={[Function]}
          formatOverflowText={[Function]}
          placement="top end"
          pulse={false}
@ -100,7 +100,7 @@ exports[`new activity button does not show when there is no new activity 1`] = `
          type="count"
          variant="primary"
        >
-          <IconAlertsLine
+          <IconAlerts
            title="1 opportunity"
          />
        </Badge>
@ -139,12 +139,11 @@ exports[`new activity button does not show when there is no new activity 1`] = `
    applicationElement={[Function]}
    border={false}
    closeButtonLabel="Close"
-    closeButtonRef={[Function]}
-    closeButtonVariant="icon"
    contentRef={[Function]}
    defaultFocusElement={null}
    insertAt="bottom"
    label="Add To Do"
+    liveRegion={null}
    mountNode={null}
    onClose={[Function]}
    onDismiss={[Function]}
@ -180,15 +179,12 @@ exports[`new activity button does not show when there is no new activity 1`] = `
    />
  </Tray>
  <Tray
-    applicationElement={[Function]}
    border={false}
-    closeButtonLabel={null}
-    closeButtonRef={[Function]}
-    closeButtonVariant="icon"
    contentRef={[Function]}
    defaultFocusElement={null}
    insertAt="bottom"
    label="My Grades"
+    liveRegion={null}
    mountNode={null}
    onClose={[Function]}
    onDismiss={[Function]}
@ -265,7 +261,7 @@ exports[`new activity button shows when there is new activity 1`] = `
    type="button"
    variant="icon"
  >
-    <IconPlusLine
+    <IconPlus
      title="Add To Do"
    />
  </Button>
@ -279,21 +275,19 @@ exports[`new activity button shows when there is new activity 1`] = `
    type="button"
    variant="icon"
  >
-    <IconGradebookLine
+    <IconGradebook
      title="Show My Grades"
    />
  </Button>
  <Popover
    alignArrow={false}
-    applicationElement={null}
-    closeButtonLabel={null}
-    closeButtonRef={[Function]}
    constrain="none"
    contentRef={[Function]}
    defaultFocusElement={null}
    defaultShow={false}
    insertAt="bottom"
    label={null}
+    liveRegion={null}
    mountNode={null}
    offsetX={0}
    offsetY={0}
@ -316,6 +310,7 @@ exports[`new activity button shows when there is new activity 1`] = `
    shouldRenderOffscreen={false}
    shouldReturnFocus={true}
    show={false}
+    stacking="topmost"
    trackPosition={true}
    variant="default"
    withArrow={true}
@ -333,6 +328,7 @@ exports[`new activity button shows when there is new activity 1`] = `
      >
        <Badge
          count={1}
+          elementRef={[Function]}
          formatOverflowText={[Function]}
          placement="top end"
          pulse={false}
@ -340,7 +336,7 @@ exports[`new activity button shows when there is new activity 1`] = `
          type="count"
          variant="primary"
        >
-          <IconAlertsLine
+          <IconAlerts
            title="1 opportunity"
          />
        </Badge>
@ -379,12 +375,11 @@ exports[`new activity button shows when there is new activity 1`] = `
    applicationElement={[Function]}
    border={false}
    closeButtonLabel="Close"
-    closeButtonRef={[Function]}
-    closeButtonVariant="icon"
    contentRef={[Function]}
    defaultFocusElement={null}
    insertAt="bottom"
    label="Add To Do"
+    liveRegion={null}
    mountNode={null}
    onClose={[Function]}
    onDismiss={[Function]}
@ -420,15 +415,12 @@ exports[`new activity button shows when there is new activity 1`] = `
    />
  </Tray>
  <Tray
-    applicationElement={[Function]}
    border={false}
-    closeButtonLabel={null}
-    closeButtonRef={[Function]}
-    closeButtonVariant="icon"
    contentRef={[Function]}
    defaultFocusElement={null}
    insertAt="bottom"
    label="My Grades"
+    liveRegion={null}
    mountNode={null}
    onClose={[Function]}
    onDismiss={[Function]}
@ -516,7 +508,7 @@ exports[`renders the base component correctly with buttons and trays 1`] = `
    type="button"
    variant="icon"
  >
-    <IconPlusLine
+    <IconPlus
      title="Add To Do"
    />
  </Button>
@ -530,21 +522,19 @@ exports[`renders the base component correctly with buttons and trays 1`] = `
    type="button"
    variant="icon"
  >
-    <IconGradebookLine
+    <IconGradebook
      title="Show My Grades"
    />
  </Button>
  <Popover
    alignArrow={false}
-    applicationElement={null}
-    closeButtonLabel={null}
-    closeButtonRef={[Function]}
    constrain="none"
    contentRef={[Function]}
    defaultFocusElement={null}
    defaultShow={false}
    insertAt="bottom"
    label={null}
+    liveRegion={null}
    mountNode={null}
    offsetX={0}
    offsetY={0}
@ -567,6 +557,7 @@ exports[`renders the base component correctly with buttons and trays 1`] = `
    shouldRenderOffscreen={false}
    shouldReturnFocus={true}
    show={false}
+    stacking="topmost"
    trackPosition={true}
    variant="default"
    withArrow={true}
@ -584,6 +575,7 @@ exports[`renders the base component correctly with buttons and trays 1`] = `
      >
        <Badge
          count={1}
+          elementRef={[Function]}
          formatOverflowText={[Function]}
          placement="top end"
          pulse={false}
@ -591,7 +583,7 @@ exports[`renders the base component correctly with buttons and trays 1`] = `
          type="count"
          variant="primary"
        >
-          <IconAlertsLine
+          <IconAlerts
            title="1 opportunity"
          />
        </Badge>
@ -630,12 +622,11 @@ exports[`renders the base component correctly with buttons and trays 1`] = `
    applicationElement={[Function]}
    border={false}
    closeButtonLabel="Close"
-    closeButtonRef={[Function]}
-    closeButtonVariant="icon"
    contentRef={[Function]}
    defaultFocusElement={null}
    insertAt="bottom"
    label="Add To Do"
+    liveRegion={null}
    mountNode={null}
    onClose={[Function]}
    onDismiss={[Function]}
@ -671,15 +662,12 @@ exports[`renders the base component correctly with buttons and trays 1`] = `
    />
  </Tray>
  <Tray
-    applicationElement={[Function]}
    border={false}
-    closeButtonLabel={null}
-    closeButtonRef={[Function]}
-    closeButtonVariant="icon"
    contentRef={[Function]}
    defaultFocusElement={null}
    insertAt="bottom"
    label="My Grades"
+    liveRegion={null}
    mountNode={null}
    onClose={[Function]}
    onDismiss={[Function]}
--- a/packages/canvas-planner/src/components/PlannerHeader/index.js
+++ b/packages/canvas-planner/src/components/PlannerHeader/index.js
@ -18,17 +18,17 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import themeable from '@instructure/ui-themeable/lib';
-import Button from '@instructure/ui-core/lib/components/Button';
+import Button from '@instructure/ui-buttons/lib/components/Button';
 import CloseButton from '@instructure/ui-buttons/lib/components/CloseButton';
 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';
-import Popover, {PopoverTrigger, PopoverContent} from '@instructure/ui-core/lib/components/Popover';
+import IconPlusLine from '@instructure/ui-icons/lib/Line/IconPlus';
+import IconAlertsLine from '@instructure/ui-icons/lib/Line/IconAlerts';
+import IconGradebookLine from '@instructure/ui-icons/lib/Line/IconGradebook';
+import Popover, {PopoverTrigger, PopoverContent} from '@instructure/ui-overlays/lib/components/Popover';
 import PropTypes from 'prop-types';
 import UpdateItemTray from '../UpdateItemTray';
-import Tray from '@instructure/ui-core/lib/components/Tray';
-import Badge from '@instructure/ui-core/lib/components/Badge';
+import Tray from '@instructure/ui-overlays/lib/components/Tray';
+import Badge from '@instructure/ui-elements/lib/components/Badge';
 import Opportunities from '../Opportunities';
 import GradesDisplay from '../GradesDisplay';
 import StickyButton from '../StickyButton';
@ -369,7 +369,6 @@ export class PlannerHeader extends Component {
          placement="end"
          shouldContainFocus
          shouldReturnFocus
-          applicationElement={() => document.getElementById('application') }
          onDismiss={this.toggleGradesTray}
        >
          <View as="div" padding="large large medium">
--- a/packages/canvas-planner/src/components/PlannerItem/tests/snapshots/PlannerItem.spec.js.snap
+++ b/packages/canvas-planner/src/components/PlannerItem/tests/snapshots/PlannerItem.spec.js.snap
@ -34,7 +34,7 @@ exports[`renders Announcement correctly with everything 1`] = `
      }
    }
  >
-    <IconAnnouncementLine />
+    <IconAnnouncement />
  </div>
  <div>
    <div>
@ -165,7 +165,7 @@ exports[`renders Announcement correctly with just date 1`] = `
      }
    }
  >
-    <IconAnnouncementLine />
+    <IconAnnouncement />
  </div>
  <div>
    <div>
@ -272,7 +272,7 @@ exports[`renders Announcement correctly with just points 1`] = `
      }
    }
  >
-    <IconAnnouncementLine />
+    <IconAnnouncement />
  </div>
  <div>
    <div>
@ -403,7 +403,7 @@ exports[`renders Announcement correctly without right side content 1`] = `
      }
    }
  >
-    <IconAnnouncementLine />
+    <IconAnnouncement />
  </div>
  <div>
    <div>
@ -510,7 +510,7 @@ exports[`renders Assignment correctly with everything 1`] = `
      }
    }
  >
-    <IconAssignmentLine />
+    <IconAssignment />
  </div>
  <div>
    <div>
@ -641,7 +641,7 @@ exports[`renders Assignment correctly with just date 1`] = `
      }
    }
  >
-    <IconAssignmentLine />
+    <IconAssignment />
  </div>
  <div>
    <div>
@ -748,7 +748,7 @@ exports[`renders Assignment correctly with just points 1`] = `
      }
    }
  >
-    <IconAssignmentLine />
+    <IconAssignment />
  </div>
  <div>
    <div>
@ -879,7 +879,7 @@ exports[`renders Assignment correctly without right side content 1`] = `
      }
    }
  >
-    <IconAssignmentLine />
+    <IconAssignment />
  </div>
  <div>
    <div>
@ -986,7 +986,7 @@ exports[`renders Calendar Event correctly with an all day date 1`] = `
      }
    }
  >
-    <IconCalendarMonthLine />
+    <IconCalendarMonth />
  </div>
  <div>
    <div>
@ -1093,7 +1093,7 @@ exports[`renders Calendar Event correctly with everything 1`] = `
      }
    }
  >
-    <IconCalendarMonthLine />
+    <IconCalendarMonth />
  </div>
  <div>
    <div>
@ -1224,7 +1224,7 @@ exports[`renders Calendar Event correctly with just date 1`] = `
      }
    }
  >
-    <IconCalendarMonthLine />
+    <IconCalendarMonth />
  </div>
  <div>
    <div>
@ -1331,7 +1331,7 @@ exports[`renders Calendar Event correctly without right side content 1`] = `
      }
    }
  >
-    <IconCalendarMonthLine />
+    <IconCalendarMonth />
  </div>
  <div>
    <div>
@ -1438,7 +1438,7 @@ exports[`renders Discussion correctly with everything 1`] = `
      }
    }
  >
-    <IconDiscussionLine />
+    <IconDiscussion />
  </div>
  <div>
    <div>
@ -1569,7 +1569,7 @@ exports[`renders Discussion correctly with just date 1`] = `
      }
    }
  >
-    <IconDiscussionLine />
+    <IconDiscussion />
  </div>
  <div>
    <div>
@ -1676,7 +1676,7 @@ exports[`renders Discussion correctly with just points 1`] = `
      }
    }
  >
-    <IconDiscussionLine />
+    <IconDiscussion />
  </div>
  <div>
    <div>
@ -1807,7 +1807,7 @@ exports[`renders Discussion correctly without right side content 1`] = `
      }
    }
  >
-    <IconDiscussionLine />
+    <IconDiscussion />
  </div>
  <div>
    <div>
@ -1914,7 +1914,7 @@ exports[`renders Note correctly with Group 1`] = `
      }
    }
  >
-    <IconMsWordLine />
+    <IconMsWord />
  </div>
  <div>
    <div>
@ -2247,7 +2247,7 @@ exports[`renders Page correctly with everything 1`] = `
      }
    }
  >
-    <IconMsWordLine />
+    <IconMsWord />
  </div>
  <div>
    <div>
@ -2378,7 +2378,7 @@ exports[`renders Page correctly with just date 1`] = `
      }
    }
  >
-    <IconMsWordLine />
+    <IconMsWord />
  </div>
  <div>
    <div>
@ -2485,7 +2485,7 @@ exports[`renders Page correctly with just points 1`] = `
      }
    }
  >
-    <IconMsWordLine />
+    <IconMsWord />
  </div>
  <div>
    <div>
@ -2616,7 +2616,7 @@ exports[`renders Page correctly without right side content 1`] = `
      }
    }
  >
-    <IconMsWordLine />
+    <IconMsWord />
  </div>
  <div>
    <div>
@ -2723,7 +2723,7 @@ exports[`renders Quiz correctly with everything 1`] = `
      }
    }
  >
-    <IconQuizLine />
+    <IconQuiz />
  </div>
  <div>
    <div>
@ -2854,7 +2854,7 @@ exports[`renders Quiz correctly with just date 1`] = `
      }
    }
  >
-    <IconQuizLine />
+    <IconQuiz />
  </div>
  <div>
    <div>
@ -2961,7 +2961,7 @@ exports[`renders Quiz correctly with just points 1`] = `
      }
    }
  >
-    <IconQuizLine />
+    <IconQuiz />
  </div>
  <div>
    <div>
@ -3092,7 +3092,7 @@ exports[`renders Quiz correctly without right side content 1`] = `
      }
    }
  >
-    <IconQuizLine />
+    <IconQuiz />
  </div>
  <div>
    <div>
@ -3199,7 +3199,7 @@ exports[`renders correctly 1`] = `
      }
    }
  >
-    <IconAssignmentLine />
+    <IconAssignment />
  </div>
  <div>
    <div>
--- a/packages/canvas-planner/src/components/PlannerItem/index.js
+++ b/packages/canvas-planner/src/components/PlannerItem/index.js
@ -18,19 +18,19 @@
 import React, { Component } from 'react';
 import classnames from 'classnames';
 import themeable from '@instructure/ui-themeable/lib';
-import Text from '@instructure/ui-core/lib/components/Text';
-import Checkbox from '@instructure/ui-core/lib/components/Checkbox';
-import Link from '@instructure/ui-core/lib/components/Link';
-import ScreenReaderContent from '@instructure/ui-core/lib/components/ScreenReaderContent';
-import PresentationContent from '@instructure/ui-core/lib/components/PresentationContent';
-import Pill from '@instructure/ui-core/lib/components/Pill';
-import Avatar from '@instructure/ui-core/lib/components/Avatar';
-import Assignment from 'instructure-icons/lib/Line/IconAssignmentLine';
-import Quiz from 'instructure-icons/lib/Line/IconQuizLine';
-import Announcement from 'instructure-icons/lib/Line/IconAnnouncementLine';
-import Discussion from 'instructure-icons/lib/Line/IconDiscussionLine';
-import Calendar from 'instructure-icons/lib/Line/IconCalendarMonthLine';
-import Page from 'instructure-icons/lib/Line/IconMsWordLine';
+import Text from '@instructure/ui-elements/lib/components/Text';
+import Checkbox, {CheckboxFacade} from '@instructure/ui-forms/lib/components/Checkbox';
+import Link from '@instructure/ui-elements/lib/components/Link';
+import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent';
+import PresentationContent from '@instructure/ui-a11y/lib/components/PresentationContent';
+import Pill from '@instructure/ui-elements/lib/components/Pill';
+import Avatar from '@instructure/ui-elements/lib/components/Avatar';
+import Assignment from '@instructure/ui-icons/lib/Line/IconAssignment';
+import Quiz from '@instructure/ui-icons/lib/Line/IconQuiz';
+import Announcement from '@instructure/ui-icons/lib/Line/IconAnnouncement';
+import Discussion from '@instructure/ui-icons/lib/Line/IconDiscussion';
+import Calendar from '@instructure/ui-icons/lib/Line/IconCalendarMonth';
+import Page from '@instructure/ui-icons/lib/Line/IconMsWord';
 import NotificationBadge, { MissingIndicator, NewActivityIndicator } from '../NotificationBadge';
 import BadgeList from '../BadgeList';
 import responsiviser from '../responsiviser';
@ -42,8 +42,7 @@ import { showPillForOverdueStatus } from '../../utilities/statusUtils';
 import { momentObj } from 'react-moment-proptypes';
 import formatMessage from '../../format-message';
 import {animatable} from '../../dynamic-ui';
-import ApplyTheme from '@instructure/ui-core/lib/components/ApplyTheme';
-import CheckboxFacade from '@instructure/ui-core/lib/components/Checkbox/CheckboxFacade';
+import ApplyTheme from '@instructure/ui-themeable/lib/components/ApplyTheme';

 export class PlannerItem extends Component {
  static propTypes = {
--- a/packages/canvas-planner/src/components/ShowOnFocusButton/index.js
+++ b/packages/canvas-planner/src/components/ShowOnFocusButton/index.js
@ -20,8 +20,8 @@ import { findDOMNode } from 'react-dom';
 import { node, object, func } from 'prop-types';

 import themeable from '@instructure/ui-themeable/lib';
-import Button from '@instructure/ui-core/lib/components/Button';
-import ScreenReaderContent from '@instructure/ui-core/lib/components/ScreenReaderContent';
+import Button from '@instructure/ui-buttons/lib/components/Button';
+import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent';

 import styles from './styles.css';
 import theme from './theme.js';
--- a/packages/canvas-planner/src/components/StickyButton/tests/StickyButton.spec.js
+++ b/packages/canvas-planner/src/components/StickyButton/tests/StickyButton.spec.js
@ -18,8 +18,8 @@
 import React from 'react';
 import StickyButton from '../index';
 import {shallow} from 'enzyme';
-import IconArrowUpSolid from 'instructure-icons/lib/Solid/IconArrowUpSolid';
-import IconArrowDownLine from 'instructure-icons/lib/Line/IconArrowDownLine';
+import IconArrowUpSolid from '@instructure/ui-icons/lib/Solid/IconArrowUp';
+import IconArrowDownLine from '@instructure/ui-icons/lib/Line/IconArrowDown';


 it('renders', () => {
--- a/packages/canvas-planner/src/components/StickyButton/index.js
+++ b/packages/canvas-planner/src/components/StickyButton/index.js
@ -19,8 +19,8 @@ import React, { Component } from 'react';
 import classnames from 'classnames';
 import themeable from '@instructure/ui-themeable/lib';
 import { bool, func, node, number, string, oneOf } from 'prop-types';
-import IconArrowUpSolid from 'instructure-icons/lib/Solid/IconArrowUpSolid';
-import IconArrowDownLine from 'instructure-icons/lib/Line/IconArrowDownLine';
+import IconArrowUpSolid from '@instructure/ui-icons/lib/Solid/IconArrowUp';
+import IconArrowDownLine from '@instructure/ui-icons/lib/Line/IconArrowDown';

 import styles from './styles.css';
 import theme from './theme.js';
--- a/packages/canvas-planner/src/components/UpdateItemTray/tests/UpdateItemTray.spec.js
+++ b/packages/canvas-planner/src/components/UpdateItemTray/tests/UpdateItemTray.spec.js
@ -259,7 +259,7 @@ it('invokes save callback with updated data', () => {
  />);
  wrapper.instance().handleTitleChange({target: {value: 'new title'}});
  wrapper.instance().handleDateChange({}, '2017-05-01T14:00:00Z');
-  wrapper.instance().handleCourseIdChange({target: {value: '43'}});
+  wrapper.instance().handleCourseIdChange(null, {value: '43'});
  wrapper.instance().handleChange('details', 'new details');
  wrapper.instance().handleSave();
  expect(saveMock).toHaveBeenCalledWith({
--- 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
@ -31,6 +31,7 @@ exports[`renders the item to update if provided 1`] = `
        layout="stacked"
        messages={Array []}
        onChange={[Function]}
+        readOnly={false}
        size="medium"
        textAlign="start"
        type="text"
@ -62,16 +63,25 @@ exports[`renders the item to update if provided 1`] = `
        value="2017-04-25T08:49:00.000Z"
      />
      <Select
-        disabled={false}
-        inline={false}
+        allowEmpty={true}
+        closeOnSelect={true}
+        editable={false}
+        emptyOption="---"
+        filter={[Function]}
+        formatSelectedOption={[Function]}
+        inputRef={[Function]}
        label="Course"
-        layout="stacked"
-        messages={Array []}
+        loadingText={null}
        onChange={[Function]}
-        selectRef={[Function]}
+        optionsMaxWidth={null}
+        selectedOption={
+          Object {
+            "label": "a course",
+            "value": "1",
+          }
+        }
        size="medium"
-        type="text"
-        value="1"
+        visibleOptionsCount={8}
      >
        <option
          value="none"
@ -93,6 +103,7 @@ exports[`renders the item to update if provided 1`] = `
        layout="stacked"
        messages={Array []}
        onChange={[Function]}
+        readOnly={false}
        resize="none"
        size="medium"
        textareaRef={[Function]}
@ -166,6 +177,7 @@ exports[`updates state when new note is passed in 1`] = `
        layout="stacked"
        messages={Array []}
        onChange={[Function]}
+        readOnly={false}
        size="medium"
        textAlign="start"
        type="text"
@ -197,16 +209,25 @@ exports[`updates state when new note is passed in 1`] = `
        value="2017-04-28T11:00:00.000Z"
      />
      <Select
-        disabled={false}
-        inline={false}
+        allowEmpty={true}
+        closeOnSelect={true}
+        editable={false}
+        emptyOption="---"
+        filter={[Function]}
+        formatSelectedOption={[Function]}
+        inputRef={[Function]}
        label="Course"
-        layout="stacked"
-        messages={Array []}
+        loadingText={null}
        onChange={[Function]}
-        selectRef={[Function]}
+        optionsMaxWidth={null}
+        selectedOption={
+          Object {
+            "label": "first course",
+            "value": "1",
+          }
+        }
        size="medium"
-        type="text"
-        value="1"
+        visibleOptionsCount={8}
      >
        <option
          value="none"
@ -233,6 +254,7 @@ exports[`updates state when new note is passed in 1`] = `
        layout="stacked"
        messages={Array []}
        onChange={[Function]}
+        readOnly={false}
        resize="none"
        size="medium"
        textareaRef={[Function]}
@ -306,6 +328,7 @@ exports[`updates state when new note is passed in 2`] = `
        layout="stacked"
        messages={Array []}
        onChange={[Function]}
+        readOnly={false}
        size="medium"
        textAlign="start"
        type="text"
@ -337,16 +360,25 @@ exports[`updates state when new note is passed in 2`] = `
        value="2017-04-28T11:00:00.000Z"
      />
      <Select
-        disabled={false}
-        inline={false}
+        allowEmpty={true}
+        closeOnSelect={true}
+        editable={false}
+        emptyOption="---"
+        filter={[Function]}
+        formatSelectedOption={[Function]}
+        inputRef={[Function]}
        label="Course"
-        layout="stacked"
-        messages={Array []}
+        loadingText={null}
        onChange={[Function]}
-        selectRef={[Function]}
+        optionsMaxWidth={null}
+        selectedOption={
+          Object {
+            "label": "second course",
+            "value": "2",
+          }
+        }
        size="medium"
-        type="text"
-        value="2"
+        visibleOptionsCount={8}
      >
        <option
          value="none"
@ -373,6 +405,7 @@ exports[`updates state when new note is passed in 2`] = `
        layout="stacked"
        messages={Array []}
        onChange={[Function]}
+        readOnly={false}
        resize="none"
        size="medium"
        textareaRef={[Function]}
--- a/packages/canvas-planner/src/components/UpdateItemTray/index.js
+++ b/packages/canvas-planner/src/components/UpdateItemTray/index.js
@ -19,14 +19,14 @@ import React, { Component } from 'react';
 import _ from 'lodash';
 import themeable from '@instructure/ui-themeable/lib';
 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';
+import FormFieldGroup from '@instructure/ui-forms/lib/components/FormFieldGroup';
+import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent';
+import Button from '@instructure/ui-buttons/lib/components/Button';
 import formatMessage from '../../format-message';
 import PropTypes from 'prop-types';
-import TextInput from '@instructure/ui-core/lib/components/TextInput';
-import Select from '@instructure/ui-core/lib/components/Select';
-import TextArea from '@instructure/ui-core/lib/components/TextArea';
+import TextInput from '@instructure/ui-forms/lib/components/TextInput';
+import Select from '@instructure/ui-forms/lib/components/Select';
+import TextArea from '@instructure/ui-forms/lib/components/TextArea';
 import DateTimeInput from '@instructure/ui-forms/lib/components/DateTimeInput';
 import moment from 'moment-timezone';

@ -106,8 +106,9 @@ export class UpdateItemTray extends Component {
    }, this.updateMessages);
  }

-  handleCourseIdChange = (e) => {
-    let value = e.target.value;
+  handleCourseIdChange = (e, option) => {
+    if (!option) return
+    let value = option.value;
    if (value === 'none') value = undefined;
    this.handleChange('courseId', value);
  }
@ -216,24 +217,32 @@ export class UpdateItemTray extends Component {
    );
  }

-  renderCourseSelectOptions () {
-    if (!this.props.courses) return [];
-    return this.props.courses.map(course => {
-      return <option key={course.id} value={course.id}>{course.longName}</option>;
-    });
-  }
+

  renderCourseSelect () {
-    let courseId = this.findCurrentValue('courseId');
-    if (courseId == null) courseId = 'none';
+    const noneOption = {
+      value: "none",
+      label: formatMessage("Optional: Add Course")
+    }
+    const courseOptions = (this.props.courses || []).map(course => ({
+      value: course.id,
+      label: course.longName
+    }))
+
+    const courseId = this.findCurrentValue('courseId');
+    const selectedOption = courseId
+      ? courseOptions.find(o => o.value === courseId)
+      : noneOption
+
    return (
      <Select
        label={formatMessage("Course")}
-        value={courseId}
+        selectedOption={selectedOption}
        onChange={this.handleCourseIdChange}
      >
-        <option value="none">{formatMessage("Optional: Add Course")}</option>
-        {this.renderCourseSelectOptions()}
+        {[noneOption, ...courseOptions].map(props => (
+          <option key={props.value} value={props.value}>{props.label}</option>
+        ))}
      </Select>
    );
  }
--- a/packages/canvas-planner/src/demo.js
+++ b/packages/canvas-planner/src/demo.js
@ -29,10 +29,10 @@ import moment from 'moment-timezone';
 import CanvasPlanner, { store as PlannerStore } from './index';
 import { addDay, getPlannerItems } from '../src/actions';

-import Button from '@instructure/ui-core/lib/components/Button';
+import Button from '@instructure/ui-buttons/lib/components/Button';
 import Select from '@instructure/ui-core/lib/components/Select';
-import Grid, { GridCol, GridRow } from '@instructure/ui-core/lib/components/Grid';
-import Text from '@instructure/ui-core/lib/components/Text';
+import Grid, { GridCol, GridRow } from '@instructure/ui-layout/lib/components/Grid';
+import Text from '@instructure/ui-elements/lib/components/Text';
 import THEMES from '@instructure/ui-themes/lib';

 const COURSES = [{
--- a/packages/canvas-planner/src/index.js
+++ b/packages/canvas-planner/src/index.js
@ -24,7 +24,7 @@ import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import PlannerApp from './components/PlannerApp';
 import PlannerHeader from './components/PlannerHeader';
-import ApplyTheme from '@instructure/ui-core/lib/components/ApplyTheme';
+import ApplyTheme from '@instructure/ui-themeable/lib/components/ApplyTheme';
 import i18n from './i18n';
 import configureStore from './store/configureStore';
 import { initialOptions, getPlannerItems, scrollIntoPast, loadFutureItems } from './actions';
--- a/packages/canvas-planner/src/reducers/todo-reducer.js
+++ b/packages/canvas-planner/src/reducers/todo-reducer.js
@ -16,11 +16,11 @@
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */
 import { handleActions } from 'redux-actions';
-import _ from 'lodash';
+import {cloneDeep} from 'lodash';

 export default handleActions({
  UPDATE_TODO: (state, action) => {
-    return _.cloneDeep(action.payload);
+    return cloneDeep(action.payload);
  },
  OPEN_EDITING_PLANNER_ITEM: (state, action) => {
    return state.updateTodoItem ? state : {updateTodoItem: {}};
--- a/spec/selenium/Falcor/student_planner_spec.rb
+++ b/spec/selenium/Falcor/student_planner_spec.rb
@ -438,17 +438,21 @@ describe "student planner" do
                                                       title: "Student to do 2")
      view_todo_item
      modal = todo_sidebar_modal(@student_to_do.title)
-      expect(f('input', modal)[:value]).to eq(@student_to_do.title)
-      expect((f('select', modal)[:value]).to_i).to eq(@course.id)
+      title_input = f('input', modal)
+      course_name_dropdown = fj('span:contains("Course")>span>span>input', modal)
+
+      expect(title_input[:value]).to eq(@student_to_do.title)
+      expect(course_name_dropdown[:value]).to eq("#{@course.name} - #{@course.short_name}")
+
      flnpt(student_to_do2.title).click
-      expect(f('input', modal)[:value]).to eq(student_to_do2.title)
-      expect(f('select', modal)[:value]).to eq("none")
+      expect(title_input[:value]).to eq(student_to_do2.title)
+      expect(course_name_dropdown[:value]).to eq("Optional: Add Course")
    end

    it "allows editing the course of a to-do item", priority: "1", test_id: 3418827 do
      view_todo_item
-      element = fj("select:contains('Unnamed Course')")
-      fj("option:contains('Optional: Add Course')", element).click
+      fj(":contains('Unnamed Course')>span>input[role=combobox]").click
+      fj("[role='option'] :contains('Optional: Add Course')").click
      todo_save_button.click
      @student_to_do.reload
      expect(@student_to_do.course_id).to be nil
@ -457,8 +461,8 @@ describe "student planner" do
    it "has courses in the course combo box.", priority: "1", test_id: 3263160 do
      go_to_list_view
      todo_modal_button.click
-      element = fj("select:contains('Optional: Add Course')")
-      expect(fj("option:contains('Unnamed Course')", element)).to be
+      fj(":contains('Optional: Add Course')>span>input[role=combobox]").click
+      expect(fj("[role='option'] :contains('Unnamed Course')")).to be
    end

    it "ensures time zones with offsets higher than UTC update the planner items" do
--- a/yarn.lock
+++ b/yarn.lock