Extend buttons to have a smaller grouping

Author: shepmaster

ui/frontend/ButtonSet.module.css

@@ -23,14 +23,19 @@ $radius: 4px;
 }
 
 .-button {
+  --button-gap: 0.5em;
+  --button-side-padding: 1.25em;
+  --button-height: 3em;
+  --button-side-icon-nudge: 0.25em;
+
   composes: -buttonReset from './shared.module.css';
   display: grid;
   grid-auto-flow: column;
-  gap: 0.5em;
+  gap: var(--button-gap);
   align-content: center;
   align-items: center;
-  padding: 0 1.25em;
-  height: 3em;
+  padding: 0 var(--button-side-padding);
+  height: var(--button-height);
   font-weight: 600;
   text-decoration: none;
   text-transform: uppercase;
@@ -41,6 +46,13 @@ $radius: 4px;
   }
 }
 
+.small {
+  --button-gap: 0.25em;
+  --button-side-padding: 0.75em;
+  --button-height: 2.5em;
+  --button-side-icon-nudge: 0.125em;
+}
+
 .primary {
   composes: -border -button;
   background-color: var(--button-primary-bg-color);
@@ -90,11 +102,11 @@ $radius: 4px;
 }
 
 .iconLeft {
-  transform: translate(-0.25em, 0);
+  transform: translate(calc(-1 * var(--button-side-icon-nudge)), 0);
 }
 
 .iconRight {
-  transform: translate(0.25em, 0);
+  transform: translate(var(--button-side-icon-nudge), 0);
 }
 
 .rule {

ui/frontend/ButtonSet.tsx

@@ -5,23 +5,35 @@ import Link, { LinkProps } from './uss-router/Link';
 import styles from './ButtonSet.module.css';
 
 interface ButtonSetProps {
+  className?: string;
   children: React.ReactNode;
 }
 
-export const ButtonSet: React.FC<ButtonSetProps> = ({ children }) => (
-  <div className={styles.set}>{children}</div>
+export const ButtonSet: React.FC<ButtonSetProps> = ({ className = '', children }) => (
+  <div className={`${styles.set} ${className}`}>{children}</div>
 );
 
 type HTMLButton = JSX.IntrinsicElements['button'];
 
 interface ButtonProps extends HTMLButton {
   isPrimary?: boolean;
+  isSmall?: boolean;
   iconLeft?: React.FC;
   iconRight?: React.FC;
 }
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ isPrimary = false, iconLeft: IconLeft, iconRight: IconRight, children, ...props }, ref) => {
+  (
+    {
+      isPrimary = false,
+      isSmall = false,
+      iconLeft: IconLeft,
+      iconRight: IconRight,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
     const iconLeft = IconLeft && (
       <span className={styles.iconLeft}>
         <IconLeft />
@@ -33,9 +45,10 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       </span>
     );
     const ordinalStyle = isPrimary ? styles.primary : styles.secondary;
+    const smallStyle = isSmall ? styles.small : '';
 
     return (
-      <button ref={ref} className={ordinalStyle} {...props}>
+      <button ref={ref} className={`${ordinalStyle} ${smallStyle}`} {...props}>
         {iconLeft}
         {children}
         {iconRight}
@@ -47,12 +60,20 @@ Button.displayName = 'Button';
 
 export const Rule: React.FC = () => <span className={styles.rule} />;
 
-export const IconButton = React.forwardRef<HTMLButtonElement, HTMLButton>(
-  ({ children, ...props }, ref) => (
-    <button ref={ref} className={styles.icon} {...props}>
-      {children}
-    </button>
-  ),
+interface IconButtonProps extends HTMLButton {
+  isSmall?: boolean;
+}
+
+export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ isSmall = false, children, ...props }, ref) => {
+    const smallStyle = isSmall ? styles.small : '';
+
+    return (
+      <button ref={ref} className={`${styles.icon} ${smallStyle}`} {...props}>
+        {children}
+      </button>
+    );
+  },
 );
 IconButton.displayName = 'IconButton';