Merge branch '6.2' into 6

Author: github-actions[bot]

client/dist/js/bundle.js

@@ -13,6 +13,7 @@ import backend from 'lib/Backend';
 import Config from 'lib/Config';
 import { ElementEditorContext } from 'components/ElementEditor/ElementEditor';
 import getJsonErrorMessage from 'lib/getJsonErrorMessage';
+import ElementOptionButton from './ElementOptionButton';
 
 /**
  * The AddElementPopover component used in the context of an ElementEditor shows the
@@ -77,10 +78,10 @@ const AddElementPopover = ({
   );
 
   const buttons = elementTypes.map((elementType) => ({
-    content: <span className="btn__title">{elementType.title}</span>,
+    content: elementType.title,
     key: elementType.name,
     className: classNames('btn--icon-xl', 'element-editor-add-element__button'),
-    icon: elementType.icon.replace(/^(font-icon-)/g, ''),
+    icon: elementType.icon,
     onClick: getElementButtonClickHandler(elementType),
   }));
 
@@ -94,6 +95,7 @@ const AddElementPopover = ({
       placement={placement}
       target={target}
       toggle={handleToggle}
+      ButtonComponent={ElementOptionButton}
     />
   );
 };

client/src/components/ElementEditor/AddElementPopover.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Button as BaseButton } from 'reactstrap';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+
+const ElementOptionButton = ({
+  icon,
+  className,
+  noText = false,
+  children,
+  ...props
+}) =>
+  (<BaseButton
+    className={classnames(className, { 'btn--no-text': noText })}
+    aria-label={noText ? children : undefined}
+    {...props}
+  >
+    {icon && <span className={`btn__icon ${icon}`} aria-hidden="true" />}
+    {noText ? undefined : <span className="btn__title">{children}</span>}
+  </BaseButton>);
+
+ElementOptionButton.propTypes = {
+  ...BaseButton.propTypes,
+  noText: PropTypes.bool,
+  icon: PropTypes.string,
+};
+
+ElementOptionButton.defaultProps = {
+  ...BaseButton.defaultProps,
+  noText: false
+};
+
+export default ElementOptionButton;