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

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

@@ -179,14 +179,16 @@ var BankEntryRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
       var title = (0, _formatMessage.default)('Delete {type}', {
         type: _this.type()
       });
-      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
-        variant: "icon",
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
         size: "medium",
+        withBackground: false,
+        withBorder: false,
         onClick: _this.deleteBankEntry,
         "data-automation": "sdk-delete-bank-entry-button",
-        icon: _uiIcons.IconTrashLine,
-        title: title
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, title));
+        renderIcon: _uiIcons.IconTrashLine,
+        title: title,
+        screenReaderLabel: title
+      });
     };
 
     _this.navigateToBankEntry = function () {
@@ -263,15 +265,17 @@ var BankEntryRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
         });
         return /*#__PURE__*/_react.default.createElement("div", {
           className: (0, _classnames.default)(styles.buttons, styles.addButton)
-        }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
-          variant: "circle-primary",
+        }, /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
+          color: "primary",
+          shape: "circle",
           size: "small",
           onClick: this.addToQuiz,
           "data-automation": "sdk-add-bank-entry-button",
           disabled: this.props.bankEntry.isStimulus && this.props.stimulusId !== null,
-          icon: _uiIcons.IconPlusLine,
-          title: title
-        }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, title)));
+          renderIcon: _uiIcons.IconPlusLine,
+          title: title,
+          screenReaderLabel: title
+        }));
       } // This empty div is necessary for spacing
 
 
@@ -281,15 +285,17 @@ var BankEntryRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
     key: "renderMoveButton",
     value: function renderMoveButton() {
       var title = this.moveModalTitle();
-      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
         ref: this.storeCopyMoveBankEntryButtonRef,
-        variant: "icon",
         size: "medium",
+        withBackground: false,
+        withBorder: false,
         onClick: this.openCopyMoveBankEntryModal,
         "data-automation": "sdk-copy-move-bank-entry-button",
-        icon: _uiIcons.IconCopyLine,
-        title: title
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, title));
+        renderIcon: _uiIcons.IconCopyLine,
+        title: title,
+        screenReaderLabel: title
+      });
     }
   }, {
     key: "entryHeader",
@@ -350,15 +356,17 @@ var BankEntryRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
       var title = (0, _formatMessage.default)('Edit {type}', {
         type: this.type()
       });
-      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
         ref: this.storeEditButtonRef,
-        variant: "icon",
         size: "medium",
+        withBackground: false,
+        withBorder: false,
         onClick: this.navigateToBankEntry,
         "data-automation": "sdk-edit-bank-entry-button",
-        icon: _uiIcons.IconEditLine,
-        title: title
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, title));
+        renderIcon: _uiIcons.IconEditLine,
+        title: title,
+        screenReaderLabel: title
+      });
     }
   }, {
     key: "renderTags",

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

@@ -161,10 +161,9 @@ var BankSearch = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _d
             };
 
             var text = allInteractions ? hide() : show();
-            return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+            return /*#__PURE__*/_react.default.createElement(_uiButtons.CondensedButton, {
               onClick: toggleAllInteractions,
-              margin: "none small",
-              variant: "link"
+              margin: "none small"
             }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
               alt: text
             }, text));
@@ -194,8 +193,8 @@ var BankSearch = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _d
       return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
         as: "div"
       }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
-        grow: true,
-        shrink: true
+        shouldGrow: true,
+        shouldShrink: true
       }, /*#__PURE__*/_react.default.createElement(_uiTextInput.TextInput, {
         renderLabel: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Search')),
         type: "search",
@@ -205,7 +204,7 @@ var BankSearch = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _d
       })), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
         onClick: toggleFilters,
         margin: "none none none small",
-        icon: _uiIcons.IconPlusLine,
+        renderIcon: _uiIcons.IconPlusLine,
         "data-automation": "sdk-search-filter-button"
       }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
         alt: showFilters ? (0, _formatMessage.default)('Hide search filters') : (0, _formatMessage.default)('Show search filters')

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

@@ -371,7 +371,7 @@ var Banks = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
         type: "button",
         onClick: this.handleSortingButtonClick,
         "data-automation": "sdk-sort-banks-button",
-        icon: this.getSortingOrderIcon()
+        renderIcon: this.getSortingOrderIcon()
       }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
         alt: this.getSortAssistiveText()
       }, (0, _formatMessage.default)('Sort')))));
@@ -403,10 +403,10 @@ var Banks = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
       }, (0, _formatMessage.default)('Banks')), /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
         ref: this.handleCreateBankButtonRef,
         type: "button",
-        variant: "primary",
+        color: "primary",
         onClick: this.onCreateBank,
         "data-automation": "sdk-create-new-bank-button",
-        icon: _uiIcons.IconPlusLine
+        renderIcon: _uiIcons.IconPlusLine
       }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
         alt: (0, _formatMessage.default)('Create Bank')
       }, (0, _formatMessage.default)('Bank'))));

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'));