@instructure/quiz-core 18.3.1-rc.8 → 18.4.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [18.4.0](https://gerrit.instructure.com/quizzes-ui/compare/v18.3.0...v18.4.0) (2023-10-17)
+
+
+### Bug Fixes
+
+* **a11y:** "Insert Content" dialog ([c81a856](https://gerrit.instructure.com/quizzes-ui/commits/c81a856446c119017058ea08631fcb0363155663))
+* **IA-polling:** Stop the polling on error ([c759e07](https://gerrit.instructure.com/quizzes-ui/commits/c759e07191dbcc7888c9a833accf4e40b6f7ee21))
+* **item_banks:** Remove banks from polling before deletion ([b62a430](https://gerrit.instructure.com/quizzes-ui/commits/b62a430d4c697ed85bfe57cc5c9b5d09c22deab3))
+* **item-analysis:** fix choice body text extraction for only HTML content ([6b0f266](https://gerrit.instructure.com/quizzes-ui/commits/6b0f266164e85a033952f5571797a836499def65))
+* **report-card:** Fix report card layout ([1b173ad](https://gerrit.instructure.com/quizzes-ui/commits/1b173ad323d4e182131f144eca9a55c55144ef6a))
+
+
+### Features
+
+* **error_code_translation:** Add error code translations ([bb370fd](https://gerrit.instructure.com/quizzes-ui/commits/bb370fda7edd4b392699085d7965a60617763c45))
+* **item-analysis:** improve error feedback for last report generation ([7ca26f0](https://gerrit.instructure.com/quizzes-ui/commits/7ca26f0caef50e0d21cdc6aa2ea186c105799ec4))
+* **Reports:** Show error image if loading quiz or item analysis fails ([4df0f97](https://gerrit.instructure.com/quizzes-ui/commits/4df0f975b1b29cd055a40993dcd47197cda2dbbf))
+
+
+
+
+
 # [18.3.0](https://gerrit.instructure.com/quizzes-ui/compare/v18.2.0...v18.3.0) (2023-10-03)
 
 

package/es/banks/components/AddToBankModal/presenter.js

@@ -199,7 +199,7 @@ export var AddToBankModal = /*#__PURE__*/function (_Component) {
       var disabled = bankType === 'existing' && !this.props.selectedBank || bankType === 'new' && (!newBankTitle || !newBankTitle.trim()) || checkBankedContentShareabilityEnabled && contentShareableLoading;
       return /*#__PURE__*/React.createElement(Button, {
         type: "button",
-        variant: "primary",
+        color: "primary",
         onClick: this.continueAction,
         disabled: disabled,
         margin: XSMALL_SIDE_MARGIN,

package/es/banks/components/Bank/presenter.js

@@ -400,10 +400,10 @@ export var Bank = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
         return /*#__PURE__*/React.createElement(Button, {
           margin: "small none",
           ref: this.storeCreateBankEntryButtonRef,
-          variant: "primary",
+          color: "primary",
           onClick: this.openAddBankEntryModal,
           "data-automation": "sdk-new-bank-entry-button",
-          icon: IconPlusLine
+          renderIcon: IconPlusLine
         }, /*#__PURE__*/React.createElement(AccessibleContent, {
           alt: t('Create Bank Entry')
         }, t('New')));
@@ -418,7 +418,7 @@ export var Bank = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
         return /*#__PURE__*/React.createElement(Button, {
           onClick: this.addBankToQuiz,
           margin: "small none",
-          icon: IconPlusLine
+          renderIcon: IconPlusLine
         }, /*#__PURE__*/React.createElement(AccessibleContent, {
           alt: t('Add this bank to quiz')
         }, t('All / Random')));

package/es/banks/components/BankEntry/presenter.js

@@ -19,7 +19,7 @@ import isUndefined from 'lodash/isUndefined';
 import keyBy from 'lodash/keyBy';
 import { Alert } from '@instructure/ui-alerts';
 import { BreadcrumbLink } from '@instructure/ui-breadcrumb';
-import { Button } from '@instructure/ui-buttons';
+import { IconButton } from '@instructure/ui-buttons';
 import { Text } from '@instructure/ui-text';
 import { Heading } from '@instructure/ui-heading';
 import { IconDiscussionLine, IconDiscussionSolid } from '@instructure/ui-icons';
@@ -544,13 +544,15 @@ export var BankEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
         text = t('Edit Question Level Feedback');
       }
 
-      return /*#__PURE__*/React.createElement(Button, {
-        variant: "icon",
+      return /*#__PURE__*/React.createElement(IconButton, {
         onClick: this.openFeedbackModal,
+        withBackground: false,
+        withBorder: false,
         disabled: disabled,
         ref: this.storeFeedbackButtonRef,
-        icon: icon
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, text));
+        renderIcon: icon,
+        screenReaderLabel: text
+      });
     }
   }, {
     key: "getBankEntryId",

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

@@ -12,11 +12,11 @@ import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Immutable from 'immutable';
 import { IconEditLine, IconPlusLine, IconCopyLine, IconTrashLine } from '@instructure/ui-icons';
-import { Button } from '@instructure/ui-buttons';
+import { IconButton } from '@instructure/ui-buttons';
 import { Text } from '@instructure/ui-text';
 import { List } from '@instructure/ui-list';
 import { Heading } from '@instructure/ui-heading';
-import { PresentationContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { PresentationContent } from '@instructure/ui-a11y-content';
 import { Alert } from '@instructure/ui-alerts';
 import { themeable } from '@instructure/ui-themeable';
 import { RichContentRenderer } from '@instructure/quiz-rce';
@@ -138,14 +138,16 @@ export var BankEntryRow = (_dec = themeable(theme, styles), _dec(_class = (_temp
       var title = t('Delete {type}', {
         type: _this.type()
       });
-      return /*#__PURE__*/React.createElement(Button, {
-        variant: "icon",
+      return /*#__PURE__*/React.createElement(IconButton, {
         size: "medium",
+        withBackground: false,
+        withBorder: false,
         onClick: _this.deleteBankEntry,
         "data-automation": "sdk-delete-bank-entry-button",
-        icon: IconTrashLine,
-        title: title
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, title));
+        renderIcon: IconTrashLine,
+        title: title,
+        screenReaderLabel: title
+      });
     };
 
     _this.navigateToBankEntry = function () {
@@ -222,15 +224,17 @@ export var BankEntryRow = (_dec = themeable(theme, styles), _dec(_class = (_temp
         });
         return /*#__PURE__*/React.createElement("div", {
           className: classNames(styles.buttons, styles.addButton)
-        }, /*#__PURE__*/React.createElement(Button, {
-          variant: "circle-primary",
+        }, /*#__PURE__*/React.createElement(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: IconPlusLine,
-          title: title
-        }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, title)));
+          renderIcon: IconPlusLine,
+          title: title,
+          screenReaderLabel: title
+        }));
       } // This empty div is necessary for spacing
 
 
@@ -240,15 +244,17 @@ export var BankEntryRow = (_dec = themeable(theme, styles), _dec(_class = (_temp
     key: "renderMoveButton",
     value: function renderMoveButton() {
       var title = this.moveModalTitle();
-      return /*#__PURE__*/React.createElement(Button, {
+      return /*#__PURE__*/React.createElement(IconButton, {
         ref: this.storeCopyMoveBankEntryButtonRef,
-        variant: "icon",
         size: "medium",
+        withBackground: false,
+        withBorder: false,
         onClick: this.openCopyMoveBankEntryModal,
         "data-automation": "sdk-copy-move-bank-entry-button",
-        icon: IconCopyLine,
-        title: title
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, title));
+        renderIcon: IconCopyLine,
+        title: title,
+        screenReaderLabel: title
+      });
     }
   }, {
     key: "entryHeader",
@@ -309,15 +315,17 @@ export var BankEntryRow = (_dec = themeable(theme, styles), _dec(_class = (_temp
       var title = t('Edit {type}', {
         type: this.type()
       });
-      return /*#__PURE__*/React.createElement(Button, {
+      return /*#__PURE__*/React.createElement(IconButton, {
         ref: this.storeEditButtonRef,
-        variant: "icon",
         size: "medium",
+        withBackground: false,
+        withBorder: false,
         onClick: this.navigateToBankEntry,
         "data-automation": "sdk-edit-bank-entry-button",
-        icon: IconEditLine,
-        title: title
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, title));
+        renderIcon: IconEditLine,
+        title: title,
+        screenReaderLabel: title
+      });
     }
   }, {
     key: "renderTags",

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

@@ -10,7 +10,7 @@ import memoize from 'lodash/memoize';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { IconPlusLine } from '@instructure/ui-icons';
-import { Button } from '@instructure/ui-buttons';
+import { Button, CondensedButton } from '@instructure/ui-buttons';
 import { TextInput } from '@instructure/ui-text-input';
 import { Checkbox } from '@instructure/ui-checkbox';
 import { View } from '@instructure/ui-view';
@@ -127,10 +127,9 @@ export var BankSearch = (_dec = themeable(theme, styles), _dec(_class = (_temp =
             };
 
             var text = allInteractions ? hide() : show();
-            return /*#__PURE__*/React.createElement(Button, {
+            return /*#__PURE__*/React.createElement(CondensedButton, {
               onClick: toggleAllInteractions,
-              margin: "none small",
-              variant: "link"
+              margin: "none small"
             }, /*#__PURE__*/React.createElement(AccessibleContent, {
               alt: text
             }, text));
@@ -160,8 +159,8 @@ export var BankSearch = (_dec = themeable(theme, styles), _dec(_class = (_temp =
       return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Flex, {
         as: "div"
       }, /*#__PURE__*/React.createElement(Flex.Item, {
-        grow: true,
-        shrink: true
+        shouldGrow: true,
+        shouldShrink: true
       }, /*#__PURE__*/React.createElement(TextInput, {
         renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Search')),
         type: "search",
@@ -171,7 +170,7 @@ export var BankSearch = (_dec = themeable(theme, styles), _dec(_class = (_temp =
       })), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Button, {
         onClick: toggleFilters,
         margin: "none none none small",
-        icon: IconPlusLine,
+        renderIcon: IconPlusLine,
         "data-automation": "sdk-search-filter-button"
       }, /*#__PURE__*/React.createElement(AccessibleContent, {
         alt: showFilters ? t('Hide search filters') : t('Show search filters')

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

@@ -331,7 +331,7 @@ export var Banks = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
         type: "button",
         onClick: this.handleSortingButtonClick,
         "data-automation": "sdk-sort-banks-button",
-        icon: this.getSortingOrderIcon()
+        renderIcon: this.getSortingOrderIcon()
       }, /*#__PURE__*/React.createElement(AccessibleContent, {
         alt: this.getSortAssistiveText()
       }, t('Sort')))));
@@ -363,10 +363,10 @@ export var Banks = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
       }, t('Banks')), /*#__PURE__*/React.createElement(Button, {
         ref: this.handleCreateBankButtonRef,
         type: "button",
-        variant: "primary",
+        color: "primary",
         onClick: this.onCreateBank,
         "data-automation": "sdk-create-new-bank-button",
-        icon: IconPlusLine
+        renderIcon: IconPlusLine
       }, /*#__PURE__*/React.createElement(AccessibleContent, {
         alt: t('Create Bank')
       }, t('Bank'))));

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

@@ -17,7 +17,7 @@ import { Text } from '@instructure/ui-text';
 import { Link } from '@instructure/ui-link';
 import { Heading } from '@instructure/ui-heading';
 import { PresentationContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
-import { Button } from '@instructure/ui-buttons';
+import { IconButton } from '@instructure/ui-buttons';
 import { IconEditLine, IconTrashLine, IconShareSolid, IconCopyLine } from '@instructure/ui-icons';
 import { Alert } from '@instructure/ui-alerts';
 import { Spinner } from '@instructure/ui-spinner';
@@ -280,43 +280,49 @@ export var BanksList = (_dec = themeable(theme, styles), _dec(_class = (_temp =
     };
 
     _this.renderBankOptions = function (bank) {
-      var bankEditOptions = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      var bankEditOptions = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconButton, {
         onClick: _this.openModal(bank),
         name: "Edit",
         size: "small",
-        variant: "icon",
         "data-automation": "sdk-edit-bank-button",
-        icon: IconEditLine,
+        withBackground: false,
+        withBorder: false,
+        renderIcon: IconEditLine,
         title: t('Edit bank {name}', {
           name: bank.title
+        }),
+        screenReaderLabel: t('Edit bank {name}', {
+          name: bank.title
         })
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Edit bank {name}', {
-        name: bank.title
-      }))), /*#__PURE__*/React.createElement(Button, {
+      }), /*#__PURE__*/React.createElement(IconButton, {
         onClick: _this.openDeleteBankModal(bank),
         name: "Delete",
         size: "small",
-        variant: "icon",
         "data-automation": "sdk-delete-bank-button",
-        icon: IconTrashLine,
+        withBackground: false,
+        withBorder: false,
+        renderIcon: IconTrashLine,
         title: t('Delete bank {name}', {
           name: bank.title
+        }),
+        screenReaderLabel: t('Delete bank {name}', {
+          name: bank.title
         })
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Delete bank {name}', {
-        name: bank.title
-      }))));
-      var duplicateBankOption = /*#__PURE__*/React.createElement(Button, {
+      }));
+      var duplicateBankOption = /*#__PURE__*/React.createElement(IconButton, {
         onClick: _this.openDuplicateBankModal(bank),
         name: "Duplicate",
         size: "small",
-        variant: "icon",
-        icon: IconCopyLine,
+        renderIcon: IconCopyLine,
+        withBackground: false,
+        withBorder: false,
         title: t('Duplicate bank {name}', {
           name: bank.title
+        }),
+        screenReaderLabel: t('Duplicate bank {name}', {
+          name: bank.title
         })
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Duplicate bank {name}', {
-        name: bank.title
-      })));
+      });
 
       if (bank.status === 'copying') {
         return /*#__PURE__*/React.createElement("div", {
@@ -331,19 +337,21 @@ export var BanksList = (_dec = themeable(theme, styles), _dec(_class = (_temp =
           className: styles.bankOptions
         }, _this.props.duplicateItemBanks ? duplicateBankOption : null, /*#__PURE__*/React.createElement(IfFeature, {
           name: "item_bank_sharing"
-        }, /*#__PURE__*/React.createElement(Button, {
+        }, /*#__PURE__*/React.createElement(IconButton, {
           onClick: _this.openSharingModal(bank),
           name: "Share",
           size: "small",
-          variant: "icon",
           "data-automation": "sdk-shared-bank-share-link",
-          icon: IconShareSolid,
+          withBackground: false,
+          withBorder: false,
+          renderIcon: IconShareSolid,
           title: t('Share bank {name}', {
             name: bank.title
+          }),
+          screenReaderLabel: t('Share bank {name}', {
+            name: bank.title
           })
-        }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Share bank {name}', {
-          name: bank.title
-        })))), bank.canEdit() ? bankEditOptions : null);
+        })), bank.canEdit() ? bankEditOptions : null);
       }
     };
 

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

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

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

@@ -114,7 +114,7 @@ export var CreateBankModal = (_dec = themeable(theme, styles), _dec(_class = (_t
     value: function createBankButton() {
       return /*#__PURE__*/React.createElement(Button, {
         type: "button",
-        variant: "primary",
+        color: "primary",
         onClick: this.continueAction,
         margin: XSMALL_SIDE_MARGIN,
         "data-automation": "sdk-create-bank-button"

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

@@ -92,7 +92,7 @@ export var EditBankModal = (_dec = themeable(theme, styles), _dec(_class = (_tem
     value: function renderSaveButton() {
       return /*#__PURE__*/React.createElement(Button, {
         type: "button",
-        variant: "primary",
+        color: "primary",
         onClick: this.continueAction,
         margin: XSMALL_SIDE_MARGIN,
         "data-automation": "sdk-edit-bank-save-button"

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

@@ -9,9 +9,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Menu } from '@instructure/ui-menu';
-import { Button } from '@instructure/ui-buttons';
+import { IconButton } from '@instructure/ui-buttons';
 import { IconMoreSolid, IconImportLine } from '@instructure/ui-icons';
-import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { themeable } from '@instructure/ui-themeable';
 import QTIImportModal from "../../../building/components/QTIImportModal/index.js";
 import { PARENT_TYPE_BANK } from '@instructure/quiz-common';
@@ -39,10 +38,12 @@ export var HeaderMenu = (_dec = themeable(theme, styles), _dec(_class = (_temp =
     key: "renderMenu",
     value: function renderMenu() {
       return /*#__PURE__*/React.createElement(Menu, {
-        trigger: /*#__PURE__*/React.createElement(Button, {
-          variant: "icon",
-          icon: IconMoreSolid
-        }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('More Item Banking Actions')))
+        trigger: /*#__PURE__*/React.createElement(IconButton, {
+          renderIcon: IconMoreSolid,
+          withBackground: false,
+          withBorder: false,
+          screenReaderLabel: t('More Item Banking Actions')
+        })
       }, /*#__PURE__*/React.createElement(Menu.Item, {
         key: "import",
         disabled: !this.props.bank.canImport(),

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

@@ -82,7 +82,7 @@ var NavWrapper = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class
       }, canvasReferrerLinkText);
       var banksLinks = /*#__PURE__*/React.createElement(BreadcrumbLink, {
         ref: this.setItemBanksRef,
-        icon: _ref,
+        renderIcon: _ref,
         key: "Banks",
         onClick: this.props.navigateToBanks
       }, t('Item Banks')); // If Breadcrumb has multiple children (even if 2nd is null), it will

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

@@ -5,17 +5,17 @@ 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 { omitProps } from '@instructure/ui-react-utils';
-export var ContextualButton = /*#__PURE__*/function (_Component) {
-  _inherits(ContextualButton, _Component);
+export var ContextualIconButton = /*#__PURE__*/function (_Component) {
+  _inherits(ContextualIconButton, _Component);
 
-  var _super = _createSuper(ContextualButton);
+  var _super = _createSuper(ContextualIconButton);
 
-  function ContextualButton() {
+  function ContextualIconButton() {
     var _this;
 
-    _classCallCheck(this, ContextualButton);
+    _classCallCheck(this, ContextualIconButton);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -36,24 +36,26 @@ export var ContextualButton = /*#__PURE__*/function (_Component) {
     return _this;
   }
 
-  _createClass(ContextualButton, [{
+  _createClass(ContextualIconButton, [{
     key: "render",
     value: function render() {
       var buttonProps = omitProps(this.props, {}, ['context', 'onClick']);
-      return /*#__PURE__*/React.createElement(Button, Object.assign({}, buttonProps, {
+      return /*#__PURE__*/React.createElement(IconButton, Object.assign({}, buttonProps, {
+        withBackground: false,
+        withBorder: false,
         onClick: this.handleClick
       }), this.props.children);
     }
   }]);
 
-  ContextualButton.displayName = "ContextualButton";
-  return ContextualButton;
+  ContextualIconButton.displayName = "ContextualIconButton";
+  return ContextualIconButton;
 }(Component);
-ContextualButton.propTypes = _objectSpread(_objectSpread({}, Button.propTypes), {}, {
+ContextualIconButton.propTypes = _objectSpread(_objectSpread({}, IconButton.propTypes), {}, {
   context: PropTypes.any
   /* eslint-disable-line react/forbid-prop-types */
 
 });
-ContextualButton.defaultProps = _objectSpread(_objectSpread({}, Button.defaultProps), {}, {
+ContextualIconButton.defaultProps = _objectSpread(_objectSpread({}, IconButton.defaultProps), {}, {
   context: void 0
 });

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

@@ -17,7 +17,7 @@ import { Text } from '@instructure/ui-text';
 import { Avatar } from '@instructure/ui-avatar';
 import { Tabs } from '@instructure/ui-tabs';
 import { themeable } from '@instructure/ui-themeable';
-import { ContextualButton } from "../ContextualButton/index.js";
+import { ContextualIconButton } from "../ContextualIconButton/index.js";
 import { SimpleSelect } from '@instructure/ui-simple-select';
 var styles = {
   componentId: 'edByO',
@@ -81,18 +81,18 @@ export var ShareList = (_dec = themeable(theme, styles), _dec(_class = (_temp =
         entity: entity,
         isEntityRemoved: isEntityRemoved
       };
-      return /*#__PURE__*/React.createElement(ContextualButton, {
+      return /*#__PURE__*/React.createElement(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 ? IconResetLine : IconTrashLine
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, isEntityRemoved ? t('Undo remove for {entity}', {
-        entity: entity.get('title')
-      }) : t('Remove {entity}', {
-        entity: entity.get('title')
-      })));
+        renderIcon: isEntityRemoved ? IconResetLine : IconTrashLine,
+        screenReaderLabel: isEntityRemoved ? t('Undo remove for {entity}', {
+          entity: entity.get('title')
+        }) : t('Remove {entity}', {
+          entity: entity.get('title')
+        })
+      });
     };
 
     _this.renderEntity = function (entity, index) {

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

@@ -404,7 +404,7 @@ export var SharingModalPresenter = (_dec = themeable(theme, styles), _dec(_class
           "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'
         }, t('Add'))))), /*#__PURE__*/React.createElement("div", {
           className: styles.separator
         }));
@@ -510,7 +510,7 @@ export var SharingModalPresenter = (_dec = themeable(theme, styles), _dec(_class
     value: function renderFooter() {
       if (this.props.subAccountBankSharingEnabled) {
         return /*#__PURE__*/React.createElement(Button, {
-          variant: "primary",
+          color: "primary",
           margin: "0 x-small 0 0",
           onClick: this.handleDismiss
         }, t('Close'));
@@ -518,12 +518,12 @@ export var SharingModalPresenter = (_dec = themeable(theme, styles), _dec(_class
 
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
         "data-automation": "sdk-shared-bank-cancel-button",
-        variant: "light",
+        color: "primary-inverse",
         onClick: this.handleDismiss,
         margin: "0 x-small 0 0"
       }, t('Cancel')), /*#__PURE__*/React.createElement(Button, {
         "data-automation": "sdk-shared-bank-done-button",
-        variant: "primary",
+        color: "primary",
         onClick: this.handleSubmit,
         margin: "0 x-small 0 0"
       }, t('Done')));

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

@@ -7,9 +7,8 @@ var _dec, _class, _class2, _temp;
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Button } from '@instructure/ui-buttons';
+import { IconButton } from '@instructure/ui-buttons';
 import { Menu } from '@instructure/ui-menu';
-import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { IconExportLine, IconMoreSolid, IconImportLine, IconBankLine, IconPrinterLine, IconSpeedGraderLine } from '@instructure/ui-icons';
 import PrintTrigger from "../../../../../common/components/shared/PrintTrigger/index.js";
 import { PRINT_CURRENT_PAGE, PRINT_BLANK } from '@instructure/quiz-common';
@@ -175,11 +174,13 @@ export var BuildingButtons = (_dec = themeable(theme, styles), _dec(_class = (_t
 
       if (menuItems.length < 1) return;
       return /*#__PURE__*/React.createElement(Menu, {
-        trigger: /*#__PURE__*/React.createElement(Button, {
-          variant: "icon",
-          icon: IconMoreSolid,
-          "data-automation": "sdk-more-quiz-actions-button"
-        }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('More Quiz Actions')))
+        trigger: /*#__PURE__*/React.createElement(IconButton, {
+          renderIcon: IconMoreSolid,
+          withBackground: false,
+          withBorder: false,
+          "data-automation": "sdk-more-quiz-actions-button",
+          screenReaderLabel: t('More Quiz Actions')
+        })
       }, menuItems);
     }
   }, {