Skip to content

Commit 30c1d0a

Browse files
snowystingeryihuiliao
snowystinger
and
yihuiliao
authored
Fix story's svgs in FF (#6082)
Co-authored-by: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
1 parent 9d6f024 commit 30c1d0a

File tree

2 files changed

+27
-19
lines changed

2 files changed

+27
-19
lines changed

‎packages/react-aria-components/stories/Popover.stories.tsx

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ export const PopoverArrowBoundaryOffsetExample = {
115115
max: 100
116116
}
117117
}
118-
},
118+
},
119119
render: ({topLeft, topRight, leftTop, leftBotton, rightTop, rightBottom, bottomLeft, bottomRight}: any) => {
120120
return (
121121
<div style={{display: 'flex', flexDirection: 'column'}}>
@@ -125,6 +125,7 @@ export const PopoverArrowBoundaryOffsetExample = {
125125
<Button style={{width: 200, height: 100}}>Top left</Button>
126126
<Popover
127127
placement="top left"
128+
shouldFlip={false}
128129
arrowBoundaryOffset={topLeft}
129130
style={{
130131
background: 'Canvas',
@@ -136,7 +137,7 @@ export const PopoverArrowBoundaryOffsetExample = {
136137
}}>
137138
<OverlayArrow style={{display: 'flex'}}>
138139
<svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block'}}>
139-
<path d="M0 0,L6 6,L12 0" fill="white" strokeWidth={1} stroke="gray" />
140+
<path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
140141
</svg>
141142
</OverlayArrow>
142143
<Dialog style={{outline: 'none'}}>
@@ -150,6 +151,7 @@ export const PopoverArrowBoundaryOffsetExample = {
150151
<Button style={{width: 200, height: 100}}>Top right</Button>
151152
<Popover
152153
placement="top right"
154+
shouldFlip={false}
153155
arrowBoundaryOffset={topRight}
154156
style={{
155157
background: 'Canvas',
@@ -161,7 +163,7 @@ export const PopoverArrowBoundaryOffsetExample = {
161163
}}>
162164
<OverlayArrow style={{display: 'flex'}}>
163165
<svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block'}}>
164-
<path d="M0 0,L6 6,L12 0" fill="white" strokeWidth={1} stroke="gray" />
166+
<path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
165167
</svg>
166168
</OverlayArrow>
167169
<Dialog style={{outline: 'none'}}>
@@ -177,6 +179,7 @@ export const PopoverArrowBoundaryOffsetExample = {
177179
<Button style={{width: 200, height: 100}}>Left top</Button>
178180
<Popover
179181
placement="left top"
182+
shouldFlip={false}
180183
arrowBoundaryOffset={leftTop}
181184
style={{
182185
background: 'Canvas',
@@ -188,7 +191,7 @@ export const PopoverArrowBoundaryOffsetExample = {
188191
}}>
189192
<OverlayArrow style={{display: 'flex'}}>
190193
<svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block', transform: 'rotate(-90deg)'}}>
191-
<path d="M0 0,L6 6,L12 0" fill="white" strokeWidth={1} stroke="gray" />
194+
<path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
192195
</svg>
193196
</OverlayArrow>
194197
<Dialog style={{outline: 'none'}}>
@@ -202,6 +205,7 @@ export const PopoverArrowBoundaryOffsetExample = {
202205
<Button style={{width: 200, height: 100}}>Left bottom</Button>
203206
<Popover
204207
placement="left bottom"
208+
shouldFlip={false}
205209
arrowBoundaryOffset={leftBotton}
206210
style={{
207211
background: 'Canvas',
@@ -213,7 +217,7 @@ export const PopoverArrowBoundaryOffsetExample = {
213217
}}>
214218
<OverlayArrow style={{display: 'flex'}}>
215219
<svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block', transform: 'rotate(-90deg)'}}>
216-
<path d="M0 0,L6 6,L12 0" fill="white" strokeWidth={1} stroke="gray" />
220+
<path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
217221
</svg>
218222
</OverlayArrow>
219223
<Dialog style={{outline: 'none'}}>
@@ -229,6 +233,7 @@ export const PopoverArrowBoundaryOffsetExample = {
229233
<Button style={{width: 200, height: 100}}>Right top</Button>
230234
<Popover
231235
placement="right top"
236+
shouldFlip={false}
232237
arrowBoundaryOffset={rightTop}
233238
style={{
234239
background: 'Canvas',
@@ -240,7 +245,7 @@ export const PopoverArrowBoundaryOffsetExample = {
240245
}}>
241246
<OverlayArrow style={{display: 'flex'}}>
242247
<svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block', transform: 'rotate(90deg)'}}>
243-
<path d="M0 0,L6 6,L12 0" fill="white" strokeWidth={1} stroke="gray" />
248+
<path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
244249
</svg>
245250
</OverlayArrow>
246251
<Dialog style={{outline: 'none'}}>
@@ -254,6 +259,7 @@ export const PopoverArrowBoundaryOffsetExample = {
254259
<Button style={{width: 200, height: 100}}>Right bottom</Button>
255260
<Popover
256261
placement="right bottom"
262+
shouldFlip={false}
257263
arrowBoundaryOffset={rightBottom}
258264
style={{
259265
background: 'Canvas',
@@ -265,7 +271,7 @@ export const PopoverArrowBoundaryOffsetExample = {
265271
}}>
266272
<OverlayArrow style={{display: 'flex'}}>
267273
<svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block', transform: 'rotate(90deg)'}}>
268-
<path d="M0 0,L6 6,L12 0" fill="white" strokeWidth={1} stroke="gray" />
274+
<path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
269275
</svg>
270276
</OverlayArrow>
271277
<Dialog style={{outline: 'none'}}>
@@ -281,6 +287,7 @@ export const PopoverArrowBoundaryOffsetExample = {
281287
<Button style={{width: 200, height: 100}}>Bottom left</Button>
282288
<Popover
283289
placement="bottom left"
290+
shouldFlip={false}
284291
arrowBoundaryOffset={bottomLeft}
285292
style={{
286293
background: 'Canvas',
@@ -292,7 +299,7 @@ export const PopoverArrowBoundaryOffsetExample = {
292299
}}>
293300
<OverlayArrow style={{display: 'flex'}}>
294301
<svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block', transform: 'rotate(180deg)'}}>
295-
<path d="M0 0,L6 6,L12 0" fill="white" strokeWidth={1} stroke="gray" />
302+
<path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
296303
</svg>
297304
</OverlayArrow>
298305
<Dialog style={{outline: 'none'}}>
@@ -306,6 +313,7 @@ export const PopoverArrowBoundaryOffsetExample = {
306313
<Button style={{width: 200, height: 100}}>Bottom right</Button>
307314
<Popover
308315
placement="bottom right"
316+
shouldFlip={false}
309317
arrowBoundaryOffset={bottomRight}
310318
style={{
311319
background: 'Canvas',
@@ -317,7 +325,7 @@ export const PopoverArrowBoundaryOffsetExample = {
317325
}}>
318326
<OverlayArrow style={{display: 'flex'}}>
319327
<svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block', transform: 'rotate(180deg)'}}>
320-
<path d="M0 0,L6 6,L12 0" fill="white" strokeWidth={1} stroke="gray" />
328+
<path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
321329
</svg>
322330
</OverlayArrow>
323331
<Dialog style={{outline: 'none'}}>

‎packages/react-aria-components/stories/Tooltip.stories.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export const TooltipExample = () => (
3131
}}>
3232
<OverlayArrow style={{transform: 'translateX(-50%)'}}>
3333
<svg width="8" height="8" style={{display: 'block'}}>
34-
<path d="M0 0,L4 4,L8 0" fill="white" strokeWidth={1} stroke="gray" />
34+
<path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
3535
</svg>
3636
</OverlayArrow>
3737
I am a tooltip
@@ -105,7 +105,7 @@ export const TooltipArrowBoundaryOffsetExample = {
105105
max: 100
106106
}
107107
}
108-
},
108+
},
109109
render: ({topLeft, topRight, leftTop, leftBotton, rightTop, rightBottom, bottomLeft, bottomRight}: any) => {
110110
return (
111111
<div style={{display: 'flex', flexDirection: 'column'}}>
@@ -126,7 +126,7 @@ export const TooltipArrowBoundaryOffsetExample = {
126126
}}>
127127
<OverlayArrow>
128128
<svg width="8" height="8" style={{display: 'block'}}>
129-
<path d="M0 0,L4 4,L8 0" fill="white" strokeWidth={1} stroke="gray" />
129+
<path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
130130
</svg>
131131
</OverlayArrow>
132132
Top left
@@ -149,7 +149,7 @@ export const TooltipArrowBoundaryOffsetExample = {
149149
}}>
150150
<OverlayArrow>
151151
<svg width="8" height="8" style={{display: 'block'}}>
152-
<path d="M0 0,L4 4,L8 0" fill="white" strokeWidth={1} stroke="gray" />
152+
<path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
153153
</svg>
154154
</OverlayArrow>
155155
Top right
@@ -174,7 +174,7 @@ export const TooltipArrowBoundaryOffsetExample = {
174174
}}>
175175
<OverlayArrow>
176176
<svg width="8" height="8" style={{display: 'block', transform: 'rotate(-90deg)'}}>
177-
<path d="M0 0,L4 4,L8 0" fill="white" strokeWidth={1} stroke="gray" />
177+
<path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
178178
</svg>
179179
</OverlayArrow>
180180
Left top
@@ -197,7 +197,7 @@ export const TooltipArrowBoundaryOffsetExample = {
197197
}}>
198198
<OverlayArrow>
199199
<svg width="8" height="8" style={{display: 'block', transform: 'rotate(-90deg)'}}>
200-
<path d="M0 0,L4 4,L8 0" fill="white" strokeWidth={1} stroke="gray" />
200+
<path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
201201
</svg>
202202
</OverlayArrow>
203203
Left bottom
@@ -222,7 +222,7 @@ export const TooltipArrowBoundaryOffsetExample = {
222222
}}>
223223
<OverlayArrow>
224224
<svg width="8" height="8" style={{display: 'block', transform: 'rotate(90deg)'}}>
225-
<path d="M0 0,L4 4,L8 0" fill="white" strokeWidth={1} stroke="gray" />
225+
<path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
226226
</svg>
227227
</OverlayArrow>
228228
Right top
@@ -245,7 +245,7 @@ export const TooltipArrowBoundaryOffsetExample = {
245245
}}>
246246
<OverlayArrow>
247247
<svg width="8" height="8" style={{display: 'block', transform: 'rotate(90deg)'}}>
248-
<path d="M0 0,L4 4,L8 0" fill="white" strokeWidth={1} stroke="gray" />
248+
<path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
249249
</svg>
250250
</OverlayArrow>
251251
Right bottom
@@ -270,7 +270,7 @@ export const TooltipArrowBoundaryOffsetExample = {
270270
}}>
271271
<OverlayArrow>
272272
<svg width="8" height="8" style={{display: 'block', transform: 'rotate(180deg)'}}>
273-
<path d="M0 0,L4 4,L8 0" fill="white" strokeWidth={1} stroke="gray" />
273+
<path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
274274
</svg>
275275
</OverlayArrow>
276276
Bottom left
@@ -293,7 +293,7 @@ export const TooltipArrowBoundaryOffsetExample = {
293293
}}>
294294
<OverlayArrow>
295295
<svg width="8" height="8" style={{display: 'block', transform: 'rotate(180deg)'}}>
296-
<path d="M0 0,L4 4,L8 0" fill="white" strokeWidth={1} stroke="gray" />
296+
<path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
297297
</svg>
298298
</OverlayArrow>
299299
Bottom right

0 commit comments

Comments
 (0)