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

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

@@ -45,12 +45,12 @@ export var AddContentPopover = (_dec = themeable(theme, styles), _dec(_class = (
       return elementsForSelectors(_this.props.appContainer);
     };
 
-    _this.toggle = function (shouldShow) {
-      if (shouldShow) {
-        _this.props.switchOnEditing();
-      } else {
-        _this.props.switchOffEditing();
-      }
+    _this.showContent = function () {
+      _this.props.switchOnEditing();
+    };
+
+    _this.hideContent = function () {
+      _this.props.switchOffEditing();
     };
 
     _this.storePopoverTriggerRef = function (b) {
@@ -60,11 +60,13 @@ export var AddContentPopover = (_dec = themeable(theme, styles), _dec(_class = (
     _this.renderPopoverButton = function () {
       return /*#__PURE__*/React.createElement(Popover, {
         on: "click",
-        onToggle: _this.toggle,
+        onShowContent: _this.showContent,
+        onHideContent: _this.hideContent,
         isShowingContent: _this.props.isEditing,
         shouldCloseOnEscape: true,
-        shouldContainFocus: true
-      }, /*#__PURE__*/React.createElement(Popover.Trigger, null, _this.renderAddContentButton()), /*#__PURE__*/React.createElement(Popover.Content, null, /*#__PURE__*/React.createElement(AddContentBody, {
+        shouldContainFocus: true,
+        renderTrigger: _this.renderAddContentButton()
+      }, /*#__PURE__*/React.createElement(AddContentBody, {
         allowStimulusCreation: _this.props.allowStimulusCreation,
         onOpenBankTray: _this.props.switchOffEditing,
         onAddItem: _this.props.switchOffEditing,
@@ -72,7 +74,7 @@ export var AddContentPopover = (_dec = themeable(theme, styles), _dec(_class = (
         position: _this.props.position,
         quizId: _this.props.quizId,
         stimulusId: _this.props.stimulusId
-      })));
+      }));
     };
 
     _this.openAddContentModal = function () {

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

@@ -13,7 +13,7 @@ import classNames from 'classnames';
 import { AccessibleContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { Alert } from '@instructure/ui-alerts';
 import { Text } from '@instructure/ui-text';
-import { Progress } from '@instructure/ui-progress';
+import { ProgressCircle } from '@instructure/ui-progress';
 import { Heading } from '@instructure/ui-heading';
 import { View } from '@instructure/ui-view';
 import { themeable } from '@instructure/ui-themeable';
@@ -57,7 +57,8 @@ export var Info = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
   _createClass(Info, [{
     key: "progressTextFormatter",
     // needed for inst-ui Progress
-    value: function progressTextFormatter(valueNow, valueMax) {
+    value: function progressTextFormatter(_ref) {
+      var valueNow = _ref.valueNow;
       var percentageUnknown = valueNow === unknownPercentageValue;
       return percentageUnknown ? t('Unknown Score') : t('Your score was {percentage}.', {
         percentage: this.formatPercentMax2FractionDigits(valueNow)
@@ -66,7 +67,8 @@ export var Info = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
 
   }, {
     key: "progressDisplayFormatter",
-    value: function progressDisplayFormatter(valueNow, valueMax) {
+    value: function progressDisplayFormatter(_ref2) {
+      var valueNow = _ref2.valueNow;
       var valueToShow = valueNow === unknownPercentageValue ? t({
         id: 'progress_display',
         default: '?',
@@ -153,13 +155,12 @@ export var Info = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
       return /*#__PURE__*/React.createElement("div", {
         className: styles.score,
         "data-automation": "sdk-info-score"
-      }, /*#__PURE__*/React.createElement(Progress, {
-        animateOnMount: true,
+      }, /*#__PURE__*/React.createElement(ProgressCircle, {
+        shouldAnimateOnMount: true,
         size: "large",
-        variant: "circle",
-        label: t('Your Score'),
-        formatValueText: this.progressTextFormatter,
-        formatDisplayedValue: this.progressDisplayFormatter,
+        screenReaderLabel: t('Your Score'),
+        formatScreenReaderValue: this.progressTextFormatter,
+        renderValue: this.progressDisplayFormatter,
         valueNow: this.percentageVal,
         valueMax: 1
       }));

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

@@ -440,7 +440,7 @@ export var StimulusEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp
         className: styles.buttonWrapper
       }, /*#__PURE__*/React.createElement(Button, {
         type: "button",
-        variant: "primary",
+        color: "primary",
         disabled: !this.state.canSubmit,
         onClick: this.onSubmit
       }, t('Done')))));

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

@@ -10,8 +10,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { IconArrowOpenDownLine } from '@instructure/ui-icons';
-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 { omitProps } from '@instructure/ui-react-utils';
 var styles = {
@@ -46,13 +45,15 @@ export var ExpandButton = (_dec = themeable(theme, styles), _dec(_class = (_temp
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(Button, Object.assign({
-        variant: "icon",
+      return /*#__PURE__*/React.createElement(IconButton, Object.assign({
         size: "medium",
+        withBackground: false,
+        withBorder: false,
         onClick: this.props.onClick,
-        icon: this.renderIcon(),
-        title: this.props.title
-      }, omitProps(this.props, this.constructor.propTypes)), /*#__PURE__*/React.createElement(ScreenReaderContent, null, this.props.title));
+        renderIcon: this.renderIcon()
+      }, omitProps(this.props, this.constructor.propTypes), {
+        screenReaderLabel: this.props.title
+      }));
     }
   }]);
 

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

@@ -65,12 +65,13 @@ export var InteractionTypes = (_dec = themeable(theme, styles), _dec(_class = (_
       }
 
       return /*#__PURE__*/React.createElement(Button, {
-        fluidWidth: true,
         key: intType.slug,
         margin: "0 0 xx-small",
         onClick: onClick,
         size: "small",
-        "data-automation": automation
+        "data-automation": automation,
+        display: "block",
+        textAlign: "start"
       }, /*#__PURE__*/React.createElement(Grid, {
         colSpacing: "none",
         vAlign: "middle"

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

@@ -6,9 +6,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Map } from 'immutable';
-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 { IconArrowDownLine, IconArrowUpLine, IconDragHandleLine, IconMiniArrowDownLine, IconMiniArrowUpLine } from '@instructure/ui-icons';
 import t from '@instructure/quiz-i18n/es/format-message';
 import keyboardClickable from "../../../../../common/util/keyboardClickable.js";
@@ -203,19 +202,21 @@ export var DragHandle = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderIcon",
     value: function renderIcon() {
-      return /*#__PURE__*/React.createElement(Button // must be a button when disabled for the screenreader to read it properly
+      return /*#__PURE__*/React.createElement(IconButton // must be a button when disabled for the screenreader to read it properly
       // must be a div when enabled to allow dragging in firefox
       , {
         as: this.props.disabled ? 'button' : 'div',
-        variant: "icon",
-        icon: IconDragHandleLine,
+        renderIcon: IconDragHandleLine,
+        withBackground: false,
+        withBorder: false,
         size: "small",
         ref: this.handleTriggerRef,
         onKeyDown: keyboardClickable,
         disabled: this.props.disabled,
         "data-automation": "sdk-drag-handle",
-        cursor: "move"
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, this.props.quizEntry.generateScreenReaderText(this.props.displayPosition, MOVE)));
+        cursor: "move",
+        screenReaderLabel: this.props.quizEntry.generateScreenReaderText(this.props.displayPosition, MOVE)
+      });
     }
   }, {
     key: "renderMenuItems",

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

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

package/es/moderating/components/resources/ModerateTableRow/presenter.js

@@ -9,7 +9,7 @@ var _dec, _class, _class2, _temp;
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { AccessibleContent, PresentationContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { AccessibleContent, PresentationContent } from '@instructure/ui-a11y-content';
 import { List } from '@instructure/ui-list';
 import { Text } from '@instructure/ui-text';
 import { Link } from '@instructure/ui-link';
@@ -18,7 +18,7 @@ import { View } from '@instructure/ui-view';
 import { Flex } from '@instructure/ui-flex';
 import { Table } from '@instructure/ui-table';
 import { IconEditLine, IconWarningLine } from '@instructure/ui-icons';
-import { Button } from '@instructure/ui-buttons';
+import { Button, IconButton } from '@instructure/ui-buttons';
 import { themeable } from '@instructure/ui-themeable';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { withI18nSupport } from '@instructure/quiz-common';
@@ -287,7 +287,7 @@ export var ModerateTableRow = (_dec = themeable(theme, styles), _dec(_class = (_
           }, t('None'));
         } else {
           displayContent = /*#__PURE__*/React.createElement(List, {
-            variant: "unstyled"
+            isUnstyled: true
           }, accommodations.map(function (elem) {
             return /*#__PURE__*/React.createElement(List.Item, {
               key: elem.name
@@ -305,13 +305,15 @@ export var ModerateTableRow = (_dec = themeable(theme, styles), _dec(_class = (_
         }, /*#__PURE__*/React.createElement(Flex.Item, {
           shouldShrink: true,
           "data-automation": "sdk-moderate-accommodations-text"
-        }, displayContent), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Button, {
-          variant: "icon",
+        }, displayContent), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(IconButton, {
           margin: "0 x-small 0 0",
-          icon: IconEditLine,
+          withBackground: false,
+          withBorder: false,
+          renderIcon: IconEditLine,
           onClick: this.onAccommodationsClick,
-          "data-automation": "sdk-moderate-accommodations-edit"
-        }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Edit student accommodations'))))));
+          "data-automation": "sdk-moderate-accommodations-edit",
+          screenReaderLabel: t('Edit student accommodations')
+        }))));
       }
     }
   }, {

package/es/moderating/components/resources/OutstandingQuizzesModal/presenter.js

@@ -140,7 +140,7 @@ export var OutstandingQuizzesModal = /*#__PURE__*/function (_Component) {
       }, t('Cancel')), /*#__PURE__*/React.createElement(Button, {
         onClick: this.saveAction,
         margin: "xxx-small",
-        variant: "primary",
+        color: "primary",
         disabled: !this.state.quizzesSelectedAndReadyToSubmit.length,
         "data-automation": "sdk-outstanding-quizzes-submit"
       }, t('Submit Manually'))));

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisMetric/presenter.js

@@ -8,11 +8,11 @@ var _dec, _class, _class2, _temp;
 import { themeable } from '@instructure/ui-themeable';
 import theme from "./theme.js";
 var styles = {
-  componentId: 'flBnP',
+  componentId: 'ethsC',
   template: function template(theme) {
-    return "\n\n.flBnP_eckF{margin:0;max-width:159px;text-transform:uppercase}";
+    return "\n\n.ethsC_eckF{margin:0;max-width:159px;text-transform:capitalize}";
   },
-  'metricLabel': 'flBnP_eckF'
+  'metricLabel': 'ethsC_eckF'
 };
 import React, { Component } from 'react';
 import { getSanitizedMetricValue } from "../utils.js";

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisPopoverMetric/presenter.js

@@ -9,13 +9,13 @@ import React, { Component } from 'react';
 import { Metric } from '@instructure/ui-metric';
 import { getSanitizedMetricValue } from "../utils.js";
 var styles = {
-  componentId: 'crjlr',
+  componentId: 'dpcwk',
   template: function template(theme) {
-    return "\n\n.crjlr_elNf{max-width:159px}\n\n.crjlr_eckF{margin:0;padding-right:24px;text-transform:uppercase}\n\n.crjlr_dqHR{margin-left:-24px;padding-left:5px}";
+    return "\n\n.dpcwk_elNf{max-width:159px}\n\n.dpcwk_eckF{margin:0;padding-right:24px;text-transform:capitalize}\n\n.dpcwk_dqHR{margin-left:-24px;padding-left:5px}";
   },
-  'metricLabelContainer': 'crjlr_elNf',
-  'metricLabel': 'crjlr_eckF',
-  'popoverContainer': 'crjlr_dqHR'
+  'metricLabelContainer': 'dpcwk_elNf',
+  'metricLabel': 'dpcwk_eckF',
+  'popoverContainer': 'dpcwk_dqHR'
 };
 import MetricPopover from "../MetricPopover/index.js";
 import { themeable } from '@instructure/ui-themeable';

package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewQuizAnalysis/presenter.js

@@ -100,17 +100,17 @@ export var NewQuizAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
         className: styles.metricsWrapper
       }, /*#__PURE__*/React.createElement(AnalysisMetric, {
         metricKey: "highscore",
-        label: t('high score'),
+        label: t('High Score'),
         value: scores === null || scores === void 0 ? void 0 : scores.max_percentage,
         suffix: "%"
       }), /*#__PURE__*/React.createElement(AnalysisMetric, {
         metricKey: "lowscore",
-        label: t('low score'),
+        label: t('Low Score'),
         value: scores === null || scores === void 0 ? void 0 : scores.min_percentage,
         suffix: "%"
       }), /*#__PURE__*/React.createElement(AnalysisMetric, {
         metricKey: "meanscore",
-        label: t('mean score'),
+        label: t('Mean Score'),
         value: scores === null || scores === void 0 ? void 0 : scores.mean_percentage,
         suffix: "%"
       })), /*#__PURE__*/React.createElement("div", {
@@ -122,7 +122,7 @@ export var NewQuizAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
         suffix: "%"
       }), /*#__PURE__*/React.createElement(AnalysisMetric, {
         metricKey: "mean_elapsed_sec",
-        label: t('mean elapsed time'),
+        label: t('Mean Elapsed Time'),
         value: formatTimeToFullNumeric(attempts === null || attempts === void 0 ? void 0 : attempts.mean_elapsed_sec)
       })), /*#__PURE__*/React.createElement("div", {
         className: styles.expandButtonContainer

package/es/reporting/components/resources/NewQuizAndItemAnalysis/ReportCard/presenter.js

@@ -64,17 +64,17 @@ export var NewQuizAndItemAnalysisReportCardPresenter = (_dec = themeable(theme,
         className: styles.metricsContainer
       }, /*#__PURE__*/React.createElement(AnalysisMetric, {
         metricKey: "highscore",
-        label: t('high score'),
+        label: t('High Score'),
         value: (_quizAnalysis$scores = quizAnalysis.scores) === null || _quizAnalysis$scores === void 0 ? void 0 : _quizAnalysis$scores.max_percentage,
         suffix: "%"
       }), /*#__PURE__*/React.createElement(AnalysisMetric, {
         metricKey: "lowscore",
-        label: t('low score'),
+        label: t('Low Score'),
         value: (_quizAnalysis$scores2 = quizAnalysis.scores) === null || _quizAnalysis$scores2 === void 0 ? void 0 : _quizAnalysis$scores2.min_percentage,
         suffix: "%"
       }), /*#__PURE__*/React.createElement(AnalysisMetric, {
         metricKey: "meanscore",
-        label: t('mean score'),
+        label: t('Mean Score'),
         value: (_quizAnalysis$scores3 = quizAnalysis.scores) === null || _quizAnalysis$scores3 === void 0 ? void 0 : _quizAnalysis$scores3.mean_percentage,
         suffix: "%"
       }));

package/lib/banks/api/banks.js

@@ -32,6 +32,8 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
 
 var _helpers = require("../../common/api/helpers.js");
 
+var _copyingBanksPoller = require("./copyingBanksPoller.js");
+
 var _quizCommon = require("@instructure/quiz-common");
 
 var _lodash = require("lodash");
@@ -204,6 +206,7 @@ var updateBank = function updateBank(bank) {
 exports.updateBank = updateBank;
 
 var deleteBank = function deleteBank(bankId) {
+  (0, _copyingBanksPoller.removeFromPolling)([bankId]);
   var url = "".concat(banksApiEndpoint, "/").concat(bankId);
   return function (dispatch, getState) {
     var fetcher = new _Fetcher.default({

package/lib/banks/api/copyingBanksPoller.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.addToPolling = void 0;
+exports.removeFromPolling = exports.addToPolling = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -37,6 +37,14 @@ var addToPolling = function addToPolling(bankId, bankTitle) {
 
 exports.addToPolling = addToPolling;
 
+var removeFromPolling = function removeFromPolling(removeIds) {
+  pollingBanks = pollingBanks.filter(function (bank) {
+    return !removeIds.includes(bank.id);
+  });
+};
+
+exports.removeFromPolling = removeFromPolling;
+
 var handlePollingBanks = /*#__PURE__*/function () {
   var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(dispatch) {
     var getSpecificBanksFn,
@@ -86,7 +94,7 @@ var handlePollingBanks = /*#__PURE__*/function () {
             finishedCopyingIds = finishedCopying.map(function (bank) {
               return bank.id;
             });
-            removeFinishedCopies(finishedCopyingIds);
+            removeFromPolling(finishedCopyingIds);
 
             if (pollingBanks.length > 0) {
               setTimeout(function () {
@@ -107,10 +115,4 @@ var handlePollingBanks = /*#__PURE__*/function () {
   return function handlePollingBanks(_x) {
     return _ref.apply(this, arguments);
   };
-}();
-
-var removeFinishedCopies = function removeFinishedCopies(finishedCopyingIds) {
-  pollingBanks = pollingBanks.filter(function (bank) {
-    return !finishedCopyingIds.includes(bank.id);
-  });
-};
+}();

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

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

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

@@ -444,10 +444,10 @@ var Bank = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_cl
         return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
           margin: "small none",
           ref: this.storeCreateBankEntryButtonRef,
-          variant: "primary",
+          color: "primary",
           onClick: this.openAddBankEntryModal,
           "data-automation": "sdk-new-bank-entry-button",
-          icon: _uiIcons.IconPlusLine
+          renderIcon: _uiIcons.IconPlusLine
         }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
           alt: (0, _formatMessage.default)('Create Bank Entry')
         }, (0, _formatMessage.default)('New')));
@@ -462,7 +462,7 @@ var Bank = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_cl
         return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
           onClick: this.addBankToQuiz,
           margin: "small none",
-          icon: _uiIcons.IconPlusLine
+          renderIcon: _uiIcons.IconPlusLine
         }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
           alt: (0, _formatMessage.default)('Add this bank to quiz')
         }, (0, _formatMessage.default)('All / Random')));

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

@@ -596,13 +596,15 @@ var BankEntry = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
         text = (0, _formatMessage.default)('Edit Question Level Feedback');
       }
 
-      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
-        variant: "icon",
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
         onClick: this.openFeedbackModal,
+        withBackground: false,
+        withBorder: false,
         disabled: disabled,
         ref: this.storeFeedbackButtonRef,
-        icon: icon
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, text));
+        renderIcon: icon,
+        screenReaderLabel: text
+      });
     }
   }, {
     key: "getBankEntryId",

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