Skip to content

Commit 150d140

Browse files
Luke BowermanLuke Bowerman
Luke Bowerman
authored and
Luke Bowerman
committed
Fix-up merge conflict
1 parent 203d5fa commit 150d140

File tree

7 files changed

+100
-82
lines changed

7 files changed

+100
-82
lines changed

‎packages/components/src/Form/Fields/Field.tsx‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -148,15 +148,19 @@ const InputArea = styled.div``
148148
const MessageArea = styled.div``
149149

150150
export const Field = styled(FieldLayout)`
151+
height: fit-content;
152+
width: ${({ width }) => width || 'fit-content'};
151153
align-items: left;
154+
justify-content: space-between;
155+
margin-bottom: ${({ theme }) => theme.space.xsmall};
156+
152157
display: grid;
153158
grid-template-areas: ${({ inline }) =>
154159
inline
155160
? '"label input detail" ". messages messages"'
156161
: '"label detail" "input input" "messages messages"'};
157-
height: fit-content;
158-
justify-content: space-between;
159-
width: ${({ width }) => width || 'fit-content'};
162+
grid-template-columns: ${({ inline, labelWidth }) =>
163+
inline ? `${labelWidth} 1fr` : undefined};
160164
161165
${InputArea} {
162166
display: flex;
@@ -173,16 +177,16 @@ export const Field = styled(FieldLayout)`
173177
${({ inline, theme }) =>
174178
inline
175179
? `
176-
height: ${inputHeight};
177-
justify-self: end;
178-
line-height: ${inputHeight};
179-
padding-right: ${theme.space.small};
180-
width: 150px;
181-
`
180+
text-align: right;
181+
line-height: ${inputHeight};
182+
justify-self: end;
183+
height: ${inputHeight};
184+
padding-right: ${theme.space.small};
185+
`
182186
: `
183187
padding-bottom: ${theme.space.xsmall};
184188
185-
`}
189+
`}
186190
}
187191
188192
${FieldDetail} {

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

Lines changed: 35 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -107,20 +107,21 @@ exports[`A FieldSelect 1`] = `
107107
}
108108
109109
.c0 {
110+
height: -webkit-fit-content;
111+
height: -moz-fit-content;
112+
height: fit-content;
113+
width: 100%;
110114
-webkit-align-items: left;
111115
-webkit-box-align: left;
112116
-ms-flex-align: left;
113117
align-items: left;
114-
display: grid;
115-
grid-template-areas: "label detail" "input input" "messages messages";
116-
height: -webkit-fit-content;
117-
height: -moz-fit-content;
118-
height: fit-content;
119118
-webkit-box-pack: justify;
120119
-webkit-justify-content: space-between;
121120
-ms-flex-pack: justify;
122121
justify-content: space-between;
123-
width: 100%;
122+
margin-bottom: 0.5rem;
123+
display: grid;
124+
grid-template-areas: "label detail" "input input" "messages messages";
124125
}
125126
126127
.c0 .c3 {
@@ -382,20 +383,21 @@ exports[`A FieldSelect with an error validation aligned to the left 1`] = `
382383
}
383384
384385
.c0 {
386+
height: -webkit-fit-content;
387+
height: -moz-fit-content;
388+
height: fit-content;
389+
width: 100%;
385390
-webkit-align-items: left;
386391
-webkit-box-align: left;
387392
-ms-flex-align: left;
388393
align-items: left;
389-
display: grid;
390-
grid-template-areas: "label detail" "input input" "messages messages";
391-
height: -webkit-fit-content;
392-
height: -moz-fit-content;
393-
height: fit-content;
394394
-webkit-box-pack: justify;
395395
-webkit-justify-content: space-between;
396396
-ms-flex-pack: justify;
397397
justify-content: space-between;
398-
width: 100%;
398+
margin-bottom: 0.5rem;
399+
display: grid;
400+
grid-template-areas: "label detail" "input input" "messages messages";
399401
}
400402
401403
.c0 .c3 {
@@ -697,20 +699,21 @@ exports[`A FieldSelect with an error validation aligned to the right 1`] = `
697699
}
698700
699701
.c0 {
702+
height: -webkit-fit-content;
703+
height: -moz-fit-content;
704+
height: fit-content;
705+
width: 100%;
700706
-webkit-align-items: left;
701707
-webkit-box-align: left;
702708
-ms-flex-align: left;
703709
align-items: left;
704-
display: grid;
705-
grid-template-areas: "label detail" "input input" "messages messages";
706-
height: -webkit-fit-content;
707-
height: -moz-fit-content;
708-
height: fit-content;
709710
-webkit-box-pack: justify;
710711
-webkit-justify-content: space-between;
711712
-ms-flex-pack: justify;
712713
justify-content: space-between;
713-
width: 100%;
714+
margin-bottom: 0.5rem;
715+
display: grid;
716+
grid-template-areas: "label detail" "input input" "messages messages";
714717
}
715718
716719
.c0 .c3 {
@@ -1011,20 +1014,21 @@ exports[`A required FieldSelect 1`] = `
10111014
}
10121015
10131016
.c0 {
1017+
height: -webkit-fit-content;
1018+
height: -moz-fit-content;
1019+
height: fit-content;
1020+
width: 100%;
10141021
-webkit-align-items: left;
10151022
-webkit-box-align: left;
10161023
-ms-flex-align: left;
10171024
align-items: left;
1018-
display: grid;
1019-
grid-template-areas: "label detail" "input input" "messages messages";
1020-
height: -webkit-fit-content;
1021-
height: -moz-fit-content;
1022-
height: fit-content;
10231025
-webkit-box-pack: justify;
10241026
-webkit-justify-content: space-between;
10251027
-ms-flex-pack: justify;
10261028
justify-content: space-between;
1027-
width: 100%;
1029+
margin-bottom: 0.5rem;
1030+
display: grid;
1031+
grid-template-areas: "label detail" "input input" "messages messages";
10281032
}
10291033
10301034
.c0 .c4 {
@@ -1289,20 +1293,21 @@ exports[`FieldSelect supports labelWeight 1`] = `
12891293
}
12901294
12911295
.c0 {
1296+
height: -webkit-fit-content;
1297+
height: -moz-fit-content;
1298+
height: fit-content;
1299+
width: 100%;
12921300
-webkit-align-items: left;
12931301
-webkit-box-align: left;
12941302
-ms-flex-align: left;
12951303
align-items: left;
1296-
display: grid;
1297-
grid-template-areas: "label detail" "input input" "messages messages";
1298-
height: -webkit-fit-content;
1299-
height: -moz-fit-content;
1300-
height: fit-content;
13011304
-webkit-box-pack: justify;
13021305
-webkit-justify-content: space-between;
13031306
-ms-flex-pack: justify;
13041307
justify-content: space-between;
1305-
width: 100%;
1308+
margin-bottom: 0.5rem;
1309+
display: grid;
1310+
grid-template-areas: "label detail" "input input" "messages messages";
13061311
}
13071312
13081313
.c0 .c3 {

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

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -80,20 +80,21 @@ exports[`A FieldText with default label 1`] = `
8080
}
8181
8282
.c0 {
83+
height: -webkit-fit-content;
84+
height: -moz-fit-content;
85+
height: fit-content;
86+
width: 100%;
8387
-webkit-align-items: left;
8488
-webkit-box-align: left;
8589
-ms-flex-align: left;
8690
align-items: left;
87-
display: grid;
88-
grid-template-areas: "label detail" "input input" "messages messages";
89-
height: -webkit-fit-content;
90-
height: -moz-fit-content;
91-
height: fit-content;
9291
-webkit-box-pack: justify;
9392
-webkit-justify-content: space-between;
9493
-ms-flex-pack: justify;
9594
justify-content: space-between;
96-
width: 100%;
95+
margin-bottom: 0.5rem;
96+
display: grid;
97+
grid-template-areas: "label detail" "input input" "messages messages";
9798
}
9899
99100
.c0 .c3 {
@@ -251,20 +252,22 @@ exports[`A FieldText with label inline 1`] = `
251252
}
252253
253254
.c0 {
255+
height: -webkit-fit-content;
256+
height: -moz-fit-content;
257+
height: fit-content;
258+
width: 100%;
254259
-webkit-align-items: left;
255260
-webkit-box-align: left;
256261
-ms-flex-align: left;
257262
align-items: left;
258-
display: grid;
259-
grid-template-areas: "label input detail" ". messages messages";
260-
height: -webkit-fit-content;
261-
height: -moz-fit-content;
262-
height: fit-content;
263263
-webkit-box-pack: justify;
264264
-webkit-justify-content: space-between;
265265
-ms-flex-pack: justify;
266266
justify-content: space-between;
267-
width: 100%;
267+
margin-bottom: 0.5rem;
268+
display: grid;
269+
grid-template-areas: "label input detail" ". messages messages";
270+
grid-template-columns: 150px 1fr;
268271
}
269272
270273
.c0 .c3 {
@@ -281,11 +284,11 @@ exports[`A FieldText with label inline 1`] = `
281284
282285
.c0 .c1 {
283286
grid-area: label;
284-
height: 36px;
285-
justify-self: end;
287+
text-align: right;
286288
line-height: 36px;
289+
justify-self: end;
290+
height: 36px;
287291
padding-right: 0.75rem;
288-
width: 150px;
289292
}
290293
291294
.c0 .c9 {

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

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -47,20 +47,21 @@ exports[`A FieldTextArea with default label 1`] = `
4747
}
4848
4949
.c0 {
50+
height: -webkit-fit-content;
51+
height: -moz-fit-content;
52+
height: fit-content;
53+
width: 100%;
5054
-webkit-align-items: left;
5155
-webkit-box-align: left;
5256
-ms-flex-align: left;
5357
align-items: left;
54-
display: grid;
55-
grid-template-areas: "label detail" "input input" "messages messages";
56-
height: -webkit-fit-content;
57-
height: -moz-fit-content;
58-
height: fit-content;
5958
-webkit-box-pack: justify;
6059
-webkit-justify-content: space-between;
6160
-ms-flex-pack: justify;
6261
justify-content: space-between;
63-
width: 100%;
62+
margin-bottom: 0.5rem;
63+
display: grid;
64+
grid-template-areas: "label detail" "input input" "messages messages";
6465
}
6566
6667
.c0 .c3 {
@@ -181,20 +182,22 @@ exports[`A FieldTextArea with label inline 1`] = `
181182
}
182183
183184
.c0 {
185+
height: -webkit-fit-content;
186+
height: -moz-fit-content;
187+
height: fit-content;
188+
width: 100%;
184189
-webkit-align-items: left;
185190
-webkit-box-align: left;
186191
-ms-flex-align: left;
187192
align-items: left;
188-
display: grid;
189-
grid-template-areas: "label input detail" ". messages messages";
190-
height: -webkit-fit-content;
191-
height: -moz-fit-content;
192-
height: fit-content;
193193
-webkit-box-pack: justify;
194194
-webkit-justify-content: space-between;
195195
-ms-flex-pack: justify;
196196
justify-content: space-between;
197-
width: 100%;
197+
margin-bottom: 0.5rem;
198+
display: grid;
199+
grid-template-areas: "label input detail" ". messages messages";
200+
grid-template-columns: 150px 1fr;
198201
}
199202
200203
.c0 .c3 {
@@ -211,11 +214,11 @@ exports[`A FieldTextArea with label inline 1`] = `
211214
212215
.c0 .c1 {
213216
grid-area: label;
214-
height: 36px;
215-
justify-self: end;
217+
text-align: right;
216218
line-height: 36px;
219+
justify-self: end;
220+
height: 36px;
217221
padding-right: 0.75rem;
218-
width: 150px;
219222
}
220223
221224
.c0 .c9 {

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

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -80,20 +80,21 @@ exports[`Fieldset with left aligned legend 1`] = `
8080
}
8181
8282
.c3 {
83+
height: -webkit-fit-content;
84+
height: -moz-fit-content;
85+
height: fit-content;
86+
width: 100%;
8387
-webkit-align-items: left;
8488
-webkit-box-align: left;
8589
-ms-flex-align: left;
8690
align-items: left;
87-
display: grid;
88-
grid-template-areas: "label detail" "input input" "messages messages";
89-
height: -webkit-fit-content;
90-
height: -moz-fit-content;
91-
height: fit-content;
9291
-webkit-box-pack: justify;
9392
-webkit-justify-content: space-between;
9493
-ms-flex-pack: justify;
9594
justify-content: space-between;
96-
width: 100%;
95+
margin-bottom: 0.5rem;
96+
display: grid;
97+
grid-template-areas: "label detail" "input input" "messages messages";
9798
}
9899
99100
.c3 .c6 {

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

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -102,20 +102,21 @@ exports[`Form with one child 1`] = `
102102
}
103103
104104
.c1 {
105+
height: -webkit-fit-content;
106+
height: -moz-fit-content;
107+
height: fit-content;
108+
width: 100%;
105109
-webkit-align-items: left;
106110
-webkit-box-align: left;
107111
-ms-flex-align: left;
108112
align-items: left;
109-
display: grid;
110-
grid-template-areas: "label detail" "input input" "messages messages";
111-
height: -webkit-fit-content;
112-
height: -moz-fit-content;
113-
height: fit-content;
114113
-webkit-box-pack: justify;
115114
-webkit-justify-content: space-between;
116115
-ms-flex-pack: justify;
117116
justify-content: space-between;
118-
width: 100%;
117+
margin-bottom: 0.5rem;
118+
display: grid;
119+
grid-template-areas: "label detail" "input input" "messages messages";
119120
}
120121
121122
.c1 .c4 {

‎packages/playground/src/Form/FieldsDemo.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ export const FieldsDemo: FC = () => {
5252
<FieldText label="Text Input" prefix="$" placeholder="Money" />
5353
<FieldText label="Text Input" prefix="$" placeholder="MONEY!!!" />
5454
</Form>
55+
<Form>Placeholder</Form>
5556
<FieldText disabled label="Text Input" placeholder="placeholder" />
5657
<FieldText
5758
disabled

0 commit comments

Comments
 (0)