refactor: extract crud styles into reusable css literal (#8158)

vaadin · Nov 15, 2024 · d8edaff · d8edaff
1 parent 2f388cf
commit d8edaff
Show file tree

Hide file tree

Showing 4 changed files with 154 additions and 120 deletions.
diff --git a/packages/crud/src/vaadin-crud-dialog.js b/packages/crud/src/vaadin-crud-dialog.js
@@ -16,44 +16,17 @@ import { DialogBaseMixin } from '@vaadin/dialog/src/vaadin-dialog-base-mixin.js'
 import { dialogOverlay, resizableOverlay } from '@vaadin/dialog/src/vaadin-dialog-styles.js';
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
 import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
-import { css, registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
-
-const crudDialogOverlay = css`
-  [part='overlay'] {
-    max-width: 54em;
-    min-width: 20em;
-  }
-
-  [part='footer'] {
-    justify-content: flex-start;
-    flex-direction: row-reverse;
-  }
-
-  /* Make buttons clickable */
-  [part='footer'] ::slotted(:not([disabled])) {
-    pointer-events: all;
-  }
-
-  :host([fullscreen]) {
-    inset: 0;
-    padding: 0;
-  }
-
-  :host([fullscreen]) [part='overlay'] {
-    height: 100vh;
-    width: 100vw;
-    border-radius: 0 !important;
-  }
-
-  :host([fullscreen]) [part='content'] {
-    flex: 1;
-  }
-`;
-
-registerStyles('vaadin-crud-dialog-overlay', [overlayStyles, dialogOverlay, resizableOverlay, crudDialogOverlay], {
-  moduleId: 'vaadin-crud-dialog-overlay-styles',
-});
+import { crudDialogOverlayStyles } from './vaadin-crud-styles.js';
+
+registerStyles(
+  'vaadin-crud-dialog-overlay',
+  [overlayStyles, dialogOverlay, resizableOverlay, crudDialogOverlayStyles],
+  {
+    moduleId: 'vaadin-crud-dialog-overlay-styles',
+  },
+);
 
 /**
  * An element used internally by `<vaadin-crud>`. Not intended to be used separately.

diff --git a/packages/crud/src/vaadin-crud-styles.d.ts b/packages/crud/src/vaadin-crud-styles.d.ts
@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import type { CSSResult } from 'lit';
+
+export const crudStyles: CSSResult;
+
+export const crudDialogOverlayStyles: CSSResult;
diff --git a/packages/crud/src/vaadin-crud-styles.js b/packages/crud/src/vaadin-crud-styles.js
@@ -0,0 +1,125 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+export const crudStyles = css`
+  :host {
+    width: 100%;
+    height: 400px;
+    --vaadin-crud-editor-max-height: 40%;
+    --vaadin-crud-editor-max-width: 40%;
+  }
+
+  :host,
+  #main {
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+    position: relative;
+    overflow: hidden;
+  }
+
+  #main {
+    flex: 1 1 100%;
+    height: 100%;
+  }
+
+  :host([hidden]),
+  [hidden] {
+    display: none !important;
+  }
+
+  [part='toolbar'] {
+    display: flex;
+    flex-shrink: 0;
+    align-items: baseline;
+    justify-content: flex-end;
+  }
+
+  :host([no-toolbar]) [part='toolbar'] {
+    display: none;
+  }
+
+  #container {
+    display: flex;
+    height: 100%;
+  }
+
+  :host([editor-position='bottom']) #container {
+    flex-direction: column;
+  }
+
+  [part='editor'] {
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    outline: none;
+  }
+
+  :host(:not([editor-position=''])[editor-opened]:not([fullscreen])) [part='editor'] {
+    flex: 1 0 100%;
+  }
+
+  :host([editor-position='bottom'][editor-opened]:not([fullscreen])) [part='editor'] {
+    max-height: var(--vaadin-crud-editor-max-height);
+  }
+
+  :host([editor-position='aside'][editor-opened]:not([fullscreen])) [part='editor'] {
+    min-width: 300px;
+    max-width: var(--vaadin-crud-editor-max-width);
+  }
+
+  [part='scroller'] {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    flex: auto;
+  }
+
+  [part='footer'] {
+    display: flex;
+    flex: none;
+    flex-direction: row-reverse;
+  }
+`;
+
+export const crudDialogOverlayStyles = css`
+  [part='overlay'] {
+    max-width: 54em;
+    min-width: 20em;
+  }
+
+  [part='footer'] {
+    justify-content: flex-start;
+    flex-direction: row-reverse;
+  }
+
+  /* Make buttons clickable */
+  [part='footer'] ::slotted(:not([disabled])) {
+    pointer-events: all;
+  }
+
+  :host([fullscreen]) {
+    inset: 0;
+    padding: 0;
+  }
+
+  :host([fullscreen]) [part='overlay'] {
+    height: 100vh;
+    width: 100vw;
+    border-radius: 0 !important;
+  }
+
+  :host([fullscreen]) [part='content'] {
+    flex: 1;
+  }
+`;
diff --git a/packages/crud/src/vaadin-crud.js b/packages/crud/src/vaadin-crud.js
@@ -21,9 +21,12 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.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 { ButtonSlotController, FormSlotController, GridSlotController } from './vaadin-crud-controllers.js';
 import { getProperty, setProperty } from './vaadin-crud-helpers.js';
+import { crudStyles } from './vaadin-crud-styles.js';
+
+registerStyles('vaadin-crud', crudStyles, { moduleId: 'vaadin-crud-styles' });
 
 /**
  * `<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.
@@ -176,88 +179,6 @@ import { getProperty, setProperty } from './vaadin-crud-helpers.js';
 class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   static get template() {
     return html`
-      <style>
-        :host {
-          width: 100%;
-          height: 400px;
-          --vaadin-crud-editor-max-height: 40%;
-          --vaadin-crud-editor-max-width: 40%;
-        }
-
-        :host,
-        #main {
-          display: flex;
-          flex-direction: column;
-          align-self: stretch;
-          position: relative;
-          overflow: hidden;
-        }
-
-        #main {
-          flex: 1 1 100%;
-          height: 100%;
-        }
-
-        :host([hidden]),
-        [hidden] {
-          display: none !important;
-        }
-
-        [part='toolbar'] {
-          display: flex;
-          flex-shrink: 0;
-          align-items: baseline;
-          justify-content: flex-end;
-        }
-
-        :host([no-toolbar]) [part='toolbar'] {
-          display: none;
-        }
-
-        #container {
-          display: flex;
-          height: 100%;
-        }
-
-        :host([editor-position='bottom']) #container {
-          flex-direction: column;
-        }
-
-        [part='editor'] {
-          z-index: 1;
-          display: flex;
-          flex-direction: column;
-          height: 100%;
-          outline: none;
-        }
-
-        :host(:not([editor-position=''])[editor-opened]:not([fullscreen])) [part='editor'] {
-          flex: 1 0 100%;
-        }
-
-        :host([editor-position='bottom'][editor-opened]:not([fullscreen])) [part='editor'] {
-          max-height: var(--vaadin-crud-editor-max-height);
-        }
-
-        :host([editor-position='aside'][editor-opened]:not([fullscreen])) [part='editor'] {
-          min-width: 300px;
-          max-width: var(--vaadin-crud-editor-max-width);
-        }
-
-        [part='scroller'] {
-          display: flex;
-          flex-direction: column;
-          overflow: auto;
-          flex: auto;
-        }
-
-        [part='footer'] {
-          display: flex;
-          flex: none;
-          flex-direction: row-reverse;
-        }
-      </style>
-
       <div id="container">
         <div id="main">
           <slot name="grid"></slot>