feat(toolbar-button-clicked) Enhance toolbar buttons with notify click

- add possibility to allow execution of the button's routine besides triggering
`toolbarButtonClicked` API event
- keep backwards compatibility
- get rid of `ToolbarButton`

react/features/toolbox/components/web/VideoSettingsButton.js

@@ -16,6 +16,11 @@ import VideoMuteButton from '../VideoMuteButton';
 
 type Props = {
 
+    /**
+     * The button's key.
+     */
+     buttonKey?: string,
+
     /**
      * External handler for click action.
      */
@@ -41,6 +46,12 @@ type Props = {
      */
     isDisabled: boolean,
 
+    /**
+     * Notify mode for `toolbarButtonClicked` event -
+     * whether to only notify or to also prevent button click routine.
+     */
+    notifyMode?: string,
+
     /**
      * Flag controlling the visibility of the button.
      * VideoSettings popup is currently disabled on mobile browsers
@@ -112,13 +123,7 @@ class VideoSettingsButton extends Component<Props> {
      * @returns {void}
      */
     _onClick() {
-        const { handleClick, onVideoOptionsClick } = this.props;
-
-        if (handleClick) {
-            handleClick();
-
-            return;
-        }
+        const { onVideoOptionsClick } = this.props;
 
         onVideoOptionsClick();
     }
@@ -129,7 +134,7 @@ class VideoSettingsButton extends Component<Props> {
      * @inheritdoc
      */
     render() {
-        const { handleClick, t, visible, isOpen } = this.props;
+        const { t, visible, isOpen, buttonKey, notifyMode } = this.props;
 
         return visible ? (
             <VideoSettingsPopup>
@@ -138,16 +143,22 @@ class VideoSettingsButton extends Component<Props> {
                     ariaExpanded = { isOpen }
                     ariaHasPopup = { true }
                     ariaLabel = { this.props.t('toolbar.videoSettings') }
+                    buttonKey = { buttonKey }
                     icon = { IconArrowUp }
                     iconDisabled = { this._isIconDisabled() }
                     iconId = 'video-settings-button'
                     iconTooltip = { t('toolbar.videoSettings') }
+                    notifyMode = { notifyMode }
                     onIconClick = { this._onClick }
                     onIconKeyDown = { this._onEscClick }>
-                    <VideoMuteButton handleClick = { handleClick } />
+                    <VideoMuteButton
+                        buttonKey = { buttonKey }
+                        notifyMode = { notifyMode } />
                 </ToolboxButtonWithIcon>
             </VideoSettingsPopup>
-        ) : <VideoMuteButton handleClick = { handleClick } />;
+        ) : <VideoMuteButton
+            buttonKey = { buttonKey }
+            notifyMode = { notifyMode } />;
     }
 }