ref(label) Convert to function component (#12370)

Fixes issue where Label styles would take precedence over parent styles (raised hand counter would be gray instead of yellow)

react/features/base/label/components/web/Label.tsx

@@ -1,32 +1,27 @@
 import { Theme } from '@mui/material';
-import { withStyles } from '@mui/styles';
-import clsx from 'clsx';
 import React from 'react';
+import { makeStyles } from 'tss-react/mui';
 
 import Icon from '../../../icons/components/Icon';
 import { withPixelLineHeight } from '../../../styles/functions.web';
 import { COLORS } from '../../constants';
-import AbstractLabel, {
-    type Props as AbstractProps
-} from '../AbstractLabel';
 
-type Props = AbstractProps & {
+interface Props {
 
     /**
      * Own CSS class name.
      */
     className?: string;
 
-    /**
-     * An object containing the CSS classes.
-     */
-    classes: any;
-
     /**
      * The color of the label.
      */
     color?: string;
 
+    /**
+     * An SVG icon to be rendered as the content of the label.
+     */
+    icon?: Function;
 
     /**
      * Color for the icon.
@@ -43,16 +38,14 @@ type Props = AbstractProps & {
      */
     onClick?: (e?: React.MouseEvent) => void;
 
-};
-
-/**
- * Creates the styles for the component.
- *
- * @param {Object} theme - The current UI theme.
- *
- * @returns {Object}
+    /**
+     * String or component that will be rendered as the label itself.
      */
-const styles = (theme: Theme) => {
+    text?: string;
+
+}
+
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         label: {
             ...withPixelLineHeight(theme.typography.labelRegular),
@@ -86,23 +79,9 @@ const styles = (theme: Theme) => {
             background: theme.palette.actionDanger
         }
     };
-};
+});
 
-
-/**
- * React Component for showing short text in a circle.
- *
- * @augments Component
- */
-class Label extends AbstractLabel<Props, any> {
-    /**
-     * Implements React's {@link Component#render()}.
-     *
-     * @inheritdoc
-     */
-    render() {
-        const {
-            classes,
+const Label = ({
     className,
     color,
     icon,
@@ -110,27 +89,23 @@ class Label extends AbstractLabel<Props, any> {
     id,
     onClick,
     text
-        } = this.props;
-        const labelClassName = clsx(
-            classes.label,
-            onClick && classes.clickable,
-            color && classes[color],
-            className
-        );
+}: Props) => {
+    const { classes, cx } = useStyles();
 
     return (
         <div
-                className = { labelClassName }
+            className = { cx(classes.label, onClick && classes.clickable,
+                color && classes[color], className
+            ) }
             id = { id }
             onClick = { onClick }>
-                { icon && <Icon
+            {icon && <Icon
                 color = { iconColor }
                 size = '16'
-                    src = { icon } /> }
-                { text && <span className = { icon && classes.withIcon }>{text}</span> }
+                src = { icon } />}
+            {text && <span className = { icon && classes.withIcon }>{text}</span>}
         </div>
     );
-    }
-}
+};
 
-export default withStyles(styles)(Label);
+export default Label;