Skip to content

Commit a3853a7

Browse files
author
Luke Bowerman
authored
Use gap for supporting browser (Firefox) fix tooltip interaction issue (#1102)
1 parent 15c5125 commit a3853a7

File tree

9 files changed

+237
-85
lines changed

9 files changed

+237
-85
lines changed

‎packages/components/src/Form/Fieldset/__snapshots__/Fieldset.test.tsx.snap‎

Lines changed: 32 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,6 @@ exports[`Fieldset 1`] = `
1616
flex-direction: column;
1717
}
1818
19-
.c1.c1 > * {
20-
margin-top: 1rem;
21-
}
22-
23-
.c1.c1 > *:first-child {
24-
margin-top: 0rem;
25-
}
26-
2719
.c3 {
2820
width: 100%;
2921
display: -webkit-box;
@@ -39,14 +31,6 @@ exports[`Fieldset 1`] = `
3931
flex-direction: column;
4032
}
4133
42-
.c3.c3 > * {
43-
margin-top: 0.75rem;
44-
}
45-
46-
.c3.c3 > *:first-child {
47-
margin-top: 0rem;
48-
}
49-
5034
.c8 {
5135
-webkit-align-items: center;
5236
-webkit-box-align: center;
@@ -187,6 +171,38 @@ exports[`Fieldset 1`] = `
187171
margin-top: 0.5rem;
188172
}
189173
174+
@supports (-moz-appearance:none) {
175+
.c1 {
176+
gap: 1rem;
177+
}
178+
}
179+
180+
@supports not (-moz-appearance:none) {
181+
.c1.c1 > * {
182+
margin-top: 1rem;
183+
}
184+
185+
.c1.c1 > *:first-child {
186+
margin-top: 0rem;
187+
}
188+
}
189+
190+
@supports (-moz-appearance:none) {
191+
.c3 {
192+
gap: 0.75rem;
193+
}
194+
}
195+
196+
@supports not (-moz-appearance:none) {
197+
.c3.c3 > * {
198+
margin-top: 0.75rem;
199+
}
200+
201+
.c3.c3 > *:first-child {
202+
margin-top: 0rem;
203+
}
204+
}
205+
190206
<div
191207
className="c0"
192208
>

‎packages/components/src/Form/__snapshots__/Form.test.tsx.snap‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,6 @@ exports[`Form with one child 1`] = `
1616
flex-direction: column;
1717
}
1818
19-
.c0.c0 > * {
20-
margin-top: 1rem;
21-
}
22-
23-
.c0.c0 > *:first-child {
24-
margin-top: 0rem;
25-
}
26-
2719
.c5 {
2820
-webkit-align-items: center;
2921
-webkit-box-align: center;
@@ -146,6 +138,22 @@ exports[`Form with one child 1`] = `
146138
margin-top: 0.5rem;
147139
}
148140
141+
@supports (-moz-appearance:none) {
142+
.c0 {
143+
gap: 1rem;
144+
}
145+
}
146+
147+
@supports not (-moz-appearance:none) {
148+
.c0.c0 > * {
149+
margin-top: 1rem;
150+
}
151+
152+
.c0.c0 > *:first-child {
153+
margin-top: 0rem;
154+
}
155+
}
156+
149157
<form
150158
className="c0"
151159
width="100%"

‎packages/components/src/Layout/Grid/Grid.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
*/
2626

2727
import styled from 'styled-components'
28-
import { defaultSpaceSize, SpaceHelperProps } from '../Space'
28+
import { defaultGap, SpaceHelperProps } from '../Space'
2929
import { simpleLayoutCSS } from '../utils/simple'
3030

3131
export interface GridProps extends SpaceHelperProps {
@@ -40,7 +40,7 @@ export const Grid = styled.div<GridProps>`
4040
${simpleLayoutCSS}
4141
4242
display: grid;
43-
grid-gap: ${({ gap, theme }) => theme.space[gap || defaultSpaceSize]};
43+
grid-gap: ${({ gap, theme }) => theme.space[gap || defaultGap]};
4444
grid-template-columns: ${({ columns }) =>
4545
`repeat(${columns || 2}, minmax(0, 1fr))`};
4646
`

‎packages/components/src/Layout/Space/Space.tsx‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ export interface SpaceHelperProps extends SimpleLayoutProps, FlexboxProps {
7878
stretch?: boolean
7979
}
8080

81-
export const defaultSpaceSize = 'medium'
81+
export const defaultGap = 'medium'
8282

8383
export const spaceCSS = css`
8484
${simpleLayoutCSS}
@@ -87,22 +87,31 @@ export const spaceCSS = css`
8787
display: flex;
8888
`
8989

90-
const fauxFlexGap = (space: SpaceHelperProps) => css`
91-
${({ theme }) =>
92-
space.flexWrap === 'wrap'
93-
? `margin-left: -${theme.space[space.gap || defaultSpaceSize]};`
94-
: ''}
90+
/**
91+
* Sadly, there's no way to detect if a browser supports flexbox-gap ("gap" is supported via grid)
92+
* Chrome 84 will purportedly support flexbox "gap" if it does so we'll look for a fix that allows
93+
* for specific targeting of that browser as well
94+
*
95+
* The `gap` implementation properly adds space between items both horizontally and vertically
96+
* when `flexGap="gap"` whereas the home-grown version only produces gaps on the horizontal axis.
97+
*
98+
*/
9599

96-
&& > * {
97-
margin-left: ${({ theme }) => theme.space[space.gap || defaultSpaceSize]};
100+
const flexGap = ({ gap = defaultGap, reverse }: SpaceHelperProps) => css`
101+
@supports (-moz-appearance: none) {
102+
gap: ${({ theme: { space } }) => space[gap]};
98103
}
99104
100-
${({ theme }) =>
101-
space.flexWrap === 'wrap'
102-
? ''
103-
: space.reverse
104-
? `&& > *:last-child { margin-left: ${theme.space.none}; }`
105-
: `&& > *:first-child { margin-left: ${theme.space.none}; }`}
105+
@supports not (-moz-appearance: none) {
106+
&& > * {
107+
margin-right: ${({ theme: { space } }) => space[gap]};
108+
}
109+
110+
${({ theme: { space } }) =>
111+
reverse
112+
? `&& > *:first-child { margin-right: ${space.none}; }`
113+
: `&& > *:last-child { margin-right: ${space.none}; }`}
114+
}
106115
`
107116

108117
const verticalAlign = variant({
@@ -128,8 +137,7 @@ export const Space = styled.div<SpaceHelperProps>`
128137
${({ around }) => around && 'justify-content: space-around;'}
129138
${({ between }) => between && 'justify-content: space-between;'}
130139
${({ evenly }) => evenly && 'justify-content: space-evenly;'}
131-
${({ around, between, evenly }) =>
132-
!around && !between && !evenly && fauxFlexGap}
140+
${({ around, between, evenly }) => !around && !between && !evenly && flexGap}
133141
`
134142

135143
Space.defaultProps = { alignItems: 'center', width: '100%' }

‎packages/components/src/Layout/Space/SpaceVertical.tsx‎

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@
2424
2525
*/
2626

27-
import styled from 'styled-components'
27+
import styled, { css } from 'styled-components'
2828
import { variant } from 'styled-system'
29-
import { defaultSpaceSize, spaceCSS, SpaceHelperProps } from './Space'
29+
import { defaultGap, spaceCSS, SpaceHelperProps } from './Space'
3030

3131
interface SpaceVerticalProps extends Omit<SpaceHelperProps, 'align'> {
3232
/**
@@ -54,19 +54,28 @@ const align = variant({
5454
},
5555
})
5656

57+
const flexGap = ({ gap = defaultGap, reverse }: SpaceVerticalProps) => css`
58+
@supports (-moz-appearance: none) {
59+
gap: ${({ theme: { space } }) => space[gap]};
60+
}
61+
62+
@supports not (-moz-appearance: none) {
63+
&& > * {
64+
margin-top: ${({ theme: { space } }) => space[gap]};
65+
}
66+
67+
${({ theme: { space } }) =>
68+
reverse
69+
? `&& > *:last-child { margin-top: ${space.none}; }`
70+
: `&& > *:first-child { margin-top: ${space.none}; }`}
71+
}
72+
`
73+
5774
export const SpaceVertical = styled.div<SpaceVerticalProps>`
5875
${spaceCSS}
5976
${align}
77+
${flexGap}
6078
flex-direction: ${({ reverse }) => (reverse ? 'column-reverse' : 'column')};
61-
62-
&& > * {
63-
margin-top: ${({ theme, gap }) => theme.space[gap || defaultSpaceSize]};
64-
}
65-
66-
${({ theme, reverse }) =>
67-
reverse
68-
? `&& > *:last-child { margin-top: ${theme.space.none}; }`
69-
: `&& > *:first-child { margin-top: ${theme.space.none}; }`}
7079
`
7180

7281
SpaceVertical.defaultProps = { align: 'stretch', width: '100%' }

‎packages/components/src/Layout/Space/__snapshots__/Space.test.tsx.snap‎

Lines changed: 36 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -133,12 +133,20 @@ exports[`Space default 1`] = `
133133
flex-direction: row;
134134
}
135135
136-
.c0.c0 > * {
137-
margin-left: 1rem;
136+
@supports (-moz-appearance:none) {
137+
.c0 {
138+
gap: 1rem;
139+
}
138140
}
139141
140-
.c0.c0 > *:first-child {
141-
margin-left: 0rem;
142+
@supports not (-moz-appearance:none) {
143+
.c0.c0 > * {
144+
margin-right: 1rem;
145+
}
146+
147+
.c0.c0 > *:last-child {
148+
margin-right: 0rem;
149+
}
142150
}
143151
144152
<div
@@ -215,12 +223,20 @@ exports[`Space reversed 1`] = `
215223
flex-direction: row-reverse;
216224
}
217225
218-
.c0.c0 > * {
219-
margin-left: 1rem;
226+
@supports (-moz-appearance:none) {
227+
.c0 {
228+
gap: 1rem;
229+
}
220230
}
221231
222-
.c0.c0 > *:last-child {
223-
margin-left: 0rem;
232+
@supports not (-moz-appearance:none) {
233+
.c0.c0 > * {
234+
margin-right: 1rem;
235+
}
236+
237+
.c0.c0 > *:first-child {
238+
margin-right: 0rem;
239+
}
224240
}
225241
226242
<div
@@ -258,12 +274,20 @@ exports[`Space with specified gap 1`] = `
258274
flex-direction: row;
259275
}
260276
261-
.c0.c0 > * {
262-
margin-left: 2rem;
277+
@supports (-moz-appearance:none) {
278+
.c0 {
279+
gap: 2rem;
280+
}
263281
}
264282
265-
.c0.c0 > *:first-child {
266-
margin-left: 0rem;
283+
@supports not (-moz-appearance:none) {
284+
.c0.c0 > * {
285+
margin-right: 2rem;
286+
}
287+
288+
.c0.c0 > *:last-child {
289+
margin-right: 0rem;
290+
}
267291
}
268292
269293
<div

‎packages/components/src/Layout/Space/__snapshots__/SpaceVertical.test.tsx.snap‎

Lines changed: 36 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,20 @@ exports[`SpaceVertical default 1`] = `
1616
flex-direction: column;
1717
}
1818
19-
.c0.c0 > * {
20-
margin-top: 1rem;
19+
@supports (-moz-appearance:none) {
20+
.c0 {
21+
gap: 1rem;
22+
}
2123
}
2224
23-
.c0.c0 > *:first-child {
24-
margin-top: 0rem;
25+
@supports not (-moz-appearance:none) {
26+
.c0.c0 > * {
27+
margin-top: 1rem;
28+
}
29+
30+
.c0.c0 > *:first-child {
31+
margin-top: 0rem;
32+
}
2533
}
2634
2735
<div
@@ -59,12 +67,20 @@ exports[`SpaceVertical reversed 1`] = `
5967
flex-direction: column-reverse;
6068
}
6169
62-
.c0.c0 > * {
63-
margin-top: 1rem;
70+
@supports (-moz-appearance:none) {
71+
.c0 {
72+
gap: 1rem;
73+
}
6474
}
6575
66-
.c0.c0 > *:last-child {
67-
margin-top: 0rem;
76+
@supports not (-moz-appearance:none) {
77+
.c0.c0 > * {
78+
margin-top: 1rem;
79+
}
80+
81+
.c0.c0 > *:last-child {
82+
margin-top: 0rem;
83+
}
6884
}
6985
7086
<div
@@ -102,12 +118,20 @@ exports[`SpaceVertical with specified gap 1`] = `
102118
flex-direction: column;
103119
}
104120
105-
.c0.c0 > * {
106-
margin-top: 2rem;
121+
@supports (-moz-appearance:none) {
122+
.c0 {
123+
gap: 2rem;
124+
}
107125
}
108126
109-
.c0.c0 > *:first-child {
110-
margin-top: 0rem;
127+
@supports not (-moz-appearance:none) {
128+
.c0.c0 > * {
129+
margin-top: 2rem;
130+
}
131+
132+
.c0.c0 > *:first-child {
133+
margin-top: 0rem;
134+
}
111135
}
112136
113137
<div

0 commit comments

Comments
 (0)