diff --git a/.agents/skills/headless-component/SKILL.md b/.agents/skills/headless-component/SKILL.md index 7810bb994b3f11..5a6ebf898f82f7 100644 --- a/.agents/skills/headless-component/SKILL.md +++ b/.agents/skills/headless-component/SKILL.md @@ -241,14 +241,14 @@ State attributes are the supported CSS targeting contract. attribute. - Removal or rename is breaking. Additions require tests and documentation. -Use `stringifyDataAttribute` from `library/src/utils` for presence and string +Use `toDataAttributeValue` from `library/src/utils` for presence and string attributes: ```tsx const state: ComponentNameState = useComponentNameBase_unstable(props, ref); // Applied after consumer props so base state cannot be misrepresented. -state.root['data-disabled'] = stringifyDataAttribute(state.disabled); +state.root['data-disabled'] = toDataAttributeValue(state.disabled); return state; ``` diff --git a/docs/react-v9/contributing/rfcs/react-components/convergence/headless-components.md b/docs/react-v9/contributing/rfcs/react-components/convergence/headless-components.md index f52626f09d9b7e..ec2720d1d2f7a7 100644 --- a/docs/react-v9/contributing/rfcs/react-components/convergence/headless-components.md +++ b/docs/react-v9/contributing/rfcs/react-components/convergence/headless-components.md @@ -112,12 +112,12 @@ Example (simplified): ```tsx const state = useButton(props, ref); -// stringifyDataAttribute: returns undefined (omits the attribute) for falsy presence -// attributes, or the string value ("true"/"false"/enum) for boolean/tri-state attributes. +// toDataAttributeValue: returns '' (attribute present) for true, undefined (attribute +// omitted) for false, and the stringified value for enum/tri-state attributes. Object.assign(state.root, { - 'data-disabled': stringifyDataAttribute(state.disabled), - 'data-disabled-focusable': stringifyDataAttribute(state.disabledFocusable), - 'data-icon-only': stringifyDataAttribute(state.iconOnly), + 'data-disabled': toDataAttributeValue(state.disabled), + 'data-disabled-focusable': toDataAttributeValue(state.disabledFocusable), + 'data-icon-only': toDataAttributeValue(state.iconOnly), }); return state;