Skip to content

Feature : allow controls with DataForm to be set as disabled #74262

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Vrishabhsk wants to merge 9 commits into
base: trunk
Choose a base branch
from
Open

Feature : allow controls with DataForm to be set as disabled #74262

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
dad0c81
Update types
Vrishabhsk Dec 29, 2025
c083633
Update dataform controls
Vrishabhsk Dec 29, 2025
0aad89e
Update dataform storybook
Vrishabhsk Dec 29, 2025
6e410b2
Merge branch 'trunk' into add/dataform-disabled-controls
Vrishabhsk Dec 29, 2025
bb10b21
Add disabled control for direct manipulation
Vrishabhsk Jan 7, 2026
6fb11f1
Prevent filters from ever being disabled
Vrishabhsk Jan 7, 2026
c2023a8
Merge branch 'trunk' into add/dataform-disabled-controls
Vrishabhsk Jan 7, 2026
f80dbf2
Fix duplicate import
Vrishabhsk Jan 7, 2026
49772ce
Implement sustainable logic
Vrishabhsk Jan 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/dataviews/src/components/dataform-controls/array.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,11 @@ export default function ArrayControl< Item >( {
onChange,
hideLabelFromVision,
validity,
config,
}: DataFormControlProps< Item > ) {
const { label, placeholder, getValue, setValue, isValid } = field;
const value = getValue( { item: data } );
const { disabled = false } = config || {};

const { elements, isLoading } = useElements( {
elements: field.elements,
Expand Down Expand Up @@ -71,6 +73,7 @@ export default function ArrayControl< Item >( {
onChange={ onChangeControl }
placeholder={ placeholder }
suggestions={ elements?.map( ( element ) => element.value ) }
disabled={ disabled }
__experimentalValidateInput={ ( token: string ) => {
// If elements validation is required, check if token is valid
if ( field.isValid?.elements && elements ) {
Expand Down
3 changes: 3 additions & 0 deletions packages/dataviews/src/components/dataform-controls/checkbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,10 @@ export default function Checkbox< Item >( {
data,
hideLabelFromVision,
validity,
config,
}: DataFormControlProps< Item > ) {
const { getValue, setValue, label, description, isValid } = field;
const { disabled = false } = config || {};

const onChangeControl = useCallback( () => {
onChange(
Expand All @@ -37,6 +39,7 @@ export default function Checkbox< Item >( {
help={ description }
checked={ getValue( { item: data } ) }
onChange={ onChangeControl }
disabled={ disabled }
/>
);
}
10 changes: 9 additions & 1 deletion packages/dataviews/src/components/dataform-controls/color.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,11 @@ const { ValidatedInputControl, Picker } = unlock( privateApis );
const ColorPicker = ( {
color,
onColorChange,
disabled,
}: {
color: string;
onColorChange: ( colorObject: any ) => void;
disabled?: boolean;
} ) => {
const validColor = color && colord( color ).isValid() ? color : '#ffffff';

Expand All @@ -38,20 +40,22 @@ const ColorPicker = ( {
<button
type="button"
onClick={ onToggle }
disabled={ disabled }
style={ {
width: '24px',
height: '24px',
borderRadius: '50%',
backgroundColor: validColor,
border: '1px solid #ddd',
cursor: 'pointer',
cursor: disabled ? 'default' : 'pointer',
outline: isOpen ? '2px solid #007cba' : 'none',
outlineOffset: '2px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: 0,
margin: 0,
opacity: disabled ? 0.4 : 1,
} }
aria-label="Open color picker"
/>
Expand All @@ -76,8 +80,10 @@ export default function Color< Item >( {
onChange,
hideLabelFromVision,
validity,
config,
}: DataFormControlProps< Item > ) {
const { label, placeholder, description, setValue, isValid } = field;
const { disabled = false } = config || {};
const value = field.getValue( { item: data } ) || '';

const handleColorChange = useCallback(
Expand Down Expand Up @@ -105,10 +111,12 @@ export default function Color< Item >( {
onChange={ handleInputChange }
hideLabelFromVision={ hideLabelFromVision }
type="text"
disabled={ disabled }
prefix={
<ColorPicker
color={ value }
onColorChange={ handleColorChange }
disabled={ disabled }
/>
}
/>
Expand Down
21 changes: 19 additions & 2 deletions packages/dataviews/src/components/dataform-controls/date.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,6 +256,7 @@ function CalendarDateControl< Item >( {
onChange,
hideLabelFromVision,
validity,
config,
}: DataFormControlProps< Item > ) {
const {
id,
Expand All @@ -265,6 +266,7 @@ function CalendarDateControl< Item >( {
isValid,
format: fieldFormat,
} = field;
const { disabled = false } = config || {};
const [ selectedPresetId, setSelectedPresetId ] = useState< string | null >(
null
);
Expand Down Expand Up @@ -368,6 +370,8 @@ function CalendarDateControl< Item >( {
variant="tertiary"
isPressed={ isSelected }
size="small"
disabled={ disabled }
accessibleWhenDisabled={ false }
onClick={ () =>
handlePresetClick( preset )
}
Expand All @@ -381,7 +385,7 @@ function CalendarDateControl< Item >( {
variant="tertiary"
isPressed={ ! selectedPresetId }
size="small"
disabled={ !! selectedPresetId }
disabled={ !! selectedPresetId || disabled }
accessibleWhenDisabled={ false }
>
{ __( 'Custom' ) }
Expand All @@ -398,6 +402,7 @@ function CalendarDateControl< Item >( {
value={ value }
onChange={ handleManualDateChange }
required={ !! field.isValid?.required }
disabled={ disabled }
/>

{ /* Calendar widget */ }
Expand All @@ -411,6 +416,7 @@ function CalendarDateControl< Item >( {
onMonthChange={ setCalendarMonth }
timeZone={ timezoneString || undefined }
weekStartsOn={ weekStartsOn }
disabled={ disabled }
/>
</Stack>
</BaseControl>
Expand All @@ -424,8 +430,10 @@ function CalendarDateRangeControl< Item >( {
onChange,
hideLabelFromVision,
validity,
config,
}: DataFormControlProps< Item > ) {
const { id, label, getValue, setValue, format: fieldFormat } = field;
const { disabled = false } = config || {};
let value: DateRange;
const fieldValue = getValue( { item: data } );
if (
Expand Down Expand Up @@ -576,6 +584,8 @@ function CalendarDateRangeControl< Item >( {
variant="tertiary"
isPressed={ isSelected }
size="small"
disabled={ disabled }
accessibleWhenDisabled={ false }
onClick={ () =>
handlePresetClick( preset )
}
Expand All @@ -590,7 +600,7 @@ function CalendarDateRangeControl< Item >( {
isPressed={ ! selectedPresetId }
size="small"
accessibleWhenDisabled={ false }
disabled={ !! selectedPresetId }
disabled={ !! selectedPresetId || disabled }
>
{ __( 'Custom' ) }
</Button>
Expand All @@ -614,6 +624,7 @@ function CalendarDateRangeControl< Item >( {
handleManualDateChange( 'from', newValue )
}
required={ !! field.isValid?.required }
disabled={ disabled }
/>
<InputControl
__next40pxDefaultSize
Expand All @@ -626,6 +637,7 @@ function CalendarDateRangeControl< Item >( {
handleManualDateChange( 'to', newValue )
}
required={ !! field.isValid?.required }
disabled={ disabled }
/>
</Stack>

Expand All @@ -637,6 +649,7 @@ function CalendarDateRangeControl< Item >( {
onMonthChange={ setCalendarMonth }
timeZone={ timezone.string || undefined }
weekStartsOn={ weekStartsOn }
disabled={ disabled }
/>
</Stack>
</BaseControl>
Expand All @@ -651,6 +664,7 @@ export default function DateControl< Item >( {
hideLabelFromVision,
operator,
validity,
config,
}: DataFormControlProps< Item > ) {
if ( operator === OPERATOR_IN_THE_PAST || operator === OPERATOR_OVER ) {
return (
Expand All @@ -661,6 +675,7 @@ export default function DateControl< Item >( {
onChange={ onChange }
hideLabelFromVision={ hideLabelFromVision }
operator={ operator }
config={ config }
/>
);
}
Expand All @@ -673,6 +688,7 @@ export default function DateControl< Item >( {
onChange={ onChange }
hideLabelFromVision={ hideLabelFromVision }
validity={ validity }
config={ config }
/>
);
}
Expand All @@ -684,6 +700,7 @@ export default function DateControl< Item >( {
onChange={ onChange }
hideLabelFromVision={ hideLabelFromVision }
validity={ validity }
config={ config }
/>
);
}
7 changes: 7 additions & 0 deletions packages/dataviews/src/components/dataform-controls/datetime.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,10 @@ function CalendarDateTimeControl< Item >( {
onChange,
hideLabelFromVision,
validity,
config,
}: DataFormControlProps< Item > ) {
const { id, label, description, setValue, getValue, isValid } = field;
const { disabled = false } = config || {};
const fieldValue = getValue( { item: data } );
const value = typeof fieldValue === 'string' ? fieldValue : undefined;

Expand Down Expand Up @@ -179,6 +181,7 @@ function CalendarDateTimeControl< Item >( {
onMonthChange={ setCalendarMonth }
timeZone={ timezoneString || undefined }
weekStartsOn={ weekStartsOn }
disabled={ disabled }
/>
{ /* Manual datetime input */ }
<ValidatedInputControl
Expand All @@ -197,6 +200,7 @@ function CalendarDateTimeControl< Item >( {
: ''
}
onChange={ handleManualDateTimeChange }
disabled={ disabled }
/>
</Stack>
</BaseControl>
Expand All @@ -210,6 +214,7 @@ export default function DateTime< Item >( {
hideLabelFromVision,
operator,
validity,
config,
}: DataFormControlProps< Item > ) {
if ( operator === OPERATOR_IN_THE_PAST || operator === OPERATOR_OVER ) {
return (
Expand All @@ -220,6 +225,7 @@ export default function DateTime< Item >( {
onChange={ onChange }
hideLabelFromVision={ hideLabelFromVision }
operator={ operator }
config={ config }
/>
);
}
Expand All @@ -231,6 +237,7 @@ export default function DateTime< Item >( {
onChange={ onChange }
hideLabelFromVision={ hideLabelFromVision }
validity={ validity }
config={ config }
/>
);
}
3 changes: 3 additions & 0 deletions packages/dataviews/src/components/dataform-controls/email.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,9 @@ export default function Email< Item >( {
onChange,
hideLabelFromVision,
validity,
config,
}: DataFormControlProps< Item > ) {
const { disabled = false } = config || {};
return (
<ValidatedText
{ ...{
Expand All @@ -28,6 +30,7 @@ export default function Email< Item >( {
onChange,
hideLabelFromVision,
validity,
disabled,
type: 'email',
prefix: (
<InputControlPrefixWrapper variant="icon">
Expand Down
2 changes: 1 addition & 1 deletion packages/dataviews/src/components/dataform-controls/number.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,5 @@ import type { DataFormControlProps } from '../../types';
import ValidatedNumber from './utils/validated-number';

export default function Number< Item >( props: DataFormControlProps< Item > ) {
return <ValidatedNumber { ...props } />;
return <ValidatedNumber { ...props } config={ props.config } />;
}
3 changes: 3 additions & 0 deletions packages/dataviews/src/components/dataform-controls/password.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,10 @@ export default function Password< Item >( {
onChange,
hideLabelFromVision,
validity,
config,
}: DataFormControlProps< Item > ) {
const [ isVisible, setIsVisible ] = useState( false );
const { disabled = false } = config || {};

const toggleVisibility = useCallback( () => {
setIsVisible( ( prev ) => ! prev );
Expand All @@ -35,6 +37,7 @@ export default function Password< Item >( {
onChange,
hideLabelFromVision,
validity,
disabled,
type: isVisible ? 'text' : 'password',
suffix: (
<InputControlSuffixWrapper variant="control">
Expand Down
3 changes: 3 additions & 0 deletions packages/dataviews/src/components/dataform-controls/radio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,10 @@ export default function Radio< Item >( {
onChange,
hideLabelFromVision,
validity,
config,
}: DataFormControlProps< Item > ) {
const { label, description, getValue, setValue, isValid } = field;
const { disabled = false } = config || {};
const { elements, isLoading } = useElements( {
elements: field.elements,
getElements: field.getElements,
Expand All @@ -48,6 +50,7 @@ export default function Radio< Item >( {
options={ elements }
selected={ value }
hideLabelFromVision={ hideLabelFromVision }
disabled={ disabled }
/>
);
}
3 changes: 3 additions & 0 deletions packages/dataviews/src/components/dataform-controls/select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,10 @@ export default function Select< Item >( {
onChange,
hideLabelFromVision,
validity,
config,
}: DataFormControlProps< Item > ) {
const { type, label, description, getValue, setValue, isValid } = field;
const { disabled = false } = config || {};

const isMultiple = type === 'array';
const value = getValue( { item: data } ) ?? ( isMultiple ? [] : '' );
Expand Down Expand Up @@ -53,6 +55,7 @@ export default function Select< Item >( {
__next40pxDefaultSize
hideLabelFromVision={ hideLabelFromVision }
multiple={ isMultiple }
disabled={ disabled }
/>
);
}
3 changes: 3 additions & 0 deletions packages/dataviews/src/components/dataform-controls/telephone.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,9 @@ export default function Telephone< Item >( {
onChange,
hideLabelFromVision,
validity,
config,
}: DataFormControlProps< Item > ) {
const { disabled = false } = config || {};
return (
<ValidatedText
{ ...{
Expand All @@ -28,6 +30,7 @@ export default function Telephone< Item >( {
onChange,
hideLabelFromVision,
validity,
disabled,
type: 'tel',
prefix: (
<InputControlPrefixWrapper variant="icon">
Expand Down
Loading
Loading