ref(participants-pane) Use new button component (#11913)

react/features/base/components/buttons/QuickActionButton.js

@@ -1,67 +0,0 @@
-// @flow
-
-import { makeStyles } from '@material-ui/styles';
-import React from 'react';
-
-type Props = {
-
-    /**
-     * Label used for accessibility.
-     */
-    accessibilityLabel: string,
-
-    /**
-     * Additional class name for custom styles.
-     */
-    className: string,
-
-    /**
-     * Children of the component.
-     */
-    children: string | React$Node,
-
-    /**
-     * Click handler.
-     */
-    onClick: Function,
-
-    /**
-     * Data test id.
-     */
-    testId?: string
-}
-
-const useStyles = makeStyles(theme => {
-    return {
-        button: {
-            backgroundColor: theme.palette.action01,
-            color: theme.palette.text01,
-            borderRadius: `${theme.shape.borderRadius}px`,
-            ...theme.typography.labelBold,
-            lineHeight: `${theme.typography.labelBold.lineHeight}px`,
-            padding: '8px 12px',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            border: 0,
-
-            '&:hover': {
-                backgroundColor: theme.palette.action01Hover
-            }
-        }
-    };
-});
-
-const QuickActionButton = ({ accessibilityLabel, className, children, onClick, testId }: Props) => {
-    const styles = useStyles();
-
-    return (<button
-        aria-label = { accessibilityLabel }
-        className = { `${styles.button} ${className}` }
-        data-testid = { testId }
-        onClick = { onClick }>
-        {children}
-    </button>);
-};
-
-export default QuickActionButton;

react/features/base/components/index.js

@@ -1,4 +1,3 @@
 export { default as ContextMenu } from './context-menu/ContextMenu';
 export { default as ContextMenuItemGroup } from './context-menu/ContextMenuItemGroup';
 export { default as ListItem } from './participants-pane-list/ListItem';
-export { default as QuickActionButton } from './buttons/QuickActionButton';

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

@@ -11,6 +11,11 @@ import { ButtonProps } from '../types';
 
 interface IButtonProps extends ButtonProps {
 
+    /**
+     * Class name used for additional styles.
+     */
+    className?: string,
+
     /**
      * Whether or not the button should be full width.
      */
@@ -24,12 +29,17 @@ interface IButtonProps extends ButtonProps {
     /**
      * Click callback.
      */
-    onClick: () => void;
+    onClick: (e?: React.MouseEvent<HTMLButtonElement>) => void;
 
     /**
      * Which size the button should be.
      */
     size?: 'small' | 'medium' | 'large';
+
+    /**
+     * Data test id.
+     */
+    testId?: string;
 }
 
 const useStyles = makeStyles((theme: Theme) => {
@@ -163,6 +173,7 @@ const useStyles = makeStyles((theme: Theme) => {
 
 const Button = ({
     accessibilityLabel,
+    className,
     disabled,
     fullWidth,
     icon,
@@ -170,6 +181,7 @@ const Button = ({
     label,
     onClick,
     size = 'medium',
+    testId,
     type = BUTTON_TYPES.PRIMARY
 }: IButtonProps) => {
     const styles = useStyles();
@@ -180,7 +192,8 @@ const Button = ({
             className = { clsx(styles.button, styles[type],
                 disabled && styles.disabled,
                 icon && !label && `${styles.iconButton} iconButton`,
-                styles[size], fullWidth && styles.fullWidth) }
+                styles[size], fullWidth && styles.fullWidth, className) }
+            data-testid = { testId }
             disabled = { disabled }
             { ...(id ? { id } : {}) }
             onClick = { onClick }

react/features/participants-pane/components/breakout-rooms/components/web/JoinQuickActionButton.tsx

@@ -1,12 +1,14 @@
-// @flow
+/* eslint-disable lines-around-comment */
-
 import { makeStyles } from '@material-ui/styles';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 
+// @ts-ignore
 import { createBreakoutRoomsEvent, sendAnalytics } from '../../../../../analytics';
-import { QuickActionButton } from '../../../../../base/components';
+import Button from '../../../../../base/ui/components/web/Button';
+import { Theme } from '../../../../../base/ui/types';
+// @ts-ignore
 import { moveToRoom } from '../../../../../breakout-rooms/actions';
 
 type Props = {
@@ -14,10 +16,13 @@ type Props = {
     /**
      * The room to join.
      */
-    room: Object
+    room: {
+        id: string;
+        jid: string;
+    }
 }
 
-const useStyles = makeStyles(theme => {
+const useStyles = makeStyles((theme: Theme) => {
     return {
         button: {
             marginRight: `${theme.spacing(2)}px`
@@ -36,13 +41,14 @@ const JoinActionButton = ({ room }: Props) => {
         dispatch(moveToRoom(room.jid));
     }, [ dispatch, room ]);
 
-    return (<QuickActionButton
+    return (
-        accessibilityLabel = { t('breakoutRooms.actions.join') }
+        <Button
-        className = { styles.button }
+            accessibilityLabel = { t('breakoutRooms.actions.join') }
-        onClick = { onJoinRoom }
+            className = { styles.button }
-        testId = { `join-room-${room.id}` }>
+            label = { t('breakoutRooms.actions.join') }
-        {t('breakoutRooms.actions.join')}
+            onClick = { onJoinRoom }
-    </QuickActionButton>
+            size = 'small'
+            testId = { `join-room-${room.id}` } />
     );
 };
 

react/features/participants-pane/components/breakout-rooms/components/web/RoomActionEllipsis.js

@@ -1,40 +0,0 @@
-// @flow
-
-import { makeStyles } from '@material-ui/styles';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { QuickActionButton } from '../../../../../base/components';
-import { Icon, IconHorizontalPoints } from '../../../../../base/icons';
-
-type Props = {
-
-    /**
-     * Click handler function.
-     */
-    onClick: Function
-}
-
-const useStyles = makeStyles(() => {
-    return {
-        button: {
-            padding: '6px'
-        }
-    };
-});
-
-const RoomActionEllipsis = ({ onClick }: Props) => {
-    const styles = useStyles();
-    const { t } = useTranslation();
-
-    return (
-        <QuickActionButton
-            accessibilityLabel = { t('breakoutRooms.actions.more') }
-            className = { styles.button }
-            onClick = { onClick }>
-            <Icon src = { IconHorizontalPoints } />
-        </QuickActionButton>
-    );
-};
-
-export default RoomActionEllipsis;

react/features/participants-pane/components/breakout-rooms/components/web/RoomActionEllipsis.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { IconHorizontalPoints } from '../../../../../base/icons/svg/index';
+import Button from '../../../../../base/ui/components/web/Button';
+
+type Props = {
+
+    /**
+     * Click handler function.
+     */
+    onClick: () => void;
+}
+
+const RoomActionEllipsis = ({ onClick }: Props) => {
+    const { t } = useTranslation();
+
+    return (
+        <Button
+            accessibilityLabel = { t('breakoutRooms.actions.more') }
+            icon = { IconHorizontalPoints }
+            onClick = { onClick }
+            size = 'small' />
+    );
+};
+
+export default RoomActionEllipsis;

react/features/participants-pane/components/web/LobbyParticipantItem.js

@@ -6,13 +6,14 @@ import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import { ContextMenu, ContextMenuItemGroup } from '../../../base/components';
-import { Icon, IconChat, IconCloseCircle, IconHorizontalPoints } from '../../../base/icons';
+import { IconChat, IconCloseCircle, IconHorizontalPoints } from '../../../base/icons';
 import { hasRaisedHand } from '../../../base/participants';
+import { BUTTON_TYPES } from '../../../base/react/constants';
+import Button from '../../../base/ui/components/web/Button';
 import { showLobbyChatButton } from '../../../lobby/functions';
 import { ACTION_TRIGGER, MEDIA_STATE } from '../../constants';
 import { useLobbyActions } from '../../hooks';
 
-import LobbyParticipantQuickAction from './LobbyParticipantQuickAction';
 import ParticipantItem from './ParticipantItem';
 
 type Props = {
@@ -70,13 +71,13 @@ export const LobbyParticipantItem = ({
     const closeContextMenu = useCallback(() => setIsOpen(false));
 
     const renderAdmitButton = () => (
-        <LobbyParticipantQuickAction
+        <Button
             accessibilityLabel = { `${t('lobby.admit')} ${p.name}` }
             className = { styles.button }
+            label = { t('lobby.admit') }
             onClick = { admit }
-            testId = { `admit-${id}` }>
+            size = 'small'
-            {t('lobby.admit')}
+            testId = { `admit-${id}` } />);
-        </LobbyParticipantQuickAction>);
 
     return (
         <ParticipantItem
@@ -93,14 +94,13 @@ export const LobbyParticipantItem = ({
 
             {showChat ? <>
                 {renderAdmitButton()}
-                <LobbyParticipantQuickAction
+                <Button
                     accessibilityLabel = { `${t('participantsPane.actions.moreModerationActions')} ${p.name}` }
                     className = { styles.moreButton }
+                    icon = { IconHorizontalPoints }
                     onClick = { openContextMenu }
                     ref = { moreButtonRef }
-                    secondary = { true }>
+                    size = 'small' />
-                    <Icon src = { IconHorizontalPoints } />
-                </LobbyParticipantQuickAction>
                 <ContextMenu
                     className = { styles.contextMenu }
                     hidden = { !isOpen }
@@ -124,14 +124,14 @@ export const LobbyParticipantItem = ({
                         } ] } />
                 </ContextMenu>
             </> : <>
-                <LobbyParticipantQuickAction
+                <Button
                     accessibilityLabel = { `${t('lobby.reject')} ${p.name}` }
                     className = { styles.button }
+                    label = { t('lobby.reject') }
                     onClick = { reject }
-                    secondary = { true }
+                    size = 'small'
-                    testId = { `reject-${id}` }>
+                    testId = { `reject-${id}` }
-                    {t('lobby.reject') }
+                    type = { BUTTON_TYPES.DESTRUCTIVE } />
-                </LobbyParticipantQuickAction>
                 {renderAdmitButton()}
             </>
             }

react/features/participants-pane/components/web/LobbyParticipantQuickAction.js

@@ -1,70 +0,0 @@
-// @flow
-
-import { makeStyles } from '@material-ui/styles';
-import React from 'react';
-
-import { QuickActionButton } from '../../../base/components';
-
-type Props = {
-
-    /**
-     * Label used for accessibility.
-     */
-    accessibilityLabel: string,
-
-    /**
-     * Component children.
-     */
-    children: string,
-
-    /**
-     * Button class name.
-     */
-    className?: string,
-
-    /**
-     * Click handler function.
-     */
-    onClick: Function,
-
-    /**
-     * Whether or not the button is secondary.
-     */
-    secondary?: boolean,
-
-    /**
-     * Data test id.
-     */
-    testId: string
-}
-
-const useStyles = makeStyles(theme => {
-    return {
-        secondary: {
-            backgroundColor: theme.palette.ui04
-        }
-    };
-});
-
-const LobbyParticipantQuickAction = ({
-    accessibilityLabel,
-    children,
-    className,
-    onClick,
-    secondary = false,
-    testId
-}: Props) => {
-    const styles = useStyles();
-
-    return (
-        <QuickActionButton
-            accessibilityLabel = { accessibilityLabel }
-            className = { `${secondary ? styles.secondary : ''} ${className ?? ''}` }
-            onClick = { onClick }
-            testId = { testId }>
-            {children}
-        </QuickActionButton>
-    );
-};
-
-export default LobbyParticipantQuickAction;

react/features/participants-pane/components/web/ParticipantActionEllipsis.js

@@ -1,43 +0,0 @@
-// @flow
-
-import { makeStyles } from '@material-ui/styles';
-import React from 'react';
-
-import { QuickActionButton } from '../../../base/components';
-import { Icon, IconHorizontalPoints } from '../../../base/icons';
-
-type Props = {
-
-    /**
-     * Label used for accessibility.
-     */
-    accessibilityLabel: string,
-
-    /**
-     * Click handler function.
-     */
-    onClick: Function
-}
-
-const useStyles = makeStyles(() => {
-    return {
-        button: {
-            padding: '6px'
-        }
-    };
-});
-
-const ParticipantActionEllipsis = ({ accessibilityLabel, onClick }: Props) => {
-    const styles = useStyles();
-
-    return (
-        <QuickActionButton
-            accessibilityLabel = { accessibilityLabel }
-            className = { styles.button }
-            onClick = { onClick }>
-            <Icon src = { IconHorizontalPoints } />
-        </QuickActionButton>
-    );
-};
-
-export default ParticipantActionEllipsis;

react/features/participants-pane/components/web/ParticipantActionEllipsis.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { IconHorizontalPoints } from '../../../base/icons/svg/index';
+import Button from '../../../base/ui/components/web/Button';
+
+type Props = {
+
+    /**
+     * Label used for accessibility.
+     */
+    accessibilityLabel: string,
+
+    /**
+     * Click handler function.
+     */
+    onClick: () => void;
+}
+
+const ParticipantActionEllipsis = ({ accessibilityLabel, onClick }: Props) => (
+    <Button
+        accessibilityLabel = { accessibilityLabel }
+        icon = { IconHorizontalPoints }
+        onClick = { onClick }
+        size = 'small' />
+);
+
+export default ParticipantActionEllipsis;

react/features/participants-pane/components/web/ParticipantQuickAction.tsx

@@ -1,12 +1,14 @@
-// @flow
+/* eslint-disable lines-around-comment */
-
 import { makeStyles } from '@material-ui/styles';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 
+// @ts-ignore
 import { approveParticipant } from '../../../av-moderation/actions';
-import { QuickActionButton } from '../../../base/components';
+import Button from '../../../base/ui/components/web/Button';
+import { Theme } from '../../../base/ui/types';
+// @ts-ignore
 import { QUICK_ACTION_BUTTON } from '../../constants';
 
 type Props = {
@@ -47,7 +49,7 @@ type Props = {
     participantName: string
 }
 
-const useStyles = makeStyles(theme => {
+const useStyles = makeStyles((theme: Theme) => {
     return {
         button: {
             marginRight: `${theme.spacing(2)}px`
@@ -74,24 +76,24 @@ const ParticipantQuickAction = ({
     switch (buttonType) {
     case QUICK_ACTION_BUTTON.MUTE: {
         return (
-            <QuickActionButton
+            <Button
                 accessibilityLabel = { `${t('participantsPane.actions.mute')} ${participantName}` }
                 className = { styles.button }
+                label = { muteParticipantButtonText }
                 onClick = { muteAudio(participantID) }
-                testId = { `mute-${participantID}` }>
+                size = 'small'
-                {muteParticipantButtonText}
+                testId = { `mute-${participantID}` } />
-            </QuickActionButton>
         );
     }
     case QUICK_ACTION_BUTTON.ASK_TO_UNMUTE: {
         return (
-            <QuickActionButton
+            <Button
                 accessibilityLabel = { `${t('participantsPane.actions.askUnmute')} ${participantName}` }
                 className = { styles.button }
+                label = { askUnmuteText }
                 onClick = { askToUnmute }
-                testId = { `unmute-${participantID}` }>
+                size = 'small'
-                { askUnmuteText }
+                testId = { `unmute-${participantID}` } />
-            </QuickActionButton>
         );
     }
     default: {