Skip to content

chore(S2): audit style macro utilities#9544

Open
reidbarber wants to merge 15 commits intomainfrom
style-macr-utility-audit
Open

chore(S2): audit style macro utilities#9544
reidbarber wants to merge 15 commits intomainfrom
style-macr-utility-audit

Conversation

@reidbarber
Copy link
Member

@reidbarber reidbarber commented Jan 28, 2026

Exports:

  • Exported all style macro utilities that are safe from breaking changes when design tokens or styles update. For the remaining utilities, we'll need to decide on a versioning system and come back to those later.
  • Moved raw and keyframes exports to the @react-spectrum/s2/style sub-package only (since they're macros), and kept mergeStyles in the main @react-spectrum/s2 package only (it's runtime-only)
  • Exported WidthProperties and HeightProperties as types for use with getAllowedOverrides

Renamed:

  • Renamed colorScheme utility to setColorScheme to clarify that it sets the color-scheme property

Docs:

  • Added JSDoc to all exported utilities
  • Added a new "Utilities" section to the style macro reference docs documenting all exported utilities
  • Updated the "Built-in utilities" section in the Styling guide to link to the new section in the style macro reference page

✅ 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:

Verify the new exports and check the new JSDocs and docs additions (including markdown docs page).

🧢 Your Project:

@rspbot
Copy link

rspbot commented Jan 28, 2026

@reidbarber reidbarber changed the title chore(S2): audit style macro utilities [WIP] chore(S2): audit style macro utilities Jan 28, 2026
@reidbarber reidbarber marked this pull request as draft January 28, 2026 19:05
@rspbot
Copy link

rspbot commented Jan 28, 2026

@reidbarber reidbarber removed the v3 label Feb 11, 2026
@reidbarber reidbarber marked this pull request as ready for review February 11, 2026 17:45
@reidbarber reidbarber changed the title [WIP] chore(S2): audit style macro utilities chore(S2): audit style macro utilities Feb 11, 2026
@github-actions github-actions bot added the v3 label Feb 11, 2026
@rspbot
Copy link

rspbot commented Feb 11, 2026

}

/**
* Returns the list of CSS property names that are allowed as style overrides via the `styles` prop.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This one is subject to breaking changes for any added or removed property.

I was originally thinking it might be better to turn the three
allowedOverrides, widthProperties, heightProperties
into macros so people can construct their own getAllowedOverrides, then if we need to change the list, we can still do that inside getAllowedOverrides

However, I realised that this is already subject to breaking changes through our own components to a degree. We cannot remove any. We can safely add them at the moment though since TS will prevent someone from using one that isn't allowed.

So if we add any properties in the future, maybe we have to wrap getAllowedOverrides in a new macro which appends more fields so we don't change this one.

@reidbarber reidbarber removed the v3 label Feb 12, 2026
@rspbot
Copy link

rspbot commented Feb 24, 2026

@rspbot
Copy link

rspbot commented Feb 24, 2026

## API Changes

@react-spectrum/s2

/@react-spectrum/s2:getAllowedOverrides

+getAllowedOverrides {
+  undefined: any
+  returnVal: undefined
+}

/@react-spectrum/s2:centerPadding

+centerPadding {
+  minHeight: string
+  returnVal: undefined
+}

/@react-spectrum/s2:setColorScheme

+setColorScheme {
+  returnVal: undefined
+}

/@react-spectrum/s2:mergeStyles

+mergeStyles {
+  styles: Array<StyleString | null | undefined>
+  returnVal: undefined
+}

/@react-spectrum/s2:StylesProp

+StylesProp {
+  S: undefined
+}

/@react-spectrum/s2:StylesPropWithHeight

+StylesPropWithHeight {
+  S: undefined
+}

/@react-spectrum/s2:StylesPropWithoutWidth

+StylesPropWithoutWidth {
+  S: undefined
+}

/@react-spectrum/s2:UnsafeClassName

+UnsafeClassName {
+  U: undefined
+}

/@react-spectrum/s2:UnsafeStyles

+UnsafeStyles {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
+}

/@react-spectrum/s2:StyleProps

+StyleProps {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
+  styles?: StylesProp
+}

/@react-spectrum/s2:WidthProperties

+WidthProperties {
+  W: undefined
+}

/@react-spectrum/s2:HeightProperties

+HeightProperties {
+  H: undefined
+}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants