Skip to content

Commit 72c0ef7

Browse files
author
Austin Green
authored
feat(dropdowns): export resetIdCounter to allow SSR (#387)
1 parent 30bee7f commit 72c0ef7

File tree

7 files changed

+2106
-2237
lines changed

7 files changed

+2106
-2237
lines changed

‎examples/nextjs/components/layout.js‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import {
2727
Main,
2828
Body
2929
} from '@zendeskgarden/react-chrome';
30-
import { Menu, Item } from '@zendeskgarden/react-menus';
30+
import { Dropdown, Trigger, Menu, Item } from '@zendeskgarden/react-dropdowns';
3131

3232
/**
3333
* Garden Icons
@@ -62,22 +62,21 @@ const Layout = ({ children, title = 'This is the default title' }) => (
6262
</Nav>
6363
<Body>
6464
<Header>
65-
<Menu
66-
arrow
67-
placement="bottom-end"
68-
trigger={({ ref, isOpen }) => (
69-
<HeaderItem innerRef={ref} active={isOpen}>
65+
<Dropdown>
66+
<Trigger>
67+
<HeaderItem>
7068
<HeaderItemIcon>
7169
<MenuTrayIcon />
7270
</HeaderItemIcon>
7371
<HeaderItemText clipped>Products</HeaderItemText>
7472
</HeaderItem>
75-
)}
76-
>
77-
<Item key="support">Support</Item>
78-
<Item key="chat">Chat</Item>
79-
<Item key="talk">Talk</Item>
80-
</Menu>
73+
</Trigger>
74+
<Menu placement="bottom-end">
75+
<Item value="support">Support</Item>
76+
<Item value="chat">Chat</Item>
77+
<Item value="talk">Talk</Item>
78+
</Menu>
79+
</Dropdown>
8180
<HeaderItem round>
8281
<HeaderItemIcon>
8382
<PersonIcon />
@@ -94,7 +93,7 @@ const Layout = ({ children, title = 'This is the default title' }) => (
9493

9594
Layout.propTypes = {
9695
children: PropTypes.any,
97-
title: PropTypes.element
96+
title: PropTypes.node
9897
};
9998

10099
export default Layout;

‎examples/nextjs/package.json‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,22 @@
88
"start": "next start"
99
},
1010
"dependencies": {
11-
"@zeit/next-css": "^0.2.0",
12-
"@zendeskgarden/css-bedrock": "^7.0.24",
13-
"@zendeskgarden/css-variables": "^5.0.0",
11+
"@zeit/next-css": "^1.0.1",
12+
"@zendeskgarden/css-bedrock": "^7.0.26",
13+
"@zendeskgarden/css-variables": "^6.3.5",
1414
"@zendeskgarden/react-buttons": "../../packages/buttons",
1515
"@zendeskgarden/react-chrome": "../../packages/chrome",
16-
"@zendeskgarden/react-menus": "../../packages/menus",
16+
"@zendeskgarden/react-dropdowns": "../../packages/dropdowns",
1717
"@zendeskgarden/react-selection": "../../packages/selection",
1818
"@zendeskgarden/react-theming": "../../packages/theming",
19-
"@zendeskgarden/svg-icons": "^4.4.0",
20-
"babel-plugin-inline-react-svg": "^0.5.3",
21-
"babel-plugin-styled-components": "^1.10.0",
22-
"next": "^6.1.1",
19+
"@zendeskgarden/react-typography": "../../packages/typography",
20+
"@zendeskgarden/svg-icons": "^6.3.0",
21+
"babel-plugin-inline-react-svg": "^1.1.0",
22+
"babel-plugin-styled-components": "^1.10.6",
23+
"next": "^9.0.1",
2324
"prop-types": "^15.7.2",
2425
"react": "^16.8.6",
2526
"react-dom": "^16.8.6",
26-
"styled-components": "^4.2.0"
27+
"styled-components": "^4.3.2"
2728
}
2829
}

‎examples/nextjs/pages/_app.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,15 @@
77

88
import React from 'react';
99
import App, { Container } from 'next/app';
10+
import Head from 'next/head';
1011
import { ThemeProvider } from '@zendeskgarden/react-theming';
1112

13+
/** Import Garden styles globally with next-css */
14+
import '@zendeskgarden/css-bedrock/dist/index.css';
15+
import '@zendeskgarden/react-chrome/dist/styles.css';
16+
import '@zendeskgarden/react-buttons/dist/styles.css';
17+
import '@zendeskgarden/react-dropdowns/dist/styles.css';
18+
1219
export default class GardenApp extends App {
1320
static async getInitialProps({ Component, ctx }) {
1421
let pageProps = {};
@@ -25,6 +32,9 @@ export default class GardenApp extends App {
2532

2633
return (
2734
<Container>
35+
<Head>
36+
<title>My page</title>
37+
</Head>
2838
<ThemeProvider>
2939
<Component {...pageProps} />
3040
</ThemeProvider>

‎examples/nextjs/pages/_document.js‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,13 @@ import React from 'react';
99
import Document, { Head, Main, NextScript } from 'next/document';
1010
import { ServerStyleSheet } from 'styled-components';
1111
import { IdManager } from '@zendeskgarden/react-selection';
12-
13-
/** Import Garden styles globally with next-css */
14-
import '@zendeskgarden/css-bedrock/dist/index.css';
15-
import '@zendeskgarden/react-chrome/dist/styles.css';
16-
import '@zendeskgarden/react-buttons/dist/styles.css';
17-
import '@zendeskgarden/react-menus/dist/styles.css';
12+
import { resetIdCounter } from '@zendeskgarden/react-dropdowns';
1813

1914
export default class GardenDocument extends Document {
2015
static getInitialProps({ renderPage }) {
2116
/** For server rendered environments only */
2217
IdManager.setIdCounter(0);
18+
resetIdCounter();
2319

2420
const sheet = new ServerStyleSheet();
2521
const page = renderPage(App => props => sheet.collectStyles(<App {...props} />));
@@ -31,11 +27,7 @@ export default class GardenDocument extends Document {
3127
render() {
3228
return (
3329
<html lang="en">
34-
<Head>
35-
<title>My page</title>
36-
{this.props.styleTags}
37-
<link rel="stylesheet" href="/_next/static/style.css" />
38-
</Head>
30+
<Head>{this.props.styleTags}</Head>
3931
<body>
4032
<Main />
4133
<NextScript />

‎examples/nextjs/pages/index.js‎

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,30 +6,25 @@
66
*/
77

88
import React from 'react';
9-
import styled from 'styled-components';
109
import { Button } from '@zendeskgarden/react-buttons';
11-
import { Menu, Item } from '@zendeskgarden/react-menus';
12-
import { zdColorGrey600, zdFontSizeAlpha, zdSpacing } from '@zendeskgarden/css-variables';
10+
import { Dropdown, Trigger, Menu, Item } from '@zendeskgarden/react-dropdowns';
11+
import { XXL } from '@zendeskgarden/react-typography';
1312

1413
import Layout from '../components/layout';
1514

16-
const Title = styled.h1`
17-
margin-bottom: ${zdSpacing};
18-
color: ${zdColorGrey600};
19-
font-size: ${zdFontSizeAlpha};
20-
`;
21-
2215
const IndexPage = () => (
2316
<Layout title="Home Page">
24-
<Title>Home Page</Title>
25-
<Menu
26-
onChange={selectedKey => alert(selectedKey)} // eslint-disable-line no-alert
27-
trigger={({ ref }) => <Button innerRef={ref}>Example Menu</Button>}
28-
>
29-
<Item key="item-1">1 - Item</Item>
30-
<Item key="item-2">2 - Item</Item>
31-
<Item key="item-3">3 - Item</Item>
32-
</Menu>
17+
<XXL tag="h2">Home Page</XXL>
18+
<Dropdown onSelect={value => alert(value)}>
19+
<Trigger>
20+
<Button>Example Menu</Button>
21+
</Trigger>
22+
<Menu>
23+
<Item value="item-1">1 - Item</Item>
24+
<Item value="item-2">2 - Item</Item>
25+
<Item value="item-3">3 - Item</Item>
26+
</Menu>
27+
</Dropdown>
3328
</Layout>
3429
);
3530

0 commit comments

Comments
 (0)