feat(S2): show a console warning when content components are used standalone by reidbarber · Pull Request #9604 · adobe/react-spectrum

reidbarber · 2026-02-04T21:22:36Z

When content components (Text, Heading, etc.) are used standalone, they don't inherit any styles. This PR's change will show a warning in this case, so the user knows to use native HTML elements with the style macro instead.

This change is also oriented to AI tools that frequently make this mistake, although it seems like they more often look at lint errors instead of browser errors. Not sure this is something we can catch with a lint plugin.

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

See unit tests.

🧢 Your Project:

packages/@react-spectrum/s2/src/Content.tsx

reidbarber · 2026-02-04T22:27:44Z

packages/@react-spectrum/s2/src/StatusLight.tsx

        </svg>
      </CenterBaseline>
-      <Text>{children}</Text>
+      <span>{children}</span>


I guess we probably added this for Skeleton loading capabilities. I can see if we go back to Text and update our hook to detect this instead.

Yeah. I guess we're currently relying on the font styles being inherited from the div. You could potentially move those so they are directly applied to the Text instead?

rspbot · 2026-02-04T22:30:56Z

Build successful! 🎉

snowystinger · 2026-02-04T23:17:18Z

packages/@react-spectrum/s2/test/EditableTableView.test.tsx

-                            <PickerItem textValue="Emily" id="Emily"><Text>Emily</Text></PickerItem>
-                            <PickerItem textValue="Amelia" id="Amelia"><Text>Amelia</Text></PickerItem>
-                            <PickerItem textValue="Isla" id="Isla"><Text>Isla</Text></PickerItem>
+                            <PickerItem textValue="Eva" id="Eva">Eva</PickerItem>


don't need textValue either then?

snowystinger · 2026-02-04T23:31:46Z

packages/@react-spectrum/s2/src/Content.tsx

 export const Heading = forwardRef(// Wrapper around RAC Heading to unmount when hidden.
 function Heading(props: HeadingProps, ref: DOMRef<HTMLHeadingElement>) {
  [props, ref] = useSpectrumContextProps(props, ref, HeadingContext);
+  useWarnIfNoStyles('Heading', props);


this is just checking props, would it be better to check that there's a context object? otherwise you wont' get the warning sometimes

you could pass the context to retrieve instead of props
useWarnIfNoStyles('Heading', HeadingContext);

then in the hook, useContext(Context) and just check if that returns an object at all

It's happening after the props are merged from context so should be ok right?

I wonder if this would be better?

useWarnIfNoStyles('Heading', ...allContexts);

We could include SkeletonContext and anything else that comes along.

Sorry, what I meant was, if we check props, then if someone sets their own props directly on the component, then we don't get the warn.

<Text UNSAFE_className="blah">Foo</Text>

would not warn

If we check just the context, then we know if it's being used inside something providing the styles. And from what we see, a lot of people reach for the UNSAFE, so i think it'd be better to warn for this, then they can just use an html element and won't need the unsafe anymore

This reverts commit c650b52.

devongovett · 2026-02-06T18:42:40Z

packages/@react-spectrum/s2/src/Content.tsx

+      console.warn(
+        `${componentName} is being used outside of a component that provides automatic styling. ` +
+        'Consider using a standard HTML element instead (e.g., <h1>, <div>, <p>, etc.), ' +
+        'and use the \'styles\' prop from the style macro to provide custom styles: https://react-spectrum.adobe.com/styling'


It would be className not styles if we are recommending using standard HTML elements. But seems like it could also be an OR instead of an AND? Like, they could use <Heading> or <Text> as long as they also provide styles. Which do we want to recommend? As you noticed, Text does have the benefit of working with skeleton as well so there could be cases where people want to use that.

devongovett · 2026-02-06T18:43:18Z

packages/@react-spectrum/s2/src/Content.tsx

 export const Heading = forwardRef(// Wrapper around RAC Heading to unmount when hidden.
 function Heading(props: HeadingProps, ref: DOMRef<HTMLHeadingElement>) {
  [props, ref] = useSpectrumContextProps(props, ref, HeadingContext);
+  useWarnIfNoStyles('Heading', props);


It's happening after the props are merged from context so should be ok right?

devongovett · 2026-02-06T18:44:56Z

packages/@react-spectrum/s2/src/StatusLight.tsx

        </svg>
      </CenterBaseline>
-      <Text>{children}</Text>
+      <span>{children}</span>


Yeah. I guess we're currently relying on the font styles being inherited from the div. You could potentially move those so they are directly applied to the Text instead?

…standalone

snowystinger · 2026-02-10T21:58:36Z

packages/@react-spectrum/s2/src/Toast.tsx

            </CenterBaseline>
          }
-          <Text slot="title">{toast.content.children}</Text>
+          <TextContext.Provider value={{}}>


what happened here? won't this make the slot="title" unnecessary?

same with all the other components above?

snowystinger · 2026-02-10T22:00:17Z

packages/@react-spectrum/s2/src/Content.tsx

 }

+function useWarnIfStandalone<T>(componentName: string, context: Context<ContextValue<T, any>>) {
+  let ctx = useSlottedContext(context);


probably need to pass along the props.slot from the caller as well

reidbarber · 2026-02-13T17:47:21Z

Going to close this out for now, I think it might be a bit too strict and noisy.

Mainly due to the fact that:

These incorrect usages seem more common than I expected, and I think they may produce a ton of unexpected warnings after people upgrade.
Using these incorrectly doesn't necessarily result in invalid HTML or inaccessible UIs.

This would probably be better implemented inside a custom ESLint plugin for React Spectrum.

show a warning when content components are used standalone

7f46844

snowystinger reviewed Feb 4, 2026

View reviewed changes

packages/@react-spectrum/s2/src/Content.tsx Outdated Show resolved Hide resolved

reidbarber added 3 commits February 4, 2026 15:50

cleanup other tests

75bc538

add env check

19b65eb

remove Text StatusLight

c650b52

reidbarber commented Feb 4, 2026

View reviewed changes

snowystinger reviewed Feb 4, 2026

View reviewed changes

Revert "remove Text StatusLight"

ade46a2

This reverts commit c650b52.

snowystinger added the ready for review label Feb 5, 2026

devongovett reviewed Feb 6, 2026

View reviewed changes

reidbarber added 2 commits February 10, 2026 11:23

address review comments

3eb3cbc

Merge remote-tracking branch 'origin/main' into warn-if-content-used-…

72dddc3

…standalone

github-actions bot added S2 v3 labels Feb 10, 2026

snowystinger reviewed Feb 10, 2026

View reviewed changes

reidbarber closed this Feb 13, 2026

Conversation

reidbarber commented Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Feb 4, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

reidbarber commented Feb 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

reidbarber commented Feb 4, 2026 •

edited

Loading