Docs: Added new banner #4087
Docs: Added new banner #4087
Conversation
|
@Kostya92 is attempting to deploy a commit to the Pinterest - Subsites Team on Vercel. A member of the Team first needs to authorize it. |
✅ Deploy Preview for gestalt ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
docs/docs-components/AppLayout.tsx
Outdated
| </Text> | ||
| </Flex> | ||
| </Flex> | ||
| <Button color="red" size="lg" text="Explore Gestalt 2.0" /> |
There was a problem hiding this comment.
What should happen when a user presses this button?
There was a problem hiding this comment.
It should go to the gestalt.pinterest.systems
But to be honest, I'm not a huge fan of using the button as link....
There was a problem hiding this comment.
Same here! Could this use the ButtonLink component instead?
docs/docs-components/AppLayout.tsx
Outdated
| paddingY={6} | ||
| role="banner" | ||
| > | ||
| <Flex alignItems="baseline" direction="row" gap={4}> |
There was a problem hiding this comment.
The button looks squished when rendering the banner on a small screen:
Only for small screens, should the button move to a separate row?
There was a problem hiding this comment.
@rondevera
I've fixed already =)
| } else if (containerWidth >= MD_BREAKPOINT_PX) { | ||
| setMaxWidth(BANNER_TEXT_MD_MAX_WIDTH); | ||
| } else if (containerWidth > SM_BREAKPOINT_PX) { | ||
| setMaxWidth(450); |
There was a problem hiding this comment.
Should this use BANNER_TEXT_MD_MAX_WIDTH instead of 450?
There was a problem hiding this comment.
Yeah, thank you @rondevera
| size={isSMBreakpoint ? 'sm' : 'lg'} | ||
| target="blank" | ||
| text="Explore Gestalt 2.0" |
There was a problem hiding this comment.
Let's remove target="blank", since the Figma spec says to use the same window. Opening in a new window/tab would also need accessibility consideration: https://www.w3.org/TR/WCAG20-TECHS/H83.html
| size={isSMBreakpoint ? 'sm' : 'lg'} | |
| target="blank" | |
| text="Explore Gestalt 2.0" | |
| size={isSMBreakpoint ? 'sm' : 'lg'} | |
| text="Explore Gestalt 2.0" |
3 participants
Summary
What changed?
Bannercomponent indocs/docs-components/AppLayout.tsx.AppLayout.Why?
We’re deprecating the current documentation site and want to clearly communicate that this is legacy content, guiding users to the new Gestalt 2.0 documentation. The persistent banner ensures visitors on any docs page are informed and can easily navigate to the new site, reducing confusion and support load while improving discoverability of the latest guidance.
Links