Skip to content

Commit 6855a53

Browse files
iamwillpowelliamwillpowell
authored
Add filter for data attributes (#5008)
* Add filter for data attributes * fix * skip test * filter data attributes from more components * Update searchField * switch and textfield fixes * fix lint error * Update switch test * Fix switch story css * Tweaks and tests * remove comment * Clean up * move example css to the right file * types * Unskip and fix test * test for RadioGroup * Remove comment * filter dataattrs before sending to hook * Rename function that filters out data attributes * Fix import sorting to make linter happy * move removeDataAttributes so it filters props before passing to hooks
1 parent b95f766 commit 6855a53

22 files changed

+320
-48
lines changed

‎packages/react-aria-components/example/index.css

Lines changed: 85 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -287,4 +287,88 @@ html {
287287
&[data-disabled] {
288288
opacity: 0.4;
289289
}
290-
}
290+
}
291+
292+
.toggleButtonExample[data-selected] {
293+
background-color: gray;
294+
}
295+
296+
.searchFieldExample [type="search"] {
297+
&::-webkit-search-cancel-button,
298+
&::-webkit-search-decoration {
299+
-webkit-appearance: none;
300+
}
301+
}
302+
303+
.switchExample {
304+
--label-color: var(--spectrum-alias-text-color);
305+
--deselected-color: gray;
306+
--deselected-color-pressed: dimgray;
307+
--selected-color: slateblue;
308+
--selected-color-pressed: rgb(74, 59, 166);
309+
--track-color: var(--spectrum-alias-background-color-default);
310+
--indicator-color: var(--selected-color);
311+
--indicator-color-pressed: var(--selected-color-pressed);
312+
313+
display: flex;
314+
align-items: center;
315+
gap: 0.571rem;
316+
color: var(--label-color);
317+
318+
.switchExample-indicator {
319+
width: 2rem;
320+
height: 1.143rem;
321+
border: 2px solid var(--deselected-color);
322+
background: var(--track-color);
323+
border-radius: 1.143rem;
324+
transition: all 200ms;
325+
326+
&:before {
327+
content: '';
328+
display: block;
329+
margin: 0.143rem;
330+
width: 0.857rem;
331+
height: 0.857rem;
332+
background: var(--indicator-color);
333+
border-radius: 16px;
334+
transition: all 200ms;
335+
}
336+
}
337+
338+
&[data-pressed] {
339+
.switchExample-indicator {
340+
border-color: var(--deselected-color-pressed);
341+
342+
&:before {
343+
background-color: var(--indicator-color-pressed);
344+
}
345+
}
346+
}
347+
348+
&[data-selected] {
349+
.switchExample-indicator {
350+
border-color: var(--selected-color);
351+
background: var(--selected-color);
352+
353+
&:before {
354+
background-color: var(--track-color);
355+
transform: translateX(100%);
356+
}
357+
}
358+
359+
&[data-pressed] {
360+
.switchExample-indicator {
361+
border-color: var(--selected-color-pressed);
362+
background: var(--selected-color-pressed);
363+
}
364+
}
365+
}
366+
367+
&[data-focus-visible] .switchExample-indicator {
368+
box-shadow: 0 0 0 2px var(--spectrum-alias-background-color-default), 0 0 0 4px var(--selected-color);
369+
}
370+
371+
&[data-disabled] {
372+
opacity: 0.4;
373+
}
374+
}

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {AriaComboBoxProps, useComboBox, useFilter} from 'react-aria';
1313
import {ButtonContext} from './Button';
1414
import {Collection, ComboBoxState, Node, useComboBoxState} from 'react-stately';
1515
import {CollectionDocumentContext, useCollectionDocument} from './Collection';
16-
import {ContextValue, forwardRefType, Hidden, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
16+
import {ContextValue, forwardRefType, Hidden, Provider, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
1717
import {filterDOMProps, useResizeObserver} from '@react-aria/utils';
1818
import {InputContext} from './Input';
1919
import {LabelContext} from './Label';
@@ -139,15 +139,14 @@ function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}:
139139
descriptionProps,
140140
errorMessageProps
141141
} = useComboBox({
142-
...props,
142+
...removeDataAttributes(props),
143143
label,
144144
inputRef,
145145
buttonRef,
146146
listBoxRef,
147147
popoverRef,
148148
name: formValue === 'text' ? name : undefined
149-
},
150-
state);
149+
}, state);
151150

152151
// Make menu width match input + button
153152
let [menuWidth, setMenuWidth] = useState<string | null>(null);

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212
import {AriaDateFieldProps, AriaTimeFieldProps, DateValue, mergeProps, TimeValue, useDateField, useDateSegment, useLocale, useTimeField} from 'react-aria';
13-
import {ContextValue, forwardRefType, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils';
13+
import {ContextValue, forwardRefType, Provider, removeDataAttributes, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils';
1414
import {createCalendar} from '@internationalized/date';
1515
import {DateFieldState, DateSegmentType, DateSegment as IDateSegment, TimeFieldState, useDateFieldState, useTimeFieldState} from 'react-stately';
1616
import {filterDOMProps, useObjectRef} from '@react-aria/utils';
@@ -56,10 +56,10 @@ function DateField<T extends DateValue>(props: DateFieldProps<T>, ref: Forwarded
5656
let fieldRef = useRef<HTMLDivElement>(null);
5757
let [labelRef, label] = useSlot();
5858
let inputRef = useRef<HTMLInputElement>(null);
59-
let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps} = useDateField({...props, label, inputRef}, state, fieldRef);
59+
let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps} = useDateField({...removeDataAttributes(props), label, inputRef}, state, fieldRef);
6060

6161
let renderProps = useRenderProps({
62-
...props,
62+
...removeDataAttributes(props),
6363
values: {
6464
state,
6565
isInvalid: state.isInvalid,
@@ -113,7 +113,7 @@ function TimeField<T extends TimeValue>(props: TimeFieldProps<T>, ref: Forwarded
113113
let fieldRef = useRef<HTMLDivElement>(null);
114114
let [labelRef, label] = useSlot();
115115
let inputRef = useRef<HTMLInputElement>(null);
116-
let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps} = useTimeField({...props, label, inputRef}, state, fieldRef);
116+
let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps} = useTimeField({...removeDataAttributes(props), label, inputRef}, state, fieldRef);
117117

118118
let renderProps = useRenderProps({
119119
...props,

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
import {AriaDatePickerProps, AriaDateRangePickerProps, DateValue, useDatePicker, useDateRangePicker, useFocusRing} from 'react-aria';
1313
import {ButtonContext} from './Button';
1414
import {CalendarContext, RangeCalendarContext} from './Calendar';
15-
import {ContextValue, forwardRefType, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
15+
import {ContextValue, forwardRefType, Provider, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
1616
import {DateFieldContext} from './DateField';
1717
import {DatePickerState, DateRangePickerState, useDatePickerState, useDateRangePickerState} from 'react-stately';
1818
import {DialogContext, OverlayTriggerStateContext} from './Dialog';
@@ -78,7 +78,7 @@ function DatePicker<T extends DateValue>(props: DatePickerProps<T>, ref: Forward
7878
calendarProps,
7979
descriptionProps,
8080
errorMessageProps
81-
} = useDatePicker({...props, label}, state, groupRef);
81+
} = useDatePicker({...removeDataAttributes(props), label}, state, groupRef);
8282

8383
let {focusProps, isFocused, isFocusVisible} = useFocusRing({within: true});
8484
let renderProps = useRenderProps({
@@ -150,7 +150,7 @@ function DateRangePicker<T extends DateValue>(props: DateRangePickerProps<T>, re
150150
calendarProps,
151151
descriptionProps,
152152
errorMessageProps
153-
} = useDateRangePicker({...props, label}, state, groupRef);
153+
} = useDateRangePicker({...removeDataAttributes(props), label}, state, groupRef);
154154

155155
let {focusProps, isFocused, isFocusVisible} = useFocusRing({within: true});
156156
let renderProps = useRenderProps({

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
import {AriaNumberFieldProps, useLocale, useNumberField} from 'react-aria';
1414
import {ButtonContext} from './Button';
15-
import {ContextValue, forwardRefType, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
15+
import {ContextValue, forwardRefType, Provider, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
1616
import {filterDOMProps} from '@react-aria/utils';
1717
import {GroupContext} from './Group';
1818
import {InputContext} from './Input';
@@ -58,7 +58,7 @@ function NumberField(props: NumberFieldProps, ref: ForwardedRef<HTMLDivElement>)
5858
decrementButtonProps,
5959
descriptionProps,
6060
errorMessageProps
61-
} = useNumberField({...props, label}, state, inputRef);
61+
} = useNumberField({...removeDataAttributes(props), label}, state, inputRef);
6262

6363
let renderProps = useRenderProps({
6464
...props,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
*/
1212

1313
import {AriaRadioGroupProps, AriaRadioProps, Orientation, useFocusRing, useHover, usePress, useRadio, useRadioGroup, VisuallyHidden} from 'react-aria';
14-
import {ContextValue, forwardRefType, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
14+
import {ContextValue, forwardRefType, Provider, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
1515
import {filterDOMProps, mergeProps, useObjectRef} from '@react-aria/utils';
1616
import {LabelContext} from './Label';
1717
import {RadioGroupState, useRadioGroupState} from 'react-stately';
@@ -160,7 +160,7 @@ function Radio(props: RadioProps, ref: ForwardedRef<HTMLInputElement>) {
160160
let state = React.useContext(RadioGroupStateContext)!;
161161
let domRef = useObjectRef(ref);
162162
let {inputProps, isSelected, isDisabled, isPressed: isPressedKeyboard} = useRadio({
163-
...props,
163+
...removeDataAttributes<RadioProps>(props),
164164
// ReactNode type doesn't allow function children.
165165
children: typeof props.children === 'function' ? true : props.children
166166
}, state, domRef);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
import {AriaSearchFieldProps, useSearchField} from 'react-aria';
1414
import {ButtonContext} from './Button';
15-
import {ContextValue, forwardRefType, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
15+
import {ContextValue, forwardRefType, Provider, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
1616
import {filterDOMProps} from '@react-aria/utils';
1717
import {InputContext} from './Input';
1818
import {LabelContext} from './Label';
@@ -52,7 +52,7 @@ function SearchField(props: SearchFieldProps, ref: ForwardedRef<HTMLDivElement>)
5252
let [labelRef, label] = useSlot();
5353
let state = useSearchFieldState(props);
5454
let {labelProps, inputProps, clearButtonProps, descriptionProps, errorMessageProps} = useSearchField({
55-
...props,
55+
...removeDataAttributes(props),
5656
label
5757
}, state, inputRef);
5858

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
import {AriaSelectProps, HiddenSelect, useFocusRing, useLocalizedStringFormatter, useSelect} from 'react-aria';
1414
import {ButtonContext} from './Button';
1515
import {CollectionDocumentContext, ItemRenderProps, useCollectionDocument} from './Collection';
16-
import {ContextValue, forwardRefType, Hidden, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';
16+
import {ContextValue, forwardRefType, Hidden, Provider, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';
1717
import {filterDOMProps, useResizeObserver} from '@react-aria/utils';
1818
// @ts-ignore
1919
import intlMessages from '../intl/*.json';
@@ -94,7 +94,7 @@ function Select<T extends object>(props: SelectProps<T>, ref: ForwardedRef<HTMLD
9494
menuProps,
9595
descriptionProps,
9696
errorMessageProps
97-
} = useSelect({...props, label}, state, buttonRef);
97+
} = useSelect({...removeDataAttributes(props), label}, state, buttonRef);
9898

9999
// Make menu width match input + button
100100
let [buttonWidth, setButtonWidth] = useState<string | null>(null);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
*/
1212

1313
import {AriaSwitchProps, mergeProps, useFocusRing, useHover, usePress, useSwitch, VisuallyHidden} from 'react-aria';
14-
import {ContextValue, forwardRefType, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
14+
import {ContextValue, forwardRefType, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
1515
import {filterDOMProps} from '@react-aria/utils';
1616
import React, {createContext, ForwardedRef, forwardRef, useState} from 'react';
1717
import {ToggleState, useToggleState} from 'react-stately';
@@ -66,7 +66,7 @@ function Switch(props: SwitchProps, ref: ForwardedRef<HTMLInputElement>) {
6666
[props, ref] = useContextProps(props, ref, SwitchContext);
6767
let state = useToggleState(props);
6868
let {inputProps, isSelected, isDisabled, isReadOnly, isPressed: isPressedKeyboard} = useSwitch({
69-
...props,
69+
...removeDataAttributes(props),
7070
// ReactNode type doesn't allow function children.
7171
children: typeof props.children === 'function' ? true : props.children
7272
}, state, ref);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
*/
1212

1313
import {AriaTextFieldProps, useTextField} from 'react-aria';
14-
import {ContextValue, DOMProps, forwardRefType, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
14+
import {ContextValue, DOMProps, forwardRefType, Provider, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
1515
import {filterDOMProps} from '@react-aria/utils';
1616
import {InputContext} from './Input';
1717
import {LabelContext} from './Label';
@@ -45,7 +45,7 @@ function TextField(props: TextFieldProps, ref: ForwardedRef<HTMLDivElement>) {
4545
let [labelRef, label] = useSlot();
4646
let [inputElementType, setInputElementType] = useState('input');
4747
let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField<any>({
48-
...props,
48+
...removeDataAttributes(props),
4949
inputElementType,
5050
label
5151
}, inputRef);

0 commit comments

Comments
 (0)