refactor: extract multi-select-combo-box styles into CSS literals (#8182

)
vaadin · Nov 19, 2024 · 0435e94 · 0435e94
1 parent e6afb4a
commit 0435e94
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 68 deletions.
diff --git a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-chip.js b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-chip.js
@@ -5,7 +5,12 @@
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.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 { multiSelectComboBoxChip } from './vaadin-multi-select-combo-box-styles.js';
+
+registerStyles('vaadin-multi-select-combo-box-chip', multiSelectComboBoxChip, {
+  moduleId: 'vaadin-multi-select-combo-box-chip',
+});
 
 /**
  * An element used by `<vaadin-multi-select-combo-box>` to display selected items.
@@ -54,32 +59,6 @@ class MultiSelectComboBoxChip extends ThemableMixin(PolymerElement) {
 
   static get template() {
     return html`
-      <style>
-        :host {
-          display: inline-flex;
-          align-items: center;
-          align-self: center;
-          white-space: nowrap;
-          box-sizing: border-box;
-        }
-
-        [part='label'] {
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-
-        :host([hidden]),
-        :host(:is([readonly], [disabled], [slot='overflow'])) [part='remove-button'] {
-          display: none !important;
-        }
-
-        @media (forced-colors: active) {
-          :host {
-            outline: 1px solid;
-            outline-offset: -1px;
-          }
-        }
-      </style>
       <div part="label">[[label]]</div>
       <div part="remove-button" on-click="_onRemoveClick"></div>
     `;

diff --git a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-styles.d.ts b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-styles.d.ts
@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 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 multiSelectComboBox: CSSResult;
+
+export const multiSelectComboBoxChip: CSSResult;
diff --git a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-styles.js b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-styles.js
@@ -0,0 +1,73 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 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 multiSelectComboBox = css`
+  :host {
+    --input-min-width: var(--vaadin-multi-select-combo-box-input-min-width, 4em);
+    --_chip-min-width: var(--vaadin-multi-select-combo-box-chip-min-width, 50px);
+  }
+
+  #chips {
+    display: flex;
+    align-items: center;
+  }
+
+  ::slotted(input) {
+    box-sizing: border-box;
+    flex: 1 0 var(--input-min-width);
+  }
+
+  ::slotted([slot='chip']),
+  ::slotted([slot='overflow']) {
+    flex: 0 1 auto;
+  }
+
+  ::slotted([slot='chip']) {
+    overflow: hidden;
+  }
+
+  :host(:is([readonly], [disabled])) ::slotted(input) {
+    flex-grow: 0;
+    flex-basis: 0;
+    padding: 0;
+  }
+
+  :host([auto-expand-vertically]) #chips {
+    display: contents;
+  }
+
+  :host([auto-expand-horizontally]) [class$='container'] {
+    width: auto;
+  }
+`;
+
+export const multiSelectComboBoxChip = css`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    align-self: center;
+    white-space: nowrap;
+    box-sizing: border-box;
+  }
+
+  [part='label'] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  :host([hidden]),
+  :host(:is([readonly], [disabled], [slot='overflow'])) [part='remove-button'] {
+    display: none !important;
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      outline: 1px solid;
+      outline-offset: -1px;
+    }
+  }
+`;
diff --git a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.js b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.js
@@ -18,47 +18,8 @@ import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js
 import { InputController } from '@vaadin/field-base/src/input-controller.js';
 import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
 import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
-import { css, registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const multiSelectComboBox = css`
-  :host {
-    --input-min-width: var(--vaadin-multi-select-combo-box-input-min-width, 4em);
-    --_chip-min-width: var(--vaadin-multi-select-combo-box-chip-min-width, 50px);
-  }
-
-  #chips {
-    display: flex;
-    align-items: center;
-  }
-
-  ::slotted(input) {
-    box-sizing: border-box;
-    flex: 1 0 var(--input-min-width);
-  }
-
-  ::slotted([slot='chip']),
-  ::slotted([slot='overflow']) {
-    flex: 0 1 auto;
-  }
-
-  ::slotted([slot='chip']) {
-    overflow: hidden;
-  }
-
-  :host(:is([readonly], [disabled])) ::slotted(input) {
-    flex-grow: 0;
-    flex-basis: 0;
-    padding: 0;
-  }
-
-  :host([auto-expand-vertically]) #chips {
-    display: contents;
-  }
-
-  :host([auto-expand-horizontally]) [class$='container'] {
-    width: auto;
-  }
-`;
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { multiSelectComboBox } from './vaadin-multi-select-combo-box-styles.js';
 
 registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectComboBox], {
   moduleId: 'vaadin-multi-select-combo-box-styles',