feat(toolbox): add disabledStyles to AbstractButton

It allows for specifying an override style collection which is applied when the
button is disabled.

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

@@ -2,6 +2,8 @@
 
 import React, { Component } from 'react';
 
+import { combineStyles } from '../../styles';
+
 import type { Styles } from './AbstractToolboxItem';
 import ToolboxItem from './ToolboxItem';
 
@@ -12,6 +14,12 @@ export type Props = {
      */
     afterClick: ?Function,
 
+    /**
+     * Extra styles which will be applied in conjunction with `styles` or
+     * `toggledStyles` when the button is disabled;
+     */
+    disabledStyles: ?Styles,
+
     /**
      * Whether to show the label or not.
      */
@@ -38,12 +46,27 @@ export type Props = {
     visible: boolean
 };
 
+/**
+ * Default style for disabled buttons.
+ */
+export const defaultDisabledButtonStyles = {
+    iconStyle: {
+        opacity: 0.5
+    },
+    labelStyle: {
+        opacity: 0.5
+    },
+    style: undefined,
+    underlayColor: undefined
+};
+
 /**
  * An abstract implementation of a button.
  */
 export default class AbstractButton<P: Props, S: *> extends Component<P, S> {
     static defaultProps = {
         afterClick: undefined,
+        disabledStyles: defaultDisabledButtonStyles,
         showLabel: false,
         styles: undefined,
         toggledStyles: undefined,
@@ -151,10 +174,25 @@ export default class AbstractButton<P: Props, S: *> extends Component<P, S> {
      * @private
      * @returns {?Styles}
      */
-    _getStyles() {
-        const { styles, toggledStyles } = this.props;
+    _getStyles(): ?Styles {
+        const { disabledStyles, styles, toggledStyles } = this.props;
+        const buttonStyles
+            = (this._isToggled() ? toggledStyles : styles) || styles;
+
+        if (this._isDisabled() && buttonStyles && disabledStyles) {
+            return {
+                iconStyle: combineStyles(
+                    buttonStyles.iconStyle, disabledStyles.iconStyle),
+                labelStyle: combineStyles(
+                    buttonStyles.labelStyle, disabledStyles.labelStyle),
+                style: combineStyles(
+                    buttonStyles.style, disabledStyles.style),
+                underlayColor:
+                    disabledStyles.underlayColor || buttonStyles.underlayColor
+            };
+        }
 
-        return (this._isToggled() ? toggledStyles : styles) || styles;
+        return buttonStyles;
     }
 
     /**

react/features/base/toolbox/components/AbstractToolboxItem.js

@@ -2,27 +2,29 @@
 
 import { Component } from 'react';
 
+import type { StyleType } from '../../styles';
+
 export type Styles = {
 
     /**
      * Style for the item's icon.
      */
-    iconStyle: Object,
+    iconStyle: StyleType,
 
     /**
      * Style for the item's label.
      */
-    labelStyle: Object,
+    labelStyle: StyleType,
 
     /**
      * Style for the item itself.
      */
-    style: Object,
+    style: StyleType,
 
     /**
      * Color for the item underlay (shows when clicked).
      */
-    underlayColor: string
+    underlayColor: ?string
 };
 
 export type Props = {