docs: S2 Colors search #9163
docs: S2 Colors search #9163
Conversation
|
not sure why the build comment didn't come through |
snowystinger
left a comment
snowystinger
left a comment
There was a problem hiding this comment.
nice, pretty easy to use
| ], []); | ||
|
|
||
| return ( | ||
| <Skeleton isLoading> |
There was a problem hiding this comment.
does it need a skeleton? what's it loading?
| {mockSections.map(section => ( | ||
| <div key={section.id} className={style({display: 'flex', flexDirection: 'column', gap: 8})}> | ||
| <Heading styles={style({font: 'heading-sm'})}>{section.name}</Heading> | ||
| <Virtualizer layout={GridLayout} layoutOptions={{minItemSize: new Size(100, 100), maxItemSize: new Size(100, 100), minSpace: new Size(12, 24), preserveAspectRatio: true}}> |
There was a problem hiding this comment.
it'd be nice if the items were a little smaller with a little more space between each other i think
| ]; | ||
|
|
||
| const itemStyle = style({ | ||
| ...focusRing(), |
There was a problem hiding this comment.
the items need more padding between each other because the focus rings:
| ); | ||
| } | ||
|
|
||
| function SkeletonColorItem({item}: {item: {id: string}}) { |
There was a problem hiding this comment.
Not sure how i can get these skeletons to appear, I've tried throttling but once you get access to the search menu the icons already seem to be loaded
| size: 20, | ||
| borderRadius: 'sm', | ||
| borderWidth: 1, | ||
| borderColor: 'gray-1000/15', |
| return ( | ||
| <div className={style({display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4})}> | ||
| <InfoCircle styles={iconStyle({size: 'XS'})} /> | ||
| <span className={style({font: 'ui'})}>Press a color to copy its name</span> |
There was a problem hiding this comment.
would be nice to also have a link to the style macro reference when that is also merged
Adds Colors to the search menu.
Open to feedback on if/how we want this implemented. IMO its a good addition to the "Resources" section of the search menu. We could also possibly link to the style macro docs here too.
✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project: