Skip to content

Docs: Added new banner #4087

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.

Sign up for GitHub

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

Merged
merged 4 commits into from
Oct 29, 2025
Merged

Docs: Added new banner #4087

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3d1f380
Added new banner
Kostya92 Oct 13, 2025
33537ed
Final polish
Kostya92 Oct 21, 2025
d8567a2
Added the ButtonLink
Kostya92 Oct 28, 2025
ceb9f84
Fixed merge conflicts and remove the target blank
Kostya92 Oct 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 41 additions & 1 deletion docs/docs-components/AppLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Fragment, ReactNode, useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import { Box, DeviceTypeProvider, Divider, FixedZIndex, Flex } from 'gestalt';
import { Box, Button, DeviceTypeProvider, Divider, FixedZIndex, Flex, Icon, Text } from 'gestalt';
import {
TOKEN_COLOR_GRAY_ROBOFLOW_700,
TOKEN_COLOR_ORANGE_FIRETINI_0,
Expand All @@ -16,6 +16,7 @@ import SkipToContent from './SkipToContent';

export const CONTENT_MAX_WIDTH_PX = 1200;
const HEADER_HEIGHT_WITH_MARGIN = 90;
const BANNER_TEXT_MAX_WIDTH = 580;
const fullWidthPages = ['home'];
const fullBleedNoNavigationPages = ['integration-test'];

Expand All @@ -24,6 +25,44 @@ type Props = {
colorScheme?: 'light' | 'dark';
};

function Banner() {
return (
<Box
alignItems="center"
dangerouslySetInlineStyle={{
__style: { backgroundColor: '#EBEEFF' },
}}
direction="row"
display="flex"
justifyContent="between"
paddingX={8}
paddingY={6}
role="banner"
>
<Flex alignItems="baseline" direction="row" gap={4}>
Copy link
Contributor

@rondevera rondevera Oct 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The button looks squished when rendering the banner on a small screen:
Partial screenshot of the preview app using iPhone 12 Pro dimensions

Only for small screens, should the button move to a separate row?

Copy link
Contributor Author

@kostya-gromov kostya-gromov Oct 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rondevera
I've fixed already =)

<Icon
accessibilityLabel="Information"
color="info"
icon="circle-information-fill"
size={24}
/>

<Flex direction="column" gap={1} maxWidth={BANNER_TEXT_MAX_WIDTH}>
<Text size="500" weight="bold">
This is Gestalt’s legacy documentation
</Text>

<Text color="dark">
Information might be outdated. For the latest documentation and support, visit Gestalt’s
new documentation website.
</Text>
</Flex>
</Flex>
<Button color="red" size="lg" text="Explore Gestalt 2.0" />
Copy link
Contributor

@rondevera rondevera Oct 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What should happen when a user presses this button?

Copy link
Contributor Author

@kostya-gromov kostya-gromov Oct 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It should go to the gestalt.pinterest.systems

But to be honest, I'm not a huge fan of using the button as link....

Copy link
Contributor

@rondevera rondevera Oct 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here! Could this use the ButtonLink component instead?

Copy link
Contributor Author

@kostya-gromov kostya-gromov Oct 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done =)

</Box>
);
}

export default function AppLayout({ children, colorScheme }: Props) {
const { isMobile } = useDocsConfig();
const { isSidebarOpen, setIsSidebarOpen } = useNavigationContext();
Expand Down Expand Up @@ -57,6 +96,7 @@ export default function AppLayout({ children, colorScheme }: Props) {

let pageContent = (
<Box color="default" minHeight="100vh">
<Banner />
<SkipToContent />
<Header />
{isSidebarOpen && (
Expand Down