SearchGuide: New Component + VR Implementation #3772
Conversation
eniomoura
changed the title
eniomoura
changed the title
✅ Deploy Preview for gestalt ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
I added the missing link implementation, but the docs might need a second look. I'll edit it a bit after I'm done with the VR implementation. |
eniomoura
changed the title
packages/gestalt-design-tokens/tokens/classic/base-color-searchguide-light.json
Outdated
Show resolved
Hide resolved
packages/gestalt-design-tokens/tokens/vr-theme-web-mapping/comp-web-color-light.json
Show resolved
Hide resolved
|
probably just change the example For Icon we could force the color with a span, forcing the color. or clonen the object and only allowing
Actually |
|
|
|
Avatar seems to have the outline. Change the exmple... looking at Toast, we follow the same approach... if we decide to enforce things... we should do it in both components |
| </Box> | ||
| ); | ||
| return ( | ||
| <button |
There was a problem hiding this comment.
can we use the Toast approach?
There was a problem hiding this comment.
This is what I've been doing, but inline instead of separate components, what/why should change here? Or is this just reinforcing the suggestion above?
packages/gestalt/src/SearchGuide.tsx
Outdated
| <Flex alignItems="center" gap={{ row: 2, column: 0 }} justifyContent="center"> | ||
| {'avatar' in thumbnail && ( | ||
| <Box aria-hidden marginStart={isInVRExperiment ? 2 : undefined} minWidth={40}> | ||
| {cloneElement(thumbnail.avatar, { size: 'fit' })} |
There was a problem hiding this comment.
could we reuse this?
Not sure if it might work... but it might come handy! more consistency
import {
AvatarThumbnail,
IconThumbnail,
ImageThumbnail,
Message,
TypeThumbnail,
} from './sharedSubcomponents/thumbnailSubcomponents';
There was a problem hiding this comment.
It would require some changes in thumbnailSubcomponents, there's some hardcoded props on it that would break SearchGuide design.
This might be a good follow up PR.
There was a problem hiding this comment.
I'll also leave the avatar border for this further look into Toast.
| @@ -0,0 +1,76 @@ | |||
| import { Avatar, AvatarGroup, Flex, Icon, Image, SearchGuideLink } from 'gestalt'; | |||
There was a problem hiding this comment.
super nit, can we avoid the Example word at the end of files? they are in the example folder hahaah
|
|
||
| return ( | ||
| <Flex alignItems="center" gap={2} height="100%" justifyContent="center" width="100%"> | ||
| <SearchGuide |
There was a problem hiding this comment.
super nit: can we have state for each individual one?
There was a problem hiding this comment.
cn we also add the thumbnails here, to see the selected state?
| <Box height={120} overflow="scrollX" padding={4}> | ||
| <Flex direction="row" gap={2} wrap> | ||
| <SearchGuide color="02" text="Casual" /> | ||
| <SearchGuide color="02" text="Formal" /> |
There was a problem hiding this comment.
- use just one where you implement the prop, not 3
- change the colors in children
- try layer and check if it stays accesible. it should add the focus to the first SearchGuide on keyboard navigation.
That would be a good example. if it breaks let me knwo
There was a problem hiding this comment.
Also, apply all the accessibilty props!
Reuse this example in the accessibility section.
There was a problem hiding this comment.
Can we do 1 full implementation in one example, and then another example where we can see all this permutations?
There was a problem hiding this comment.
shouldn't this one become selected? when expanded?
Maybe add that comments, when expanded show as selected.
|
There's some shifting here: You can prevent it using a transparent border that sets the space so it's already there and it doens't increase when becomes visible |
| @@ -0,0 +1,76 @@ | |||
| import { Avatar, AvatarGroup, Flex, Icon, Image, SearchGuideLink } from 'gestalt'; | |||
There was a problem hiding this comment.
Can we shod all this permutations?
Actually instead of all in one, can we create one example for Avtar, icon and image and have on each the 3 variants? We don't have to enable the selected functionality, just the default visual.
|
All of them look good except the one with the image which has some shifting |
|
Needs fix. |
Summary
What changed?
Implemented the SearchGuide component, and added the VR implementation experiment on top.
Classic:
VR:
Why?
To bring the web implementation in line with the design spec for Gestalt.
Links
Checklist