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

package/es/building/components/resources/ActionButtons/presenter.js

@@ -10,9 +10,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import classnames from 'classnames';
-import { Button } from '@instructure/ui-buttons';
+import { IconButton } from '@instructure/ui-buttons';
 import { IconEditLine, IconTrashLine, IconDuplicateLine } from '@instructure/ui-icons';
-import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { themeable } from '@instructure/ui-themeable';
 import DragHandle from "../../../../common/components/shared/drag_and_drop/DragHandle/index.js";
 import makeScrollable from "../../../../common/components/shared/functionality/makeScrollable.js";
@@ -28,7 +27,7 @@ var styles = {
   'hide': 'gEXZO_bBLs'
 };
 import theme from "./theme.js";
-var ScrollTargetButton = makeScrollable(Button);
+var ScrollTargetButton = makeScrollable(IconButton);
 export var ActionButtons = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(ActionButtons, _Component);
 
@@ -102,34 +101,40 @@ export var ActionButtons = (_dec = themeable(theme, styles), _dec(_class = (_tem
         as: "div",
         onClick: this.switchOnEditing,
         scrollKey: this.props.scrollKey,
-        variant: "icon",
-        icon: IconEditLine,
         size: "small",
+        withBackground: false,
+        withBorder: false,
+        renderIcon: IconEditLine,
         "data-automation": "sdk-edit-question-button",
         shouldFocusOnMount: this.shouldFocusOnMount(),
+        screenReaderLabel: this.props.quizEntry.generateScreenReaderText(this.props.displayPosition, EDIT),
         ref: this.setEditRef
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, this.props.quizEntry.generateScreenReaderText(this.props.displayPosition, EDIT)))), this.props.questionCopyEnabled && this.props.onCopy && /*#__PURE__*/React.createElement(Button, {
+      })), this.props.questionCopyEnabled && this.props.onCopy && /*#__PURE__*/React.createElement(IconButton, {
         as: "div",
         onClick: this.props.onCopy,
         disabled: this.props.shouldDisableCopy,
-        variant: "icon",
-        icon: IconDuplicateLine,
+        renderIcon: IconDuplicateLine,
+        withBackground: false,
+        withBorder: false,
         size: "small",
-        "data-automation": "sdk-copy-question-button"
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, this.props.quizEntry.generateScreenReaderText(this.props.displayPosition, COPY))), this.connectDragSource( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DragHandle, {
+        "data-automation": "sdk-copy-question-button",
+        screenReaderLabel: this.props.quizEntry.generateScreenReaderText(this.props.displayPosition, COPY)
+      }), this.connectDragSource( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DragHandle, {
         displayPosition: this.props.displayPosition,
         quizEntry: this.props.quizEntry,
         quizEntries: this.props.quizEntries,
         disabled: this.props.shouldDisableDragHandle
-      }))), this.props.shouldRenderDelete && /*#__PURE__*/React.createElement(Button, {
+      }))), this.props.shouldRenderDelete && /*#__PURE__*/React.createElement(IconButton, {
         as: "div",
         onClick: this.props.onDelete,
         disabled: this.props.shouldDisableDeleteButton,
-        variant: "icon",
-        icon: IconTrashLine,
+        renderIcon: IconTrashLine,
+        withBackground: false,
+        withBorder: false,
         size: "small",
-        "data-automation": "sdk-delete-question-button"
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, this.props.quizEntry.generateScreenReaderText(this.props.displayPosition, REMOVE))));
+        "data-automation": "sdk-delete-question-button",
+        screenReaderLabel: this.props.quizEntry.generateScreenReaderText(this.props.displayPosition, REMOVE)
+      }));
     }
   }]);
 

package/es/building/components/resources/AddToBankOptions/index.js

@@ -8,15 +8,15 @@ var _dec, _class, _class2, _temp;
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { View } from '@instructure/ui-view';
-import { Button } from '@instructure/ui-buttons';
+import { CondensedButton } from '@instructure/ui-buttons';
 import { themeable } from '@instructure/ui-themeable';
 import { ADD_TO_BANK_MODAL } from '@instructure/quiz-common';
 var styles = {
-  componentId: 'dYFmJ',
+  componentId: 'bsvMb',
   template: function template(theme) {
-    return "\n\n.dYFmJ_dNGs{background-color:".concat(theme.addToBankBackgroundColor || 'inherit', ";border:1px dashed ").concat(theme.addToBankBorderColor || 'inherit', "}");
+    return "\n\n.bsvMb_dNGs{background-color:".concat(theme.addToBankBackgroundColor || 'inherit', ";border:1px dashed ").concat(theme.addToBankBorderColor || 'inherit', ";text-align:center}\n\n[dir=ltr] .bsvMb_dNGs,[dir=rtl] .bsvMb_dNGs{text-align:center}");
   },
-  'addToBank': 'dYFmJ_dNGs'
+  'addToBank': 'bsvMb_dNGs'
 };
 import theme from "./theme.js";
 import t from '@instructure/quiz-i18n/es/format-message';
@@ -68,17 +68,13 @@ export var AddToBankOptions = (_dec = themeable(theme, styles), _dec(_class = (_
       return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(View, {
         as: "div",
         className: styles.addToBank
-      }, /*#__PURE__*/React.createElement(Button, {
-        variant: "link",
+      }, /*#__PURE__*/React.createElement(CondensedButton, {
+        color: "primary",
         ref: this.storeAddToBankLinkRef,
         onClick: this.openAddToBankModal,
         "data-automation": "sdk-add-to-bank-link",
-        fluidWidth: true
-      }, /*#__PURE__*/React.createElement(View, {
-        as: "div",
-        textAlign: "center",
-        padding: "xx-small"
-      }, t('Add to Bank')))));
+        margin: "small"
+      }, t('Add to Bank'))));
     }
   }]);
 

package/es/building/components/resources/BanksTray/presenter.js

@@ -142,7 +142,7 @@ export var BanksTray = /*#__PURE__*/function (_Component) {
         color: "primary"
       }, alertBody), _ref2, /*#__PURE__*/React.createElement(Button, {
         margin: "small 0 0 0",
-        variant: "primary",
+        color: "primary",
         size: "small",
         onClick: this.handleCloseAlert
       }, t('Ok'))))));

package/es/building/components/resources/DeleteStimulusModal/presenter.js

@@ -190,7 +190,7 @@ export var DeleteStimulusModal = (_dec = themeable(theme, styles), _dec(_class =
       var disabled = !deletionMode && childEntries.size > 0;
       return /*#__PURE__*/React.createElement(Button, {
         disabled: disabled,
-        variant: "primary",
+        color: "primary",
         onClick: this.handleSubmit,
         margin: XSMALL_SIDE_MARGIN,
         "data-automation": "sdk-stimulus-doneButton"

package/es/building/components/resources/ItemFeedbackModal/presenter.js

@@ -88,7 +88,7 @@ export var ItemFeedbackModal = (_dec = themeable(theme, styles), _dec(_class = (
     key: "doneButton",
     value: function doneButton() {
       return /*#__PURE__*/React.createElement(Button, {
-        variant: "primary",
+        color: "primary",
         onClick: this.continueAction,
         margin: XSMALL_SIDE_MARGIN
       }, t('Done'));

package/es/building/components/resources/MoveImmutableModal/presenter.js

@@ -59,7 +59,7 @@ export var MoveImmutableModal = /*#__PURE__*/function (_Component) {
     key: "doneButton",
     value: function doneButton() {
       return /*#__PURE__*/React.createElement(Button, {
-        variant: "primary",
+        color: "primary",
         onClick: this.handleSubmit,
         margin: XSMALL_SIDE_MARGIN
       }, t('Clone and Move'));

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

@@ -4,9 +4,8 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Button } from '@instructure/ui-buttons';
+import { IconButton } from '@instructure/ui-buttons';
 import { IconEditLine } from '@instructure/ui-icons';
-import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import makeScrollable from "../../../../../common/components/shared/functionality/makeScrollable.js";
 import t from '@instructure/quiz-i18n/es/format-message';
 import { omitProps } from '@instructure/ui-react-utils';
@@ -41,13 +40,16 @@ var EditButton = /*#__PURE__*/function (_Component) {
   _createClass(EditButton, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(Button, Object.assign({
+      return /*#__PURE__*/React.createElement(IconButton, Object.assign({
         ref: this.handleButtonRef,
-        variant: "icon",
         size: "small",
-        icon: IconEditLine,
+        withBackground: false,
+        withBorder: false,
+        renderIcon: IconEditLine,
         onClick: this.props.onClick
-      }, omitProps(this.props, this.constructor.propTypes)), /*#__PURE__*/React.createElement(ScreenReaderContent, null, this.props.screenreaderText));
+      }, omitProps(this.props, this.constructor.propTypes), {
+        screenReaderLabel: this.props.screenreaderText
+      }));
     }
   }]);
 

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

@@ -95,7 +95,7 @@ var QuizInstructionsEdit = (_dec = themeable(theme, styles), _dec(_class = (_tem
         margin: "0 x-small",
         onClick: this.props.endEditing
       }, t('Cancel')), /*#__PURE__*/React.createElement(Button, {
-        variant: "primary",
+        color: "primary",
         onClick: this.props.saveAndPreview,
         "data-automation": "instructions-done"
       }, t('Done'))));

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

@@ -14,7 +14,7 @@ import { Flex } from '@instructure/ui-flex';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { Text } from '@instructure/ui-text';
 import NumberInput from '@instructure/quiz-number-input';
-import { Button } from '@instructure/ui-buttons';
+import { IconButton } from '@instructure/ui-buttons';
 import { themeable } from '@instructure/ui-themeable';
 import { IconDiscussionLine, IconDiscussionSolid } from '@instructure/ui-icons';
 import { interactionPoints } from '@instructure/quiz-interactions';
@@ -165,14 +165,16 @@ export var QuizEntryEditFooter = (_dec = themeable(theme, styles), _dec(_class =
       return /*#__PURE__*/React.createElement("div", {
         className: styles.feedbackSection,
         "data-automation": "sdk-quiz-entry-edit-footer-feedback-section"
-      }, /*#__PURE__*/React.createElement(Button, {
-        variant: "icon",
+      }, /*#__PURE__*/React.createElement(IconButton, {
         onClick: this.openFeedbackModal,
+        withBackground: false,
+        withBorder: false,
         disabled: disabled,
         ref: this.handleButtonRef,
         "data-automation": "sdk-open-feedback-modal-button",
-        icon: icon
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, text)));
+        renderIcon: icon,
+        screenReaderLabel: text
+      }));
     }
   }, {
     key: "renderPointsSection",

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

@@ -12,7 +12,7 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import partial from 'lodash/partial';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
-import { Button } from '@instructure/ui-buttons';
+import { CondensedButton } from '@instructure/ui-buttons';
 import { TextInput } from '@instructure/ui-text-input';
 import { themeable } from '@instructure/ui-themeable';
 import { FillBlankInteractionType } from '@instructure/quiz-interactions';
@@ -239,9 +239,9 @@ var QuizEntryHeader = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
     key: "renderName",
     value: function renderName() {
       if (this.props.quizEntry.isBank && this.props.newActiveBank) {
-        return /*#__PURE__*/React.createElement(Button, {
-          variant: "link",
+        return /*#__PURE__*/React.createElement(CondensedButton, {
           size: "small",
+          margin: "0 0 0 x-small",
           onClick: this.handleBankClick,
           "data-automation": "sdk-quiz-entry-interaction-type"
         }, this.props.name);

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

@@ -94,7 +94,7 @@ export var ConfirmationModal = /*#__PURE__*/function (_Component) {
         margin: XSMALL_SIDE_MARGIN,
         "data-automation": "sdk-confirmation-modal-cancel"
       }, cancelText || t('Cancel')), /*#__PURE__*/React.createElement(Button, {
-        variant: continueVariant || 'primary',
+        color: continueVariant || 'primary',
         onClick: this.continueAction,
         margin: XSMALL_SIDE_MARGIN,
         "data-automation": "sdk-confirmation-modal-confirm"

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

@@ -11,7 +11,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Alert } from '@instructure/ui-alerts';
 import { Button, CloseButton } from '@instructure/ui-buttons';
 import { Text } from '@instructure/ui-text';
-import { Progress } from '@instructure/ui-progress';
+import { ProgressBar } from '@instructure/ui-progress';
 import { Heading } from '@instructure/ui-heading';
 import { Tabs } from '@instructure/ui-tabs';
 import { ToggleDetails } from '@instructure/ui-toggle-details';
@@ -208,7 +208,7 @@ export var ImportModal = (_dec = themeable(theme, styles), _dec(_class = (_temp
     value: function continueButton() {
       return /*#__PURE__*/React.createElement(Button, {
         onClick: this.continueAction,
-        variant: "primary",
+        color: "primary",
         disabled: this.disableContinueButton(),
         margin: XSMALL_SIDE_MARGIN,
         ref: this.setRef('confirmButton'),
@@ -269,8 +269,8 @@ export var ImportModal = (_dec = themeable(theme, styles), _dec(_class = (_temp
   }, {
     key: "renderImportingContent",
     value: function renderImportingContent() {
-      return /*#__PURE__*/React.createElement(Progress, {
-        label: t('Import process completion'),
+      return /*#__PURE__*/React.createElement(ProgressBar, {
+        screenReaderLabel: t('Import process completion'),
         valueNow: this.props.progressValue,
         ref: this.setRef('progressBar')
       });

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

@@ -4,9 +4,8 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Button } from '@instructure/ui-buttons';
+import { IconButton } from '@instructure/ui-buttons';
 import { IconPinLine, IconPinSolid } from '@instructure/ui-icons';
-import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import t from '@instructure/quiz-i18n/es/format-message';
 export var Pin = /*#__PURE__*/function (_Component) {
   _inherits(Pin, _Component);
@@ -41,12 +40,14 @@ export var Pin = /*#__PURE__*/function (_Component) {
       }) : t('Question {position, number} is unpinned. Click to pin.', {
         position: this.props.position
       });
-      return /*#__PURE__*/React.createElement(Button, {
-        onClick: this.handleClick,
-        variant: this.props.variant,
+      return /*#__PURE__*/React.createElement(IconButton, {
         size: "small",
-        icon: this.props.isPinned ? IconPinSolid : IconPinLine
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, message));
+        onClick: this.handleClick,
+        withBackground: false,
+        withBorder: false,
+        renderIcon: this.props.isPinned ? IconPinSolid : IconPinLine,
+        screenReaderLabel: message
+      });
     }
   }]);
 
@@ -56,10 +57,6 @@ export var Pin = /*#__PURE__*/function (_Component) {
 Pin.propTypes = {
   isPinned: PropTypes.bool.isRequired,
   pinSessionItem: PropTypes.func.isRequired,
-  position: PropTypes.number.isRequired,
-  variant: PropTypes.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.number.isRequired
 };
 export default Pin;

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

@@ -153,12 +153,12 @@ export var PrintFontSizeModal = (_dec = themeable(theme, styles), _dec(_class =
         onChange: this.handleRememberFontSize
       })), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(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.createElement(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/es/common/components/layout/header/Calculator/presenter.js

@@ -14,7 +14,7 @@ var CalculatorButton = function CalculatorButton(_ref) {
   var toggleCalculator = _ref.toggleCalculator,
       enabled = _ref.enabled;
   return /*#__PURE__*/React.createElement(Button, {
-    icon: IconCalculatorLine,
+    renderIcon: IconCalculatorLine,
     onClick: toggleCalculator,
     disabled: !enabled
   }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Calculator')));

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

@@ -120,7 +120,7 @@ export var Timer = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
       }, this.renderHelpScreenreaderText(), /*#__PURE__*/React.createElement(Button, {
         "aria-expanded": "false",
         ref: this.showTimerRef,
-        icon: IconClockLine,
+        renderIcon: IconClockLine,
         onClick: partial(this.props.updateTimerMinimized, false)
       }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Show Timer'))));
     }
@@ -142,7 +142,7 @@ export var Timer = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
       }, /*#__PURE__*/React.createElement(Button, {
         "aria-expanded": "true",
         ref: this.hideTimerRef,
-        icon: IconArrowOpenStartLine,
+        renderIcon: IconArrowOpenStartLine,
         onClick: partial(this.props.updateTimerMinimized, true)
       }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Hide Timer')))));
     }

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

@@ -5,7 +5,7 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import t from '@instructure/quiz-i18n/es/format-message';
-import { Button } from '@instructure/ui-buttons'; // Component exists to prevent the recreation of the scroll function with each render,
+import { Link } from '@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
 
 export var Pin = /*#__PURE__*/function (_Component) {
@@ -34,12 +34,10 @@ export var Pin = /*#__PURE__*/function (_Component) {
   _createClass(Pin, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(Button, {
-        variant: "link",
+      return /*#__PURE__*/React.createElement(Link, {
         onClick: this.scroll,
-        size: "small",
-        margin: "0",
-        fluidWidth: true
+        isWithinText: false,
+        display: "block"
       }, t('Question {position, number}', {
         position: this.props.position
       }));

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

@@ -14,7 +14,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import classNames from 'classnames';
 import { IconMoveStartLine, IconMoveEndLine, IconPinSolid, IconQuizInstructionsLine, IconQuizTitleLine } from '@instructure/ui-icons';
 import { AccessibleContent, ScreenReaderContent, PresentationContent } from '@instructure/ui-a11y-content';
-import { Button } from '@instructure/ui-buttons';
+import { IconButton } from '@instructure/ui-buttons';
 import { Link } from '@instructure/ui-link';
 import { Text } from '@instructure/ui-text';
 import { View } from '@instructure/ui-view';
@@ -27,23 +27,24 @@ import CustomPropTypes from "../../../../util/CustomPropTypes.js";
 import noop from "../../../../util/noop.js";
 import Pin from "./Pin.js";
 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'
 };
 import theme from "./theme.js";
 
@@ -216,15 +217,16 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
         as: "h2"
       }, t('Question Navigator'))), /*#__PURE__*/React.createElement("div", {
         className: iconClasses
-      }, /*#__PURE__*/React.createElement(Button, {
-        variant: "icon",
+      }, /*#__PURE__*/React.createElement(IconButton, {
         onClick: this.toggleSidebar,
         size: "small",
         margin: "none",
+        renderIcon: SidebarIcon,
+        withBackground: false,
+        withBorder: false,
+        screenReaderLabel: sidebarOpen ? t('Hide Question Navigator Menu') : t('Show Question Navigator Menu'),
         "data-automation": "sidebar-toggle-button"
-      }, /*#__PURE__*/React.createElement(Text, {
-        size: "small"
-      }, /*#__PURE__*/React.createElement(SidebarIcon, null)), /*#__PURE__*/React.createElement(ScreenReaderContent, null, sidebarOpen ? t('Hide Question Navigator Menu') : t('Show Question Navigator Menu')))));
+      })));
     }
   }, {
     key: "renderTotalPointsPossible",
@@ -279,7 +281,7 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
         return;
       }
 
-      var closedClasses = classNames(_defineProperty({}, styles.sidebarClosed, !sidebarOpen));
+      var closedClasses = classNames(styles.buttonWrapper, _defineProperty({}, styles.sidebarClosed, !sidebarOpen));
       var iconClasses = classNames(styles.iconWrapper, _defineProperty({}, styles.sidebarClosed, !sidebarOpen));
       return /*#__PURE__*/React.createElement("div", {
         className: classNames(styles.pinnedSection, styles.headerBottomBorder)

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

@@ -24,6 +24,8 @@ export default 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/es/common/components/layout/sidebar/SidebarItem/presenter.js

@@ -144,8 +144,8 @@ export var SidebarItem = (_dec = themeable(theme, styles), _dec(_class = (_temp
       }, /*#__PURE__*/React.createElement(Flex, {
         justifyItems: "space-between"
       }, /*#__PURE__*/React.createElement(Flex.Item, null, this.renderButton()), /*#__PURE__*/React.createElement(Flex.Item, {
-        grow: true,
-        shrink: true,
+        shouldGrow: true,
+        shouldShrink: true,
         onClick: this.scrollToItem,
         tabIndex: "-1"
       }, /*#__PURE__*/React.createElement("div", {

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

@@ -12,8 +12,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import classNames from 'classnames';
 import { IconArrowOpenDownLine, IconArrowOpenUpLine } from '@instructure/ui-icons';
 import { Transition } from '@instructure/ui-motion';
-import { Button } from '@instructure/ui-buttons';
-import { ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { IconButton } from '@instructure/ui-buttons';
 import { themeable } from '@instructure/ui-themeable';
 import PositionSummary from "../../PositionSummary/index.js";
 import { DISPLAY_AS_SUMMARY_LIMIT } from "../presenter.js";
@@ -98,11 +97,13 @@ export var Collection = (_dec = themeable(theme, styles), _dec(_class = (_temp =
         className: styles.sidebarIsOpen
       }, /*#__PURE__*/React.createElement("div", {
         className: sidebarItemsStyles
-      }, /*#__PURE__*/React.createElement(Button, {
-        variant: "icon",
+      }, /*#__PURE__*/React.createElement(IconButton, {
         onClick: this.handleSidebarHideItems,
-        icon: IconArrowOpenUpLine
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Collapse stimulus questions')))), /*#__PURE__*/React.createElement("div", null, itemComponents)));
+        withBackground: false,
+        withBorder: false,
+        renderIcon: IconArrowOpenUpLine,
+        screenReaderLabel: t('Collapse stimulus questions')
+      })), /*#__PURE__*/React.createElement("div", null, itemComponents)));
     }
   }, {
     key: "renderItemSummaryOnClosedSidear",
@@ -120,11 +121,13 @@ export var Collection = (_dec = themeable(theme, styles), _dec(_class = (_temp =
       }, /*#__PURE__*/React.createElement(PositionSummary, {
         firstPosition: firstPosition,
         lastPosition: firstPosition + itemCollection.size - 1
-      }), /*#__PURE__*/React.createElement(Button, {
-        variant: "icon",
+      }), /*#__PURE__*/React.createElement(IconButton, {
         onClick: this.handleSidebarShowItems,
-        icon: IconArrowOpenDownLine
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Expand stimulus questions')))));
+        withBackground: false,
+        withBorder: false,
+        renderIcon: IconArrowOpenDownLine,
+        screenReaderLabel: t('Expand stimulus questions')
+      })));
     }
   }, {
     key: "render",

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

@@ -131,8 +131,8 @@ export var SidebarStimulus = (_dec = themeable(theme, styles), _dec(_class = (_t
       }, /*#__PURE__*/React.createElement(Flex, {
         justifyItems: "space-between"
       }, /*#__PURE__*/React.createElement(Flex.Item, null, this.renderButton()), /*#__PURE__*/React.createElement(Flex.Item, {
-        grow: true,
-        shrink: true,
+        shouldGrow: true,
+        shouldShrink: true,
         onClick: this.scrollToItem,
         tabIndex: "-1"
       }, /*#__PURE__*/React.createElement(Title, {

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

@@ -71,7 +71,7 @@ export var WarningWrapper = (_dec = themeable(theme, styles), _dec(_class = (_te
       }, this.props.cancelActionText), /*#__PURE__*/React.createElement(Button, {
         size: "small",
         margin: "x-small",
-        variant: "primary",
+        color: "primary",
         onClick: this.props.defaultActionCallback
       }, this.props.defaultActionText));
     }

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

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

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

@@ -133,7 +133,9 @@ export var AddContentBody = (_dec = themeable(theme, styles), _dec(_class = (_te
     key: "render",
     value: function render() {
       return /*#__PURE__*/React.createElement("div", {
-        className: styles.popoverContent
+        className: styles.popoverContent,
+        role: "dialog",
+        "aria-label": t('Insert Content')
       }, this.renderPopoverHeader(), /*#__PURE__*/React.createElement(View, {
         padding: "small"
       }, /*#__PURE__*/React.createElement(InteractionTypes, {

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

@@ -60,7 +60,7 @@ export var AddContentButton = (_dec = themeable(theme, styles), _dec(_class = (_
         className: styles.attachQuestionButtonHolder
       }, /*#__PURE__*/React.createElement(Button, {
         ref: this.storeButtonElemRef,
-        variant: "primary",
+        color: "primary",
         margin: "medium",
         onClick: this.props.onClick,
         "data-automation": "sdk-attach-question-button"