@instructure/quiz-core 18.3.1-rc.1 → 18.3.1-rc.10

package/lib/banks/components/BanksList/presenter.js

@@ -317,44 +317,50 @@ var BanksList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
     };
 
     _this.renderBankOptions = function (bank) {
-      var bankEditOptions = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      var bankEditOptions = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
         onClick: _this.openModal(bank),
         name: "Edit",
         size: "small",
-        variant: "icon",
         "data-automation": "sdk-edit-bank-button",
-        icon: _uiIcons.IconEditLine,
+        withBackground: false,
+        withBorder: false,
+        renderIcon: _uiIcons.IconEditLine,
         title: (0, _formatMessage.default)('Edit bank {name}', {
           name: bank.title
+        }),
+        screenReaderLabel: (0, _formatMessage.default)('Edit bank {name}', {
+          name: bank.title
         })
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Edit bank {name}', {
-        name: bank.title
-      }))), /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      }), /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
         onClick: _this.openDeleteBankModal(bank),
         name: "Delete",
         size: "small",
-        variant: "icon",
         "data-automation": "sdk-delete-bank-button",
-        icon: _uiIcons.IconTrashLine,
+        withBackground: false,
+        withBorder: false,
+        renderIcon: _uiIcons.IconTrashLine,
         title: (0, _formatMessage.default)('Delete bank {name}', {
           name: bank.title
+        }),
+        screenReaderLabel: (0, _formatMessage.default)('Delete bank {name}', {
+          name: bank.title
         })
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Delete bank {name}', {
-        name: bank.title
-      }))));
+      }));
 
-      var duplicateBankOption = /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      var duplicateBankOption = /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
         onClick: _this.openDuplicateBankModal(bank),
         name: "Duplicate",
         size: "small",
-        variant: "icon",
-        icon: _uiIcons.IconCopyLine,
+        renderIcon: _uiIcons.IconCopyLine,
+        withBackground: false,
+        withBorder: false,
         title: (0, _formatMessage.default)('Duplicate bank {name}', {
           name: bank.title
+        }),
+        screenReaderLabel: (0, _formatMessage.default)('Duplicate bank {name}', {
+          name: bank.title
         })
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Duplicate bank {name}', {
-        name: bank.title
-      })));
+      });
 
       if (bank.status === 'copying') {
         return /*#__PURE__*/_react.default.createElement("div", {
@@ -369,19 +375,21 @@ var BanksList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
           className: styles.bankOptions
         }, _this.props.duplicateItemBanks ? duplicateBankOption : null, /*#__PURE__*/_react.default.createElement(_index.default, {
           name: "item_bank_sharing"
-        }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        }, /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
           onClick: _this.openSharingModal(bank),
           name: "Share",
           size: "small",
-          variant: "icon",
           "data-automation": "sdk-shared-bank-share-link",
-          icon: _uiIcons.IconShareSolid,
+          withBackground: false,
+          withBorder: false,
+          renderIcon: _uiIcons.IconShareSolid,
           title: (0, _formatMessage.default)('Share bank {name}', {
             name: bank.title
+          }),
+          screenReaderLabel: (0, _formatMessage.default)('Share bank {name}', {
+            name: bank.title
           })
-        }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Share bank {name}', {
-          name: bank.title
-        })))), bank.canEdit() ? bankEditOptions : null);
+        })), bank.canEdit() ? bankEditOptions : null);
       }
     };
 

package/lib/banks/components/CopyMoveBankEntryModal/presenter.js

@@ -155,7 +155,7 @@ var CopyMoveBankEntryModal = /*#__PURE__*/function (_Component) {
           newBankTitle = _this$state.newBankTitle;
       var disabled = bankType === 'existing' && !this.props.selectedBank || bankType === 'new' && (!newBankTitle || !newBankTitle.trim());
       return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
-        variant: "primary",
+        color: "primary",
         onClick: this.continueAction,
         disabled: disabled,
         margin: _quizCommon.XSMALL_SIDE_MARGIN,

package/lib/banks/components/CreateBankModal/presenter.js

@@ -141,7 +141,7 @@ var CreateBankModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
     value: function createBankButton() {
       return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
         type: "button",
-        variant: "primary",
+        color: "primary",
         onClick: this.continueAction,
         margin: _quizCommon.XSMALL_SIDE_MARGIN,
         "data-automation": "sdk-create-bank-button"

package/lib/banks/components/EditBankModal/presenter.js

@@ -117,7 +117,7 @@ var EditBankModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
     value: function renderSaveButton() {
       return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
         type: "button",
-        variant: "primary",
+        color: "primary",
         onClick: this.continueAction,
         margin: _quizCommon.XSMALL_SIDE_MARGIN,
         "data-automation": "sdk-edit-bank-save-button"

package/lib/banks/components/HeaderMenu/presenter.js

@@ -29,8 +29,6 @@ var _uiButtons = require("@instructure/ui-buttons");
 
 var _uiIcons = require("@instructure/ui-icons");
 
-var _uiA11yContent = require("@instructure/ui-a11y-content");
-
 var _uiThemeable = require("@instructure/ui-themeable");
 
 var _index = _interopRequireDefault(require("../../../building/components/QTIImportModal/index.js"));
@@ -64,10 +62,12 @@ var HeaderMenu = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _d
     key: "renderMenu",
     value: function renderMenu() {
       return /*#__PURE__*/_react.default.createElement(_uiMenu.Menu, {
-        trigger: /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
-          variant: "icon",
-          icon: _uiIcons.IconMoreSolid
-        }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('More Item Banking Actions')))
+        trigger: /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
+          renderIcon: _uiIcons.IconMoreSolid,
+          withBackground: false,
+          withBorder: false,
+          screenReaderLabel: (0, _formatMessage.default)('More Item Banking Actions')
+        })
       }, /*#__PURE__*/_react.default.createElement(_uiMenu.Menu.Item, {
         key: "import",
         disabled: !this.props.bank.canImport(),

package/lib/banks/components/NavWrapper/presenter.js

@@ -110,7 +110,7 @@ var NavWrapper = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _d
 
       var banksLinks = /*#__PURE__*/_react.default.createElement(_uiBreadcrumb.BreadcrumbLink, {
         ref: this.setItemBanksRef,
-        icon: _ref,
+        renderIcon: _ref,
         key: "Banks",
         onClick: this.props.navigateToBanks
       }, (0, _formatMessage.default)('Item Banks')); // If Breadcrumb has multiple children (even if 2nd is null), it will

package/lib/banks/components/SharingModal/{ContextualButton → ContextualIconButton}/index.js

@@ -7,7 +7,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ContextualButton = void 0;
+exports.ContextualIconButton = void 0;
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 
@@ -27,15 +27,15 @@ var _uiButtons = require("@instructure/ui-buttons");
 
 var _uiReactUtils = require("@instructure/ui-react-utils");
 
-var ContextualButton = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(ContextualButton, _Component);
+var ContextualIconButton = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(ContextualIconButton, _Component);
 
-  var _super = (0, _createSuper2.default)(ContextualButton);
+  var _super = (0, _createSuper2.default)(ContextualIconButton);
 
-  function ContextualButton() {
+  function ContextualIconButton() {
     var _this;
 
-    (0, _classCallCheck2.default)(this, ContextualButton);
+    (0, _classCallCheck2.default)(this, ContextualIconButton);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -56,25 +56,27 @@ var ContextualButton = /*#__PURE__*/function (_Component) {
     return _this;
   }
 
-  (0, _createClass2.default)(ContextualButton, [{
+  (0, _createClass2.default)(ContextualIconButton, [{
     key: "render",
     value: function render() {
       var buttonProps = (0, _uiReactUtils.omitProps)(this.props, {}, ['context', 'onClick']);
-      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, Object.assign({}, buttonProps, {
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, Object.assign({}, buttonProps, {
+        withBackground: false,
+        withBorder: false,
         onClick: this.handleClick
       }), this.props.children);
     }
   }]);
-  ContextualButton.displayName = "ContextualButton";
-  return ContextualButton;
+  ContextualIconButton.displayName = "ContextualIconButton";
+  return ContextualIconButton;
 }(_react.Component);
 
-exports.ContextualButton = ContextualButton;
-ContextualButton.propTypes = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _uiButtons.Button.propTypes), {}, {
+exports.ContextualIconButton = ContextualIconButton;
+ContextualIconButton.propTypes = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _uiButtons.IconButton.propTypes), {}, {
   context: _propTypes.default.any
   /* eslint-disable-line react/forbid-prop-types */
 
 });
-ContextualButton.defaultProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _uiButtons.Button.defaultProps), {}, {
+ContextualIconButton.defaultProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _uiButtons.IconButton.defaultProps), {}, {
   context: void 0
 });

package/lib/banks/components/SharingModal/ShareList/index.js

@@ -41,7 +41,7 @@ var _uiTabs = require("@instructure/ui-tabs");
 
 var _uiThemeable = require("@instructure/ui-themeable");
 
-var _index = require("../ContextualButton/index.js");
+var _index = require("../ContextualIconButton/index.js");
 
 var _uiSimpleSelect = require("@instructure/ui-simple-select");
 
@@ -112,18 +112,18 @@ var ShareList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
         entity: entity,
         isEntityRemoved: isEntityRemoved
       };
-      return /*#__PURE__*/_react.default.createElement(_index.ContextualButton, {
+      return /*#__PURE__*/_react.default.createElement(_index.ContextualIconButton, {
         context: context // eslint-disable-next-line react/jsx-no-literals
         ,
         "data-automation": "sdk-unshare-bank-entity-".concat(entity.get('entityId')),
-        variant: "icon",
         onClick: _this.handleEntityRemove,
-        icon: isEntityRemoved ? _uiIcons.IconResetLine : _uiIcons.IconTrashLine
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, isEntityRemoved ? (0, _formatMessage.default)('Undo remove for {entity}', {
-        entity: entity.get('title')
-      }) : (0, _formatMessage.default)('Remove {entity}', {
-        entity: entity.get('title')
-      })));
+        renderIcon: isEntityRemoved ? _uiIcons.IconResetLine : _uiIcons.IconTrashLine,
+        screenReaderLabel: isEntityRemoved ? (0, _formatMessage.default)('Undo remove for {entity}', {
+          entity: entity.get('title')
+        }) : (0, _formatMessage.default)('Remove {entity}', {
+          entity: entity.get('title')
+        })
+      });
     };
 
     _this.renderEntity = function (entity, index) {

package/lib/banks/components/SharingModal/presenter.js

@@ -445,7 +445,7 @@ var SharingModalPresenter = (_dec = (0, _uiThemeable.themeable)(_theme.default,
           "data-automation": "sdk-shared-bank-add-user-button",
           ref: _this.handleShareButtonRef,
           onClick: _this.handleShare,
-          variant: _this.state.searchSelection.length ? 'success' : 'default'
+          color: _this.state.searchSelection.length ? 'success' : 'secondary'
         }, (0, _formatMessage.default)('Add'))))), /*#__PURE__*/_react.default.createElement("div", {
           className: styles.separator
         }));
@@ -551,7 +551,7 @@ var SharingModalPresenter = (_dec = (0, _uiThemeable.themeable)(_theme.default,
     value: function renderFooter() {
       if (this.props.subAccountBankSharingEnabled) {
         return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
-          variant: "primary",
+          color: "primary",
           margin: "0 x-small 0 0",
           onClick: this.handleDismiss
         }, (0, _formatMessage.default)('Close'));
@@ -559,12 +559,12 @@ var SharingModalPresenter = (_dec = (0, _uiThemeable.themeable)(_theme.default,
 
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
         "data-automation": "sdk-shared-bank-cancel-button",
-        variant: "light",
+        color: "primary-inverse",
         onClick: this.handleDismiss,
         margin: "0 x-small 0 0"
       }, (0, _formatMessage.default)('Cancel')), /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
         "data-automation": "sdk-shared-bank-done-button",
-        variant: "primary",
+        color: "primary",
         onClick: this.handleSubmit,
         margin: "0 x-small 0 0"
       }, (0, _formatMessage.default)('Done')));

package/lib/building/components/layout/header/BuildingButtons/presenter.js

@@ -25,8 +25,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 _index = _interopRequireDefault(require("../../../../../common/components/shared/PrintTrigger/index.js"));
@@ -200,11 +198,13 @@ var BuildingButtons = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
 
       if (menuItems.length < 1) return;
       return /*#__PURE__*/_react.default.createElement(_uiMenu.Menu, {
-        trigger: /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
-          variant: "icon",
-          icon: _uiIcons.IconMoreSolid,
-          "data-automation": "sdk-more-quiz-actions-button"
-        }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('More Quiz Actions')))
+        trigger: /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
+          renderIcon: _uiIcons.IconMoreSolid,
+          withBackground: false,
+          withBorder: false,
+          "data-automation": "sdk-more-quiz-actions-button",
+          screenReaderLabel: (0, _formatMessage.default)('More Quiz Actions')
+        })
       }, menuItems);
     }
   }, {

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

@@ -31,8 +31,6 @@ var _uiButtons = require("@instructure/ui-buttons");
 
 var _uiIcons = require("@instructure/ui-icons");
 
-var _uiA11yContent = require("@instructure/ui-a11y-content");
-
 var _uiThemeable = require("@instructure/ui-themeable");
 
 var _index = _interopRequireDefault(require("../../../../common/components/shared/drag_and_drop/DragHandle/index.js"));
@@ -56,7 +54,7 @@ var styles = {
   'edit': 'gEXZO_fwKS',
   'hide': 'gEXZO_bBLs'
 };
-var ScrollTargetButton = (0, _makeScrollable.default)(_uiButtons.Button);
+var ScrollTargetButton = (0, _makeScrollable.default)(_uiButtons.IconButton);
 var ActionButtons = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ActionButtons, _Component);
 
@@ -130,34 +128,40 @@ var ActionButtons = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
         as: "div",
         onClick: this.switchOnEditing,
         scrollKey: this.props.scrollKey,
-        variant: "icon",
-        icon: _uiIcons.IconEditLine,
         size: "small",
+        withBackground: false,
+        withBorder: false,
+        renderIcon: _uiIcons.IconEditLine,
         "data-automation": "sdk-edit-question-button",
         shouldFocusOnMount: this.shouldFocusOnMount(),
+        screenReaderLabel: this.props.quizEntry.generateScreenReaderText(this.props.displayPosition, _quizCommon.EDIT),
         ref: this.setEditRef
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, this.props.quizEntry.generateScreenReaderText(this.props.displayPosition, _quizCommon.EDIT)))), this.props.questionCopyEnabled && this.props.onCopy && /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      })), this.props.questionCopyEnabled && this.props.onCopy && /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
         as: "div",
         onClick: this.props.onCopy,
         disabled: this.props.shouldDisableCopy,
-        variant: "icon",
-        icon: _uiIcons.IconDuplicateLine,
+        renderIcon: _uiIcons.IconDuplicateLine,
+        withBackground: false,
+        withBorder: false,
         size: "small",
-        "data-automation": "sdk-copy-question-button"
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, this.props.quizEntry.generateScreenReaderText(this.props.displayPosition, _quizCommon.COPY))), this.connectDragSource( /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_index.default, {
+        "data-automation": "sdk-copy-question-button",
+        screenReaderLabel: this.props.quizEntry.generateScreenReaderText(this.props.displayPosition, _quizCommon.COPY)
+      }), this.connectDragSource( /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_index.default, {
         displayPosition: this.props.displayPosition,
         quizEntry: this.props.quizEntry,
         quizEntries: this.props.quizEntries,
         disabled: this.props.shouldDisableDragHandle
-      }))), this.props.shouldRenderDelete && /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      }))), this.props.shouldRenderDelete && /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
         as: "div",
         onClick: this.props.onDelete,
         disabled: this.props.shouldDisableDeleteButton,
-        variant: "icon",
-        icon: _uiIcons.IconTrashLine,
+        renderIcon: _uiIcons.IconTrashLine,
+        withBackground: false,
+        withBorder: false,
         size: "small",
-        "data-automation": "sdk-delete-question-button"
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, this.props.quizEntry.generateScreenReaderText(this.props.displayPosition, _quizCommon.REMOVE))));
+        "data-automation": "sdk-delete-question-button",
+        screenReaderLabel: this.props.quizEntry.generateScreenReaderText(this.props.displayPosition, _quizCommon.REMOVE)
+      }));
     }
   }]);
   ActionButtons.displayName = "ActionButtons";

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

@@ -36,11 +36,11 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
 var _dec, _class, _class2, _temp;
 
 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'
 };
 var AddToBankOptions = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(AddToBankOptions, _Component);
@@ -90,17 +90,13 @@ var AddToBankOptions = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
       return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_uiView.View, {
         as: "div",
         className: styles.addToBank
-      }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
-        variant: "link",
+      }, /*#__PURE__*/_react.default.createElement(_uiButtons.CondensedButton, {
+        color: "primary",
         ref: this.storeAddToBankLinkRef,
         onClick: this.openAddToBankModal,
         "data-automation": "sdk-add-to-bank-link",
-        fluidWidth: true
-      }, /*#__PURE__*/_react.default.createElement(_uiView.View, {
-        as: "div",
-        textAlign: "center",
-        padding: "xx-small"
-      }, (0, _formatMessage.default)('Add to Bank')))));
+        margin: "small"
+      }, (0, _formatMessage.default)('Add to Bank'))));
     }
   }]);
   AddToBankOptions.displayName = "AddToBankOptions";

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

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

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

@@ -219,7 +219,7 @@ var DeleteStimulusModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, st
       var disabled = !deletionMode && childEntries.size > 0;
       return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
         disabled: disabled,
-        variant: "primary",
+        color: "primary",
         onClick: this.handleSubmit,
         margin: _quizCommon.XSMALL_SIDE_MARGIN,
         "data-automation": "sdk-stimulus-doneButton"

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

@@ -113,7 +113,7 @@ var ItemFeedbackModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
     key: "doneButton",
     value: function doneButton() {
       return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
-        variant: "primary",
+        color: "primary",
         onClick: this.continueAction,
         margin: _quizCommon.XSMALL_SIDE_MARGIN
       }, (0, _formatMessage.default)('Done'));

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

@@ -82,7 +82,7 @@ var MoveImmutableModal = /*#__PURE__*/function (_Component) {
     key: "doneButton",
     value: function doneButton() {
       return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
-        variant: "primary",
+        color: "primary",
         onClick: this.handleSubmit,
         margin: _quizCommon.XSMALL_SIDE_MARGIN
       }, (0, _formatMessage.default)('Clone and Move'));

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;