Merge pull request #1923 from redpanda-data/master

Release 3.2: update with css fixes

Author: r-vasquez

frontend/src/components/redpanda-ui/components/button.tsx

@@ -53,15 +53,15 @@ const Button = React.forwardRef<
       data-slot="button"
       data-testid={testId}
       className={cn(
-        className,
         buttonVariants({ variant, size, className }),
         attached && position === 'first'
           ? 'rounded-r-none rounded-l-md border-r-0'
           : attached && position === 'last'
             ? 'rounded-l-none rounded-r-md border-l-0'
             : attached && position === 'middle'
               ? 'rounded-none border-l-0 border-r-0'
-              : 'rounded-md'
+              : 'rounded-md',
+        className,
       )}
       {...props}
     />

frontend/src/components/redpanda-ui/components/card.tsx

@@ -1,18 +1,19 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import React from 'react';
 
+import { Heading, Text } from './typography';
 import { cn } from '../lib/utils';
 
 const cardVariants = cva(
-  'rounded-lg min-w-0 border border-solid bg-white border-base-200 flex flex-col shadow-shadow-elevated dark:bg-base-900 dark:border-base-800',
+  'rounded-lg min-w-0 border border-solid bg-white border-base-200 flex flex-col shadow-elevated dark:bg-base-900 dark:border-base-800',
   {
     variants: {
       size: {
-        sm: 'px-12 py-8 gap-4 max-w-sm',
-        md: 'px-16 py-12 gap-5 max-w-md',
-        lg: 'px-20 py-16 gap-6 max-w-lg',
-        xl: 'px-24 py-20 gap-8 max-w-xl',
-        full: 'px-16 py-12 gap-5 w-full',
+        sm: 'px-6 py-4 gap-2 max-w-sm',
+        md: 'px-8 py-6 gap-4 max-w-md',
+        lg: 'px-10 py-8 gap-4 max-w-lg',
+        xl: 'px-12 py-10 gap-6 max-w-xl',
+        full: 'px-8 py-6 gap-4 w-full',
       },
       variant: {
         default: '',
@@ -28,7 +29,7 @@ const cardVariants = cva(
   },
 );
 
-interface CardProps extends React.ComponentProps<'div'>, VariantProps<typeof cardVariants> {
+export interface CardProps extends React.ComponentProps<'div'>, VariantProps<typeof cardVariants> {
   testId?: string;
 }
 
@@ -89,32 +90,31 @@ const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(
 
 CardHeader.displayName = 'CardHeader';
 
-const CardTitle = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'> & { testId?: string }>(
-  ({ className, testId, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        data-slot="card-title"
-        data-testid={testId}
-        className={cn('leading-none font-semibold', className)}
-        {...props}
-      />
-    );
-  },
-);
+const CardTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.ComponentProps<'div'> & { testId?: string; level?: 1 | 2 | 3 | 4 }
+>(({ className, level = 4, testId, children, ...props }, ref) => {
+  return (
+    <div ref={ref} data-slot="card-title" data-testid={testId} className={className} {...props}>
+      {typeof children === 'string' ? <Heading level={level}>{children}</Heading> : children}
+    </div>
+  );
+});
 
 CardTitle.displayName = 'CardTitle';
 
 const CardDescription = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'> & { testId?: string }>(
-  ({ className, testId, ...props }, ref) => {
+  ({ className, testId, children, ...props }, ref) => {
     return (
       <div
         ref={ref}
         data-slot="card-description"
         data-testid={testId}
         className={cn('text-muted-foreground text-sm', className)}
         {...props}
-      />
+      >
+        {typeof children === 'string' ? <Text>{children}</Text> : children}
+      </div>
     );
   },
 );

frontend/src/components/redpanda-ui/components/choicebox.tsx

@@ -0,0 +1,101 @@
+import { Circle } from 'lucide-react';
+import { AnimatePresence, motion, type Transition } from 'motion/react';
+import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
+import type { ComponentProps, HTMLAttributes } from 'react';
+
+import { Card, CardContent, CardDescription, CardHeader, type CardProps, CardTitle } from './card';
+import { RadioGroup } from './radio-group';
+import { cn } from '../lib/utils';
+
+export type ChoiceboxProps = ComponentProps<typeof RadioGroup> & { testId?: string };
+
+export const Choicebox = ({ className, testId, ...props }: ChoiceboxProps) => (
+  <RadioGroup className={cn('w-full', className)} data-testid={testId} {...props} />
+);
+
+export type ChoiceboxItemProps = RadioGroupPrimitive.RadioGroupItemProps & { testId?: string } & Partial<
+    Pick<CardProps, 'size'>
+  >;
+
+export const ChoiceboxItem = ({ className, children, testId, size, ...props }: ChoiceboxItemProps) => (
+  <RadioGroupPrimitive.Item {...props}>
+    <Card
+      size={size}
+      className={cn(
+        'flex cursor-pointer flex-row items-start justify-between rounded-md p-4 shadow-none transition-all border-2 border-solid !border-border text-left',
+        '[&[data-state="checked"]]:border-selected',
+        '[&[data-state="checked"]]:bg-selected/5',
+        'hover:shadow-elevated',
+        className,
+      )}
+      data-testid={testId}
+    >
+      {children}
+    </Card>
+  </RadioGroupPrimitive.Item>
+);
+
+export type ChoiceboxItemHeaderProps = ComponentProps<typeof CardHeader>;
+
+export const ChoiceboxItemHeader = ({ className, ...props }: ComponentProps<typeof CardHeader>) => (
+  <CardHeader className={cn('flex-1 p-0', className)} {...props} />
+);
+
+export type ChoiceboxItemTitleProps = ComponentProps<typeof CardTitle>;
+
+export const ChoiceboxItemTitle = ({ className, ...props }: ChoiceboxItemTitleProps) => (
+  <CardTitle className={cn('flex items-center gap-3', className)} {...props} />
+);
+
+export type ChoiceboxItemSubtitleProps = HTMLAttributes<HTMLSpanElement>;
+
+export const ChoiceboxItemSubtitle = ({ className, ...props }: ChoiceboxItemSubtitleProps) => (
+  <span className={cn('font-normal text-muted-foreground text-xs', className)} {...props} />
+);
+
+export type ChoiceboxItemDescriptionProps = ComponentProps<typeof CardDescription>;
+
+export const ChoiceboxItemDescription = ({ className, ...props }: ChoiceboxItemDescriptionProps) => (
+  <CardDescription className={cn('text-sm', className)} {...props} />
+);
+
+export type ChoiceboxItemContentProps = ComponentProps<typeof CardContent>;
+
+export const ChoiceboxItemContent = ({ className, ...props }: ChoiceboxItemContentProps) => (
+  <CardContent
+    className={cn(
+      'flex aspect-square size-4 shrink-0 items-center justify-center rounded-full border border-input p-0 text-selected shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40',
+      className,
+    )}
+    {...props}
+  />
+);
+
+export type ChoiceboxItemIndicatorProps = ComponentProps<typeof RadioGroupPrimitive.Indicator> & {
+  transition?: Transition;
+};
+
+export const ChoiceboxItemIndicator = ({
+  className,
+  transition = { type: 'spring', stiffness: 200, damping: 16 },
+  ...props
+}: ChoiceboxItemIndicatorProps) => (
+  <RadioGroupPrimitive.Indicator
+    data-slot="radio-group-indicator"
+    className={cn('flex items-center justify-center', className)}
+    {...props}
+  >
+    <AnimatePresence>
+      <motion.div
+        key="radio-group-indicator-circle"
+        data-slot="radio-group-indicator-circle"
+        initial={{ opacity: 0, scale: 0 }}
+        animate={{ opacity: 1, scale: 1 }}
+        exit={{ opacity: 0, scale: 0 }}
+        transition={transition}
+      >
+        <Circle className="size-2.5 fill-current text-current" />
+      </motion.div>
+    </AnimatePresence>
+  </RadioGroupPrimitive.Indicator>
+);