@instructure/canvas-rce 5.6.0-beta.0 → 5.6.0

package/lib/rce/plugins/instructure_icon_maker/svg/text.js

@@ -16,7 +16,7 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import { createSvgElement, splitTextIntoLines } from './utils';
-import { TEXT_BACKGROUND_PADDING, BASE_SIZE, TEXT_SIZE, MAX_CHAR_COUNT, Size } from './constants';
+import { TEXT_BACKGROUND_PADDING, BASE_SIZE, TEXT_SIZE, MAX_CHAR_COUNT, Size, TEXT_SIZE_FONT_DIFF } from './constants';
 import { Shape } from './shape';
 export function buildText(_ref) {
   let {
@@ -28,15 +28,15 @@ export function buildText(_ref) {
     size
   } = _ref;
   if (!text.trim()) return null;
+  const lines = splitTextIntoLines(text, MAX_CHAR_COUNT[textSize]);
   const textElement = createSvgElement('text', {
     x: Math.max(TEXT_BACKGROUND_PADDING, Math.floor(getTextXValue(text, textSize, size))),
-    y: getTextYValue(textPosition, textSize, shape, size),
+    y: getTextYValue(textPosition, textSize, shape, size, lines.length),
     fill: textColor || '',
     'font-family': 'Lato Extended',
     'font-size': TEXT_SIZE[textSize],
     'font-weight': 'bold'
   });
-  const lines = splitTextIntoLines(text, MAX_CHAR_COUNT[textSize]);
   const containerWidth = getContainerWidth({
     text,
     textSize,
@@ -63,16 +63,18 @@ export function buildTextBackground(_ref2) {
     size
   } = _ref2;
   if (!text.trim()) return null;
+  const linesCount = splitTextIntoLines(text, MAX_CHAR_COUNT[textSize]).length;
   const xValue = getTextXValue(text, textSize, size);
-  const yValue = getTextYValue(textPosition, textSize, shape, size);
-  const textWidth = getTextWidth(text, textSize);
-  const textHeight = getTextHeight(text, textSize);
+  const yValue = getTextYValue(textPosition, textSize, shape, size, linesCount);
+  const textWidth = getTextWidth(text, textSize); // An extra line is added due svg text baseline behavior the first line is not counted regularly.
+
+  const textHeight = getTextHeight(linesCount + 1, textSize);
   const paddingSize = TEXT_BACKGROUND_PADDING * 2;
   const pathElement = createSvgElement('path');
   const radius = 4;
   const fontWeight = 2;
   const initialX = Math.max(0, Math.floor(xValue - TEXT_BACKGROUND_PADDING)) + radius;
-  const initialY = Math.floor(yValue - TEXT_SIZE[textSize] - TEXT_BACKGROUND_PADDING / 2);
+  const initialY = Math.floor(yValue - TEXT_SIZE[textSize] + TEXT_SIZE_FONT_DIFF[textSize] - TEXT_BACKGROUND_PADDING / 2);
   const horizontalLineLength = Math.floor(textWidth + paddingSize + fontWeight) - radius * 2;
   const verticalLineLength = Math.floor(textHeight + paddingSize + fontWeight) - radius * 2;
   const d = `M${initialX},${initialY} h${horizontalLineLength} a${radius},${radius} 0 0 1 ${radius},${radius} v${verticalLineLength} a${radius},${radius} 0 0 1 ${-radius},${radius} h${-horizontalLineLength} a${radius},${radius} 0 0 1 ${-radius},${-radius} v${-verticalLineLength} a${radius},${radius} 0 0 1 ${radius},${-radius} z`;
@@ -105,9 +107,10 @@ export function getContainerHeight(_ref4) {
     return base;
   }
 
-  const textYValue = getTextYValue(textPosition, textSize, shape, size);
-  const extraTextHeight = getTextHeight(text, textSize) - TEXT_SIZE[textSize];
-  const textBackgroundHeight = textYValue + extraTextHeight + TEXT_BACKGROUND_PADDING * 2;
+  const linesCount = splitTextIntoLines(text, MAX_CHAR_COUNT[textSize]).length;
+  const textYValue = getTextYValue(textPosition, textSize, shape, size, linesCount);
+  const textHeight = getTextHeight(linesCount, textSize);
+  const textBackgroundHeight = textYValue + textHeight + TEXT_BACKGROUND_PADDING * 2;
   return Math.max(base, textBackgroundHeight);
 }
 
@@ -120,9 +123,10 @@ function getTextWidth(text, textSize) {
   return Math.max(...widths);
 }
 
-function getTextHeight(text, textSize) {
-  const linesCount = splitTextIntoLines(text, MAX_CHAR_COUNT[textSize]).length;
-  return linesCount * TEXT_SIZE[textSize];
+function getTextHeight(linesCount, textSize) {
+  // Since the svg text's initial Y position starts on the bottom of the first line
+  // one line is subtracted to the count
+  return (linesCount - 1) * TEXT_SIZE[textSize];
 }
 
 function getTextXValue(text, textSize, size) {
@@ -135,13 +139,23 @@ function getTextXValue(text, textSize, size) {
   return Math.floor((containerWidth - textWidth) * 0.5);
 }
 
-function getTextYValue(textPosition, textSize, shape, size) {
+function getTextYValue(textPosition, textSize, shape, size, linesCount) {
   switch (textPosition) {
     case 'middle':
-      return getYMiddleText(textSize, shape, size);
+      {
+        const baseline = getYMiddleText(textSize, shape, size); // Represents the Y difference for multiline text to keep it vertically centered
+
+        const multilineDiff = (linesCount - 1) * TEXT_SIZE[textSize] / 2;
+        return baseline - multilineDiff;
+      }
 
     case 'bottom-third':
-      return getYBottomThirdText(textSize, shape, size);
+      {
+        const baseline = getYBottomThirdText(textSize, shape, size); // Represents the Y difference for multiline text to keep it vertically centered
+
+        const multilineDiff = (linesCount - 1) * TEXT_SIZE[textSize] / 2;
+        return baseline - multilineDiff;
+      }
 
     case 'below':
       return getYBelowText(textSize, shape, size);
@@ -228,16 +242,16 @@ function getYMiddleTextForShape(getYTextSizeCallback, shape, size) {
 function getYMiddleSmallTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
-      return 44;
+      return 43;
 
     case Size.Small:
-      return 68;
+      return 67;
 
     case Size.Medium:
-      return 86;
+      return 85;
 
     case Size.Large:
-      return 116;
+      return 115;
 
     default:
       throw new Error(`Invalid size: ${size}`);
@@ -247,16 +261,16 @@ function getYMiddleSmallTextForShape(size) {
 function getYMiddleMediumTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
-      return 45;
+      return 43;
 
     case Size.Small:
-      return 69;
+      return 67;
 
     case Size.Medium:
-      return 87;
+      return 85;
 
     case Size.Large:
-      return 117;
+      return 115;
 
     default:
       throw new Error(`Invalid size: ${size}`);
@@ -266,16 +280,16 @@ function getYMiddleMediumTextForShape(size) {
 function getYMiddleLargeTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
-      return 48;
+      return 45;
 
     case Size.Small:
-      return 72;
+      return 69;
 
     case Size.Medium:
-      return 90;
+      return 87;
 
     case Size.Large:
-      return 120;
+      return 117;
 
     default:
       throw new Error(`Invalid size: ${size}`);
@@ -285,16 +299,16 @@ function getYMiddleLargeTextForShape(size) {
 function getYMiddleXLargeTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
-      return 51;
+      return 47;
 
     case Size.Small:
-      return 75;
+      return 71;
 
     case Size.Medium:
-      return 93;
+      return 89;
 
     case Size.Large:
-      return 123;
+      return 119;
 
     default:
       throw new Error(`Invalid size: ${size}`);
@@ -304,16 +318,16 @@ function getYMiddleXLargeTextForShape(size) {
 function getYBottomThirdSmallTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
-      return 77;
+      return 73;
 
     case Size.Small:
-      return 125;
+      return 121;
 
     case Size.Medium:
-      return 161;
+      return 157;
 
     case Size.Large:
-      return 221;
+      return 217;
 
     default:
       throw new Error(`Invalid size: ${size}`);
@@ -323,16 +337,16 @@ function getYBottomThirdSmallTextForShape(size) {
 function getYBottomThirdMediumTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
-      return 78;
+      return 74;
 
     case Size.Small:
-      return 126;
+      return 122;
 
     case Size.Medium:
-      return 162;
+      return 158;
 
     case Size.Large:
-      return 222;
+      return 218;
 
     default:
       throw new Error(`Invalid size: ${size}`);
@@ -342,16 +356,16 @@ function getYBottomThirdMediumTextForShape(size) {
 function getYBottomThirdLargeTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
-      return 81;
+      return 75;
 
     case Size.Small:
-      return 129;
+      return 123;
 
     case Size.Medium:
-      return 165;
+      return 159;
 
     case Size.Large:
-      return 225;
+      return 219;
 
     default:
       throw new Error(`Invalid size: ${size}`);
@@ -361,16 +375,16 @@ function getYBottomThirdLargeTextForShape(size) {
 function getYBottomThirdXLargeTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
-      return 84;
+      return 77;
 
     case Size.Small:
-      return 132;
+      return 125;
 
     case Size.Medium:
-      return 168;
+      return 161;
 
     case Size.Large:
-      return 228;
+      return 221;
 
     default:
       throw new Error(`Invalid size: ${size}`);

package/lib/rce/plugins/instructure_icon_maker/svg/utils.js

@@ -25,14 +25,15 @@ export function createSvgElement(tag) {
   return element;
 }
 export function splitTextIntoLines(text, maxChars) {
-  const trimmedText = text.trim();
+  // Removes the beginning or trailing spaces, newlines or tabs.
+  const trimmedText = text.replace(/^\s+|\s+$/g, '');
 
   if (!text || trimmedText.length === 0 || maxChars <= 0) {
     return [];
   }
 
   const lines = [];
-  const words = trimmedText.split(' ');
+  const words = trimmedText.match(/\S+/g);
 
   while (words.length) {
     let newLineNeeded = false;

package/lib/rce/plugins/instructure_icon_maker/utils/IconMakerFormHasChanges.js

@@ -0,0 +1,83 @@
+/*
+ * Copyright (C) 2022 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import _ from 'lodash';
+export class IconMakerFormHasChanges {
+  constructor(initSettings, currSettings) {
+    this.initialSettings = void 0;
+    this.currentSettings = void 0;
+    this.initialSettings = initSettings;
+    this.currentSettings = currSettings;
+  }
+
+  hasNameChange() {
+    return 'name' in this.currentSettings && this.initialSettings.name !== this.currentSettings.name;
+  }
+
+  hasAltChange() {
+    return 'alt' in this.currentSettings && this.initialSettings.alt !== this.currentSettings.alt;
+  }
+
+  hasShapeNameChange() {
+    return 'shape' in this.currentSettings && this.initialSettings.shape !== this.currentSettings.shape;
+  }
+
+  hasShapeSizeChange() {
+    return 'size' in this.currentSettings && this.initialSettings.size !== this.currentSettings.size;
+  }
+
+  hasColorNameChange() {
+    return 'color' in this.currentSettings && this.initialSettings.color !== this.currentSettings.color;
+  }
+
+  hasOutlineSizeChange() {
+    return 'outlineSize' in this.currentSettings && this.initialSettings.outlineSize !== this.currentSettings.outlineSize;
+  }
+
+  hasOutlineColorChange() {
+    return 'outlineColor' in this.currentSettings && this.initialSettings.outlineColor !== this.currentSettings.outlineColor;
+  }
+
+  hasTextChange() {
+    return 'text' in this.currentSettings && this.initialSettings.text !== this.currentSettings.text;
+  }
+
+  hasTextSizeChange() {
+    return 'textSize' in this.currentSettings && this.initialSettings.textSize !== this.currentSettings.textSize;
+  }
+
+  hasTextColorChange() {
+    return 'textColor' in this.currentSettings && this.initialSettings.textColor !== this.currentSettings.textColor;
+  }
+
+  hasTextBackgroundColorChange() {
+    return 'textBackgroundColor' in this.currentSettings && this.initialSettings.textBackgroundColor !== this.currentSettings.textBackgroundColor;
+  }
+
+  hasTextPositionChange() {
+    return 'textPosition' in this.currentSettings && this.initialSettings.textPosition !== this.currentSettings.textPosition;
+  }
+
+  hasImageSettingsChange() {
+    return 'imageSettings' in this.currentSettings && !_.isEqual(this.initialSettings.imageSettings, this.currentSettings.imageSettings);
+  }
+
+  hasChanges() {
+    return this.hasNameChange() || this.hasAltChange() || this.hasShapeNameChange() || this.hasShapeSizeChange() || this.hasColorNameChange() || this.hasOutlineColorChange() || this.hasOutlineSizeChange() || this.hasTextChange() || this.hasTextSizeChange() || this.hasTextColorChange() || this.hasTextBackgroundColorChange() || this.hasTextPositionChange() || this.hasImageSettingsChange();
+  }
+
+}

package/lib/rce/plugins/instructure_icon_maker/utils/round.js

@@ -0,0 +1,25 @@
+/*
+ * Copyright (C) 2022 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+export default function round(number) {
+  let decimalDigits = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+  if (decimalDigits < 0) throw new Error('decimal digits must be >= 0');
+  if (decimalDigits % 1 !== 0) throw new Error('decimal digits must be a whole number');
+  const val = Math.round(number * 10 ** decimalDigits) / 10 ** decimalDigits;
+  if (Number.isNaN(val)) throw new Error('the first arguments must be a number');
+  return val === 0 ? 0 : val; // prevent round(-0) from returning -0
+}

package/lib/rce/plugins/instructure_image/ImageList/Image.js

@@ -72,7 +72,7 @@ export default function Image(_ref) {
     constrain: "cover",
     draggable: true,
     height: "6rem",
-    inline: false,
+    display: "block",
     onDragStart: handleDragStart,
     onDragEnd: handleDragEnd,
     src: image.thumbnail_url,

package/lib/rce/plugins/instructure_image/ImageList/index.js

@@ -30,7 +30,7 @@ export default function ImageList(_ref) {
     height: "100%",
     margin: "xx-small",
     padding: "small",
-    wrapItems: true
+    wrap: "wrap"
   }, images.map((image, index) => {
     let focusRef = null;
 

package/lib/rce/plugins/instructure_image/ImageOptionsTray/index.js

@@ -165,10 +165,10 @@ export default function ImageOptionsTray(props) {
   }, /*#__PURE__*/React.createElement(Heading, {
     as: "h2"
   }, formatMessage('Image Options'))), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
-    placemet: "static",
-    variant: "icon",
-    onClick: onRequestClose
-  }, formatMessage('Close'))))), /*#__PURE__*/React.createElement(Flex.Item, {
+    color: "primary",
+    onClick: onRequestClose,
+    screenReaderLabel: formatMessage('Close')
+  })))), /*#__PURE__*/React.createElement(Flex.Item, {
     as: "form",
     grow: true,
     margin: "none",

package/lib/rce/plugins/instructure_links/components/Link.js

@@ -27,46 +27,9 @@ import { Flex } from '@instructure/ui-flex';
 import { View } from '@instructure/ui-view';
 import { Text } from '@instructure/ui-text';
 import { Focusable } from '@instructure/ui-focusable';
-import { SVGIcon } from '@instructure/ui-svg-images';
-import { IconDragHandleLine, IconAssignmentLine, IconDiscussionLine, IconModuleLine, IconQuizLine, IconAnnouncementLine, IconPublishSolid, IconUnpublishedSolid, IconDocumentLine } from '@instructure/ui-icons';
-
-function IconBlank() {
-  return /*#__PURE__*/React.createElement(SVGIcon, {
-    name: "IconBlank",
-    viewBox: "0 0 1920 1920"
-  }, /*#__PURE__*/React.createElement("g", {
-    role: "presentation"
-  }));
-}
-
-function getIcon(type) {
-  switch (type) {
-    case 'assignments':
-      return IconAssignmentLine;
-
-    case 'discussions':
-      return IconDiscussionLine;
-
-    case 'modules':
-      return IconModuleLine;
-
-    case 'quizzes':
-      return IconQuizLine;
-
-    case 'announcements':
-      return IconAnnouncementLine;
-
-    case 'wikiPages':
-      return IconDocumentLine;
-
-    case 'navigation':
-      return IconBlank;
-
-    default:
-      return IconDocumentLine;
-  }
-}
-
+import { IconDragHandleLine, IconPublishSolid, IconUnpublishedSolid } from '@instructure/ui-icons';
+import RCEGlobals from '../../../RCEGlobals';
+import { getIcon } from '../../shared/linkUtils';
 export default function Link(props) {
   const [isHovering, setIsHovering] = useState(false);
   const {
@@ -75,7 +38,8 @@ export default function Link(props) {
     date,
     date_type
   } = props.link;
-  const Icon = getIcon(props.type);
+  const type = props.type === 'quizzes' && props.link.quiz_type === 'quizzes.next' ? 'quizzes.next' : props.type;
+  const Icon = getIcon(type);
   const color = published ? 'success' : 'primary';
   let dateString = null;
 
@@ -83,8 +47,11 @@ export default function Link(props) {
     if (date === 'multiple') {
       dateString = formatMessage('Due: Multiple Dates');
     } else {
+      var _RCEGlobals$getConfig;
+
       // Uses user locale and timezone
-      const when = formatMessage.date(applyTimezoneOffsetToDate(date, ENV.TIMEZONE), 'long');
+      const configuredTimezone = (_RCEGlobals$getConfig = RCEGlobals.getConfig()) === null || _RCEGlobals$getConfig === void 0 ? void 0 : _RCEGlobals$getConfig.timezone;
+      const when = formatMessage.date(applyTimezoneOffsetToDate(date, configuredTimezone), 'long');
 
       switch (date_type) {
         case 'todo':
@@ -196,7 +163,8 @@ export default function Link(props) {
       color: color
     }, /*#__PURE__*/React.createElement(Icon, {
       size: "x-small",
-      inline: false
+      inline: false,
+      "data-type": type
     }))), /*#__PURE__*/React.createElement(Flex.Item, {
       padding: "0 x-small 0 0",
       grow: true,

package/lib/rce/plugins/instructure_links/components/LinkOptionsTray/index.js

@@ -160,10 +160,10 @@ export default function LinkOptionsTray(props) {
   }, /*#__PURE__*/React.createElement(Heading, {
     as: "h2"
   }, formatMessage('Link Options'))), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
-    placement: "static",
-    variant: "icon",
-    onClick: props.onRequestClose
-  }, formatMessage('Close'))))), /*#__PURE__*/React.createElement(Flex.Item, {
+    color: "primary",
+    onClick: props.onRequestClose,
+    screenReaderLabel: formatMessage('Close')
+  })))), /*#__PURE__*/React.createElement(Flex.Item, {
     as: "form",
     grow: true,
     margin: "none",

package/lib/rce/plugins/instructure_links/components/LinkSet.js

@@ -104,8 +104,7 @@ class LinkSet extends Component {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScreenReaderContent, {
       id: this.describedByID
     }, formatMessage('Click to insert a link into the editor.')), /*#__PURE__*/React.createElement(List, {
-      variant: "unstyled",
-      as: "ul",
+      isUnstyled: true,
       margin: "0"
     }, this.props.collection.links.map((link, index, array) => /*#__PURE__*/React.createElement(List.Item, {
       key: link.href,

package/lib/rce/plugins/instructure_media_embed/components/Embed.js

@@ -38,8 +38,9 @@ export function Embed(_ref) {
   }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(CloseButton, {
     onClick: onDismiss,
     offset: "medium",
-    placement: "end"
-  }, formatMessage('Close')), /*#__PURE__*/React.createElement(Heading, null, formatMessage('Embed'))), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement(TextArea, {
+    placement: "end",
+    screenReaderLabel: formatMessage('Close')
+  }), /*#__PURE__*/React.createElement(Heading, null, formatMessage('Embed'))), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement(TextArea, {
     maxHeight: "10rem",
     label: formatMessage('Embed Code'),
     value: embedCode,

package/lib/rce/plugins/instructure_record/AudioOptionsTray/index.js

@@ -77,9 +77,10 @@ export default function AudioOptionsTray(_ref) {
     as: "h2"
   }, formatMessage('Audio Options'))), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
     placement: "static",
-    variant: "icon",
-    onClick: onDismiss
-  }, formatMessage('Close'))))), /*#__PURE__*/React.createElement(Flex.Item, {
+    color: "primary",
+    onClick: onDismiss,
+    screenReaderLabel: formatMessage('Close')
+  })))), /*#__PURE__*/React.createElement(Flex.Item, {
     as: "form",
     grow: true,
     margin: "none",

package/lib/rce/plugins/instructure_record/VideoOptionsTray/index.js

@@ -17,8 +17,7 @@
  */
 import React, { useState } from 'react';
 import { arrayOf, bool, func, number, shape, string } from 'prop-types';
-import { ScreenReaderContent } from '@instructure/ui-a11y-content';
-import { Button, CloseButton } from '@instructure/ui-buttons';
+import { Button, CloseButton, IconButton } from '@instructure/ui-buttons';
 import { Heading } from '@instructure/ui-heading';
 import { RadioInput, RadioInputGroup } from '@instructure/ui-radio-input';
 import { SimpleSelect } from '@instructure/ui-simple-select';
@@ -129,16 +128,18 @@ export default function VideoOptionsTray(props) {
   }, /*#__PURE__*/React.createElement(Tooltip, {
     on: ['hover', 'focus'],
     placement: "top",
-    tip: /*#__PURE__*/React.createElement(View, {
+    renderTip: /*#__PURE__*/React.createElement(View, {
       display: "block",
       id: "alt-text-label-tooltip",
       maxWidth: "14rem"
     }, tooltipText)
-  }, /*#__PURE__*/React.createElement(Button, {
-    icon: IconQuestionLine,
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    renderIcon: IconQuestionLine,
     size: "small",
-    variant: "icon"
-  }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, tooltipText)))));
+    screenReaderLabel: tooltipText,
+    withBackground: false,
+    withBorder: false
+  }))));
   const messagesForSize = [];
 
   if (videoSize !== CUSTOM) {
@@ -179,10 +180,10 @@ export default function VideoOptionsTray(props) {
   }, /*#__PURE__*/React.createElement(Heading, {
     as: "h2"
   }, formatMessage('Video Options'))), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
-    placemet: "static",
-    variant: "icon",
-    onClick: onRequestClose
-  }, formatMessage('Close'))))), /*#__PURE__*/React.createElement(Flex.Item, {
+    color: "primary",
+    onClick: onRequestClose,
+    screenReaderLabel: formatMessage('Close')
+  })))), /*#__PURE__*/React.createElement(Flex.Item, {
     as: "form",
     grow: true,
     margin: "none",

package/lib/rce/plugins/shared/ColorInput.js

@@ -152,14 +152,15 @@ export const ColorInput = _ref => {
       }, isOpen ? /*#__PURE__*/React.createElement(IconArrowOpenUpLine, null) : /*#__PURE__*/React.createElement(IconArrowOpenDownLine, null))
     }, /*#__PURE__*/React.createElement(CloseButton, {
       placement: "end",
-      onClick: () => setIsOpen(false)
-    }, formatMessage('Close')), /*#__PURE__*/React.createElement(Flex, {
+      onClick: () => setIsOpen(false),
+      screenReaderLabel: formatMessage('Close')
+    }), /*#__PURE__*/React.createElement(Flex, {
       alignItems: "center",
       as: "div",
       justifyItems: requireColor ? 'start' : 'center',
       padding: "x-large x-small small",
       width: "175px",
-      wrapItems: true,
+      wrap: "wrap",
       "data-testid": `${name}-popover`
     }, requireColor ? colorPreviews.slice(0, -1) : colorPreviews));
   }

package/lib/rce/plugins/shared/ImageOptionsForm.js

@@ -54,13 +54,13 @@ const ImageOptionsForm = _ref => {
   }, /*#__PURE__*/React.createElement(Tooltip, {
     on: ['hover', 'focus'],
     placement: "top",
-    tip: /*#__PURE__*/React.createElement(View, {
+    renderTip: /*#__PURE__*/React.createElement(View, {
       display: "block",
       id: "alt-text-label-tooltip",
       maxWidth: "14rem"
     }, tooltipText)
   }, /*#__PURE__*/React.createElement(Button, {
-    icon: IconQuestionLine,
+    renderIcon: IconQuestionLine,
     size: "small",
     variant: "icon"
   }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, tooltipText)))));