refactor: extract form-layout styles into reusable CSS literal (#8340)

vaadin · Dec 13, 2024 · ac91ad5 · ac91ad5
1 parent 56c8c24
commit ac91ad5
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 88 deletions.
diff --git a/packages/form-layout/src/vaadin-form-item.js b/packages/form-layout/src/vaadin-form-item.js
@@ -7,7 +7,10 @@ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
 import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { formItemStyles } from './vaadin-form-layout-styles.js';
+
+registerStyles('vaadin-form-item', formItemStyles, { moduleId: 'vaadin-form-item-styles' });
 
 /**
  * `<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
 class FormItem extends ThemableMixin(PolymerElement) {
   static get template() {
     return html`
-      <style>
-        :host {
-          display: inline-flex;
-          flex-direction: row;
-          align-items: baseline;
-          margin: calc(0.5 * var(--vaadin-form-item-row-spacing, 1em)) 0;
-        }
-
-        :host([label-position='top']) {
-          flex-direction: column;
-          align-items: stretch;
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-
-        #label {
-          width: var(--vaadin-form-item-label-width, 8em);
-          flex: 0 0 auto;
-        }
-
-        :host([label-position='top']) #label {
-          width: auto;
-        }
-
-        #spacing {
-          width: var(--vaadin-form-item-label-spacing, 1em);
-          flex: 0 0 auto;
-        }
-
-        #content {
-          flex: 1 1 auto;
-        }
-
-        #content ::slotted(.full-width) {
-          box-sizing: border-box;
-          width: 100%;
-          min-width: 0;
-        }
-      </style>
       <div id="label" part="label" on-click="__onLabelClick">
         <slot name="label" id="labelSlot" on-slotchange="__onLabelSlotChange"></slot>
         <span part="required-indicator" aria-hidden="true"></span>

diff --git a/packages/form-layout/src/vaadin-form-layout-styles.d.ts b/packages/form-layout/src/vaadin-form-layout-styles.d.ts
@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const formLayoutStyles: CSSResult;
+
+export const formItemStyles: CSSResult;
diff --git a/packages/form-layout/src/vaadin-form-layout-styles.js b/packages/form-layout/src/vaadin-form-layout-styles.js
@@ -0,0 +1,94 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+export const formLayoutStyles = css`
+  :host {
+    display: block;
+    max-width: 100%;
+    animation: 1ms vaadin-form-layout-appear;
+    /* CSS API for host */
+    --vaadin-form-item-label-width: 8em;
+    --vaadin-form-item-label-spacing: 1em;
+    --vaadin-form-item-row-spacing: 1em;
+    --vaadin-form-layout-column-spacing: 2em; /* (default) */
+    align-self: stretch;
+  }
+
+  @keyframes vaadin-form-layout-appear {
+    to {
+      opacity: 1 !important; /* stylelint-disable-line keyframe-declaration-no-important */
+    }
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  #layout {
+    display: flex;
+
+    align-items: baseline; /* default \`stretch\` is not appropriate */
+
+    flex-wrap: wrap; /* the items should wrap */
+  }
+
+  #layout ::slotted(*) {
+    /* Items should neither grow nor shrink. */
+    flex-grow: 0;
+    flex-shrink: 0;
+
+    /* Margins make spacing between the columns */
+    margin-left: calc(0.5 * var(--vaadin-form-layout-column-spacing));
+    margin-right: calc(0.5 * var(--vaadin-form-layout-column-spacing));
+  }
+
+  #layout ::slotted(br) {
+    display: none;
+  }
+`;
+
+export const formItemStyles = css`
+  :host {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: baseline;
+    margin: calc(0.5 * var(--vaadin-form-item-row-spacing, 1em)) 0;
+  }
+
+  :host([label-position='top']) {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  #label {
+    width: var(--vaadin-form-item-label-width, 8em);
+    flex: 0 0 auto;
+  }
+
+  :host([label-position='top']) #label {
+    width: auto;
+  }
+
+  #spacing {
+    width: var(--vaadin-form-item-label-spacing, 1em);
+    flex: 0 0 auto;
+  }
+
+  #content {
+    flex: 1 1 auto;
+  }
+
+  #content ::slotted(.full-width) {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+  }
+`;
diff --git a/packages/form-layout/src/vaadin-form-layout.js b/packages/form-layout/src/vaadin-form-layout.js
@@ -8,7 +8,10 @@ import { isElementHidden } from '@vaadin/a11y-base/src/focus-utils.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { formLayoutStyles } from './vaadin-form-layout-styles.js';
+
+registerStyles('vaadin-form-layout', formLayoutStyles, { moduleId: 'vaadin-form-layout-styles' });
 
 /**
  * `<vaadin-form-layout>` is a Web Component providing configurable responsive
@@ -109,51 +112,6 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
 class FormLayout extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   static get template() {
     return html`
-      <style>
-        :host {
-          display: block;
-          max-width: 100%;
-          animation: 1ms vaadin-form-layout-appear;
-          /* CSS API for host */
-          --vaadin-form-item-label-width: 8em;
-          --vaadin-form-item-label-spacing: 1em;
-          --vaadin-form-item-row-spacing: 1em;
-          --vaadin-form-layout-column-spacing: 2em; /* (default) */
-          align-self: stretch;
-        }
-
-        @keyframes vaadin-form-layout-appear {
-          to {
-            opacity: 1 !important; /* stylelint-disable-line keyframe-declaration-no-important */
-          }
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-
-        #layout {
-          display: flex;
-
-          align-items: baseline; /* default \`stretch\` is not appropriate */
-
-          flex-wrap: wrap; /* the items should wrap */
-        }
-
-        #layout ::slotted(*) {
-          /* Items should neither grow nor shrink. */
-          flex-grow: 0;
-          flex-shrink: 0;
-
-          /* Margins make spacing between the columns */
-          margin-left: calc(0.5 * var(--vaadin-form-layout-column-spacing));
-          margin-right: calc(0.5 * var(--vaadin-form-layout-column-spacing));
-        }
-
-        #layout ::slotted(br) {
-          display: none;
-        }
-      </style>
       <div id="layout">
         <slot id="slot"></slot>
       </div>