@vaadin/radio-group 24.3.0-alpha1 → 24.3.0-alpha11

package/src/vaadin-radio-group.js

@@ -3,18 +3,15 @@
  * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import './vaadin-radio-button.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
-import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
-import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-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 { RadioButton } from './vaadin-radio-button.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { RadioGroupMixin } from './vaadin-radio-group-mixin.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.
@@ -61,51 +58,16 @@ import { RadioButton } from './vaadin-radio-button.js';
  * @customElement
  * @extends HTMLElement
  * @mixes ThemableMixin
- * @mixes DisabledMixin
  * @mixes ElementMixin
- * @mixes FocusMixin
- * @mixes FieldMixin
- * @mixes KeyboardMixin
+ * @mixes RadioGroupMixin
  */
-class RadioGroup extends FieldMixin(
-  FocusMixin(DisabledMixin(KeyboardMixin(ElementMixin(ThemableMixin(PolymerElement))))),
-) {
+class RadioGroup extends RadioGroupMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   static get is() {
     return 'vaadin-radio-group';
   }
 
   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>
@@ -128,425 +90,6 @@ class RadioGroup extends FieldMixin(
       <slot name="tooltip"></slot>
     `;
   }
-
-  static get properties() {
-    return {
-      /**
-       * The value of the radio group.
-       *
-       * @type {string}
-       */
-      value: {
-        type: String,
-        notify: true,
-        value: '',
-        observer: '__valueChanged',
-      },
-
-      /**
-       * When present, the user cannot modify the value of the radio group.
-       * The property works similarly to the `disabled` property.
-       * While the `disabled` property disables all radio buttons inside the group,
-       * the `readonly` property disables only unchecked ones.
-       *
-       * @type {boolean}
-       */
-      readonly: {
-        type: Boolean,
-        value: false,
-        reflectToAttribute: true,
-        observer: '__readonlyChanged',
-      },
-
-      /**
-       * @type {string}
-       * @private
-       */
-      _fieldName: {
-        type: String,
-      },
-
-      /**
-       * Whether the field is dirty.
-       *
-       * The field is automatically marked as dirty once the user triggers
-       * a `change` event. Additionally, the field can be manually marked
-       * as dirty by setting the property to `true`.
-       */
-      dirty: {
-        type: Boolean,
-        value: false,
-        notify: true,
-      },
-    };
-  }
-
-  constructor() {
-    super();
-
-    this.__registerRadioButton = this.__registerRadioButton.bind(this);
-    this.__unregisterRadioButton = this.__unregisterRadioButton.bind(this);
-    this.__onRadioButtonChange = this.__onRadioButtonChange.bind(this);
-    this.__onRadioButtonCheckedChange = this.__onRadioButtonCheckedChange.bind(this);
-
-    this._tooltipController = new TooltipController(this);
-    this._tooltipController.addEventListener('tooltip-changed', (event) => {
-      const tooltip = event.detail.node;
-      if (tooltip && tooltip.isConnected) {
-        // Tooltip element has been added to the DOM
-        const inputs = this.__radioButtons.map((radio) => radio.inputElement);
-        this._tooltipController.setAriaTarget(inputs);
-      } else {
-        // Tooltip element is no longer connected
-        this._tooltipController.setAriaTarget([]);
-      }
-    });
-  }
-
-  /**
-   * A collection of the group's radio buttons.
-   *
-   * @return {!Array<!RadioButton>}
-   * @private
-   */
-  get __radioButtons() {
-    return this.__filterRadioButtons([...this.children]);
-  }
-
-  /**
-   * A currently selected radio button.
-   *
-   * @return {!RadioButton | undefined}
-   * @private
-   */
-  get __selectedRadioButton() {
-    return this.__radioButtons.find((radioButton) => radioButton.checked);
-  }
-
-  /**
-   * @return {boolean}
-   * @private
-   */
-  get isHorizontalRTL() {
-    return this.__isRTL && this._theme !== 'vertical';
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this.ariaTarget = this;
-
-    // See https://github.com/vaadin/vaadin-web-components/issues/94
-    this.setAttribute('role', 'radiogroup');
-
-    this._fieldName = `${this.localName}-${generateUniqueId()}`;
-
-    const slot = this.shadowRoot.querySelector('slot:not([name])');
-    this._observer = new SlotObserver(slot, ({ addedNodes, removedNodes }) => {
-      // Registers the added radio buttons in the reverse order
-      // in order for the group to take the value of the most recent button.
-      this.__filterRadioButtons(addedNodes).reverse().forEach(this.__registerRadioButton);
-
-      // Unregisters the removed radio buttons.
-      this.__filterRadioButtons(removedNodes).forEach(this.__unregisterRadioButton);
-
-      const inputs = this.__radioButtons.map((radio) => radio.inputElement);
-      this._tooltipController.setAriaTarget(inputs);
-    });
-
-    this.addController(this._tooltipController);
-  }
-
-  /**
-   * @param {!Array<!Node>} nodes
-   * @return {!Array<!RadioButton>}
-   * @private
-   */
-  __filterRadioButtons(nodes) {
-    return nodes.filter((child) => child instanceof RadioButton);
-  }
-
-  /**
-   * Override method inherited from `KeyboardMixin`
-   * to implement the custom keyboard navigation as a replacement for the native one
-   * in order for the navigation to work the same way across different browsers.
-   *
-   * @param {!KeyboardEvent} event
-   * @override
-   * @protected
-   */
-  _onKeyDown(event) {
-    super._onKeyDown(event);
-
-    const radioButton = event.composedPath().find((node) => node instanceof RadioButton);
-
-    if (['ArrowLeft', 'ArrowUp'].includes(event.key)) {
-      event.preventDefault();
-      this.__selectNextRadioButton(radioButton);
-    }
-
-    if (['ArrowRight', 'ArrowDown'].includes(event.key)) {
-      event.preventDefault();
-      this.__selectPrevRadioButton(radioButton);
-    }
-  }
-
-  /**
-   * Override an observer from `FieldMixin`.
-   *
-   * @param {boolean} invalid
-   * @protected
-   * @override
-   */
-  _invalidChanged(invalid) {
-    super._invalidChanged(invalid);
-
-    if (invalid) {
-      this.setAttribute('aria-invalid', 'true');
-    } else {
-      this.removeAttribute('aria-invalid');
-    }
-  }
-
-  /**
-   * @param {number} index
-   * @private
-   */
-  __selectNextRadioButton(radioButton) {
-    const index = this.__radioButtons.indexOf(radioButton);
-
-    this.__selectIncRadioButton(index, this.isHorizontalRTL ? 1 : -1);
-  }
-
-  /**
-   * @param {number} index
-   * @private
-   */
-  __selectPrevRadioButton(radioButton) {
-    const index = this.__radioButtons.indexOf(radioButton);
-
-    this.__selectIncRadioButton(index, this.isHorizontalRTL ? -1 : 1);
-  }
-
-  /**
-   * @param {number} index
-   * @param {number} step
-   * @private
-   */
-  __selectIncRadioButton(index, step) {
-    const newIndex = (this.__radioButtons.length + index + step) % this.__radioButtons.length;
-    const newRadioButton = this.__radioButtons[newIndex];
-
-    if (newRadioButton.disabled) {
-      this.__selectIncRadioButton(newIndex, step);
-    } else {
-      newRadioButton.focusElement.focus();
-      newRadioButton.focusElement.click();
-    }
-  }
-
-  /**
-   * Registers the radio button after adding it to the group.
-   *
-   * @param {!RadioButton} radioButton
-   * @private
-   */
-  __registerRadioButton(radioButton) {
-    radioButton.name = this._fieldName;
-    radioButton.addEventListener('change', this.__onRadioButtonChange);
-    radioButton.addEventListener('checked-changed', this.__onRadioButtonCheckedChange);
-
-    if (this.disabled || this.readonly) {
-      radioButton.disabled = true;
-    }
-
-    if (radioButton.checked) {
-      this.__selectRadioButton(radioButton);
-    }
-  }
-
-  /**
-   * Unregisters the radio button before removing it from the group.
-   *
-   * @param {!RadioButton} radioButton
-   * @private
-   */
-  __unregisterRadioButton(radioButton) {
-    radioButton.removeEventListener('change', this.__onRadioButtonChange);
-    radioButton.removeEventListener('checked-changed', this.__onRadioButtonCheckedChange);
-
-    if (radioButton.value === this.value) {
-      this.__selectRadioButton(null);
-    }
-  }
-
-  /** @private */
-  __onRadioButtonChange() {
-    this.dirty = true;
-  }
-
-  /**
-   * @param {!CustomEvent} event
-   * @private
-   */
-  __onRadioButtonCheckedChange(event) {
-    if (event.target.checked) {
-      this.__selectRadioButton(event.target);
-    }
-  }
-
-  /**
-   * Whenever the user sets a non-empty value,
-   * the method tries to select the radio button with that value
-   * showing a warning if no radio button was found with the given value.
-   * If the new value is empty, the method deselects the currently selected radio button.
-   * At last, the method toggles the `has-value` attribute considering the new value.
-   *
-   * @param {string | null | undefined} newValue
-   * @param {string | null | undefined} oldValue
-   * @private
-   */
-  __valueChanged(newValue, oldValue) {
-    if (oldValue === undefined && newValue === '') {
-      return;
-    }
-
-    if (newValue) {
-      const newSelectedRadioButton = this.__radioButtons.find((radioButton) => {
-        return radioButton.value === newValue;
-      });
-
-      if (newSelectedRadioButton) {
-        this.__selectRadioButton(newSelectedRadioButton);
-        this.toggleAttribute('has-value', true);
-      } else {
-        console.warn(`The radio button with the value "${newValue}" was not found.`);
-      }
-    } else {
-      this.__selectRadioButton(null);
-      this.removeAttribute('has-value');
-    }
-
-    if (oldValue !== undefined) {
-      this.validate();
-    }
-  }
-
-  /**
-   * Whenever `readonly` property changes on the group element,
-   * the method updates the `disabled` property for the radio buttons.
-   *
-   * @param {boolean} newValue
-   * @param {boolean} oldValue
-   * @private
-   */
-  __readonlyChanged(newValue, oldValue) {
-    // Prevent updating the `disabled` property for the radio buttons at initialization.
-    // Otherwise, the group's radio buttons may end up enabled regardless
-    // an intentionally added `disabled` attribute on some of them.
-    if (!newValue && oldValue === undefined) {
-      return;
-    }
-
-    if (oldValue !== newValue) {
-      this.__updateRadioButtonsDisabledProperty();
-    }
-  }
-
-  /**
-   * Override method inherited from `DisabledMixin`
-   * to update the `disabled` property for the radio buttons
-   * whenever the property changes on the group element.
-   *
-   * @param {boolean} newValue
-   * @param {boolean} oldValue
-   * @override
-   * @protected
-   */
-  _disabledChanged(newValue, oldValue) {
-    super._disabledChanged(newValue, oldValue);
-
-    // Prevent updating the `disabled` property for the radio buttons at initialization.
-    // Otherwise, the group's radio buttons may end up enabled regardless
-    // an intentionally added `disabled` attribute on some of them.
-    if (!newValue && oldValue === undefined) {
-      return;
-    }
-
-    if (oldValue !== newValue) {
-      this.__updateRadioButtonsDisabledProperty();
-    }
-  }
-
-  /**
-   * Override method inherited from `FocusMixin`
-   * to prevent removing the `focused` attribute
-   * when focus moves between radio buttons inside the group.
-   *
-   * @param {!FocusEvent} event
-   * @return {boolean}
-   * @protected
-   */
-  _shouldRemoveFocus(event) {
-    return !this.contains(event.relatedTarget);
-  }
-
-  /**
-   * Override method inherited from `FocusMixin`
-   * to run validation when the group loses focus.
-   *
-   * @param {boolean} focused
-   * @override
-   * @protected
-   */
-  _setFocused(focused) {
-    super._setFocused(focused);
-
-    // Do not validate when focusout is caused by document
-    // losing focus, which happens on browser tab switch.
-    if (!focused && document.hasFocus()) {
-      this.validate();
-    }
-  }
-
-  /**
-   * @param {RadioButton} radioButton
-   * @private
-   */
-  __selectRadioButton(radioButton) {
-    if (radioButton) {
-      this.value = radioButton.value;
-    } else {
-      this.value = '';
-    }
-
-    this.__radioButtons.forEach((button) => {
-      button.checked = button === radioButton;
-    });
-
-    if (this.readonly) {
-      this.__updateRadioButtonsDisabledProperty();
-    }
-  }
-
-  /**
-   * If the group is read-only, the method disables the unchecked radio buttons.
-   * Otherwise, the method propagates the group's `disabled` property to the radio buttons.
-   *
-   * @private
-   */
-  __updateRadioButtonsDisabledProperty() {
-    this.__radioButtons.forEach((button) => {
-      if (this.readonly) {
-        // The native radio button doesn't support the `readonly` attribute
-        // so the state can be only imitated, by disabling unchecked radio buttons.
-        button.disabled = button !== this.__selectedRadioButton;
-      } else {
-        button.disabled = this.disabled;
-      }
-    });
-  }
 }
 
 defineCustomElement(RadioGroup);

package/theme/lumo/vaadin-radio-button-styles.js

@@ -9,8 +9,8 @@ registerStyles(
   'vaadin-radio-button',
   css`
     :host {
-      color: var(--lumo-body-text-color);
-      font-size: var(--lumo-font-size-m);
+      color: var(--vaadin-radio-button-label-color, var(--lumo-body-text-color));
+      font-size: var(--vaadin-radio-button-label-font-size, var(--lumo-font-size-m));
       font-family: var(--lumo-font-family);
       line-height: var(--lumo-line-height-s);
       -webkit-font-smoothing: antialiased;
@@ -22,11 +22,16 @@ registerStyles(
       cursor: default;
       outline: none;
       --_radio-button-size: var(--vaadin-radio-button-size, calc(var(--lumo-size-m) / 2));
+      --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+      --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
+      --_selection-color: var(--vaadin-selection-color, var(--lumo-primary-color));
     }
 
     :host([has-label]) ::slotted(label) {
-      padding-block: var(--lumo-space-xs);
-      padding-inline: var(--lumo-space-xs) var(--lumo-space-s);
+      padding: var(
+        --vaadin-radio-button-label-padding,
+        var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs) var(--lumo-space-xs)
+      );
     }
 
     [part='radio'] {
@@ -35,7 +40,7 @@ registerStyles(
       margin: var(--lumo-space-xs);
       position: relative;
       border-radius: 50%;
-      background-color: var(--lumo-contrast-20pct);
+      background: var(--vaadin-radio-button-background, var(--lumo-contrast-20pct));
       transition: transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2), background-color 0.15s;
       will-change: transform;
       cursor: var(--lumo-clickable-cursor);
@@ -64,7 +69,8 @@ registerStyles(
       pointer-events: none;
       width: 0;
       height: 0;
-      border: 3px solid var(--lumo-primary-contrast-color);
+      border: var(--vaadin-radio-button-dot-size, 3px) solid
+        var(--vaadin-radio-button-dot-color, var(--lumo-primary-contrast-color));
       border-radius: 50%;
       position: absolute;
       top: 50%;
@@ -80,7 +86,7 @@ registerStyles(
     }
 
     :host([checked]) [part='radio'] {
-      background-color: var(--lumo-primary-color);
+      background-color: var(--_selection-color);
     }
 
     :host([checked]) [part='radio']::after {
@@ -88,7 +94,7 @@ registerStyles(
     }
 
     :host(:not([checked]):not([disabled]):hover) [part='radio'] {
-      background-color: var(--lumo-contrast-30pct);
+      background: var(--vaadin-radio-button-background-hover, var(--lumo-contrast-30pct));
     }
 
     :host([active]) [part='radio'] {
@@ -107,7 +113,7 @@ registerStyles(
     }
 
     :host([focus-ring]) [part='radio'] {
-      box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px var(--lumo-primary-color-50pct),
+      box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color),
         inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
     }