feat(uniform): add fullWidth and content styling to RadioTabs

Author: toxsick

packages/uniform/src/RadioTabs/RadioTabs.stories.tsx

@@ -44,17 +44,6 @@ export const Default: Story = {
   },
 };
 
-export const WithContent: Story = {
-  args: {
-    name: 'radioTabsField',
-    options: [
-      { value: 'option_1', label: 'Option 1', content: 'Option 1 Content' },
-      { value: 'option_2', label: 'Option 2', content: 'Option 2 Content' },
-      { value: 'option_3', label: 'Option 3', content: 'Option 3 Content' },
-    ],
-  },
-};
-
 export const WithInitialValue: Story = {
   parameters: {
     formProps: { initialValues: { radioTabsField: 'option_2' } },
@@ -103,7 +92,7 @@ const requiredValidation = veto({
 export const Required: Story = {
   parameters: { formProps: { validation: requiredValidation } },
   args: {
-    label: 'radioTabsField',
+    label: 'Radio Tabs Field',
     name: 'radioTabsField',
     options: [
       { value: 'option_1', label: 'Option 1' },
@@ -125,7 +114,7 @@ export const Invalid: Story = {
   },
   args: {
     name: 'radioTabsField',
-    label: 'radioTabsField',
+    label: 'Radio Tabs Field',
     testId: 'radioTabsField',
     options: [
       { value: 'option_1', label: 'Option 1' },
@@ -141,3 +130,39 @@ export const Invalid: Story = {
     });
   },
 };
+
+export const FullWidth: Story = {
+  parameters: {
+    formProps: {
+      className: 'min-w-md',
+      initialValues: { radioTabsField: 'option_1' },
+    },
+  },
+  args: {
+    label: 'Radio Tabs Field',
+    fullWidth: true,
+    name: 'radioTabsField',
+    options: [
+      { value: 'option_1', label: 'Option 1' },
+      { value: 'option_2', label: 'Option 2' },
+      { value: 'option_3', label: 'Option 3' },
+    ],
+  },
+};
+
+export const WithContent: Story = {
+  parameters: {
+    formProps: {
+      className: 'min-w-md',
+      initialValues: { radioTabsField: 'option_1' },
+    },
+  },
+  args: {
+    name: 'radioTabsField',
+    options: [
+      { value: 'option_1', label: 'Option 1', content: 'Option 1 Content' },
+      { value: 'option_2', label: 'Option 2', content: 'Option 2 Content' },
+      { value: 'option_3', label: 'Option 3', content: 'Option 3 Content' },
+    ],
+  },
+};

packages/uniform/src/RadioTabs/RadioTabs.tsx

@@ -15,14 +15,32 @@ import { FieldValidationError } from '../partials/FieldValidationError';
 export const radioTabsVariants = tv({
   slots: {
     base: 'group', // Needs group for group-data condition
+    cursor: '',
     label:
       'text-foreground group-data-[invalid=true]:text-danger text-sm subpixel-antialiased',
-    wrapper: '',
-    tabList: '',
     tab: '',
+    tabBase: '',
     tabContent: '',
-    cursor: '',
-    panel: '',
+    tabList: '',
+    tabPanel: 'p-3',
+    tabWrapper: '',
+    wrapper: '',
+  },
+  variants: {
+    hasContent: {
+      true: {
+        base: 'w-full rounded-b-none p-1',
+        tabBase: 'p-1 pb-0',
+        tabList: 'w-full',
+        tabWrapper: 'border-divider rounded-medium border',
+      },
+    },
+    fullWidth: {
+      true: {
+        base: 'w-full',
+        tabList: 'w-full',
+      },
+    },
   },
 });
 
@@ -44,11 +62,13 @@ export interface RadioTabsOption {
   value: string;
 }
 
-export interface RadioTabsProps extends VariantProps {
+export interface RadioTabsProps extends Omit<VariantProps, 'hasContent'> {
   /** CSS class name */
   className?: ClassName;
   /** Determines if the Buttons are disabled or not. */
   disabled?: boolean;
+  /** Whether tabs should take up full container width */
+  fullWidth?: boolean;
   /** determines orientation of the Buttons. */
   inline?: boolean;
   /** Label displayed next to the RadioButton. */
@@ -70,6 +90,7 @@ export interface RadioTabsProps extends VariantProps {
 const RadioTabs = ({
   className = undefined,
   disabled = false,
+  fullWidth = false,
   inline = false,
   label = undefined,
   name,
@@ -86,7 +107,14 @@ const RadioTabs = ({
   const showTestIdCopyButton = debugMode === 'debug-testids';
   const showLabel = label ?? showTestIdCopyButton;
 
-  const variants = radioTabsVariants();
+  // check if any option has content
+  // eslint-disable-next-line @typescript-eslint/no-misused-promises, @typescript-eslint/promise-function-async
+  const hasContent = options.some((option) => {
+    return option.content;
+  });
+
+  // classNames from slots
+  const variants = radioTabsVariants({ hasContent, fullWidth });
   const classNames = variantsToClassNames(variants, className, 'base');
 
   const tabOptions = options.map<TabProps>((option) => {
@@ -108,7 +136,6 @@ const RadioTabs = ({
   return (
     <HeroRadioGroup
       ref={ref}
-      classNames={classNames}
       // see HeroUI styles for group-data condition (data-invalid),
       // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts
       data-invalid={invalid}
@@ -120,6 +147,11 @@ const RadioTabs = ({
       name={name}
       onBlur={onBlur}
       orientation={inline ? 'horizontal' : 'vertical'}
+      classNames={{
+        base: classNames.base,
+        label: classNames.label,
+        wrapper: classNames.wrapper,
+      }}
       errorMessage={
         error ? (
           <FieldValidationError error={error} testId={testId} />
@@ -139,13 +171,21 @@ const RadioTabs = ({
     >
       <Tabs
         disabledKeys={disabled ? disabledAllKeys : undefined}
-        fullWidth={false}
         onSelectionChange={onChange}
         // make sure component is controlled
         selectedKey={value ?? ''}
         tabs={tabOptions}
         testId={testId}
         variant={variant}
+        className={{
+          base: classNames.tabBase,
+          cursor: classNames.cursor,
+          panel: classNames.tabPanel,
+          tab: classNames.tab,
+          tabContent: classNames.tabContent,
+          tabList: classNames.tabList,
+          tabWrapper: classNames.tabWrapper,
+        }}
       />
     </HeroRadioGroup>
   );