refactor: extract radio button and group styles literals (#6676)

vaadin · Oct 20, 2023 · b8956eb · b8956eb
1 parent eb3ee80
commit b8956eb
Show file tree

Hide file tree

Showing 6 changed files with 139 additions and 101 deletions.
diff --git a/packages/radio-group/src/vaadin-radio-button-styles.d.ts b/packages/radio-group/src/vaadin-radio-button-styles.d.ts
@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 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 radioButtonStyles: CSSResult;
diff --git a/packages/radio-group/src/vaadin-radio-button-styles.js b/packages/radio-group/src/vaadin-radio-button-styles.js
@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 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 radioButtonStyles = css`
+  :host {
+    display: inline-block;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host([disabled]) {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .vaadin-radio-button-container {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: baseline;
+  }
+
+  [part='radio'],
+  ::slotted(input),
+  ::slotted(label) {
+    grid-row: 1;
+  }
+
+  [part='radio'],
+  ::slotted(input) {
+    grid-column: 1;
+  }
+
+  [part='radio'] {
+    width: var(--vaadin-radio-button-size, 1em);
+    height: var(--vaadin-radio-button-size, 1em);
+    --_input-border-width: var(--vaadin-input-field-border-width, 0);
+    --_input-border-color: var(--vaadin-input-field-border-color, transparent);
+    box-shadow: inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
+  }
+
+  [part='radio']::before {
+    display: block;
+    content: '\\202F';
+    line-height: var(--vaadin-radio-button-size, 1em);
+    contain: paint;
+  }
+
+  /* visually hidden */
+  ::slotted(input) {
+    opacity: 0;
+    cursor: inherit;
+    margin: 0;
+    align-self: stretch;
+    -webkit-appearance: none;
+    width: initial;
+    height: initial;
+  }
+
+  @media (forced-colors: active) {
+    [part='radio'] {
+      outline: 1px solid;
+      outline-offset: -1px;
+    }
+
+    :host([focused]) [part='radio'] {
+      outline-width: 2px;
+    }
+
+    :host([disabled]) [part='radio'] {
+      outline-color: GrayText;
+    }
+  }
+`;
diff --git a/packages/radio-group/src/vaadin-radio-button.js b/packages/radio-group/src/vaadin-radio-button.js
@@ -13,7 +13,10 @@ import { CheckedMixin } from '@vaadin/field-base/src/checked-mixin.js';
 import { InputController } from '@vaadin/field-base/src/input-controller.js';
 import { LabelMixin } from '@vaadin/field-base/src/label-mixin.js';
 import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-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 { radioButtonStyles } from './vaadin-radio-button-styles.js';
+
+registerStyles('vaadin-radio-button', radioButtonStyles, { moduleId: 'vaadin-radio-button-styles' });
 
 /**
  * `<vaadin-radio-button>` is a web component representing a choice in a radio group.
@@ -68,75 +71,6 @@ class RadioButton extends LabelMixin(
 
   static get template() {
     return html`
-      <style>
-        :host {
-          display: inline-block;
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-
-        :host([disabled]) {
-          -webkit-tap-highlight-color: transparent;
-        }
-
-        .vaadin-radio-button-container {
-          display: grid;
-          grid-template-columns: auto 1fr;
-          align-items: baseline;
-        }
-
-        [part='radio'],
-        ::slotted(input),
-        ::slotted(label) {
-          grid-row: 1;
-        }
-
-        [part='radio'],
-        ::slotted(input) {
-          grid-column: 1;
-        }
-
-        [part='radio'] {
-          width: var(--vaadin-radio-button-size, 1em);
-          height: var(--vaadin-radio-button-size, 1em);
-          --_input-border-width: var(--vaadin-input-field-border-width, 0);
-          --_input-border-color: var(--vaadin-input-field-border-color, transparent);
-          box-shadow: inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
-        }
-
-        [part='radio']::before {
-          display: block;
-          content: '\\202F';
-          line-height: var(--vaadin-radio-button-size, 1em);
-          contain: paint;
-        }
-
-        /* visually hidden */
-        ::slotted(input) {
-          opacity: 0;
-          cursor: inherit;
-          margin: 0;
-          align-self: stretch;
-          -webkit-appearance: none;
-          width: initial;
-          height: initial;
-        }
-
-        @media (forced-colors: active) {
-          [part='radio'] {
-            outline: 1px solid;
-            outline-offset: -1px;
-          }
-          :host([focused]) [part='radio'] {
-            outline-width: 2px;
-          }
-          :host([disabled]) [part='radio'] {
-            outline-color: GrayText;
-          }
-        }
-      </style>
       <div class="vaadin-radio-button-container">
         <div part="radio" aria-hidden="true"></div>
         <slot name="input"></slot>

diff --git a/packages/radio-group/src/vaadin-radio-group-styles.d.ts b/packages/radio-group/src/vaadin-radio-group-styles.d.ts
@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 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 radioGroupStyles: CSSResult;
diff --git a/packages/radio-group/src/vaadin-radio-group-styles.js b/packages/radio-group/src/vaadin-radio-group-styles.js
@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 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 radioGroupStyles = css`
+  :host {
+    display: inline-flex;
+  }
+
+  :host::before {
+    content: '\\2003';
+    width: 0;
+    display: inline-block;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  .vaadin-group-field-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  [part='group-field'] {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  :host(:not([has-label])) [part='label'] {
+    display: none;
+  }
+`;
diff --git a/packages/radio-group/src/vaadin-radio-group.js b/packages/radio-group/src/vaadin-radio-group.js
@@ -13,8 +13,11 @@ import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
 import { FieldMixin } from '@vaadin/field-base/src/field-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 { RadioButton } from './vaadin-radio-button.js';
+import { radioGroupStyles } from './vaadin-radio-group-styles.js';
+
+registerStyles('vaadin-radio-group', radioGroupStyles, { moduleId: 'vaadin-radio-group-styles' });
 
 /**
  * `<vaadin-radio-group>` is a web component that allows the user to choose one item from a group of choices.
@@ -76,36 +79,6 @@ class RadioGroup extends FieldMixin(
 
   static get template() {
     return html`
-      <style>
-        :host {
-          display: inline-flex;
-        }
-
-        :host::before {
-          content: '\\2003';
-          width: 0;
-          display: inline-block;
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-
-        .vaadin-group-field-container {
-          display: flex;
-          flex-direction: column;
-          width: 100%;
-        }
-
-        [part='group-field'] {
-          display: flex;
-          flex-wrap: wrap;
-        }
-
-        :host(:not([has-label])) [part='label'] {
-          display: none;
-        }
-      </style>
       <div class="vaadin-group-field-container">
         <div part="label">
           <slot name="label"></slot>