feat(toolbar-buttons) Add optional background color (#13691)

react/features/base/toolbox/components/AbstractButton.tsx

@@ -16,6 +16,11 @@ export interface IProps extends WithTranslation {
      */
     afterClick?: Function;
 
+    /**
+     * The button's background color.
+     */
+    backgroundColor?: string;
+
     /**
      * The button's key.
      */
@@ -108,6 +113,13 @@ export default class AbstractButton<P extends IProps, S=any> extends Component<P
         visible: true
     };
 
+    /**
+     * The button's background color.
+     *
+     * @abstract
+     */
+    backgroundColor?: string;
+
     /**
      * A succinct description of what the button does. Used by accessibility
      * tools and torture tests.

react/features/base/toolbox/components/ToolboxItem.web.tsx

@@ -9,6 +9,11 @@ import type { IProps as AbstractToolboxItemProps } from './AbstractToolboxItem';
 
 interface IProps extends AbstractToolboxItemProps {
 
+    /**
+     * The button's background color.
+     */
+    backgroundColor?: string;
+
     /**
      * Whether or not the item is displayed in a context menu.
      */
@@ -60,6 +65,7 @@ export default class ToolboxItem extends AbstractToolboxItem<IProps> {
      */
     _renderItem() {
         const {
+            backgroundColor,
             contextMenu,
             disabled,
             elementAfter,
@@ -90,6 +96,7 @@ export default class ToolboxItem extends AbstractToolboxItem<IProps> {
             return (
                 <ContextMenuItem
                     accessibilityLabel = { this.accessibilityLabel }
+                    backgroundColor = { backgroundColor }
                     disabled = { disabled }
                     icon = { icon }
                     onClick = { onClick }
@@ -128,14 +135,18 @@ export default class ToolboxItem extends AbstractToolboxItem<IProps> {
      * @returns {ReactElement}
      */
     _renderIcon() {
-        const { customClass, disabled, icon, showLabel, toggled } = this.props;
+        const { backgroundColor, customClass, disabled, icon, showLabel, toggled } = this.props;
         const iconComponent = (<Icon
             size = { showLabel ? undefined : 24 }
             src = { icon } />);
         const elementType = showLabel ? 'span' : 'div';
         const className = `${showLabel ? 'overflow-menu-item-icon' : 'toolbox-icon'} ${
             toggled ? 'toggled' : ''} ${disabled ? 'disabled' : ''} ${customClass ?? ''}`;
+        const style = backgroundColor && !showLabel ? { backgroundColor } : {};
 
-        return React.createElement(elementType, { className }, iconComponent);
+        return React.createElement(elementType, {
+            className,
+            style
+        }, iconComponent);
     }
 }