@instructure/quiz-core 18.3.1-rc.2 → 18.3.1-rc.21

package/lib/building/components/resources/quiz/editButton/EditButton.js

@@ -25,8 +25,6 @@ var _uiButtons = require("@instructure/ui-buttons");
 
 var _uiIcons = require("@instructure/ui-icons");
 
-var _uiA11yContent = require("@instructure/ui-a11y-content");
-
 var _makeScrollable = _interopRequireDefault(require("../../../../../common/components/shared/functionality/makeScrollable.js"));
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
@@ -63,13 +61,16 @@ var EditButton = /*#__PURE__*/function (_Component) {
   (0, _createClass2.default)(EditButton, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, Object.assign({
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, Object.assign({
         ref: this.handleButtonRef,
-        variant: "icon",
         size: "small",
-        icon: _uiIcons.IconEditLine,
+        withBackground: false,
+        withBorder: false,
+        renderIcon: _uiIcons.IconEditLine,
         onClick: this.props.onClick
-      }, (0, _uiReactUtils.omitProps)(this.props, this.constructor.propTypes)), /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, this.props.screenreaderText));
+      }, (0, _uiReactUtils.omitProps)(this.props, this.constructor.propTypes), {
+        screenReaderLabel: this.props.screenreaderText
+      }));
     }
   }]);
   EditButton.displayName = "EditButton";

package/lib/building/components/resources/quiz/instructions/Edit/presenter.js

@@ -120,7 +120,7 @@ var QuizInstructionsEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, s
         margin: "0 x-small",
         onClick: this.props.endEditing
       }, (0, _formatMessage.default)('Cancel')), /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
-        variant: "primary",
+        color: "primary",
         onClick: this.props.saveAndPreview,
         "data-automation": "instructions-done"
       }, (0, _formatMessage.default)('Done'))));

package/lib/building/components/resources/quizEntry/QuizEntryEdit/Footer/presenter.js

@@ -195,14 +195,16 @@ var QuizEntryEditFooter = (_dec = (0, _uiThemeable.themeable)(_theme.default, st
       return /*#__PURE__*/_react.default.createElement("div", {
         className: styles.feedbackSection,
         "data-automation": "sdk-quiz-entry-edit-footer-feedback-section"
-      }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
-        variant: "icon",
+      }, /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
         onClick: this.openFeedbackModal,
+        withBackground: false,
+        withBorder: false,
         disabled: disabled,
         ref: this.handleButtonRef,
         "data-automation": "sdk-open-feedback-modal-button",
-        icon: icon
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, text)));
+        renderIcon: icon,
+        screenReaderLabel: text
+      }));
     }
   }, {
     key: "renderPointsSection",

package/lib/building/components/resources/quizEntry/QuizEntryEdit/Header/index.js

@@ -272,9 +272,9 @@ var QuizEntryHeader = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
     key: "renderName",
     value: function renderName() {
       if (this.props.quizEntry.isBank && this.props.newActiveBank) {
-        return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
-          variant: "link",
+        return /*#__PURE__*/_react.default.createElement(_uiButtons.CondensedButton, {
           size: "small",
+          margin: "0 0 0 x-small",
           onClick: this.handleBankClick,
           "data-automation": "sdk-quiz-entry-interaction-type"
         }, this.props.name);

package/lib/common/components/ConfirmationModal/presenter.js

@@ -116,7 +116,7 @@ var ConfirmationModal = /*#__PURE__*/function (_Component) {
         margin: _quizCommon.XSMALL_SIDE_MARGIN,
         "data-automation": "sdk-confirmation-modal-cancel"
       }, cancelText || (0, _formatMessage.default)('Cancel')), /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
-        variant: continueVariant || 'primary',
+        color: continueVariant || 'primary',
         onClick: this.continueAction,
         margin: _quizCommon.XSMALL_SIDE_MARGIN,
         "data-automation": "sdk-confirmation-modal-confirm"

package/lib/common/components/ImportModal/presenter.js

@@ -238,7 +238,7 @@ var ImportModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
     value: function continueButton() {
       return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
         onClick: this.continueAction,
-        variant: "primary",
+        color: "primary",
         disabled: this.disableContinueButton(),
         margin: _quizCommon.XSMALL_SIDE_MARGIN,
         ref: this.setRef('confirmButton'),
@@ -299,8 +299,8 @@ var ImportModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
   }, {
     key: "renderImportingContent",
     value: function renderImportingContent() {
-      return /*#__PURE__*/_react.default.createElement(_uiProgress.Progress, {
-        label: (0, _formatMessage.default)('Import process completion'),
+      return /*#__PURE__*/_react.default.createElement(_uiProgress.ProgressBar, {
+        screenReaderLabel: (0, _formatMessage.default)('Import process completion'),
         valueNow: this.props.progressValue,
         ref: this.setRef('progressBar')
       });

package/lib/common/components/Pin/presenter.js

@@ -25,8 +25,6 @@ var _uiButtons = require("@instructure/ui-buttons");
 
 var _uiIcons = require("@instructure/ui-icons");
 
-var _uiA11yContent = require("@instructure/ui-a11y-content");
-
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
 var Pin = /*#__PURE__*/function (_Component) {
@@ -62,12 +60,14 @@ var Pin = /*#__PURE__*/function (_Component) {
       }) : (0, _formatMessage.default)('Question {position, number} is unpinned. Click to pin.', {
         position: this.props.position
       });
-      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
-        onClick: this.handleClick,
-        variant: this.props.variant,
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
         size: "small",
-        icon: this.props.isPinned ? _uiIcons.IconPinSolid : _uiIcons.IconPinLine
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, message));
+        onClick: this.handleClick,
+        withBackground: false,
+        withBorder: false,
+        renderIcon: this.props.isPinned ? _uiIcons.IconPinSolid : _uiIcons.IconPinLine,
+        screenReaderLabel: message
+      });
     }
   }]);
   Pin.displayName = "Pin";
@@ -78,11 +78,7 @@ exports.Pin = Pin;
 Pin.propTypes = {
   isPinned: _propTypes.default.bool.isRequired,
   pinSessionItem: _propTypes.default.func.isRequired,
-  position: _propTypes.default.number.isRequired,
-  variant: _propTypes.default.oneOf(['default', 'primary', 'success', 'danger', 'light', 'ghost', 'ghost-inverse', 'link', 'link-inverse', 'circle-default', 'circle-primary', 'circle-danger', 'icon', 'icon-inverse'])
-};
-Pin.defaultProps = {
-  variant: 'icon'
+  position: _propTypes.default.number.isRequired
 };
 var _default = Pin;
 exports.default = _default;

package/lib/common/components/PrintFontSizeModal/presenter.js

@@ -178,12 +178,12 @@ var PrintFontSizeModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, sty
         onChange: this.handleRememberFontSize
       })), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
         "data-automation": "sdk-print-font-size-cancel-button",
-        variant: "light",
+        color: "primary-inverse",
         onClick: this.props.onCancel,
         margin: "0 x-small 0 0"
       }, this.text.cancel), /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
         "data-automation": "sdk-print-font-size-print-preview-button",
-        variant: "primary",
+        color: "primary",
         onClick: this.handleSubmit,
         margin: "0 x-small 0 0"
       }, this.text.printPreview)));

package/lib/common/components/layout/header/Calculator/presenter.js

@@ -35,7 +35,7 @@ var CalculatorButton = function CalculatorButton(_ref) {
   var toggleCalculator = _ref.toggleCalculator,
       enabled = _ref.enabled;
   return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
-    icon: _uiIcons.IconCalculatorLine,
+    renderIcon: _uiIcons.IconCalculatorLine,
     onClick: toggleCalculator,
     disabled: !enabled
   }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Calculator')));

package/lib/common/components/layout/header/Timer/presenter.js

@@ -146,7 +146,7 @@ var Timer = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
       }, this.renderHelpScreenreaderText(), /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
         "aria-expanded": "false",
         ref: this.showTimerRef,
-        icon: _uiIcons.IconClockLine,
+        renderIcon: _uiIcons.IconClockLine,
         onClick: (0, _partial.default)(this.props.updateTimerMinimized, false)
       }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Show Timer'))));
     }
@@ -168,7 +168,7 @@ var Timer = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
       }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
         "aria-expanded": "true",
         ref: this.hideTimerRef,
-        icon: _uiIcons.IconArrowOpenStartLine,
+        renderIcon: _uiIcons.IconArrowOpenStartLine,
         onClick: (0, _partial.default)(this.props.updateTimerMinimized, true)
       }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Hide Timer')))));
     }

package/lib/common/components/layout/sidebar/Sidebar/Pin.js

@@ -23,7 +23,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
-var _uiButtons = require("@instructure/ui-buttons");
+var _uiLink = require("@instructure/ui-link");
 
 // Component exists to prevent the recreation of the scroll function with each render,
 // which would cause a new rerender on each data change
@@ -53,12 +53,10 @@ var Pin = /*#__PURE__*/function (_Component) {
   (0, _createClass2.default)(Pin, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
-        variant: "link",
+      return /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
         onClick: this.scroll,
-        size: "small",
-        margin: "0",
-        fluidWidth: true
+        isWithinText: false,
+        display: "block"
       }, (0, _formatMessage.default)('Question {position, number}', {
         position: this.props.position
       }));

package/lib/common/components/layout/sidebar/Sidebar/index.js

@@ -62,23 +62,24 @@ var _theme = _interopRequireDefault(require("./theme.js"));
 var _dec, _class, _class2, _temp;
 
 var styles = {
-  componentId: 'cVcMH',
+  componentId: 'bPuQe',
   template: function template(theme) {
-    return "\n\n.cVcMH_bObp{background-color:".concat(theme.sidebarBackgroundColor || 'inherit', ";border:").concat(theme.sidebarBorderWidth || 'inherit', " solid ").concat(theme.sidebarBorderColor || 'inherit', ";box-sizing:border-box;color:").concat(theme.sidebarColor || 'inherit', ";height:100%;overflow:hidden;position:relative;transition:").concat(theme.sidebarTransitionDuration || 'inherit', " ease;width:").concat(theme.sidebarWidthClosed || 'inherit', ";z-index:").concat(theme.sidebarZIndex || 'inherit', "}\n\nbody.tox-fullscreen .cVcMH_bObp{z-index:0}\n\n.cVcMH_crKy{display:flex;flex-direction:column;height:100%}\n\n.cVcMH_eYGv{overflow-x:hidden;overflow-y:auto}\n\n.cVcMH_eeTU{border-bottom:").concat(theme.sidebarHeaderBorderWidth || 'inherit', " solid ").concat(theme.sidebarHeaderBorderColor || 'inherit', ";border-right:").concat(theme.actionableInfoBorderWidth || 'inherit', " solid ").concat(theme.sidebarBackgroundColor || 'inherit', ";text-align:center}\n\n[dir=ltr] .cVcMH_eeTU,[dir=rtl] .cVcMH_eeTU{text-align:center}\n\n.cVcMH_eeTU:hover{border-right:").concat(theme.actionableInfoBorderWidth || 'inherit', " solid ").concat(theme.actionableInfoHoverBorderColor || 'inherit', "}\n\n.cVcMH_difO{color:").concat(theme.descriptionFontColor || 'inherit', ";display:none;font-size:").concat(theme.descriptionFontSize || 'inherit', "}\n\n.cVcMH_cjDf{display:flex;flex-direction:row;flex-shrink:0;padding:").concat(theme.headerSpacingPadding || 'inherit', "}\n\n.cVcMH_cjDf h2{padding-top:0.3em}\n\n.cVcMH_fuFE{border-bottom:solid ").concat(theme.sidebarHeaderBorderWidth || 'inherit', ";border-color:").concat(theme.sidebarHeaderBorderColor || 'inherit', "}\n\n.cVcMH_cvRx{margin-left:auto}\n\n.cVcMH_fwEb{background-color:").concat(theme.pinnedSectionBackgroundColor || 'inherit', ";width:100%}\n\n.cVcMH_fwEb .cVcMH_cjDf{flex-grow:1}\n\n.cVcMH_ftzv{padding-top:").concat(theme.questionNavigatorPadding || 'inherit', "}\n\n.cVcMH_bObp.cVcMH_eNNp{opacity:1;transition:").concat(theme.sidebarTransitionDuration || 'inherit', " ease;width:").concat(theme.sidebarWidthOpen || 'inherit', "}\n\n.cVcMH_eNNp .cVcMH_difO{cursor:pointer;display:inline-block}\n\n.cVcMH_eNNp .cVcMH_eeTU,[dir=ltr] .cVcMH_eNNp .cVcMH_eeTU,[dir=rtl] .cVcMH_eNNp .cVcMH_eeTU{text-align:inherit}\n\n.cVcMH_eQGE{display:none}\n\n.cVcMH_eQGE.cVcMH_cvRx{display:block;margin:auto}\n\n.cVcMH_eYHq{height:100%}\n\n@media screen and (--phoneBreakPoint){.cVcMH_eYHq{position:relative}.cVcMH_bObp{position:absolute;width:0}.cVcMH_bObp,.cVcMH_bObp.cVcMH_eNNp{transition:").concat(theme.sidebarTransitionDuration || 'inherit', " ease}.cVcMH_bObp.cVcMH_eNNp{display:inline;max-width:100vw;width:100vw}}\n\n@media print{.cVcMH_eYHq{display:none}}");
+    return "\n\n.bPuQe_bObp{background-color:".concat(theme.sidebarBackgroundColor || 'inherit', ";border:").concat(theme.sidebarBorderWidth || 'inherit', " solid ").concat(theme.sidebarBorderColor || 'inherit', ";box-sizing:border-box;color:").concat(theme.sidebarColor || 'inherit', ";height:100%;overflow:hidden;position:relative;transition:").concat(theme.sidebarTransitionDuration || 'inherit', " ease;width:").concat(theme.sidebarWidthClosed || 'inherit', ";z-index:").concat(theme.sidebarZIndex || 'inherit', "}\n\nbody.tox-fullscreen .bPuQe_bObp{z-index:0}\n\n.bPuQe_crKy{display:flex;flex-direction:column;height:100%}\n\n.bPuQe_eYGv{overflow-x:hidden;overflow-y:auto}\n\n.bPuQe_eeTU{border-bottom:").concat(theme.sidebarHeaderBorderWidth || 'inherit', " solid ").concat(theme.sidebarHeaderBorderColor || 'inherit', ";border-right:").concat(theme.actionableInfoBorderWidth || 'inherit', " solid ").concat(theme.sidebarBackgroundColor || 'inherit', ";text-align:center}\n\n[dir=ltr] .bPuQe_eeTU,[dir=rtl] .bPuQe_eeTU{text-align:center}\n\n.bPuQe_eeTU:hover{border-right:").concat(theme.actionableInfoBorderWidth || 'inherit', " solid ").concat(theme.actionableInfoHoverBorderColor || 'inherit', "}\n\n.bPuQe_difO{color:").concat(theme.descriptionFontColor || 'inherit', ";display:none;font-size:").concat(theme.descriptionFontSize || 'inherit', "}\n\n.bPuQe_cjDf{display:flex;flex-direction:row;flex-shrink:0;padding:").concat(theme.headerSpacingPadding || 'inherit', "}\n\n.bPuQe_cjDf h2{padding-top:0.3em}\n\n.bPuQe_fuFE{border-bottom:solid ").concat(theme.sidebarHeaderBorderWidth || 'inherit', ";border-color:").concat(theme.sidebarHeaderBorderColor || 'inherit', "}\n\n.bPuQe_cvRx{margin-left:auto}\n\n.bPuQe_fwEb{background-color:").concat(theme.pinnedSectionBackgroundColor || 'inherit', ";width:100%}\n\n.bPuQe_fwEb .bPuQe_cjDf{flex-grow:1}\n\n.bPuQe_ftzv{padding-top:").concat(theme.questionNavigatorPadding || 'inherit', "}\n\n.bPuQe_bObp.bPuQe_eNNp{opacity:1;transition:").concat(theme.sidebarTransitionDuration || 'inherit', " ease;width:").concat(theme.sidebarWidthOpen || 'inherit', "}\n\n.bPuQe_eNNp .bPuQe_difO{cursor:pointer;display:inline-block}\n\n.bPuQe_eNNp .bPuQe_eeTU,[dir=ltr] .bPuQe_eNNp .bPuQe_eeTU,[dir=rtl] .bPuQe_eNNp .bPuQe_eeTU{text-align:inherit}\n\n.bPuQe_eQGE{display:none}\n\n.bPuQe_eQGE.bPuQe_cvRx{display:block;margin:auto}\n\n.bPuQe_nqth button{font-size:").concat(theme.pinnedQuestionFontSize || 'inherit', ";padding-bottom:").concat(theme.pinnedQuestionSpacing || 'inherit', ";padding-left:").concat(theme.pinnedQuestionSpacing || 'inherit', "}\n\n.bPuQe_eYHq{height:100%}\n\n@media screen and (--phoneBreakPoint){.bPuQe_eYHq{position:relative}.bPuQe_bObp{position:absolute;width:0}.bPuQe_bObp,.bPuQe_bObp.bPuQe_eNNp{transition:").concat(theme.sidebarTransitionDuration || 'inherit', " ease}.bPuQe_bObp.bPuQe_eNNp{display:inline;max-width:100vw;width:100vw}}\n\n@media print{.bPuQe_eYHq{display:none}}");
   },
-  'sidebar': 'cVcMH_bObp',
-  'sidebarWrapper': 'cVcMH_crKy',
-  'sidebarContent': 'cVcMH_eYGv',
-  'actionableInfo': 'cVcMH_eeTU',
-  'description': 'cVcMH_difO',
-  'headerSpacing': 'cVcMH_cjDf',
-  'headerBottomBorder': 'cVcMH_fuFE',
-  'iconWrapper': 'cVcMH_cvRx',
-  'pinnedSection': 'cVcMH_fwEb',
-  'questionNavigatorPadding': 'cVcMH_ftzv',
-  'sidebarIsOpen': 'cVcMH_eNNp',
-  'sidebarClosed': 'cVcMH_eQGE',
-  'commonContainer': 'cVcMH_eYHq'
+  'sidebar': 'bPuQe_bObp',
+  'sidebarWrapper': 'bPuQe_crKy',
+  'sidebarContent': 'bPuQe_eYGv',
+  'actionableInfo': 'bPuQe_eeTU',
+  'description': 'bPuQe_difO',
+  'headerSpacing': 'bPuQe_cjDf',
+  'headerBottomBorder': 'bPuQe_fuFE',
+  'iconWrapper': 'bPuQe_cvRx',
+  'pinnedSection': 'bPuQe_fwEb',
+  'questionNavigatorPadding': 'bPuQe_ftzv',
+  'sidebarIsOpen': 'bPuQe_eNNp',
+  'sidebarClosed': 'bPuQe_eQGE',
+  'buttonWrapper': 'bPuQe_nqth',
+  'commonContainer': 'bPuQe_eYHq'
 };
 
 var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconQuizTitleLine, {
@@ -250,15 +251,16 @@ var Sidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(
         as: "h2"
       }, (0, _formatMessage.default)('Question Navigator'))), /*#__PURE__*/_react.default.createElement("div", {
         className: iconClasses
-      }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
-        variant: "icon",
+      }, /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
         onClick: this.toggleSidebar,
         size: "small",
         margin: "none",
+        renderIcon: SidebarIcon,
+        withBackground: false,
+        withBorder: false,
+        screenReaderLabel: sidebarOpen ? (0, _formatMessage.default)('Hide Question Navigator Menu') : (0, _formatMessage.default)('Show Question Navigator Menu'),
         "data-automation": "sidebar-toggle-button"
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
-        size: "small"
-      }, /*#__PURE__*/_react.default.createElement(SidebarIcon, null)), /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, sidebarOpen ? (0, _formatMessage.default)('Hide Question Navigator Menu') : (0, _formatMessage.default)('Show Question Navigator Menu')))));
+      })));
     }
   }, {
     key: "renderTotalPointsPossible",
@@ -314,7 +316,7 @@ var Sidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(
         return;
       }
 
-      var closedClasses = (0, _classnames.default)((0, _defineProperty2.default)({}, styles.sidebarClosed, !sidebarOpen));
+      var closedClasses = (0, _classnames.default)(styles.buttonWrapper, (0, _defineProperty2.default)({}, styles.sidebarClosed, !sidebarOpen));
       var iconClasses = (0, _classnames.default)(styles.iconWrapper, (0, _defineProperty2.default)({}, styles.sidebarClosed, !sidebarOpen));
       return /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)(styles.pinnedSection, styles.headerBottomBorder)

package/lib/common/components/layout/sidebar/Sidebar/theme.js

@@ -32,6 +32,8 @@ function generator(_ref) {
     questionNavigatorPadding: spacing.xxxSmall,
     headerSpacingPadding: "".concat(spacing.small, " ").concat(spacing.xSmall),
     pinnedSectionBackgroundColor: colors.porcelain,
+    pinnedQuestionSpacing: spacing.small,
+    pinnedQuestionFontSize: typography.fontSizeSmall,
     sidebarHeaderBorderWidth: borders.widthSmall,
     sidebarHeaderBorderColor: colors.tiara,
     descriptionFontSize: typography.fontSizeXSmall,

package/lib/common/components/layout/sidebar/SidebarItem/presenter.js

@@ -171,8 +171,8 @@ var SidebarItem = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
       }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
         justifyItems: "space-between"
       }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, this.renderButton()), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
-        grow: true,
-        shrink: true,
+        shouldGrow: true,
+        shouldShrink: true,
         onClick: this.scrollToItem,
         tabIndex: "-1"
       }, /*#__PURE__*/_react.default.createElement("div", {

package/lib/common/components/layout/sidebar/Stimulus/Collection/presenter.js

@@ -33,8 +33,6 @@ var _uiMotion = require("@instructure/ui-motion");
 
 var _uiButtons = require("@instructure/ui-buttons");
 
-var _uiA11yContent = require("@instructure/ui-a11y-content");
-
 var _uiThemeable = require("@instructure/ui-themeable");
 
 var _index = _interopRequireDefault(require("../../PositionSummary/index.js"));
@@ -126,11 +124,13 @@ var Collection = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _d
         className: styles.sidebarIsOpen
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: sidebarItemsStyles
-      }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
-        variant: "icon",
+      }, /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
         onClick: this.handleSidebarHideItems,
-        icon: _uiIcons.IconArrowOpenUpLine
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Collapse stimulus questions')))), /*#__PURE__*/_react.default.createElement("div", null, itemComponents)));
+        withBackground: false,
+        withBorder: false,
+        renderIcon: _uiIcons.IconArrowOpenUpLine,
+        screenReaderLabel: (0, _formatMessage.default)('Collapse stimulus questions')
+      })), /*#__PURE__*/_react.default.createElement("div", null, itemComponents)));
     }
   }, {
     key: "renderItemSummaryOnClosedSidear",
@@ -148,11 +148,13 @@ var Collection = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _d
       }, /*#__PURE__*/_react.default.createElement(_index.default, {
         firstPosition: firstPosition,
         lastPosition: firstPosition + itemCollection.size - 1
-      }), /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
-        variant: "icon",
+      }), /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
         onClick: this.handleSidebarShowItems,
-        icon: _uiIcons.IconArrowOpenDownLine
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Expand stimulus questions')))));
+        withBackground: false,
+        withBorder: false,
+        renderIcon: _uiIcons.IconArrowOpenDownLine,
+        screenReaderLabel: (0, _formatMessage.default)('Expand stimulus questions')
+      })));
     }
   }, {
     key: "render",

package/lib/common/components/layout/sidebar/Stimulus/presenter.js

@@ -159,8 +159,8 @@ var SidebarStimulus = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
         justifyItems: "space-between"
       }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, this.renderButton()), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
-        grow: true,
-        shrink: true,
+        shouldGrow: true,
+        shouldShrink: true,
         onClick: this.scrollToItem,
         tabIndex: "-1"
       }, /*#__PURE__*/_react.default.createElement(_index2.default, {

package/lib/common/components/resources/WarningWrapper/index.js

@@ -93,7 +93,7 @@ var WarningWrapper = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles)
       }, this.props.cancelActionText), /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
         size: "small",
         margin: "x-small",
-        variant: "primary",
+        color: "primary",
         onClick: this.props.defaultActionCallback
       }, this.props.defaultActionText));
     }

package/lib/common/components/resources/entry/EntrySave/presenter.js

@@ -246,7 +246,7 @@ var EntrySave = /*#__PURE__*/function (_Component) {
         margin: "none none none x-small"
       }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
         type: "button",
-        variant: "primary",
+        color: "primary",
         onClick: this.onSubmit,
         disabled: !this.state.canSubmit || this.props.disableSubmit,
         "data-automation": "sdk-done-button"

package/lib/common/components/resources/quiz/AddContent/Body/presenter.js

@@ -161,7 +161,9 @@ var AddContentBody = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles)
     key: "render",
     value: function render() {
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.popoverContent
+        className: styles.popoverContent,
+        role: "dialog",
+        "aria-label": (0, _formatMessage.default)('Insert Content')
       }, this.renderPopoverHeader(), /*#__PURE__*/_react.default.createElement(_uiView.View, {
         padding: "small"
       }, /*#__PURE__*/_react.default.createElement(_index.default, {

package/lib/common/components/resources/quiz/AddContent/Button/index.js

@@ -84,7 +84,7 @@ var AddContentButton = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
         className: styles.attachQuestionButtonHolder
       }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
         ref: this.storeButtonElemRef,
-        variant: "primary",
+        color: "primary",
         margin: "medium",
         onClick: this.props.onClick,
         "data-automation": "sdk-attach-question-button"

package/lib/common/components/resources/quiz/AddContent/Popover/presenter.js

@@ -70,12 +70,12 @@ var AddContentPopover = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
       return (0, _ElementsForSelectors.default)(_this.props.appContainer);
     };
 
-    _this.toggle = function (shouldShow) {
-      if (shouldShow) {
-        _this.props.switchOnEditing();
-      } else {
-        _this.props.switchOffEditing();
-      }
+    _this.showContent = function () {
+      _this.props.switchOnEditing();
+    };
+
+    _this.hideContent = function () {
+      _this.props.switchOffEditing();
     };
 
     _this.storePopoverTriggerRef = function (b) {
@@ -85,11 +85,13 @@ var AddContentPopover = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
     _this.renderPopoverButton = function () {
       return /*#__PURE__*/_react.default.createElement(_uiPopover.Popover, {
         on: "click",
-        onToggle: _this.toggle,
+        onShowContent: _this.showContent,
+        onHideContent: _this.hideContent,
         isShowingContent: _this.props.isEditing,
         shouldCloseOnEscape: true,
-        shouldContainFocus: true
-      }, /*#__PURE__*/_react.default.createElement(_uiPopover.Popover.Trigger, null, _this.renderAddContentButton()), /*#__PURE__*/_react.default.createElement(_uiPopover.Popover.Content, null, /*#__PURE__*/_react.default.createElement(_index2.default, {
+        shouldContainFocus: true,
+        renderTrigger: _this.renderAddContentButton()
+      }, /*#__PURE__*/_react.default.createElement(_index2.default, {
         allowStimulusCreation: _this.props.allowStimulusCreation,
         onOpenBankTray: _this.props.switchOffEditing,
         onAddItem: _this.props.switchOffEditing,
@@ -97,7 +99,7 @@ var AddContentPopover = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
         position: _this.props.position,
         quizId: _this.props.quizId,
         stimulusId: _this.props.stimulusId
-      })));
+      }));
     };
 
     _this.openAddContentModal = function () {

package/lib/common/components/resources/quizSessionResult/Info/index.js

@@ -88,7 +88,8 @@ var Info = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_cl
   (0, _createClass2.default)(Info, [{
     key: "progressTextFormatter",
     // needed for inst-ui Progress
-    value: function progressTextFormatter(valueNow, valueMax) {
+    value: function progressTextFormatter(_ref) {
+      var valueNow = _ref.valueNow;
       var percentageUnknown = valueNow === unknownPercentageValue;
       return percentageUnknown ? (0, _formatMessage.default)('Unknown Score') : (0, _formatMessage.default)('Your score was {percentage}.', {
         percentage: this.formatPercentMax2FractionDigits(valueNow)
@@ -97,7 +98,8 @@ var Info = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_cl
 
   }, {
     key: "progressDisplayFormatter",
-    value: function progressDisplayFormatter(valueNow, valueMax) {
+    value: function progressDisplayFormatter(_ref2) {
+      var valueNow = _ref2.valueNow;
       var valueToShow = valueNow === unknownPercentageValue ? (0, _formatMessage.default)({
         id: 'progress_display',
         default: '?',
@@ -184,13 +186,12 @@ var Info = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_cl
       return /*#__PURE__*/_react.default.createElement("div", {
         className: styles.score,
         "data-automation": "sdk-info-score"
-      }, /*#__PURE__*/_react.default.createElement(_uiProgress.Progress, {
-        animateOnMount: true,
+      }, /*#__PURE__*/_react.default.createElement(_uiProgress.ProgressCircle, {
+        shouldAnimateOnMount: true,
         size: "large",
-        variant: "circle",
-        label: (0, _formatMessage.default)('Your Score'),
-        formatValueText: this.progressTextFormatter,
-        formatDisplayedValue: this.progressDisplayFormatter,
+        screenReaderLabel: (0, _formatMessage.default)('Your Score'),
+        formatScreenReaderValue: this.progressTextFormatter,
+        renderValue: this.progressDisplayFormatter,
         valueNow: this.percentageVal,
         valueMax: 1
       }));

package/lib/common/components/resources/stimulus/StimulusEdit/presenter.js

@@ -477,7 +477,7 @@ var StimulusEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
         className: styles.buttonWrapper
       }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
         type: "button",
-        variant: "primary",
+        color: "primary",
         disabled: !this.state.canSubmit,
         onClick: this.onSubmit
       }, (0, _formatMessage.default)('Done')))));

package/lib/common/components/shared/ExpandButton/index.js

@@ -29,8 +29,6 @@ var _uiIcons = require("@instructure/ui-icons");
 
 var _uiButtons = require("@instructure/ui-buttons");
 
-var _uiA11yContent = require("@instructure/ui-a11y-content");
-
 var _uiThemeable = require("@instructure/ui-themeable");
 
 var _uiReactUtils = require("@instructure/ui-react-utils");
@@ -69,13 +67,15 @@ var ExpandButton = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, Object.assign({
-        variant: "icon",
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, Object.assign({
         size: "medium",
+        withBackground: false,
+        withBorder: false,
         onClick: this.props.onClick,
-        icon: this.renderIcon(),
-        title: this.props.title
-      }, (0, _uiReactUtils.omitProps)(this.props, this.constructor.propTypes)), /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, this.props.title));
+        renderIcon: this.renderIcon()
+      }, (0, _uiReactUtils.omitProps)(this.props, this.constructor.propTypes), {
+        screenReaderLabel: this.props.title
+      }));
     }
   }]);
   ExpandButton.displayName = "ExpandButton";

package/lib/common/components/shared/InteractionTypes/presenter.js

@@ -93,12 +93,13 @@ var InteractionTypes = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
       }
 
       return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
-        fluidWidth: true,
         key: intType.slug,
         margin: "0 0 xx-small",
         onClick: onClick,
         size: "small",
-        "data-automation": automation
+        "data-automation": automation,
+        display: "block",
+        textAlign: "start"
       }, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid, {
         colSpacing: "none",
         vAlign: "middle"

package/lib/common/components/shared/drag_and_drop/DragHandle/presenter.js

@@ -29,8 +29,6 @@ var _uiButtons = require("@instructure/ui-buttons");
 
 var _uiMenu = require("@instructure/ui-menu");
 
-var _uiA11yContent = require("@instructure/ui-a11y-content");
-
 var _uiIcons = require("@instructure/ui-icons");
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
@@ -228,19 +226,21 @@ var DragHandle = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderIcon",
     value: function renderIcon() {
-      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button // must be a button when disabled for the screenreader to read it properly
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton // must be a button when disabled for the screenreader to read it properly
       // must be a div when enabled to allow dragging in firefox
       , {
         as: this.props.disabled ? 'button' : 'div',
-        variant: "icon",
-        icon: _uiIcons.IconDragHandleLine,
+        renderIcon: _uiIcons.IconDragHandleLine,
+        withBackground: false,
+        withBorder: false,
         size: "small",
         ref: this.handleTriggerRef,
         onKeyDown: _keyboardClickable.default,
         disabled: this.props.disabled,
         "data-automation": "sdk-drag-handle",
-        cursor: "move"
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, this.props.quizEntry.generateScreenReaderText(this.props.displayPosition, _quizCommon.MOVE)));
+        cursor: "move",
+        screenReaderLabel: this.props.quizEntry.generateScreenReaderText(this.props.displayPosition, _quizCommon.MOVE)
+      });
     }
   }, {
     key: "renderMenuItems",

package/lib/moderating/components/resources/AccommodationsModal/index.js

@@ -142,7 +142,7 @@ var AccommodationModal = /*#__PURE__*/function (_Component) {
         margin: "xxx-small",
         "data-automation": "sdk-moderation-cancel"
       }, (0, _formatMessage.default)('Cancel')), /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
-        variant: "primary",
+        color: "primary",
         onClick: this.saveAction,
         margin: "xxx-small",
         "data-automation": "sdk-moderation-save"