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

config.js

@@ -871,7 +871,7 @@ var config = {
     // customParticipantMenuButtons: [],
 
     // An array with custom option buttons for the toolbar
-    // type:  Array<{ icon: string; id: string; text: string; }>
+    // type:  Array<{ icon: string; id: string; text: string; backgroundColor?: string; }>
     // customToolbarButtons: [],
 
     // Stats

react/features/base/config/configType.ts

@@ -270,7 +270,7 @@ export interface IConfig {
     };
     corsAvatarURLs?: Array<string>;
     customParticipantMenuButtons?: Array<{ icon: string; id: string; text: string; }>;
-    customToolbarButtons?: Array<{ icon: string; id: string; text: string; }>;
+    customToolbarButtons?: Array<{ backgroundColor?: string; icon: string; id: string; text: string; }>;
     deeplinking?: IDeeplinkingConfig;
     defaultLanguage?: string;
     defaultLocalDisplayName?: string;

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

react/features/base/ui/components/web/ContextMenuItem.tsx

@@ -16,6 +16,11 @@ export interface IProps {
      */
     accessibilityLabel: string;
 
+    /**
+     * The context menu item background color.
+     */
+    backgroundColor?: string;
+
     /**
      * Component children.
      */
@@ -163,6 +168,7 @@ const useStyles = makeStyles()(theme => {
 
 const ContextMenuItem = ({
     accessibilityLabel,
+    backgroundColor,
     children,
     className,
     controls,
@@ -181,7 +187,7 @@ const ContextMenuItem = ({
     textClassName }: IProps) => {
     const { classes: styles, cx } = useStyles();
     const _overflowDrawer: boolean = useSelector(showOverflowDrawer);
-
+    const style = backgroundColor ? { backgroundColor } : {};
     const onKeyPressHandler = useCallback(e => {
         // only trigger the fallback behavior (onClick) if we dont have any explicit keyboard event handler
         if (onClick && !onKeyPress && !onKeyDown && (e.key === 'Enter' || e.key === ' ')) {
@@ -223,6 +229,7 @@ const ContextMenuItem = ({
             onKeyDown = { disabled ? undefined : onKeyDown }
             onKeyPress = { disabled ? undefined : onKeyPressHandler }
             role = { onClick ? role : undefined }
+            style = { style }
             tabIndex = { onClick ? tabIndex : undefined }>
             {customIcon ? customIcon
                 : icon && <Icon

react/features/toolbox/components/web/CustomOptionButton.tsx

@@ -4,6 +4,7 @@ import AbstractButton, { IProps as AbstractButtonProps } from '../../../base/too
 
 
 interface IProps extends AbstractButtonProps {
+    backgroundColor?: string;
     icon: string;
     id?: string;
     text: string;
@@ -18,6 +19,7 @@ class CustomOptionButton extends AbstractButton<IProps> {
     iconSrc = this.props.icon;
     id = this.props.id;
     text = this.props.text;
+    backgroundColor = this.props.backgroundColor;
 
     accessibilityLabel = this.text;
 

react/features/toolbox/components/web/Toolbox.tsx

@@ -63,7 +63,7 @@ interface IProps extends WithTranslation {
     /**
      * Custom Toolbar buttons.
      */
-    _customToolbarButtons?: Array<{ icon: string; id: string; text: string; }>;
+    _customToolbarButtons?: Array<{ backgroundColor?: string; icon: string; id: string; text: string; }>;
 
     /**
      * Whether or not a dialog is displayed.

react/features/toolbox/functions.web.ts

@@ -199,6 +199,7 @@ export function getToolbarTimeout(state: IReduxState) {
     * @returns {Object} The button maps mainMenuButtons and overflowMenuButtons.
     */
 export function getAllToolboxButtons(_customToolbarButtons?: {
+    backgroundColor?: string;
     icon: string;
     id: string;
     text: string;
@@ -395,10 +396,11 @@ export function getAllToolboxButtons(_customToolbarButtons?: {
         group: 4
     };
 
-    const customButtons = _customToolbarButtons?.reduce((prev, { icon, id, text }) => {
+    const customButtons = _customToolbarButtons?.reduce((prev, { backgroundColor, icon, id, text }) => {
         return {
             ...prev,
             [id]: {
+                backgroundColor,
                 key: id,
                 Content: CustomOptionButton,
                 group: 4,