Skip to content

Commit 6835cce

Browse files
suyash5053suyash5053
authored
Fix: data-disabled CSS selector for DateField (#7896)
* fix:added the missing data-disabled attribute * some left changes * added some test cases * removed all unnecessary test cases and added one with render prop * adding isDisabled test case for TimeField
1 parent 83ab4ef commit 6835cce

File tree

3 files changed

+52
-8
lines changed

3 files changed

+52
-8
lines changed

‎packages/react-aria-components/src/DateField.tsx

+9-6
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ export const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function D
9292
<Provider
9393
values={[
9494
[DateFieldStateContext, state],
95-
[GroupContext, {...fieldProps, ref: fieldRef, isInvalid: state.isInvalid}],
95+
[GroupContext, {...fieldProps, ref: fieldRef, isInvalid: state.isInvalid, isDisabled: state.isDisabled}],
9696
[InputContext, {...inputProps, ref: inputRef}],
9797
[LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],
9898
[TextContext, {
@@ -108,7 +108,8 @@ export const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function D
108108
{...renderProps}
109109
ref={ref}
110110
slot={props.slot || undefined}
111-
data-invalid={state.isInvalid || undefined} />
111+
data-invalid={state.isInvalid || undefined}
112+
data-disabled={state.isDisabled || undefined} />
112113
</Provider>
113114
);
114115
});
@@ -157,7 +158,7 @@ export const TimeField = /*#__PURE__*/ (forwardRef as forwardRefType)(function T
157158
<Provider
158159
values={[
159160
[TimeFieldStateContext, state],
160-
[GroupContext, {...fieldProps, ref: fieldRef, isInvalid: state.isInvalid}],
161+
[GroupContext, {...fieldProps, ref: fieldRef, isInvalid: state.isInvalid, isDisabled: state.isDisabled}],
161162
[InputContext, {...inputProps, ref: inputRef}],
162163
[LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],
163164
[TextContext, {
@@ -173,7 +174,8 @@ export const TimeField = /*#__PURE__*/ (forwardRef as forwardRefType)(function T
173174
{...renderProps}
174175
ref={ref}
175176
slot={props.slot || undefined}
176-
data-invalid={state.isInvalid || undefined} />
177+
data-invalid={state.isInvalid || undefined}
178+
data-disabled={state.isDisabled || undefined} />
177179
</Provider>
178180
);
179181
});
@@ -241,7 +243,7 @@ const DateInputStandalone = forwardRef((props: DateInputProps, ref: ForwardedRef
241243
values={[
242244
[DateFieldStateContext, state],
243245
[InputContext, {...inputProps, ref: inputRef}],
244-
[GroupContext, {...fieldProps, ref: fieldRef, isInvalid: state.isInvalid}]
246+
[GroupContext, {...fieldProps, ref: fieldRef, isInvalid: state.isInvalid, isDisabled: state.isDisabled}]
245247
]}>
246248
<DateInputInner {...props} />
247249
</Provider>
@@ -261,7 +263,8 @@ const DateInputInner = forwardRef((props: DateInputProps, ref: ForwardedRef<HTML
261263
ref={ref}
262264
slot={props.slot || undefined}
263265
className={className ?? 'react-aria-DateInput'}
264-
isInvalid={state.isInvalid}>
266+
isInvalid={state.isInvalid}
267+
isDisabled={state.isDisabled}>
265268
{state.segments.map((segment, i) => cloneElement(children(segment), {key: i}))}
266269
</Group>
267270
<Input />

‎packages/react-aria-components/test/DateField.test.js

+24-2
Original file line numberDiff line numberDiff line change
@@ -179,11 +179,15 @@ describe('DateField', () => {
179179

180180
it('should support render props', () => {
181181
let {getByRole} = render(
182-
<DateField minValue={new CalendarDate(2023, 1, 1)} defaultValue={new CalendarDate(2020, 2, 3)} validationBehavior="aria">
182+
<DateField
183+
minValue={new CalendarDate(2023, 1, 1)}
184+
defaultValue={new CalendarDate(2020, 2, 3)}
185+
validationBehavior="aria">
183186
{({isInvalid}) => (
184187
<>
185188
<Label>Birth date</Label>
186-
<DateInput data-validation-state={isInvalid ? 'invalid' : null}>
189+
<DateInput
190+
data-validation-state={isInvalid ? 'invalid' : null}>
187191
{segment => <DateSegment segment={segment} />}
188192
</DateInput>
189193
</>
@@ -194,6 +198,24 @@ describe('DateField', () => {
194198
expect(group).toHaveAttribute('data-validation-state', 'invalid');
195199
});
196200

201+
it('should support disabled render prop', () => {
202+
let {getByRole} = render(
203+
<DateField isDisabled>
204+
{({isDisabled}) => (
205+
<>
206+
<Label>Birth date</Label>
207+
<DateInput
208+
data-disabled-state={isDisabled ? 'disabled' : null}>
209+
{segment => <DateSegment segment={segment} />}
210+
</DateInput>
211+
</>
212+
)}
213+
</DateField>
214+
);
215+
let group = getByRole('group');
216+
expect(group).toHaveAttribute('data-disabled-state', 'disabled');
217+
});
218+
197219
it('should support form value', () => {
198220
render(
199221
<DateField name="birthday" value={new CalendarDate(2020, 2, 3)}>

‎packages/react-aria-components/test/TimeField.test.js

+19
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,25 @@ describe('TimeField', () => {
112112
expect(group).toHaveAttribute('data-validation-state', 'invalid');
113113
});
114114

115+
it('should support disabled render prop', () => {
116+
let {getByRole} = render(
117+
<TimeField isDisabled>
118+
{({isDisabled}) => (
119+
<>
120+
<Label>Birth date</Label>
121+
<DateInput
122+
data-disabled-state={isDisabled ? 'disabled' : null}>
123+
{segment => <DateSegment segment={segment} />}
124+
</DateInput>
125+
</>
126+
)}
127+
</TimeField>
128+
);
129+
130+
let group = getByRole('group');
131+
expect(group).toHaveAttribute('data-disabled-state', 'disabled');
132+
});
133+
115134
it('should support form value', () => {
116135
render(
117136
<TimeField name="time" value={new Time(8, 30)}>

0 commit comments

Comments
 (0)