Skip to content

Commit ac91ad5

Browse files
tomivirkkitomivirkki
authored
refactor: extract form-layout styles into reusable CSS literal (#8340)
1 parent 56c8c24 commit ac91ad5

File tree

4 files changed

+112
-88
lines changed

4 files changed

+112
-88
lines changed

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

Lines changed: 4 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
77
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
88
import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
99
import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
10-
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
10+
import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
11+
import { formItemStyles } from './vaadin-form-layout-styles.js';
12+
13+
registerStyles('vaadin-form-item', formItemStyles, { moduleId: 'vaadin-form-item-styles' });
1114

1215
/**
1316
* `<vaadin-form-item>` is a Web Component providing labelled form item wrapper
@@ -95,47 +98,6 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
9598
class FormItem extends ThemableMixin(PolymerElement) {
9699
static get template() {
97100
return html`
98-
<style>
99-
:host {
100-
display: inline-flex;
101-
flex-direction: row;
102-
align-items: baseline;
103-
margin: calc(0.5 * var(--vaadin-form-item-row-spacing, 1em)) 0;
104-
}
105-
106-
:host([label-position='top']) {
107-
flex-direction: column;
108-
align-items: stretch;
109-
}
110-
111-
:host([hidden]) {
112-
display: none !important;
113-
}
114-
115-
#label {
116-
width: var(--vaadin-form-item-label-width, 8em);
117-
flex: 0 0 auto;
118-
}
119-
120-
:host([label-position='top']) #label {
121-
width: auto;
122-
}
123-
124-
#spacing {
125-
width: var(--vaadin-form-item-label-spacing, 1em);
126-
flex: 0 0 auto;
127-
}
128-
129-
#content {
130-
flex: 1 1 auto;
131-
}
132-
133-
#content ::slotted(.full-width) {
134-
box-sizing: border-box;
135-
width: 100%;
136-
min-width: 0;
137-
}
138-
</style>
139101
<div id="label" part="label" on-click="__onLabelClick">
140102
<slot name="label" id="labelSlot" on-slotchange="__onLabelSlotChange"></slot>
141103
<span part="required-indicator" aria-hidden="true"></span>

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2018 - 2024 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
import type { CSSResult } from 'lit';
7+
8+
export const formLayoutStyles: CSSResult;
9+
10+
export const formItemStyles: CSSResult;

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

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2018 - 2024 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
7+
8+
export const formLayoutStyles = css`
9+
:host {
10+
display: block;
11+
max-width: 100%;
12+
animation: 1ms vaadin-form-layout-appear;
13+
/* CSS API for host */
14+
--vaadin-form-item-label-width: 8em;
15+
--vaadin-form-item-label-spacing: 1em;
16+
--vaadin-form-item-row-spacing: 1em;
17+
--vaadin-form-layout-column-spacing: 2em; /* (default) */
18+
align-self: stretch;
19+
}
20+
21+
@keyframes vaadin-form-layout-appear {
22+
to {
23+
opacity: 1 !important; /* stylelint-disable-line keyframe-declaration-no-important */
24+
}
25+
}
26+
27+
:host([hidden]) {
28+
display: none !important;
29+
}
30+
31+
#layout {
32+
display: flex;
33+
34+
align-items: baseline; /* default \`stretch\` is not appropriate */
35+
36+
flex-wrap: wrap; /* the items should wrap */
37+
}
38+
39+
#layout ::slotted(*) {
40+
/* Items should neither grow nor shrink. */
41+
flex-grow: 0;
42+
flex-shrink: 0;
43+
44+
/* Margins make spacing between the columns */
45+
margin-left: calc(0.5 * var(--vaadin-form-layout-column-spacing));
46+
margin-right: calc(0.5 * var(--vaadin-form-layout-column-spacing));
47+
}
48+
49+
#layout ::slotted(br) {
50+
display: none;
51+
}
52+
`;
53+
54+
export const formItemStyles = css`
55+
:host {
56+
display: inline-flex;
57+
flex-direction: row;
58+
align-items: baseline;
59+
margin: calc(0.5 * var(--vaadin-form-item-row-spacing, 1em)) 0;
60+
}
61+
62+
:host([label-position='top']) {
63+
flex-direction: column;
64+
align-items: stretch;
65+
}
66+
67+
:host([hidden]) {
68+
display: none !important;
69+
}
70+
71+
#label {
72+
width: var(--vaadin-form-item-label-width, 8em);
73+
flex: 0 0 auto;
74+
}
75+
76+
:host([label-position='top']) #label {
77+
width: auto;
78+
}
79+
80+
#spacing {
81+
width: var(--vaadin-form-item-label-spacing, 1em);
82+
flex: 0 0 auto;
83+
}
84+
85+
#content {
86+
flex: 1 1 auto;
87+
}
88+
89+
#content ::slotted(.full-width) {
90+
box-sizing: border-box;
91+
width: 100%;
92+
min-width: 0;
93+
}
94+
`;

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

Lines changed: 4 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@ import { isElementHidden } from '@vaadin/a11y-base/src/focus-utils.js';
88
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
99
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
1010
import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
11-
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
11+
import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
12+
import { formLayoutStyles } from './vaadin-form-layout-styles.js';
13+
14+
registerStyles('vaadin-form-layout', formLayoutStyles, { moduleId: 'vaadin-form-layout-styles' });
1215

1316
/**
1417
* `<vaadin-form-layout>` is a Web Component providing configurable responsive
@@ -109,51 +112,6 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
109112
class FormLayout extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
110113
static get template() {
111114
return html`
112-
<style>
113-
:host {
114-
display: block;
115-
max-width: 100%;
116-
animation: 1ms vaadin-form-layout-appear;
117-
/* CSS API for host */
118-
--vaadin-form-item-label-width: 8em;
119-
--vaadin-form-item-label-spacing: 1em;
120-
--vaadin-form-item-row-spacing: 1em;
121-
--vaadin-form-layout-column-spacing: 2em; /* (default) */
122-
align-self: stretch;
123-
}
124-
125-
@keyframes vaadin-form-layout-appear {
126-
to {
127-
opacity: 1 !important; /* stylelint-disable-line keyframe-declaration-no-important */
128-
}
129-
}
130-
131-
:host([hidden]) {
132-
display: none !important;
133-
}
134-
135-
#layout {
136-
display: flex;
137-
138-
align-items: baseline; /* default \`stretch\` is not appropriate */
139-
140-
flex-wrap: wrap; /* the items should wrap */
141-
}
142-
143-
#layout ::slotted(*) {
144-
/* Items should neither grow nor shrink. */
145-
flex-grow: 0;
146-
flex-shrink: 0;
147-
148-
/* Margins make spacing between the columns */
149-
margin-left: calc(0.5 * var(--vaadin-form-layout-column-spacing));
150-
margin-right: calc(0.5 * var(--vaadin-form-layout-column-spacing));
151-
}
152-
153-
#layout ::slotted(br) {
154-
display: none;
155-
}
156-
</style>
157115
<div id="layout">
158116
<slot id="slot"></slot>
159117
</div>

0 commit comments

Comments
 (0)