-
Notifications
You must be signed in to change notification settings - Fork 347
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
SearchGuide: New Component + VR Implementation #3772
SearchGuide: New Component + VR Implementation #3772
Conversation
✅ 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. |
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
</Box> | ||
); | ||
return ( | ||
<button |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
super nit: can we have state for each individual one?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- 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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also, apply all the accessibilty props!
Reuse this example in the accessibility section.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@@ -0,0 +1,76 @@ | |||
import { Avatar, AvatarGroup, Flex, Icon, Image, SearchGuideLink } from 'gestalt'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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