feat(ui): add icon to button [EE-3662] (#7204)

app/assets/css/button.css

@@ -2,6 +2,7 @@
   border-radius: 5px;
   display: inline-flex;
   justify-content: space-around;
+  align-items: center;
   gap: 5px;
 }
 

app/assets/css/icon.css

@@ -12,31 +12,32 @@ pr-icon {
 .icon {
   color: currentColor;
   margin: 0;
+
+  font-size: var(--icon-size);
+  height: var(--icon-size);
+  width: var(--icon-size);
+
+  --icon-size: 1em;
 }
 
 .icon-xs {
-  height: 10px;
-  width: 10px;
+  --icon-size: 10px;
 }
 
 .icon-sm {
-  height: 14px;
-  width: 14px;
+  --icon-size: 14px;
 }
 
 .icon-md {
-  height: 16px;
-  width: 16px;
+  --icon-size: 16px;
 }
 
 .icon-lg {
-  height: 22px;
-  width: 22px;
+  --icon-size: 22px;
 }
 
 .icon-xl {
-  height: 26px;
-  width: 26px;
+  --icon-size: 26px;
 }
 
 .icon.icon-alt {

app/react/components/Icon.tsx

@@ -9,7 +9,7 @@ export interface IconProps {
 }
 
 interface Props {
-  icon: ReactNode | ComponentType<unknown>;
+  icon: ReactNode | ComponentType<{ size?: string | number }>;
   feather?: boolean;
   className?: string;
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -34,23 +34,23 @@ export function Icon({ icon, feather, className, mode, size }: Props) {
     }
   }, [feather]);
 
+  const classes = clsx(
+    className,
+    'icon',
+    { [`icon-${mode}`]: mode },
+    { [`icon-${size}`]: size }
+  );
+
   if (typeof icon !== 'string') {
     const Icon = isValidElementType(icon) ? icon : null;
 
     return (
-      <span className={className} aria-hidden="true" role="img">
-        {Icon == null ? <>{icon}</> : <Icon />}
+      <span className={classes} aria-hidden="true" role="img">
+        {Icon == null ? <>{icon}</> : <Icon size="1em" />}
       </span>
     );
   }
 
-  const classes = clsx(
-    className,
-    'icon',
-    { [`icon-${mode}`]: mode },
-    { [`icon-${size}`]: size }
-  );
-
   if (feather) {
     return (
       <i
@@ -63,6 +63,6 @@ export function Icon({ icon, feather, className, mode, size }: Props) {
   }
 
   return (
-    <i className={clsx('fa', icon, className)} aria-hidden="true" role="img" />
+    <i className={clsx('fa', icon, classes)} aria-hidden="true" role="img" />
   );
 }

app/react/components/buttons/Button.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, Story } from '@storybook/react';
 import { PropsWithChildren } from 'react';
+import { Download } from 'react-feather';
 
 import { Button, Props } from './Button';
 
@@ -16,7 +17,7 @@ function Template({
 }: JSX.IntrinsicAttributes & PropsWithChildren<Props>) {
   return (
     <Button onClick={onClick} color={color} size={size} disabled={disabled}>
-      <i className="fa fa-download" aria-hidden="true" /> Primary Button
+      Primary Button
     </Button>
   );
 }
@@ -63,11 +64,42 @@ export function Danger() {
   );
 }
 
+export function ButtonIcon() {
+  return (
+    <Button color="primary" onClick={() => {}} icon={Download}>
+      Button with an icon
+    </Button>
+  );
+}
+
+export function ButtonIconLarge() {
+  return (
+    <Button color="primary" onClick={() => {}} icon={Download} size="large">
+      Button with an icon
+    </Button>
+  );
+}
+
+export function ButtonIconMedium() {
+  return (
+    <Button color="primary" onClick={() => {}} icon={Download} size="medium">
+      Button with an icon
+    </Button>
+  );
+}
+
+export function ButtonIconXSmall() {
+  return (
+    <Button color="primary" onClick={() => {}} icon={Download} size="xsmall">
+      Button with an icon
+    </Button>
+  );
+}
+
 export function Default() {
   return (
     <Button color="default" onClick={() => {}}>
-      <i className="fa fa-plus-circle" aria-hidden="true" /> Add an environment
-      variable
+      Default
     </Button>
   );
 }

app/react/components/buttons/Button.tsx

@@ -1,8 +1,16 @@
-import { AriaAttributes, MouseEventHandler, PropsWithChildren } from 'react';
+import {
+  AriaAttributes,
+  ComponentType,
+  MouseEventHandler,
+  PropsWithChildren,
+  ReactNode,
+} from 'react';
 import clsx from 'clsx';
 
 import { AutomationTestingProps } from '@/types';
 
+import { Icon } from '@@/Icon';
+
 type Type = 'submit' | 'button' | 'reset';
 type Color =
   | 'default'
@@ -17,6 +25,9 @@ type Color =
 type Size = 'xsmall' | 'small' | 'medium' | 'large';
 
 export interface Props extends AriaAttributes, AutomationTestingProps {
+  icon?: ReactNode | ComponentType<unknown>;
+  featherIcon?: boolean;
+
   color?: Color;
   size?: Size;
   disabled?: boolean;
@@ -34,7 +45,10 @@ export function Button({
   className,
   onClick,
   title,
+  icon,
+  featherIcon,
   children,
+
   ...ariaProps
 }: PropsWithChildren<Props>) {
   return (
@@ -42,17 +56,46 @@ export function Button({
       /* eslint-disable-next-line react/button-has-type */
       type={type}
       disabled={disabled}
-      className={clsx('btn', `btn-${color}`, sizeClass(size), className)}
+      className={clsx(
+        {
+          'opacity-60': disabled,
+        },
+        `btn btn-${color}`,
+        sizeClass(size),
+        className
+      )}
       onClick={onClick}
       title={title}
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...ariaProps}
     >
+      {icon && (
+        <Icon
+          icon={icon}
+          size={getIconSize(size)}
+          className="inline-flex"
+          feather={featherIcon}
+        />
+      )}
       {children}
     </button>
   );
 }
 
+function getIconSize(size: Size) {
+  switch (size) {
+    case 'xsmall':
+      return 'xs';
+    case 'medium':
+      return 'md';
+    case 'large':
+      return 'lg';
+    case 'small':
+    default:
+      return 'sm';
+  }
+}
+
 function sizeClass(size?: Size) {
   switch (size) {
     case 'large':