feat(ui-components) Add button component (#11868)

react/features/base/components/common/Button.tsx

@@ -0,0 +1,195 @@
+import { makeStyles } from '@material-ui/core';
+import clsx from 'clsx';
+import React from 'react';
+
+import Icon from '../../icons/components/Icon';
+import { BUTTON_TYPES } from '../../react/constants';
+import { withPixelLineHeight } from '../../styles/functions.web';
+
+import { ButtonProps } from './types';
+
+interface IButtonProps extends ButtonProps {
+
+    /**
+     * Whether or not the button should be full width.
+     */
+    fullWidth?: boolean,
+
+    /**
+     * The id of the button.
+     */
+    id?: string;
+
+    /**
+     * Click callback.
+     */
+    onClick: () => void;
+
+    /**
+     * Which size the button should be.
+     */
+    size?: 'small' | 'medium' | 'large';
+}
+
+const useStyles = makeStyles((theme: any) => {
+    return {
+        button: {
+            backgroundColor: theme.palette.action01,
+            color: theme.palette.text01,
+            borderRadius: theme.shape.borderRadius,
+            padding: '10px 16px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            border: 0,
+            ...withPixelLineHeight(theme.typography.bodyShortBold),
+            transition: 'background .2s',
+            cursor: 'pointer',
+
+            '&:hover': {
+                backgroundColor: theme.palette.action01Hover
+            },
+
+            '&:active': {
+                backgroundColor: theme.palette.action01Active
+            },
+
+            '&:focus': {
+                outline: 0,
+                boxShadow: `0px 0px 0px 2px ${theme.palette.focus01}`
+            },
+
+            '& svg': {
+                fill: theme.palette.icon01
+            }
+        },
+
+        primary: {},
+
+        secondary: {
+            backgroundColor: theme.palette.action02,
+            color: theme.palette.text04,
+
+            '&:hover': {
+                backgroundColor: theme.palette.action02Hover
+            },
+
+            '&:active': {
+                backgroundColor: theme.palette.action02Active
+            },
+
+            '& svg': {
+                fill: theme.palette.icon04
+            }
+        },
+
+        tertiary: {
+            backgroundColor: theme.palette.action03,
+
+            '&:hover': {
+                backgroundColor: theme.palette.action03Hover
+            },
+
+            '&:active': {
+                backgroundColor: theme.palette.action03Active
+            }
+        },
+
+        destructive: {
+            backgroundColor: theme.palette.actionDanger,
+
+            '&:hover': {
+                backgroundColor: theme.palette.actionDangerHover
+            },
+
+            '&:active': {
+                backgroundColor: theme.palette.actionDangerActive
+            }
+        },
+
+        disabled: {
+            backgroundColor: theme.palette.disabled01,
+            color: theme.palette.text03,
+
+            '&:hover': {
+                backgroundColor: theme.palette.disabled01,
+                color: theme.palette.text03
+            },
+
+            '&:active': {
+                backgroundColor: theme.palette.disabled01,
+                color: theme.palette.text03
+            },
+
+            '& svg': {
+                fill: theme.palette.icon03
+            }
+        },
+
+        iconButton: {
+            padding: '10px'
+        },
+
+        textWithIcon: {
+            marginLeft: `${theme.spacing(2)}px`
+        },
+
+        small: {
+            padding: '8px 16px',
+            ...withPixelLineHeight(theme.typography.labelBold),
+
+            '&.iconButton': {
+                padding: '6px'
+            }
+        },
+
+        medium: {},
+
+        large: {
+            padding: '13px 16px',
+            ...withPixelLineHeight(theme.typography.bodyShortBoldLarge),
+
+            '&.iconButton': {
+                padding: '14px'
+            }
+        },
+
+        fullWidth: {
+            width: '100%'
+        }
+    };
+});
+
+const Button = ({
+    accessibilityLabel,
+    disabled,
+    fullWidth,
+    icon,
+    id,
+    label,
+    onClick,
+    size = 'medium',
+    type = BUTTON_TYPES.PRIMARY
+}: IButtonProps) => {
+    const styles = useStyles();
+
+    return (
+        <button
+            aria-label = { accessibilityLabel }
+            className = { clsx(styles.button, styles[type],
+                disabled && styles.disabled,
+                icon && !label && `${styles.iconButton} iconButton`,
+                styles[size], fullWidth && styles.fullWidth) }
+            disabled = { disabled }
+            { ...(id ? { id } : {}) }
+            onClick = { onClick }
+            type = 'button'>
+            {icon && <Icon
+                size = { 20 }
+                src = { icon } />}
+            {label && <span className = { icon ? styles.textWithIcon : '' }>{label}</span>}
+        </button>
+    );
+};
+
+export default Button;

react/features/base/components/common/types.ts

@@ -0,0 +1,29 @@
+import { BUTTON_TYPES } from '../../react/constants';
+
+export interface ButtonProps {
+
+    /**
+     * Label used for accessibility.
+     */
+    accessibilityLabel: string;
+
+    /**
+     * Whether or not the button is disabled.
+     */
+    disabled?: boolean;
+
+    /**
+     * The icon to be displayed on the button.
+     */
+    icon?: Function;
+
+    /**
+     * The text to be displayed on the button.
+     */
+    label?: string;
+
+    /**
+     * The type of button to be displayed.
+     */
+    type?: BUTTON_TYPES;
+}