Skip to content

Commit ab78c99

Browse files
clementprevotclementprevot
committed
fix(popover): fix size of the popover when there is a title or a close button
1 parent ec5339e commit ab78c99

File tree

3 files changed

+128
-5
lines changed

3 files changed

+128
-5
lines changed

‎.vscode/extensions.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
"christian-kohler.npm-intellisense",
1515
"davidanson.vscode-markdownlint",
1616
"dbaeumer.vscode-eslint",
17-
"dsznajder.es7-react-js-snippets",
1817
"eamodio.gitlens",
1918
"ecmel.vscode-html-css",
2019
"ellreka.tailwindcss-highlight",

‎packages/fractal/src/components/Popover/Popover.stories.tsx

Lines changed: 122 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,126 @@ import { DEFAULT_ELEVATION } from './Popover.constants'
1818

1919
const popoverContent = (
2020
<div className="flex flex-col gap-2">
21-
<Typography variant="heading-4">Behold the Popover</Typography>
21+
<Typography>
22+
What is nice with this Popover is that you can put whatever you want
23+
inside of it.
24+
</Typography>
25+
<Typography>
26+
What is nice with this Popover is that you can put whatever you want
27+
inside of it.
28+
</Typography>
29+
<Typography>
30+
What is nice with this Popover is that you can put whatever you want
31+
inside of it.
32+
</Typography>
33+
<Typography>
34+
What is nice with this Popover is that you can put whatever you want
35+
inside of it.
36+
</Typography>
37+
<Typography>
38+
What is nice with this Popover is that you can put whatever you want
39+
inside of it.
40+
</Typography>
41+
<Typography>
42+
What is nice with this Popover is that you can put whatever you want
43+
inside of it.
44+
</Typography>
45+
<Typography>
46+
What is nice with this Popover is that you can put whatever you want
47+
inside of it.
48+
</Typography>
49+
<Typography>
50+
What is nice with this Popover is that you can put whatever you want
51+
inside of it.
52+
</Typography>
53+
<Typography>
54+
What is nice with this Popover is that you can put whatever you want
55+
inside of it.
56+
</Typography>
57+
<Typography>
58+
What is nice with this Popover is that you can put whatever you want
59+
inside of it.
60+
</Typography>
61+
<Typography>
62+
What is nice with this Popover is that you can put whatever you want
63+
inside of it.
64+
</Typography>
65+
<Typography>
66+
What is nice with this Popover is that you can put whatever you want
67+
inside of it.
68+
</Typography>
69+
<Typography>
70+
What is nice with this Popover is that you can put whatever you want
71+
inside of it.
72+
</Typography>
73+
<Typography>
74+
What is nice with this Popover is that you can put whatever you want
75+
inside of it.
76+
</Typography>
77+
<Typography>
78+
What is nice with this Popover is that you can put whatever you want
79+
inside of it.
80+
</Typography>
81+
<Typography>
82+
What is nice with this Popover is that you can put whatever you want
83+
inside of it.
84+
</Typography>
85+
<Typography>
86+
What is nice with this Popover is that you can put whatever you want
87+
inside of it.
88+
</Typography>
89+
<Typography>
90+
What is nice with this Popover is that you can put whatever you want
91+
inside of it.
92+
</Typography>
93+
<Typography>
94+
What is nice with this Popover is that you can put whatever you want
95+
inside of it.
96+
</Typography>
97+
<Typography>
98+
What is nice with this Popover is that you can put whatever you want
99+
inside of it.
100+
</Typography>
101+
<Typography>
102+
What is nice with this Popover is that you can put whatever you want
103+
inside of it.
104+
</Typography>
105+
<Typography>
106+
What is nice with this Popover is that you can put whatever you want
107+
inside of it.
108+
</Typography>
109+
<Typography>
110+
What is nice with this Popover is that you can put whatever you want
111+
inside of it.
112+
</Typography>
113+
<Typography>
114+
What is nice with this Popover is that you can put whatever you want
115+
inside of it.
116+
</Typography>
117+
<Typography>
118+
What is nice with this Popover is that you can put whatever you want
119+
inside of it.
120+
</Typography>
121+
<Typography>
122+
What is nice with this Popover is that you can put whatever you want
123+
inside of it.
124+
</Typography>
125+
<Typography>
126+
What is nice with this Popover is that you can put whatever you want
127+
inside of it.
128+
</Typography>
129+
<Typography>
130+
What is nice with this Popover is that you can put whatever you want
131+
inside of it.
132+
</Typography>
133+
<Typography>
134+
What is nice with this Popover is that you can put whatever you want
135+
inside of it.
136+
</Typography>
137+
<Typography>
138+
What is nice with this Popover is that you can put whatever you want
139+
inside of it.
140+
</Typography>
22141
<Typography>
23142
What is nice with this Popover is that you can put whatever you want
24143
inside of it.
@@ -48,14 +167,14 @@ const meta: Meta<PopoverProps> = {
48167
fullWidth: false,
49168
modal: false,
50169
side: undefined,
51-
title: undefined,
170+
title: 'Behold the Popover',
52171
toggleOnTriggerClick: true,
53172
toggleOnTriggerHover: false,
54173
trigger: 'Text',
55174
triggerAsButton: true,
56175
width: 'fit',
57176
withArrow: true,
58-
withCloseButton: false,
177+
withCloseButton: true,
59178
withScroll: false,
60179
},
61180
argTypes: {

‎packages/fractal/src/components/Popover/Popover.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -344,7 +344,12 @@ export const Popover = forwardRef<CombinedRefs, PopoverProps>(
344344
<RxScrollArea.Viewport
345345
className={cj(
346346
`${PREFIX}-${GROUP_NAME}__popover__scrollarea__viewport`,
347-
`relative h-full max-h-[calc(var(--radix-popper-available-height)-theme(spacing.4))] w-full overflow-auto [&:has(+_.${PREFIX}-${GROUP_NAME}__popover__scrollarea__scrollbar--y)]:w-[calc(100%-theme(spacing.1)+theme(spacing.quarter))]`,
347+
`relative h-full w-full overflow-auto [&:has(+_.${PREFIX}-${GROUP_NAME}__popover__scrollarea__scrollbar--y)]:w-[calc(100%-theme(spacing.1)+theme(spacing.quarter))]`,
348+
withCloseButton || !isEmpty(title)
349+
? isEmpty(title)
350+
? 'max-h-[calc(var(--radix-popper-available-height)-theme(spacing.6)-theme(spacing.6))]'
351+
: 'max-h-[calc(var(--radix-popper-available-height)-theme(spacing.6)-theme(spacing.4))]'
352+
: 'max-h-[calc(var(--radix-popper-available-height)-theme(spacing.6))]',
348353
)}
349354
style={{
350355
overflowY: undefined,

0 commit comments

Comments
 (0)