Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit669984c

Browse files
aqandrewaslilac
andauthored
refactor: replace deprecated Popovers which open on click (#19709)
for#19397 dependency:#19635 This PR specifically covers components which open a popover that'striggered by a click, rather than a hover.---------Co-authored-by: ケイラ <mckayla@hey.com>
1 parenta6fc28c commit669984c

File tree

21 files changed

+393
-272
lines changed

21 files changed

+393
-272
lines changed

‎site/src/components/Filter/SelectFilter.stories.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
33
import{Avatar}from"components/Avatar/Avatar";
44
import{useState}from"react";
55
import{action}from"storybook/actions";
6-
import{expect,userEvent,within}from"storybook/test";
6+
import{expect,screen,userEvent,within}from"storybook/test";
77
import{
88
SelectFilter,
99
typeSelectFilterOption,
@@ -88,7 +88,7 @@ export const SelectingOption: Story = {
8888
constcanvas=within(canvasElement);
8989
constbutton=canvas.getByRole("button");
9090
awaituserEvent.click(button);
91-
constoption=canvas.getByText("Option 25");
91+
constoption=screen.getByText("Option 25");
9292
awaituserEvent.click(option);
9393
awaitexpect(button).toHaveTextContent("Option 25");
9494
},
@@ -102,7 +102,7 @@ export const UnselectingOption: Story = {
102102
constcanvas=within(canvasElement);
103103
constbutton=canvas.getByRole("button");
104104
awaituserEvent.click(button);
105-
constmenu=canvasElement.querySelector<HTMLElement>("[role=menu]")!;
105+
constmenu=screen.getByRole("menu");
106106
constoption=within(menu).getByText("Option 26");
107107
awaituserEvent.click(option);
108108
awaitexpect(button).toHaveTextContent("All options");
@@ -140,7 +140,7 @@ export const SearchingOption: Story = {
140140
constcanvas=within(canvasElement);
141141
constbutton=canvas.getByRole("button");
142142
awaituserEvent.click(button);
143-
constsearch=canvas.getByLabelText("Search options");
143+
constsearch=screen.getByLabelText("Search options");
144144
awaituserEvent.type(search,"option-2");
145145
},
146146
};

‎site/src/components/Filter/SelectFilter.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ import {
1010
SelectMenuTrigger,
1111
}from"components/SelectMenu/SelectMenu";
1212
import{typeFC,typeReactNode,useState}from"react";
13+
import{cn}from"utils/cn";
1314

1415
constBASE_WIDTH=200;
15-
constPOPOVER_WIDTH=320;
1616

1717
exporttypeSelectFilterOption={
1818
startIcon?:ReactNode;
@@ -60,15 +60,15 @@ export const SelectFilter: FC<SelectFilterProps> = ({
6060
</SelectMenuButton>
6161
</SelectMenuTrigger>
6262
<SelectMenuContent
63-
horizontal="right"
64-
css={{
65-
"& .MuiPaper-root":{
66-
//When including selectFilterSearch, we aim for the width to be as
67-
// wide as possible.
68-
width:selectFilterSearch ?"100%" :undefined,
69-
maxWidth:POPOVER_WIDTH,
70-
minWidth:width,
71-
},
63+
align="end"
64+
className={cn([
65+
// When including selectFilterSearch, we aim for the width to be as
66+
//wide as possible.
67+
selectFilterSearch&&"w-full",
68+
"max-w-[320px]",
69+
])}
70+
style={{
71+
minWidth:width,
7272
}}
7373
>
7474
{selectFilterSearch}

‎site/src/components/IconField/IconField.tsx‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import InputAdornment from "@mui/material/InputAdornment";
33
importTextField,{typeTextFieldProps}from"@mui/material/TextField";
44
import{visuallyHidden}from"@mui/utils";
55
import{Button}from"components/Button/Button";
6+
import{ExternalImage}from"components/ExternalImage/ExternalImage";
7+
import{Loader}from"components/Loader/Loader";
68
import{
79
Popover,
810
PopoverContent,
911
PopoverTrigger,
10-
}from"components/deprecated/Popover/Popover";
11-
import{ExternalImage}from"components/ExternalImage/ExternalImage";
12-
import{Loader}from"components/Loader/Loader";
12+
}from"components/Popover/Popover";
1313
import{ChevronDownIcon}from"lucide-react";
1414
import{typeFC,lazy,Suspense,useState}from"react";
1515

@@ -80,24 +80,21 @@ export const IconField: FC<IconFieldProps> = ({
8080

8181
<Global
8282
styles={css`
83-
em-emoji-picker {
84-
--rgb-background:${theme.palette.background.paper};
85-
--rgb-input:${theme.palette.primary.main};
86-
--rgb-color:${theme.palette.text.primary};
87-
88-
// Hack to prevent the right side from being cut off
89-
width:350px;
90-
}
91-
`}
83+
em-emoji-picker {
84+
--rgb-background:${theme.palette.background.paper};
85+
--rgb-input:${theme.palette.primary.main};
86+
--rgb-color:${theme.palette.text.primary};
87+
}
88+
`}
9289
/>
9390
<Popoveropen={open}onOpenChange={setOpen}>
94-
<PopoverTrigger>
91+
<PopoverTriggerasChild>
9592
<Buttonvariant="outline"size="lg"className="flex-shrink-0">
9693
Emoji
9794
<ChevronDownIcon/>
9895
</Button>
9996
</PopoverTrigger>
100-
<PopoverContentid="emoji"horizontal="right">
97+
<PopoverContentid="emoji"side="bottom"align="end"className="w-min">
10198
<Suspensefallback={<Loader/>}>
10299
<EmojiPicker
103100
onEmojiSelect={(emoji)=>{

‎site/src/components/Popover/Popover.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,16 @@ import {
1010
}from"react";
1111
import{cn}from"utils/cn";
1212

13+
exporttypePopoverContentProps=PopoverPrimitive.PopoverContentProps;
14+
15+
exporttypePopoverTriggerProps=PopoverPrimitive.PopoverTriggerProps;
16+
1317
exportconstPopover=PopoverPrimitive.Root;
1418

1519
exportconstPopoverTrigger=PopoverPrimitive.Trigger;
1620

21+
exportconstPopoverClose=PopoverPrimitive.PopoverClose;
22+
1723
exportconstPopoverContent=forwardRef<
1824
ElementRef<typeofPopoverPrimitive.Content>,
1925
ComponentPropsWithoutRef<typeofPopoverPrimitive.Content>
@@ -23,6 +29,7 @@ export const PopoverContent = forwardRef<
2329
ref={ref}
2430
align={align}
2531
sideOffset={sideOffset}
32+
collisionPadding={16}
2633
className={cn(
2734
`z-50 w-72 rounded-md border border-solid bg-surface-primary
2835
text-content-primary shadow-md outline-none

‎site/src/components/SelectMenu/SelectMenu.tsx‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@ import { Button, type ButtonProps } from "components/Button/Button";
44
import{
55
Popover,
66
PopoverContent,
7+
typePopoverContentProps,
78
PopoverTrigger,
8-
}from"components/deprecated/Popover/Popover";
9+
typePopoverTriggerProps,
10+
}from"components/Popover/Popover";
911
import{
1012
SearchField,
1113
typeSearchFieldProps,
@@ -24,9 +26,21 @@ import { cn } from "utils/cn";
2426

2527
exportconstSelectMenu=Popover;
2628

27-
exportconstSelectMenuTrigger=PopoverTrigger;
29+
exportconstSelectMenuTrigger:FC<PopoverTriggerProps>=(props)=>{
30+
return<PopoverTriggerasChild{...props}/>;
31+
};
2832

29-
exportconstSelectMenuContent=PopoverContent;
33+
exportconstSelectMenuContent:FC<PopoverContentProps>=(props)=>{
34+
return(
35+
<PopoverContent
36+
{...props}
37+
className={cn(
38+
"w-auto bg-surface-secondary border-surface-quaternary overflow-y-auto text-sm",
39+
props.className,
40+
)}
41+
/>
42+
);
43+
};
3044

3145
typeSelectMenuButtonProps=ButtonProps&{
3246
startIcon?:React.ReactNode;

‎site/src/hooks/useClassName.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { css } from "@emotion/css";
22
import{typeTheme,useTheme}from"@emotion/react";
33
import{typeDependencyList,useMemo}from"react";
44

5-
exporttypeClassName=(cssFn:typeofcss,theme:Theme)=>string;
5+
typeClassName=(cssFn:typeofcss,theme:Theme)=>string;
66

77
/**
88
*@deprecated This hook was used as an escape hatch to generate class names

‎site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx‎

Lines changed: 53 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import{css,typeInterpolation,typeTheme,useTheme}from"@emotion/react";
1+
import{css,typeInterpolation,typeTheme}from"@emotion/react";
22
importMenuItemfrom"@mui/material/MenuItem";
33
import{Button}from"components/Button/Button";
44
import{
55
Popover,
6+
PopoverClose,
67
PopoverContent,
78
PopoverTrigger,
8-
usePopover,
9-
}from"components/deprecated/Popover/Popover";
9+
}from"components/Popover/Popover";
1010
import{ChevronDownIcon}from"lucide-react";
1111
import{linkToAuditing}from"modules/navigation";
1212
importtype{FC}from"react";
@@ -27,8 +27,6 @@ export const DeploymentDropdown: FC<DeploymentDropdownProps> = ({
2727
canViewConnectionLog,
2828
canViewHealth,
2929
})=>{
30-
consttheme=useTheme();
31-
3230
if(
3331
!canViewAuditLog&&
3432
!canViewConnectionLog&&
@@ -41,22 +39,16 @@ export const DeploymentDropdown: FC<DeploymentDropdownProps> = ({
4139

4240
return(
4341
<Popover>
44-
<PopoverTrigger>
42+
<PopoverTriggerasChild>
4543
<Buttonvariant="outline"size="lg">
4644
Admin settings
4745
<ChevronDownIconclassName="text-content-primary !size-icon-xs"/>
4846
</Button>
4947
</PopoverTrigger>
5048

5149
<PopoverContent
52-
horizontal="right"
53-
css={{
54-
".MuiPaper-root":{
55-
minWidth:"auto",
56-
width:180,
57-
boxShadow:theme.shadows[6],
58-
},
59-
}}
50+
align="end"
51+
className="bg-surface-secondary border-surface-quaternary w-[180px] min-w-auto"
6052
>
6153
<DeploymentDropdownContent
6254
canViewDeployment={canViewDeployment}
@@ -77,79 +69,72 @@ const DeploymentDropdownContent: FC<DeploymentDropdownProps> = ({
7769
canViewHealth,
7870
canViewConnectionLog,
7971
})=>{
80-
constpopover=usePopover();
81-
82-
constonPopoverClose=()=>popover.setOpen(false);
83-
8472
return(
8573
<nav>
8674
{canViewDeployment&&(
87-
<MenuItem
88-
component={NavLink}
89-
to="/deployment"
90-
css={styles.menuItem}
91-
onClick={onPopoverClose}
92-
>
93-
Deployment
94-
</MenuItem>
75+
<PopoverCloseasChild>
76+
<MenuItemcomponent={NavLink}to="/deployment"css={styles.menuItem}>
77+
Deployment
78+
</MenuItem>
79+
</PopoverClose>
9580
)}
9681
{canViewOrganizations&&(
97-
<MenuItem
98-
component={NavLink}
99-
to="/organizations"
100-
css={styles.menuItem}
101-
onClick={onPopoverClose}
102-
>
103-
Organizations
104-
</MenuItem>
82+
<PopoverCloseasChild>
83+
<MenuItem
84+
component={NavLink}
85+
to="/organizations"
86+
css={styles.menuItem}
87+
>
88+
Organizations
89+
</MenuItem>
90+
</PopoverClose>
10591
)}
10692
{canViewAuditLog&&(
107-
<MenuItem
108-
component={NavLink}
109-
to={linkToAuditing}
110-
css={styles.menuItem}
111-
onClick={onPopoverClose}
112-
>
113-
Audit Logs
114-
</MenuItem>
93+
<PopoverCloseasChild>
94+
<MenuItem
95+
component={NavLink}
96+
to={linkToAuditing}
97+
css={styles.menuItem}
98+
>
99+
Audit Logs
100+
</MenuItem>
101+
</PopoverClose>
115102
)}
116103
{canViewConnectionLog&&(
117-
<MenuItem
118-
component={NavLink}
119-
to="/connectionlog"
120-
css={styles.menuItem}
121-
onClick={onPopoverClose}
122-
>
123-
Connection Logs
124-
</MenuItem>
104+
<PopoverCloseasChild>
105+
<MenuItem
106+
component={NavLink}
107+
to="/connectionlog"
108+
css={styles.menuItem}
109+
>
110+
Connection Logs
111+
</MenuItem>
112+
</PopoverClose>
125113
)}
126114
{canViewHealth&&(
127-
<MenuItem
128-
component={NavLink}
129-
to="/health"
130-
css={styles.menuItem}
131-
onClick={onPopoverClose}
132-
>
133-
Healthcheck
134-
</MenuItem>
115+
<PopoverCloseasChild>
116+
<MenuItemcomponent={NavLink}to="/health"css={styles.menuItem}>
117+
Healthcheck
118+
</MenuItem>
119+
</PopoverClose>
135120
)}
136121
</nav>
137122
);
138123
};
139124

140125
conststyles={
141126
menuItem:(theme)=>css`
142-
text-decoration: none;
143-
color: inherit;
144-
gap:8px;
145-
padding:8px20px;
146-
font-size:14px;
127+
text-decoration: none;
128+
color: inherit;
129+
gap:8px;
130+
padding:8px20px;
131+
font-size:14px;
147132
148-
&:hover {
149-
background-color:${theme.palette.action.hover};
150-
transition: background-color0.3s ease;
151-
}
152-
`,
133+
&:hover {
134+
background-color:${theme.palette.action.hover};
135+
transition: background-color0.3s ease;
136+
}
137+
`,
153138
menuItemIcon:(theme)=>({
154139
color:theme.palette.text.secondary,
155140
width:20,

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp