Skip to content

Commit 6525bd4

Browse files
vursenvursen
authored
feat: add expandFields support to autoResponsive mode (#8756)
1 parent 0efa6a8 commit 6525bd4

17 files changed

+164
-103
lines changed

‎dev/form-layout-auto-responsive.html

Lines changed: 46 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,16 @@ <h1>autoResponsive + expandColumns</h1>
6868
<vaadin-button>Register</vaadin-button>
6969
</vaadin-form-layout>
7070
71+
<h1>autoResponsive + expandColumns + expandFields</h1>
72+
<vaadin-form-layout auto-responsive auto-rows max-columns="2" expand-columns expand-fields>
73+
<vaadin-text-field label="First name"></vaadin-text-field>
74+
<vaadin-text-field label="Last name"></vaadin-text-field>
75+
<vaadin-text-area label="Address" colspan="2"></vaadin-text-area>
76+
<vaadin-password-field label="Password"></vaadin-password-field>
77+
<vaadin-password-field label="Confirm"></vaadin-password-field>
78+
<vaadin-button>Register</vaadin-button>
79+
</vaadin-form-layout>
80+
7181
<h1>autoResponsive + br</h1>
7282
<vaadin-form-layout auto-responsive auto-rows max-columns="2">
7383
<vaadin-text-field label="First name"></vaadin-text-field>
@@ -93,6 +103,30 @@ <h1>autoResponsive + FormRow</h1>
93103
</vaadin-form-row>
94104
</vaadin-form-layout>
95105
106+
<h1>autoResponsive + FormItem + expandFields</h1>
107+
<vaadin-form-layout auto-responsive auto-rows max-columns="2" expand-fields>
108+
<vaadin-form-item>
109+
<label slot="label"> First name </label>
110+
<vaadin-text-field></vaadin-text-field>
111+
</vaadin-form-item>
112+
<vaadin-form-item>
113+
<label slot="label"> Last name </label>
114+
<vaadin-text-field></vaadin-text-field>
115+
</vaadin-form-item>
116+
<vaadin-form-item colspan="2">
117+
<label slot="label"> Address </label>
118+
<vaadin-text-area></vaadin-text-area>
119+
</vaadin-form-item>
120+
<vaadin-form-item>
121+
<label slot="label"> Password </label>
122+
<vaadin-password-field></vaadin-password-field>
123+
</vaadin-form-item>
124+
<vaadin-form-item>
125+
<label slot="label"> Confirm </label>
126+
<vaadin-password-field></vaadin-password-field>
127+
</vaadin-form-item>
128+
</vaadin-form-layout>
129+
96130
<h1>autoResponsive inside HorizontalLayout + flex:1</h1>
97131
<vaadin-horizontal-layout theme="spacing">
98132
<vaadin-form-layout style="flex: 1;" auto-responsive auto-rows max-columns="2">
@@ -135,26 +169,26 @@ <h1>autoResponsive inside HorizontalLayout + labels aside</h1>
135169
<vaadin-password-field></vaadin-password-field>
136170
</vaadin-form-item>
137171
</vaadin-form-layout>
138-
<vaadin-form-layout style="flex: 1;" auto-responsive auto-rows max-columns="2" labels-aside expand-columns>
172+
<vaadin-form-layout style="flex: 1;" auto-responsive auto-rows max-columns="2" labels-aside expand-columns expand-fields>
139173
<vaadin-form-item>
140174
<label slot="label"> First name </label>
141-
<vaadin-text-field class="full-width"></vaadin-text-field>
175+
<vaadin-text-field></vaadin-text-field>
142176
</vaadin-form-item>
143177
<vaadin-form-item>
144178
<label slot="label"> Last name </label>
145-
<vaadin-text-field class="full-width"></vaadin-text-field>
179+
<vaadin-text-field></vaadin-text-field>
146180
</vaadin-form-item>
147181
<vaadin-form-item colspan="2">
148182
<label slot="label"> Username </label>
149-
<vaadin-text-field class="full-width" colspan="2"></vaadin-text-field>
183+
<vaadin-text-field colspan="2"></vaadin-text-field>
150184
</vaadin-form-item>
151185
<vaadin-form-item>
152186
<label slot="label"> Password </label>
153-
<vaadin-password-field class="full-width"></vaadin-password-field>
187+
<vaadin-password-field></vaadin-password-field>
154188
</vaadin-form-item>
155189
<vaadin-form-item>
156190
<label slot="label"> Confirm </label>
157-
<vaadin-password-field class="full-width"></vaadin-password-field>
191+
<vaadin-password-field></vaadin-password-field>
158192
</vaadin-form-item>
159193
</vaadin-form-layout>
160194
</vaadin-horizontal-layout>
@@ -175,11 +209,11 @@ <h1>autoResponsive inside Dialog</h1>
175209
></vaadin-dialog>
176210
<vaadin-button @click="${this.openPrevSiblingDialog}">Open</vaadin-button>
177211
178-
<h1>autoResponsive inside Dialog + expandColumns</h1>
212+
<h1>autoResponsive inside Dialog + expandColumns + expandFields</h1>
179213
<vaadin-dialog
180214
${dialogRenderer(
181215
(dialog) => html`
182-
<vaadin-form-layout auto-responsive auto-rows max-columns="2" expand-columns>
216+
<vaadin-form-layout auto-responsive auto-rows max-columns="2" expand-columns expand-fields>
183217
<vaadin-text-field label="First name"></vaadin-text-field>
184218
<vaadin-text-field label="Last name"></vaadin-text-field>
185219
<vaadin-text-area label="Address" colspan="2"></vaadin-text-area>
@@ -239,12 +273,12 @@ <h1>autoResponsive inside Dialog 80%</h1>
239273
></vaadin-dialog>
240274
<vaadin-button @click="${this.openPrevSiblingDialog}">Open</vaadin-button>
241275
242-
<h1>autoResponsive inside Dialog 80% + expandColumns</h1>
276+
<h1>autoResponsive inside Dialog 80% + expandColumns + expandFields</h1>
243277
<vaadin-dialog
244278
width="80%"
245279
${dialogRenderer(
246280
(dialog) => html`
247-
<vaadin-form-layout auto-responsive auto-rows max-columns="2" expand-columns>
281+
<vaadin-form-layout auto-responsive auto-rows max-columns="2" expand-columns expand-fields>
248282
<vaadin-text-field label="First name"></vaadin-text-field>
249283
<vaadin-text-field label="Last name"></vaadin-text-field>
250284
<vaadin-text-area label="Address" colspan="2"></vaadin-text-area>
@@ -268,7 +302,7 @@ <h1>autoResponsive inside HorizontalLayout inside Dialog + flex: 1</h1>
268302
<vaadin-password-field label="Password"></vaadin-password-field>
269303
<vaadin-password-field label="Confirm"></vaadin-password-field>
270304
</vaadin-form-layout>
271-
<vaadin-form-layout auto-responsive auto-rows max-columns="2" style="flex: 1;" expand-columns>
305+
<vaadin-form-layout auto-responsive auto-rows max-columns="2" style="flex: 1;" expand-columns expand-fields>
272306
<vaadin-text-field label="First name"></vaadin-text-field>
273307
<vaadin-text-field label="Last name"></vaadin-text-field>
274308
<vaadin-text-area label="Address" colspan="2"></vaadin-text-area>
@@ -297,7 +331,7 @@ <h1>autoResponsive inside Tabsheet inside Dialog</h1>
297331
<vaadin-password-field label="Password"></vaadin-password-field>
298332
<vaadin-password-field label="Confirm"></vaadin-password-field>
299333
</vaadin-form-layout>
300-
<vaadin-form-layout tab="tab-1" auto-responsive auto-rows max-columns="2" expand-columns>
334+
<vaadin-form-layout tab="tab-1" auto-responsive auto-rows max-columns="2" expand-columns expand-fields>
301335
<vaadin-text-field label="First name"></vaadin-text-field>
302336
<vaadin-text-field label="Last name"></vaadin-text-field>
303337
<vaadin-text-area label="Address" colspan="2"></vaadin-text-area>

‎packages/form-layout/src/vaadin-form-layout-mixin.d.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,15 @@ export declare class FormLayoutMixinClass {
134134
*/
135135
expandColumns: boolean;
136136

137+
/**
138+
* When `autoResponsive` is enabled, specifies whether fields should stretch
139+
* to take up all available space within columns. This setting also applies
140+
* to fields inside `<vaadin-form-item>` elements. The default value is `false`.
141+
*
142+
* @attr {boolean} expand-fields
143+
*/
144+
expandFields: boolean;
145+
137146
/**
138147
* Update the layout.
139148
*/

‎packages/form-layout/src/vaadin-form-layout-mixin.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,20 @@ export const FormLayoutMixin = (superClass) =>
192192
reflectToAttribute: true,
193193
},
194194

195+
/**
196+
* When `autoResponsive` is enabled, specifies whether fields should stretch
197+
* to take up all available space within columns. This setting also applies
198+
* to fields inside `<vaadin-form-item>` elements. The default value is `false`.
199+
*
200+
* @attr {boolean} expand-fields
201+
*/
202+
expandFields: {
203+
type: Boolean,
204+
sync: true,
205+
value: false,
206+
reflectToAttribute: true,
207+
},
208+
195209
/**
196210
* Current number of columns in the layout
197211
* @private

‎packages/form-layout/src/vaadin-form-layout-styles.js

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -111,8 +111,6 @@ export const formLayoutStyles = css`
111111
112112
/* By default, place each child on a new row */
113113
grid-column: 1 / span min(var(--_grid-colspan, 1), var(--_grid-rendered-column-count));
114-
box-sizing: border-box;
115-
max-width: 100%;
116114
}
117115
118116
:host([auto-responsive][auto-rows]) #layout ::slotted(*) {
@@ -150,10 +148,22 @@ export const formLayoutStyles = css`
150148

151149
export const formLayoutSlotStyles = css`
152150
/* Using :where to ensure user styles always take precedence */
153-
:where(vaadin-form-layout[auto-responsive] vaadin-form-item > *) {
151+
:where(
152+
vaadin-form-layout[auto-responsive] > *,
153+
vaadin-form-layout[auto-responsive] vaadin-form-row > *,
154+
vaadin-form-layout[auto-responsive] vaadin-form-item > *
155+
) {
154156
box-sizing: border-box;
155157
max-width: 100%;
156158
}
159+
160+
:where(
161+
vaadin-form-layout[auto-responsive][expand-fields] > *,
162+
vaadin-form-layout[auto-responsive][expand-fields] vaadin-form-row > *,
163+
vaadin-form-layout[auto-responsive][expand-fields] vaadin-form-item > *
164+
) {
165+
min-width: 100%;
166+
}
157167
`;
158168

159169
export const formRowStyles = css`
@@ -171,8 +181,6 @@ export const formRowStyles = css`
171181
--_form-item-labels-aside: inherit;
172182
173183
grid-column: auto / span min(var(--_grid-colspan, 1), var(--_grid-rendered-column-count));
174-
box-sizing: border-box;
175-
max-width: 100%;
176184
}
177185
178186
::slotted(:first-child) {

‎packages/form-layout/test/dom/__snapshots__/form-layout.test.snap.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,20 @@ snapshots["vaadin-form-layout auto-responsive basic host expandColumns"] =
5555
`;
5656
/* end snapshot vaadin-form-layout auto-responsive basic host expandColumns */
5757

58+
snapshots["vaadin-form-layout auto-responsive basic host expandFields"] =
59+
`<vaadin-form-layout
60+
auto-responsive=""
61+
expand-fields=""
62+
style="--_column-width: 13em; --_max-columns: 1;"
63+
>
64+
<input placeholder="First name">
65+
<input placeholder="Last name">
66+
<input placeholder="Email">
67+
<input placeholder="Phone">
68+
</vaadin-form-layout>
69+
`;
70+
/* end snapshot vaadin-form-layout auto-responsive basic host expandFields */
71+
5872
snapshots["vaadin-form-layout auto-responsive basic shadow default"] =
5973
`<div
6074
id="layout"

‎packages/form-layout/test/dom/form-layout.test.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,11 @@ describe('vaadin-form-layout', () => {
3939
layout.expandColumns = true;
4040
await expect(layout).dom.to.equalSnapshot();
4141
});
42+
43+
it('expandFields', async () => {
44+
layout.expandFields = true;
45+
await expect(layout).dom.to.equalSnapshot();
46+
});
4247
});
4348

4449
describe('shadow', () => {

‎packages/form-layout/test/typings/form-layout.types.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ assertType<string>(layout.columnWidth);
1818
assertType<number>(layout.maxColumns);
1919
assertType<boolean>(layout.autoRows);
2020
assertType<boolean>(layout.expandColumns);
21+
assertType<boolean>(layout.expandFields);
2122

2223
assertType<string | 0 | undefined>(responsiveSteps.minWidth);
2324
assertType<number | undefined>(responsiveSteps.columns);

0 commit comments

Comments
 (0)