Skip to content

Commit fbe6c50

Browse files
jiveyjivey
committed
fix passing menu component into popover
1 parent f19cb23 commit fbe6c50

File tree

3 files changed

+154
-44
lines changed

3 files changed

+154
-44
lines changed

‎.ladle/components.tsx

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,27 @@
11
import { GlobalProvider } from "@ladle/react";
22
import React from "react";
3-
import styled from "styled-components";
3+
import { createGlobalStyle } from "styled-components";
44

5-
const Wrapper = styled.div`
5+
const GlobalStyle = createGlobalStyle`
66
*, ::before, ::after {
77
box-sizing: border-box;
88
}
9-
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
10-
color: #424242;
11-
height: 100%;
9+
html {
10+
font-size: 62.5%;
11+
}
12+
body {
13+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
14+
color: #424242;
15+
height: 100%;
16+
margin: 0;
17+
}
1218
`;
1319

1420
export const Provider: GlobalProvider = ({ children }) => {
15-
React.useEffect(() => {
16-
const style = document.createElement('style');
17-
style.innerText = 'html { font-size: 62.5%; }';
18-
document.head.append(style);
19-
}, []);
20-
2121
return (
22-
<Wrapper>
22+
<>
23+
<GlobalStyle />
2324
{children}
24-
</Wrapper>
25+
</>
2526
)
2627
};

‎src/components/Menu.stories.tsx

Lines changed: 70 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,72 @@
1-
import { MenuItem } from "react-aria-components";
2-
import { Menu } from "./Menu";
3-
import { Info } from './svgs/Info';
1+
import { Tab, TabList, TabPanel } from "react-aria-components";
2+
import { colors } from "../../src/theme";
3+
import styled from "styled-components";
4+
import { MenuButton, MenuItem, Menu, MenuGenericContainer } from "./Menu";
5+
import { NavBar } from "./NavBar";
6+
import { Tabs } from "./Tabs";
7+
8+
const infoSvg = () => (
9+
<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
10+
<path d="M6 0.180664C2.68652 0.180664 0 2.86816 0 6.18066C0 9.49511 2.68652 12.1807 6 12.1807C9.31348 12.1807 12 9.49511 12 6.18066C12 2.86816 9.31348 0.180664 6 0.180664ZM6 2.84195C6.56119 2.84195 7.01613 3.29689 7.01613 3.85808C7.01613 4.41928 6.56119 4.87421 6 4.87421C5.43881 4.87421 4.98387 4.41928 4.98387 3.85808C4.98387 3.29689 5.43881 2.84195 6 2.84195ZM7.35484 8.98712C7.35484 9.14745 7.22485 9.27744 7.06452 9.27744H4.93548C4.77515 9.27744 4.64516 9.14745 4.64516 8.98712V8.40647C4.64516 8.24614 4.77515 8.11615 4.93548 8.11615H5.22581V6.56776H4.93548C4.77515 6.56776 4.64516 6.43777 4.64516 6.27744V5.69679C4.64516 5.53646 4.77515 5.40647 4.93548 5.40647H6.48387C6.6442 5.40647 6.77419 5.53646 6.77419 5.69679V8.11615H7.06452C7.22485 8.11615 7.35484 8.24614 7.35484 8.40647V8.98712Z" fill="#959595"/>
11+
</svg>
12+
);
13+
14+
const dotsBase64 = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNTYiIHZpZXdCb3g9IjAgMCAxMCA1NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSI1IiBjeT0iNSIgcj0iNSIgZmlsbD0iIzAwMCIvPgogIDxjaXJjbGUgY3g9IjUiIGN5PSIyOCIgcj0iNSIgZmlsbD0iIzAwMCIvPgogIDxjaXJjbGUgY3g9IjUiIGN5PSI1MSIgcj0iNSIgZmlsbD0iIzAwMCIvPgo8L3N2Zz4K";
15+
16+
const InfoMenuButton = styled(MenuButton)`
17+
&:hover {
18+
svg path {
19+
fill: ${colors.palette.lightBlue};
20+
}
21+
}
22+
`;
23+
24+
const DotsMenuButton = styled(MenuButton)`
25+
padding: 1rem;
26+
`;
27+
28+
const StyledMenuItem = styled(MenuItem)`
29+
color: ${colors.palette.orange};
30+
`;
31+
32+
const StyledWrapper = styled.div`
33+
display: flex;
34+
height: 100%
35+
`;
436

537
export const Default = () =>
6-
<>
7-
<Menu buttonLabel="Menu">
8-
<button>Example button</button>
9-
<button>Another button</button>
10-
</Menu>
11-
<Menu buttonLabel="Test menu" buttonIcon={Info}>
12-
<button>Example button</button>
13-
<button>Another button</button>
14-
</Menu>
15-
<Menu buttonLabel="Test menu" buttonIcon={"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAPoAAAD6AG1e1JrAAACh0lEQVR4nO2TT0gUURyAp1MUdPBUEBS7KpQakkJE2Rt2y3lvHXUlmBl3MCiK9ZDtzjxRO0SE/TPqkCBBIiHieyt7MAgjNSzNgnizIkFSkB62pejgTNQl8LIxawepNaeaXQj2g+/wTu97v/kNxxUoUCAL7SO1FTpFCVtM4bRO4UNMURwT2K9TdBsTdE0nqAtTeFYnwilMkKTFkIAJqtFGYJVGRG+E+rd3DDRu4/4GncAOTFHaPeEXTNFHncDF1YfBGUzQI52iluwBFHW7G5BdnaI36wTAC/kIwBTOZw0IP6jf2h6DJ3QKI5ig85jCHo2gPkzRvR+7MKFROIsJmsMULmGCPukUfv3TAI3AKS6pid5kRKx2y7muOvD8Yr0w2S02jl5FLfEbgTOxm4G2oVuws3MQtmKKzmUW2F7kEaGSS0XrVlLRunRejIjhX8adjAR630cD8VybigZiH7T6qt/+frIqH5ZV+ZhbKopSzDlFVVVvs9qcdtkXjgNCodAetwNkVTb+nwBJknYoIeWbmwGKqow5DrCRJGmLqqpFax3uO7473t/gmRiqrZimR/ez+8Kh+THB93pcQAvj/qa3kz558an/5NIT/+nkjF9LPvPpqVn+ku3yy5oei/E9FgN3TIO/axr8sMX4+GfGa9xGWAxctww+nQtNxr9yEjCQqwDLAAsbBpgMXPmpesVkvGUaYNk0+KWMDCRW5acsAzw2GT9qj9hkYDAzcsb32p/AZKDbNECXmQDtJgNhKwGOrHtxaaW4s7isKVxaHmw9cLBBq6huaLPP/6pnb3D9S9fiKQte9pYH027rKQ++45zgLWvsyFHAnKMAjuM27donFrltSQna7DSgQAEun3wHXrEVP1Vyp4cAAAAASUVORK5CYII="}>
16-
<MenuItem>Cool menu item</MenuItem>
17-
</Menu>
18-
</>
38+
<NavBar>
39+
<MenuButton label="Menu">
40+
<MenuGenericContainer>
41+
<button>Example button</button>
42+
<button>Another button</button>
43+
</MenuGenericContainer>
44+
</MenuButton>
45+
<InfoMenuButton label="Test menu" icon={infoSvg}>
46+
<Tabs>
47+
<TabList aria-label="Items">
48+
<Tab id="one">Info 1</Tab>
49+
<Tab id="two">Info 2</Tab>
50+
<Tab id="three">Info 3</Tab>
51+
</TabList>
52+
<TabPanel id="one">First</TabPanel>
53+
<TabPanel id="two">Second</TabPanel>
54+
<TabPanel id="three">Third</TabPanel>
55+
</Tabs>
56+
</InfoMenuButton>
57+
<StyledWrapper>
58+
<MenuButton label="Help">
59+
<Menu>
60+
<MenuItem>Open Guide</MenuItem>
61+
<MenuItem>Contact Support</MenuItem>
62+
</Menu>
63+
</MenuButton>
64+
<DotsMenuButton label="Test menu" icon={dotsBase64}>
65+
<Menu>
66+
<MenuItem>Cool menu item</MenuItem>
67+
<MenuItem>Really long menu item with a lot of text</MenuItem>
68+
<StyledMenuItem>Styled menu item</StyledMenuItem>
69+
</Menu>
70+
</DotsMenuButton>
71+
</StyledWrapper>
72+
</NavBar>

‎src/components/Menu.tsx

Lines changed: 70 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,98 @@
1-
import React from 'react';
1+
import React from "react";
22
import styled from "styled-components";
3-
import { Button, ButtonProps, Dialog, DialogTrigger, Popover, PopoverProps } from 'react-aria-components';
3+
import {
4+
Button,
5+
ButtonProps,
6+
Dialog,
7+
DialogTrigger,
8+
Menu as AriaMenu,
9+
MenuItem as AriaMenuItem,
10+
Popover,
11+
PopoverProps,
12+
} from "react-aria-components";
13+
import { colors } from "../../src/theme";
414

5-
export const MenuButton = styled(Button)`
15+
export const Menu = styled(AriaMenu)``;
16+
export const MenuItem = styled(AriaMenuItem)``;
17+
18+
const StyledMenuButton = styled(Button)`
619
border: none;
720
background: none;
821
padding: 0;
922
min-height: 4rem;
1023
min-width: 4rem;
24+
height: 100%;
1125
display: inline-flex;
1226
place-content: center;
1327
align-items: center;
28+
cursor: pointer;
29+
font-weight: 500;
30+
31+
img {
32+
max-height: 100%;
33+
}
1434
`;
1535

16-
export const MenuPopover = styled(Popover)`
36+
export const MenuGenericContainer = styled.div`
1737
padding: 1.6rem;
18-
border-top: 0.4rem solid #63A524;
38+
`;
39+
40+
const MenuPopover = styled(Popover)`
41+
margin-top: -1rem;
42+
border-top: 0.4rem solid ${colors.palette.darkGreen};
1943
box-shadow: 0 0.4rem 0.4rem 0 #00000033;
2044
background: #fff;
45+
46+
${MenuItem} {
47+
font-size: 1.4rem;
48+
min-height: 4rem;
49+
padding: 0 1.6rem;
50+
cursor: pointer;
51+
display: flex;
52+
align-items: center;
53+
54+
&:hover {
55+
background: ${colors.palette.neutralLighter};
56+
}
57+
58+
&:active {
59+
font-weight: bold;
60+
}
61+
}
2162
`;
2263

2364
export interface MenuProps {
24-
buttonLabel: string;
25-
buttonIcon?: string | React.ReactNode;
65+
label: string;
66+
icon?: string | React.ReactNode;
2667
buttonProps?: ButtonProps;
2768
popoverProps?: PopoverProps;
69+
className?: string;
2870
}
2971

30-
export const Menu = ({ buttonLabel, buttonIcon, ...props }: React.PropsWithChildren<MenuProps>) => {
72+
export const MenuButton = ({
73+
label,
74+
icon,
75+
...props
76+
}: React.PropsWithChildren<MenuProps>) => {
3177
return (
3278
<DialogTrigger>
33-
<MenuButton aria-label={buttonLabel} {...props.buttonProps}>
34-
{buttonIcon ? (typeof buttonIcon === 'string' ?
35-
<img aria-hidden='true' src={buttonIcon} alt='' /> : buttonIcon) : buttonLabel}
36-
</MenuButton>
79+
<StyledMenuButton
80+
aria-label={label}
81+
className={props.className}
82+
{...props.buttonProps}
83+
>
84+
{icon ? (
85+
typeof icon === "string" ? (
86+
<img aria-hidden="true" src={icon} alt="" />
87+
) : (
88+
icon
89+
)
90+
) : (
91+
label
92+
)}
93+
</StyledMenuButton>
3794
<MenuPopover {...props.popoverProps}>
38-
<Dialog>
39-
{props.children}
40-
</Dialog>
95+
<Dialog>{props.children}</Dialog>
4196
</MenuPopover>
4297
</DialogTrigger>
4398
);

0 commit comments

Comments
 (0)