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

Commitf87bf37

Browse files
committed
add input group back
1 parenta6d0a82 commitf87bf37

File tree

3 files changed

+136
-2
lines changed

3 files changed

+136
-2
lines changed

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
isApiValidationError,
1111
}from"api/errors";
1212
import{Button}from"components/Button/Button";
13+
import{InputGroup}from"components/InputGroup/InputGroup";
1314
import{SearchField}from"components/SearchField/SearchField";
1415
import{useDebouncedFunction}from"hooks/debounce";
1516
import{ChevronDownIcon,ExternalLinkIcon}from"lucide-react";
@@ -218,7 +219,7 @@ export const Filter: FC<FilterProps> = ({
218219
</>
219220
) :(
220221
<>
221-
<divclassName="flex items-center gap-0.5">
222+
<InputGroupcss={{width:"100%"}}>
222223
<PresetMenu
223224
onSelect={(query)=>filter.update(query)}
224225
presets={presets}
@@ -250,7 +251,7 @@ export const Filter: FC<FilterProps> = ({
250251
},
251252
}}
252253
/>
253-
</div>
254+
</InputGroup>
254255
{options}
255256
</>
256257
)}
Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
importTextFieldfrom"@mui/material/TextField";
2+
importtype{Meta,StoryObj}from"@storybook/react-vite";
3+
import{Button}from"components/Button/Button";
4+
import{InputGroup}from"./InputGroup";
5+
6+
constmeta:Meta<typeofInputGroup>={
7+
title:"components/InputGroup",
8+
component:InputGroup,
9+
};
10+
11+
exportdefaultmeta;
12+
typeStory=StoryObj<typeofInputGroup>;
13+
14+
exportconstDefault:Story={
15+
args:{
16+
children:(
17+
<>
18+
<Buttonvariant="outline"className="h-9">
19+
Menu
20+
</Button>
21+
<TextFieldsize="small"placeholder="Search..."/>
22+
</>
23+
),
24+
},
25+
};
26+
27+
exportconstFocusedTextField:Story={
28+
args:{
29+
children:(
30+
<>
31+
<Button>Menu</Button>
32+
<TextFieldautoFocussize="small"placeholder="Search..."/>
33+
</>
34+
),
35+
},
36+
};
37+
38+
exportconstErroredTextField:Story={
39+
args:{
40+
children:(
41+
<>
42+
<Button>Menu</Button>
43+
<TextField
44+
error
45+
size="small"
46+
placeholder="Search..."
47+
helperText="Some error message..."
48+
/>
49+
</>
50+
),
51+
},
52+
};
53+
54+
exportconstFocusedErroredTextField:Story={
55+
args:{
56+
children:(
57+
<>
58+
<Button>Menu</Button>
59+
<TextField
60+
autoFocus
61+
error
62+
size="small"
63+
placeholder="Search..."
64+
helperText="Some error message..."
65+
/>
66+
</>
67+
),
68+
},
69+
};
70+
71+
exportconstWithThreeElements:Story={
72+
args:{
73+
children:(
74+
<>
75+
<Button>Menu</Button>
76+
<TextFieldsize="small"placeholder="Search..."/>
77+
<Button>Submit</Button>
78+
</>
79+
),
80+
},
81+
};
Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
importtype{FC,HTMLProps}from"react";
2+
exportconstInputGroup:FC<HTMLProps<HTMLDivElement>>=(props)=>{
3+
return(
4+
<div
5+
{...props}
6+
css={{
7+
display:"flex",
8+
alignItems:"flex-start",
9+
10+
// Overlap borders to avoid displaying double borders between elements.
11+
"& > *:not(:last-child)":{
12+
marginRight:-1,
13+
},
14+
15+
// Ensure the border of the hovered element is visible when borders
16+
// overlap.
17+
"& > *:hover":{
18+
zIndex:1,
19+
},
20+
21+
// Display border elements when focused or in an error state, both of
22+
// which take priority over hover.
23+
"& .Mui-focused, & .Mui-error":{
24+
zIndex:2,
25+
},
26+
27+
"& > *:first-of-type":{
28+
borderTopRightRadius:0,
29+
borderBottomRightRadius:0,
30+
},
31+
32+
"& > *:last-child":{
33+
borderTopLeftRadius:0,
34+
borderBottomLeftRadius:0,
35+
36+
"&.MuiFormControl-root .MuiInputBase-root":{
37+
borderTopLeftRadius:0,
38+
borderBottomLeftRadius:0,
39+
},
40+
},
41+
42+
"& > *:not(:first-of-type):not(:last-child)":{
43+
borderRadius:0,
44+
45+
"&.MuiFormControl-root .MuiInputBase-root":{
46+
borderRadius:0,
47+
},
48+
},
49+
}}
50+
/>
51+
);
52+
};

0 commit comments

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