feat: Add disabled prop to FormFieldProps and all form field components with consistent data-disabled attribute on Field wrapper for label dimming (#878)

Author: kingston

.changeset/add-disabled-prop-to-field-templates.md

@@ -0,0 +1,5 @@
+---
+'@baseplate-dev/react-generators': patch
+---
+
+Add disabled prop to form field component templates with consistent data-disabled attribute on Field wrapper

.changeset/add-disabled-prop-to-fields.md

@@ -0,0 +1,5 @@
+---
+'@baseplate-dev/ui-components': patch
+---
+
+Add disabled prop to FormFieldProps and all form field components with consistent data-disabled attribute on Field wrapper for label dimming

examples/blog-with-auth/apps/admin/baseplate/generated/src/components/ui/checkbox-field.tsx

@@ -36,6 +36,7 @@ function CheckboxField({
   label,
   description,
   error,
+  disabled,
   onChange,
   value,
   className,
@@ -47,11 +48,13 @@ function CheckboxField({
     <Field
       orientation="horizontal"
       data-invalid={!!error || undefined}
+      data-disabled={disabled ?? undefined}
       className={className}
     >
       <Checkbox
         {...props}
         id={id}
+        disabled={disabled}
         aria-invalid={!!error}
         onCheckedChange={(checked) => {
           onChange?.(checked);

examples/blog-with-auth/apps/admin/baseplate/generated/src/components/ui/combobox-field.tsx

@@ -28,7 +28,6 @@ export interface ComboboxFieldProps<OptionType>
   className?: string;
   noResultsText?: React.ReactNode;
   placeholder?: string;
-  disabled?: boolean;
   value?: string | null;
   onChange?: (value: string | null) => void;
   inputValue?: string;
@@ -62,7 +61,11 @@ function ComboboxField<OptionType>({
     options.find((o) => getOptionValue(o) === value) ?? null;
 
   return (
-    <Field data-invalid={!!error} className={className}>
+    <Field
+      data-invalid={!!error}
+      data-disabled={disabled ?? undefined}
+      className={className}
+    >
       <FieldLabel htmlFor={id}>{label}</FieldLabel>
       <Combobox
         value={selectedOption}

examples/blog-with-auth/apps/admin/baseplate/generated/src/components/ui/date-picker-field.tsx

@@ -19,7 +19,6 @@ import { Popover, PopoverContent, PopoverTrigger } from './popover';
 export interface DatePickerFieldProps extends FormFieldProps {
   className?: string;
   wrapperClassName?: string;
-  disabled?: boolean;
   placeholder?: string;
   onChange?: (value: string | undefined) => void;
   value?: string | undefined;
@@ -100,7 +99,11 @@ function DatePickerField({
 
   if (addWrapper) {
     return (
-      <Field data-invalid={!!error} className={cn('gap-2', wrapperClassName)}>
+      <Field
+        data-invalid={!!error}
+        data-disabled={disabled ?? undefined}
+        className={cn('gap-2', wrapperClassName)}
+      >
         <FieldLabel htmlFor={id}>{label}</FieldLabel>
         {inputComponent}
         <FieldDescription>{description}</FieldDescription>

examples/blog-with-auth/apps/admin/baseplate/generated/src/components/ui/date-time-picker-field.tsx

@@ -20,7 +20,6 @@ import { Popover, PopoverContent, PopoverTrigger } from './popover';
 export interface DateTimePickerFieldProps extends FormFieldProps {
   className?: string;
   wrapperClassName?: string;
-  disabled?: boolean;
   placeholder?: string;
   onChange?: (value: string | undefined) => void;
   value?: string | undefined;
@@ -177,7 +176,11 @@ function DateTimePickerField({
 
   if (addWrapper) {
     return (
-      <Field data-invalid={!!error} className={cn('gap-2', wrapperClassName)}>
+      <Field
+        data-invalid={!!error}
+        data-disabled={disabled ?? undefined}
+        className={cn('gap-2', wrapperClassName)}
+      >
         <FieldLabel htmlFor={id}>{label}</FieldLabel>
         {inputComponent}
         <FieldDescription>{description}</FieldDescription>

examples/blog-with-auth/apps/admin/baseplate/generated/src/components/ui/input-field.tsx

@@ -37,6 +37,7 @@ function InputField({
   label,
   description,
   error,
+  disabled,
   onChange,
   register,
   className,
@@ -45,10 +46,15 @@ function InputField({
 }: InputFieldProps): React.ReactElement {
   const id = useId();
   return (
-    <Field data-invalid={!!error} className={cn('gap-1.5', className)}>
+    <Field
+      data-invalid={!!error}
+      data-disabled={disabled ?? undefined}
+      className={cn('gap-1.5', className)}
+    >
       <FieldLabel htmlFor={id}>{label}</FieldLabel>
       <Input
         id={id}
+        disabled={disabled}
         onChange={
           onChange &&
           ((e) => {

examples/blog-with-auth/apps/admin/baseplate/generated/src/components/ui/multi-combobox-field.tsx

@@ -31,7 +31,6 @@ export interface MultiComboboxFieldProps<OptionType>
   extends MultiSelectOptionProps<OptionType>, FormFieldProps {
   className?: string;
   noResultsText?: React.ReactNode;
-  disabled?: boolean;
 }
 
 /**
@@ -62,7 +61,11 @@ function MultiComboboxField<OptionType>({
   );
 
   return (
-    <Field data-invalid={!!error} className={className}>
+    <Field
+      data-invalid={!!error}
+      data-disabled={disabled ?? undefined}
+      className={className}
+    >
       <FieldLabel htmlFor={id}>{label}</FieldLabel>
       <Combobox
         multiple

examples/blog-with-auth/apps/admin/baseplate/generated/src/components/ui/select-field.tsx

@@ -32,6 +32,7 @@ function SelectField<OptionType>({
   label,
   description,
   error,
+  disabled,
   value,
   placeholder,
   options,
@@ -47,9 +48,18 @@ function SelectField<OptionType>({
   const selectedOption = options.find((o) => getOptionValue(o) === value);
 
   return (
-    <Field data-invalid={!!error} className={className}>
+    <Field
+      data-invalid={!!error}
+      data-disabled={disabled ?? undefined}
+      className={className}
+    >
       <FieldLabel htmlFor={triggerId}>{label}</FieldLabel>
-      <Select value={value} onValueChange={(val) => onChange?.(val)} {...props}>
+      <Select
+        value={value}
+        onValueChange={(val) => onChange?.(val)}
+        disabled={disabled}
+        {...props}
+      >
         <SelectTrigger id={triggerId} aria-invalid={!!error}>
           <SelectValue placeholder={placeholder}>
             {selectedOption ? getOptionLabel(selectedOption) : null}

examples/blog-with-auth/apps/admin/baseplate/generated/src/components/ui/switch-field.tsx

@@ -37,6 +37,7 @@ function SwitchField({
   label,
   description,
   error,
+  disabled,
   onChange,
   value,
   className,
@@ -49,12 +50,14 @@ function SwitchField({
     <Field
       orientation="horizontal"
       data-invalid={!!error}
+      data-disabled={disabled ?? undefined}
       className={className}
       id={id}
     >
       <Switch
         {...props}
         id={switchId}
+        disabled={disabled}
         onCheckedChange={(checked) => onChange?.(checked)}
         checked={value}
         aria-invalid={!!error}