chore: Setup ai components package#10095
Conversation
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
## API Changes
@react-spectrum/s2-ai/@react-spectrum/s2-ai:Asset+Asset {
+
+}/@react-spectrum/s2-ai:AssetList+AssetList {
+
+}/@react-spectrum/s2-ai:BasicHorizontalCard+BasicHorizontalCard {
+ UNSAFE_className?: UnsafeClassName
+ UNSAFE_style?: CSSProperties
+ children: ReactNode | (CardRenderProps) => ReactNode
+ density?: 'compact' | 'regular' | 'spacious' = 'regular'
+ download?: boolean | string
+ href?: Href
+ hrefLang?: string
+ id?: Key
+ isDisabled?: boolean
+ onAction?: () => void
+ onPress?: (PressEvent) => void
+ onPressChange?: (boolean) => void
+ onPressEnd?: (PressEvent) => void
+ onPressStart?: (PressEvent) => void
+ onPressUp?: (PressEvent) => void
+ ping?: string
+ referrerPolicy?: HTMLAttributeReferrerPolicy
+ rel?: string
+ routerOptions?: RouterOptions
+ size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
+ styles?: StylesProp
+ target?: HTMLAttributeAnchorTarget
+ textValue?: string
+ value?: T
+ variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
+}/@react-spectrum/s2-ai:HorizontalCard+HorizontalCard {
+ UNSAFE_className?: UnsafeClassName
+ UNSAFE_style?: CSSProperties
+ children: ReactNode | (CardRenderProps) => ReactNode
+ density?: 'compact' | 'regular' | 'spacious' = 'regular'
+ download?: boolean | string
+ href?: Href
+ hrefLang?: string
+ id?: Key
+ isDisabled?: boolean
+ onAction?: () => void
+ onPress?: (PressEvent) => void
+ onPressChange?: (boolean) => void
+ onPressEnd?: (PressEvent) => void
+ onPressStart?: (PressEvent) => void
+ onPressUp?: (PressEvent) => void
+ ping?: string
+ referrerPolicy?: HTMLAttributeReferrerPolicy
+ rel?: string
+ routerOptions?: RouterOptions
+ size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
+ styles?: StylesProp
+ target?: HTMLAttributeAnchorTarget
+ textValue?: string
+ value?: T
+ variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
+} |
| @@ -0,0 +1,3 @@ | |||
| # @react-spectrum/s2-ai | |||
There was a problem hiding this comment.
Do we want to just call it @react-spectrum/ai?
| aria-labelledby={ariaLabelledby} | ||
| aria-describedby={ariaDescribedby} | ||
| ref={domRef} | ||
| className={style({flexShrink: 0, flexGrow: 0, position: 'relative'})}> |
There was a problem hiding this comment.
Needs focus ring? I'm seeing the native browser one
| ); | ||
| }); | ||
|
|
||
| export const Asset = forwardRef(function Asset( |
There was a problem hiding this comment.
Can we call these AttachmentList / Attachment? I think that's the name design is using.
| <Checkbox slot="selection" excludeFromTabOrder size={size === 'XS' ? 'S' : size} /> | ||
| </div> | ||
| ); | ||
| } |
There was a problem hiding this comment.
Can any of this be reused from the existing Card component? The idea there was to have the generic Card not specify any layout and for specific card types to extend from it. What were the things that prevented you from implementing it that way and necessitated copying the entire Card component here?
| * const merged = mergeStyles(baseStyles, overrideStyles); | ||
| * // merged has `padding: 16` and `color: heading`. | ||
| */ | ||
| export function mergeStyles(...styles: (StyleString | null | undefined)[]): StyleString { |
There was a problem hiding this comment.
Pretty sure this is exported from the s2 package. Does it need to be duplicated here?
| styles?: StylesProp; | ||
| } | ||
|
|
||
| export function getAllowedOverrides({width = true, height = false} = {}): string[] { |
There was a problem hiding this comment.
Maybe we just allow all overrides for now so we don't need to copy all this?
|
|
||
| export const AIAssetList: Story = { | ||
| render: args => ( | ||
| <AssetList {...args} styles={style({width: 400})}> |
There was a problem hiding this comment.
Are the args supposed to apply to the individual assets too? Like I noticed changing the variant wasn't affecting the stories.
3 participants
Closes
Sets up a new @react-spectrum/s2-ai package where we can develop the new and nebulous ai components that Spectrum is experimenting with.
✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project: