Conversation
|
Build successful! 🎉 |
reidbarber
changed the title
|
Build successful! 🎉 |
reidbarber
changed the title
|
Build successful! 🎉 |
| } | ||
|
|
||
| /** | ||
| * Returns the list of CSS property names that are allowed as style overrides via the `styles` prop. |
There was a problem hiding this comment.
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.
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
devongovett
left a comment
devongovett
left a comment
There was a problem hiding this comment.
Some of these I'm hesitant on in their current forms
| export { | ||
| centerPadding, | ||
| setColorScheme | ||
| } from './style-utils'; |
There was a problem hiding this comment.
macros should come from @react-spectrum/s2/style instead of the main entry point.
| * // merged has `padding: 16` and `color: heading`. | ||
| * ``` | ||
| */ | ||
| export function mergeStyles(...styles: (StyleString | null | undefined)[]): StyleString { |
There was a problem hiding this comment.
Currently this is not exported from the package. And it's not a macro so maybe it shouldn't be in the style/index.ts. Maybe it should go in the main component entry point? Not sure where we'd put it otherwise. Could be another subpath?
| * import {linearGradient, style} from '@react-spectrum/s2/style' with {type: 'macro'}; | ||
| * | ||
| * const styles = style({ | ||
| * backgroundImage: linearGradient('to bottom right', ['fuchsia-900', 0], ['indigo-900', 66], ['blue-900', 100]) |
There was a problem hiding this comment.
Not sure if we were totally comfortable with this API yet. It is missing some features from CSS I think, for example in CSS stops can be either percentages or lengths and the API here doesn't distinguish.
| * ```tsx | ||
| * import {keyframes} from '@react-spectrum/s2/style' with {type: 'macro'}; | ||
| * | ||
| * const fadeIn = keyframes(` |
There was a problem hiding this comment.
I think we need a better API for this than a string. You should be able to use Spectrum tokens in here.
| * `); | ||
| * ``` | ||
| */ | ||
| export function raw(this: MacroContext | void, css: string, layer = '_.a'): string { |
There was a problem hiding this comment.
Maybe it should have a better name like css
|
Build successful! 🎉 |
## API Changes
@react-spectrum/s2/@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
+} |
4 participants
Exports:
rawandkeyframesexports to the@react-spectrum/s2/stylesub-package only (since they're macros), and keptmergeStylesin the main@react-spectrum/s2package only (it's runtime-only)WidthPropertiesandHeightPropertiesas types for use withgetAllowedOverridesRenamed:
colorSchemeutility tosetColorSchemeto clarify that it sets the color-scheme propertyDocs:
✅ Pull Request Checklist:
📝 Test Instructions:
Verify the new exports and check the new JSDocs and docs additions (including markdown docs page).
🧢 Your Project: