fix: support disabled prop in text variant

Author: AlanFnz

src/components/experimental/DateField/DateField.tsx

@@ -6,7 +6,7 @@ import { Footer } from '../Field/Footer';
 import { FakeInput } from '../Field/FakeInput';
 import { InnerWrapper } from '../Field/InnerWrapper';
 import { Wrapper } from '../Field/Wrapper';
-import { DateInput } from '../Field/Field';
+import { DateInput, Input } from '../Field/Field';
 import { DateSegment } from '../Field/DateSegment';
 import { FieldProps } from '../Field/Props';
 
@@ -84,12 +84,17 @@ const DateFieldInner = React.forwardRef<HTMLDivElement, DateFieldProps>((props,
                     {leadingIcon}
                     <InnerWrapper>
                         {label && <Label $flying>{label}</Label>}
-                        <input
+                        <Input
                             ref={inputRef}
                             value={value}
-                            onChange={e => onChange(e.target.value)}
+                            onChange={e => {
+                                if (isDisabled) return;
+                                onChange(e.target.value);
+                            }}
                             placeholder={placeholder}
                             style={inputStyle}
+                            disabled={isDisabled}
+                            aria-disabled={isDisabled}
                             {...inputProps}
                         />
                     </InnerWrapper>

src/components/experimental/DateField/docs/DateField.stories.tsx

@@ -95,6 +95,19 @@ export const TextVariant: Story = {
     }
 };
 
+export const TextVariantDisabled: Story = {
+    args: {
+        variant: 'text',
+        placeholder: 'dd / mm / yyyy',
+        description: 'Text variant should be disabled',
+        isDisabled: true
+    },
+    render: (args: Extract<DateFieldProps, { variant: 'text' }>) => {
+        const [val, setVal] = React.useState('');
+        return <DateField {...args} value={val} onChange={setVal} actionIcon={<DropdownSelectIcon />} />;
+    }
+};
+
 export const TextVariantAutoFocus: Story = {
     args: {
         variant: 'text',

src/components/experimental/DatePicker/DatePicker.tsx

@@ -331,6 +331,7 @@ export function DatePicker(props: DatePickerProps): JSX.Element {
                         description={description}
                         errorMessage={errorMessage}
                         isInvalid={isInvalid}
+                        isDisabled={legacyIsDisabled}
                         isVisuallyFocused={open}
                         leadingIcon={<CalendarTodayOutlineIcon />}
                         value={singleSource ? dateToCalendarDate(singleSource) : undefined}
@@ -362,6 +363,7 @@ export function DatePicker(props: DatePickerProps): JSX.Element {
                         description={description}
                         errorMessage={errorMessage}
                         isInvalid={isInvalid}
+                        isDisabled={legacyIsDisabled || isDisabled}
                         isVisuallyFocused={open}
                         leadingIcon={<CalendarTodayOutlineIcon />}
                         value={inputValue}

src/components/experimental/Field/FakeInput.ts

@@ -24,7 +24,6 @@ export const FakeInput = styled.div<{ $isVisuallyFocused: boolean }>`
     border-style: solid;
     border-color: ${getSemanticValue('outline-variant')};
     border-radius: ${get('radii.4')};
-
     min-height: 3.5rem;
     padding: 0 ${get('space.3')} 0 ${get('space.4')};
     display: flex;
@@ -55,5 +54,11 @@ export const FakeInput = styled.div<{ $isVisuallyFocused: boolean }>`
         pointer-events: none;
     }
 
+    &:has(input[disabled]),
+    &:has([aria-disabled='true']) {
+        opacity: 0.38;
+        pointer-events: none;
+    }
+
     ${props => props.$isVisuallyFocused && focusStyles}
 `;