@ons/design-system 70.0.6 → 70.0.8

package/components/radios/_radio.scss

@@ -1,65 +1,66 @@
 .ons-radio {
-  @extend .ons-checkbox;
+    @extend .ons-checkbox;
 
-  &__input {
-    @extend .ons-checkbox__input;
+    &__input {
+        @extend .ons-checkbox__input;
 
-    background: var(--ons-color-grey-5);
-    border-radius: 50%;
-    box-shadow: inset 0 0 0 3px var(--ons-color-input-bg);
+        background: var(--ons-color-grey-5);
+        border-radius: 50%;
+        box-shadow: inset 0 0 0 3px var(--ons-color-input-bg);
 
-    &::after {
-      display: none;
-    }
-    &:checked {
-      background-color: var(--ons-color-input-border);
+        &::after {
+            display: none;
+        }
+        &:checked {
+            background-color: var(--ons-color-input-border);
+        }
     }
-  }
 
-  &.ons-radio--no-border {
-    @extend .ons-checkbox--no-border;
+    &.ons-radio--no-border {
+        @extend .ons-checkbox--no-border;
 
-    & > .ons-radio__input {
-      @extend .ons-radio__input;
-      &:focus,
-      &:checked {
-        & + .ons-radio__label::before {
-          background: none;
-          border: none;
-          box-shadow: none;
-          outline: none;
-        }
-      }
+        > .ons-radio__input {
+            @extend .ons-radio__input;
+            &:focus,
+            &:checked {
+                + .ons-radio__label::before {
+                    background: none;
+                    border: 0;
+                    box-shadow: none;
+                    outline: none;
+                }
+            }
 
-      &:focus {
-        box-shadow: inset 0 0 0 3px var(--ons-color-input-bg),
-          0 0 0 $input-border-width var(--ons-color-input-border),
-          0 0 0 4px var(--ons-color-focus);
-      }
-    }
+            &:focus {
+                box-shadow:
+                    inset 0 0 0 3px var(--ons-color-input-bg),
+                    0 0 0 $input-border-width var(--ons-color-input-border),
+                    0 0 0 4px var(--ons-color-focus);
+            }
+        }
 
-    .ons-radio__label--with-description {
-      padding: 0;
+        .ons-radio__label--with-description {
+            padding: 0;
+        }
     }
-  }
 
-  &__label {
-    @extend .ons-checkbox__label;
+    &__label {
+        @extend .ons-checkbox__label;
 
-    &--with-description {
-      @extend .ons-checkbox__label--with-description;
+        &--with-description {
+            @extend .ons-checkbox__label--with-description;
+        }
     }
-  }
 
-  &__description {
-    @extend .ons-checkbox__description;
-  }
+    &__description {
+        @extend .ons-checkbox__description;
+    }
 
-  &__other {
-    @extend .ons-checkbox__other;
-  }
+    &__other {
+        @extend .ons-checkbox__other;
+    }
 
-  &__input:not(:checked) ~ &__other--open {
-    display: block;
-  }
+    &__input:not(:checked) ~ &__other--open {
+        display: block;
+    }
 }

package/components/radios/_radios.scss

@@ -1,28 +1,22 @@
 .ons-radios {
-  &__items {
-    @extend .ons-checkboxes__items;
-
-    @include mq(s) {
-      max-width: max-content;
+    &__items {
+        @extend .ons-checkboxes__items;
     }
-  }
-
-  &__item {
-    @extend .ons-checkboxes__item;
 
-    width: 100%;
+    &__item {
+        @extend .ons-checkboxes__item;
 
-    &--no-border {
-      @extend .ons-checkboxes__item--no-border;
+        &--no-border {
+            @extend .ons-checkboxes__item--no-border;
 
-      margin-bottom: 0.8rem;
-      &:last-child {
-        margin-bottom: 0;
-      }
+            margin-bottom: 0.8rem;
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
     }
-  }
 
-  &__label {
-    @extend .ons-checkboxes__label;
-  }
+    &__label {
+        @extend .ons-checkboxes__label;
+    }
 }

package/components/radios/check-radios.js

@@ -1,28 +1,28 @@
 export default class CheckRadios {
-  constructor(radio, openOther) {
-    this.radio = radio;
-    this.openOther = openOther;
-    this.input = this.openOther.querySelector('.ons-input');
-    this.input.tabIndex = -1;
+    constructor(radio, openOther) {
+        this.radio = radio;
+        this.openOther = openOther;
+        this.input = this.openOther.querySelector('.ons-input');
+        this.input.tabIndex = -1;
 
-    this.setInputBlurAttributes();
-    this.input.addEventListener('focus', this.checkRadio.bind(this));
-    this.radio.addEventListener('change', this.setInputFocusAttributes.bind(this));
-    this.radio.addEventListener('focus', this.setInputFocusAttributes.bind(this));
-    if (this.radio.type == 'radio') {
-      this.input.addEventListener('blur', this.setInputBlurAttributes.bind(this));
+        this.setInputBlurAttributes();
+        this.input.addEventListener('focus', this.checkRadio.bind(this));
+        this.radio.addEventListener('change', this.setInputFocusAttributes.bind(this));
+        this.radio.addEventListener('focus', this.setInputFocusAttributes.bind(this));
+        if (this.radio.type == 'radio') {
+            this.input.addEventListener('blur', this.setInputBlurAttributes.bind(this));
+        }
     }
-  }
 
-  checkRadio() {
-    this.radio.checked = true;
-  }
+    checkRadio() {
+        this.radio.checked = true;
+    }
 
-  setInputFocusAttributes() {
-    this.input.tabIndex = this.radio.checked ? 0 : -1;
-  }
+    setInputFocusAttributes() {
+        this.input.tabIndex = this.radio.checked ? 0 : -1;
+    }
 
-  setInputBlurAttributes() {
-    this.input.tabIndex = -1;
-  }
+    setInputBlurAttributes() {
+        this.input.tabIndex = -1;
+    }
 }

package/components/radios/clear-radios.js

@@ -1,55 +1,55 @@
 let clearAlertAnnounced;
 export default class ClearRadios {
-  constructor(inputs, button, otherInput) {
-    this.inputs = inputs;
-    this.button = button;
-    this.otherInput = otherInput;
-    this.ariaElement = document.querySelector('.ons-js-clear-radio-alert');
-    this.clearAlert = this.ariaElement.getAttribute('data-clear');
-    this.clearedAlert = this.ariaElement.getAttribute('data-cleared');
-
-    this.inputs.forEach((input) => input.addEventListener('click', this.setClearAttributes.bind(this)));
-    this.button.addEventListener('click', this.clearRadios.bind(this));
-    this.checkRadios();
-
-    if (this.otherInput) {
-      const parent = this.otherInput.parentNode;
-      this.otherField = parent.querySelector('.ons-input');
-      this.otherField.addEventListener('focus', this.setClearAttributes.bind(this));
+    constructor(inputs, button, otherInput) {
+        this.inputs = inputs;
+        this.button = button;
+        this.otherInput = otherInput;
+        this.ariaElement = document.querySelector('.ons-js-clear-radio-alert');
+        this.clearAlert = this.ariaElement.getAttribute('data-clear');
+        this.clearedAlert = this.ariaElement.getAttribute('data-cleared');
+
+        this.inputs.forEach((input) => input.addEventListener('click', this.setClearAttributes.bind(this)));
+        this.button.addEventListener('click', this.clearRadios.bind(this));
+        this.checkRadios();
+
+        if (this.otherInput) {
+            const parent = this.otherInput.parentNode;
+            this.otherField = parent.querySelector('.ons-input');
+            this.otherField.addEventListener('focus', this.setClearAttributes.bind(this));
+        }
+
+        clearAlertAnnounced = false;
     }
 
-    clearAlertAnnounced = false;
-  }
-
-  checkRadios() {
-    this.inputs.forEach((input) => {
-      if (input.checked) {
-        this.setClearAttributes();
-      }
-    });
-  }
-
-  setClearAttributes() {
-    this.button.classList.remove('ons-u-db-no-js_enabled');
-    if (clearAlertAnnounced === false) {
-      this.ariaElement.innerHTML = this.clearAlert;
-      clearAlertAnnounced = true;
+    checkRadios() {
+        this.inputs.forEach((input) => {
+            if (input.checked) {
+                this.setClearAttributes();
+            }
+        });
     }
-  }
 
-  clearRadios() {
-    event.preventDefault();
+    setClearAttributes() {
+        this.button.classList.remove('ons-u-db-no-js_enabled');
+        if (clearAlertAnnounced === false) {
+            this.ariaElement.innerHTML = this.clearAlert;
+            clearAlertAnnounced = true;
+        }
+    }
 
-    this.inputs.forEach((input) => {
-      input.checked = false;
-    });
+    clearRadios() {
+        event.preventDefault();
 
-    if (this.otherField) {
-      this.otherField.value = '';
-    }
+        this.inputs.forEach((input) => {
+            input.checked = false;
+        });
 
-    this.button.classList.add('ons-u-db-no-js_enabled');
-    this.ariaElement.innerHTML = this.clearedAlert;
-    clearAlertAnnounced = false;
-  }
+        if (this.otherField) {
+            this.otherField.value = '';
+        }
+
+        this.button.classList.add('ons-u-db-no-js_enabled');
+        this.ariaElement.innerHTML = this.clearedAlert;
+        clearAlertAnnounced = false;
+    }
 }

package/components/radios/radio-with-fieldset.js

@@ -1,29 +1,29 @@
 export default class RadioWithFieldset {
-  constructor(context) {
-    this.context = context;
-    this.radios = [...context.closest('.ons-radios__items').querySelectorAll('.ons-js-radio')];
-    this.childInputs = [...this.context.querySelectorAll('input')];
-    this.selectAllChildrenInput = this.context.querySelector('.ons-js-select-all-children');
+    constructor(context) {
+        this.context = context;
+        this.radios = [...context.closest('.ons-radios__items').querySelectorAll('.ons-js-radio')];
+        this.childInputs = [...this.context.querySelectorAll('input')];
+        this.selectAllChildrenInput = this.context.querySelector('.ons-js-select-all-children');
 
-    if (this.selectAllChildrenInput) {
-      this.selectAllChildrenInput.addEventListener('change', this.checkChildInputsOnSelect.bind(this));
-    } else {
-      this.radios.forEach((radio) => radio.addEventListener('change', this.uncheckChildInputsOnDeselect.bind(this)));
+        if (this.selectAllChildrenInput) {
+            this.selectAllChildrenInput.addEventListener('change', this.checkChildInputsOnSelect.bind(this));
+        } else {
+            this.radios.forEach((radio) => radio.addEventListener('change', this.uncheckChildInputsOnDeselect.bind(this)));
+        }
     }
-  }
 
-  checkChildInputsOnSelect() {
-    this.childInputs.forEach((input) => {
-      input.checked = this.selectAllChildrenInput.checked === true ? true : false;
-    });
-  }
+    checkChildInputsOnSelect() {
+        this.childInputs.forEach((input) => {
+            input.checked = this.selectAllChildrenInput.checked === true ? true : false;
+        });
+    }
 
-  uncheckChildInputsOnDeselect() {
-    const isOther = this.radios.find((radio) => radio.classList.contains('ons-js-other'));
-    if (isOther && isOther.checked === false) {
-      this.childInputs.forEach((input) => {
-        input.checked = false;
-      });
+    uncheckChildInputsOnDeselect() {
+        const isOther = this.radios.find((radio) => radio.classList.contains('ons-js-other'));
+        if (isOther && isOther.checked === false) {
+            this.childInputs.forEach((input) => {
+                input.checked = false;
+            });
+        }
     }
-  }
 }

package/components/radios/radios.dom.js

@@ -1,37 +1,37 @@
 import domready from '../../js/domready';
 
 domready(async () => {
-  const radios = [...document.querySelectorAll('.ons-js-radio')];
-
-  if (radios.length) {
-    const Radios = (await import('../checkboxes/checkboxes-with-reveal')).default;
-
-    new Radios(radios);
-
-    const button = document.querySelector('.ons-js-clear-btn');
-    const otherInput = document.querySelector('.ons-radio__other');
-    if (button) {
-      const ClearRadios = (await import('./clear-radios')).default;
-
-      new ClearRadios(radios, button, otherInput);
-    }
-
-    const openOther = document.querySelector('.ons-radio__other--open');
-    if (openOther) {
-      const parent = openOther.parentNode;
-      const radioInput = parent.querySelector('.ons-radio__input');
-      const CheckRadios = (await import('./check-radios')).default;
-
-      new CheckRadios(radioInput, openOther);
-    }
-
-    const otherFieldsets = [...document.querySelectorAll('.ons-js-other-fieldset-radio')];
-    if (otherFieldsets) {
-      const RadioWithInnerFieldset = (await import('./radio-with-fieldset')).default;
-      otherFieldsets.forEach((otherFieldset) => {
-        const context = otherFieldset.closest('.ons-radio');
-        new RadioWithInnerFieldset(context);
-      });
+    const radios = [...document.querySelectorAll('.ons-js-radio')];
+
+    if (radios.length) {
+        const Radios = (await import('../checkboxes/checkboxes-with-reveal')).default;
+
+        new Radios(radios);
+
+        const button = document.querySelector('.ons-js-clear-btn');
+        const otherInput = document.querySelector('.ons-radio__other');
+        if (button) {
+            const ClearRadios = (await import('./clear-radios')).default;
+
+            new ClearRadios(radios, button, otherInput);
+        }
+
+        const openOther = document.querySelector('.ons-radio__other--open');
+        if (openOther) {
+            const parent = openOther.parentNode;
+            const radioInput = parent.querySelector('.ons-radio__input');
+            const CheckRadios = (await import('./check-radios')).default;
+
+            new CheckRadios(radioInput, openOther);
+        }
+
+        const otherFieldsets = [...document.querySelectorAll('.ons-js-other-fieldset-radio')];
+        if (otherFieldsets) {
+            const RadioWithInnerFieldset = (await import('./radio-with-fieldset')).default;
+            otherFieldsets.forEach((otherFieldset) => {
+                const context = otherFieldset.closest('.ons-radio');
+                new RadioWithInnerFieldset(context);
+            });
+        }
     }
-  }
 });