Skip to content

Commit

Permalink
update other radios to always be open
Browse files Browse the repository at this point in the history
  • Loading branch information
@rmccar
rmccar committed Nov 29, 2024
1 parent af2ff28 commit 70b18ee
Show file tree
Hide file tree
Showing 17 changed files with 32 additions and 565 deletions.
1 change: 0 additions & 1 deletion src/components/radios/_macro-options.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@
| type | string | false | Sets the HTML `type` attribute for the nested `<input>`. Can be set to either: “number”, “email”, “tel”, “password”, or “search”. Defaults to “text”. |
| inputClasses | string | false | Classes to apply to the radio input element |
| otherType | string | false (unless alternative input used) | Set the type of nested input if not using default text input, using available types: “select”, “checkboxes”, “radios” or “textarea”. |
| open | boolean | false | Set to “true” to show the nested `other` input when page loads |
| selectAllChildren | boolean | false | Set to “true” when using `otherType` set to “checkboxes” to show all nested checkboxes pre-selected |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the nested input |

Expand Down
9 changes: 1 addition & 8 deletions src/components/radios/_macro.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,6 @@
value="{{ radio.value }}"
name="{{ params.name }}"
{% if radio.checked or (params.value is defined and params.value == radio.value) %}{{ ' ' }}checked{% endif %}
{% if radio.other and not radio.other.open %}
{{ ' ' }}aria-controls="{{ radio.id }}-other-wrap"
aria-haspopup="true"
{% endif %}
{% if radio.attributes %}{% for attribute, value in (radio.attributes.items() if radio.attributes is mapping and radio.attributes.items else radio.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}
/>
{{
Expand All @@ -52,10 +48,7 @@
}}
{% if radio.other %}
{% set otherType = radio.other.otherType | default('input') %}
<span
class="ons-radio__other{{ ' ' + 'ons-radio__other--open' if radio.other.open else '' }}"
id="{{ radio.id }}-other-wrap"
>
<span class="ons-radio__other ons-radio__other-input" id="{{ radio.id }}-other-wrap">
{% if otherType == "input" %}
{% from "components/input/_macro.njk" import onsInput %}
{{
Expand Down
4 changes: 1 addition & 3 deletions src/components/radios/_radio.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,9 +58,7 @@

&__other {
@extend .ons-checkbox__other;
}

&__input:not(:checked) ~ &__other--open {
display: block;
display: block !important;
}
}
100 changes: 0 additions & 100 deletions src/components/radios/example-radios-with-clear-button-expanded.njk
View file

This file was deleted.

1 change: 1 addition & 0 deletions src/components/radios/example-radios-with-clear-button.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@
"text": "Any other religion"
},
"value": "other",
"checked": true,
"other": {
"otherType": "input",
"id": "other-textbox-radio-with-clear-button",
Expand Down
1 change: 0 additions & 1 deletion src/components/radios/example-radios-with-error.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@
"value": "no",
"checked": true,
"other": {
"open": true,
"otherType": "input",
"id": "no-textbox-example-radio-with-error",
"name": "no-answer",
Expand Down
16 changes: 8 additions & 8 deletions ...ios-with-revealed-checkboxes-expanded.njk → .../example-radios-with-other-checkboxes.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,21 @@
"borderless": true,
"radios": [
{
"id": "post-example-radio-with-revealed-checkbox-expanded",
"id": "post-example-radio-with-other-checkbox-expanded",
"label": {
"text": "By post"
},
"value": "post"
},
{
"id": "email-example-radio-with-revealed-checkbox-expanded",
"id": "email-example-radio-with-other-checkbox-expanded",
"label": {
"text": "By email"
},
"value": "email"
},
{
"id": "phone-example-radio-with-revealed-checkbox-expanded",
"id": "phone-example-radio-with-other-checkbox-expanded",
"label": {
"text": "By phone"
},
Expand All @@ -30,34 +30,34 @@
"other": {
"otherType": "checkboxes",
"selectAllChildren": true,
"id": "phone-time-example-radio-with-revealed-checkbox-expanded",
"id": "phone-time-example-radio-with-other-checkbox-expanded",
"name": "phone-time",
"legend": "Select preferred times of day",
"checkboxes": [
{
"value": "anytime",
"id": "anytime-example-radio-with-revealed-checkbox-expanded",
"id": "anytime-example-radio-with-other-checkbox-expanded",
"label": {
"text": "Anytime of day"
}
},
{
"value": "morning",
"id": "morning-example-radio-with-revealed-checkbox-expanded",
"id": "morning-example-radio-with-other-checkbox-expanded",
"label": {
"text": "Morning"
}
},
{
"value": "afternoon",
"id": "afternoon-example-radio-with-revealed-checkbox-expanded",
"id": "afternoon-example-radio-with-other-checkbox-expanded",
"label": {
"text": "Afternoon"
}
},
{
"value": "evening",
"id": "evening-example-radio-with-revealed-checkbox-expanded",
"id": "evening-example-radio-with-other-checkbox-expanded",
"label": {
"text": "Evening"
}
Expand Down
16 changes: 8 additions & 8 deletions ...s/example-radios-with-revealed-radios.njk → ...dios/example-radios-with-other-radios.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,55 +7,55 @@
"borderless": true,
"radios": [
{
"id": "post-example-with-revealed-radio",
"id": "post-example-with-other-radio",
"label": {
"text": "By post"
},
"value": "post"
},
{
"id": "email-example-with-revealed-radio",
"id": "email-example-with-other-radio",
"label": {
"text": "By email"
},
"value": "email"
},
{
"id": "phone-example-with-revealed-radio",
"id": "phone-example-with-other-radio",
"label": {
"text": "By phone"
},
"value": "phone",
"other": {
"otherType": "radios",
"id": "phone-time-example-with-revealed-radio",
"id": "phone-time-example-with-other-radio",
"name": "phone-time",
"legend": "Choose preferred time of day",
"radios": [
{
"value": "anytime",
"id": "anytime-example-with-revealed-radio",
"id": "anytime-example-with-other-radio",
"label": {
"text": "Anytime of day"
}
},
{
"value": "morning",
"id": "morning-example-with-revealed-radio",
"id": "morning-example-with-other-radio",
"label": {
"text": "Morning"
}
},
{
"value": "afternoon",
"id": "afternoon-example-with-revealed-radio",
"id": "afternoon-example-with-other-radio",
"label": {
"text": "Afternoon"
}
},
{
"value": "evening",
"id": "evening-example-with-revealed-radio",
"id": "evening-example-with-other-radio",
"label": {
"text": "Evening"
}
Expand Down
8 changes: 4 additions & 4 deletions ...s/example-radios-with-revealed-select.njk → ...dios/example-radios-with-other-select.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,28 +13,28 @@
"name": "contact",
"radios": [
{
"id": "post-example-with-revealed-select",
"id": "post-example-with-other-select",
"label": {
"text": "By post"
},
"value": "post"
},
{
"id": "email-example-with-revealed-select",
"id": "email-example-with-other-select",
"label": {
"text": "By email"
},
"value": "email"
},
{
"id": "phone-example-with-revealed-select",
"id": "phone-example-with-other-select",
"label": {
"text": "By phone"
},
"value": "phone",
"other": {
"otherType": "select",
"id": "phone-time-example-with-revealed-select",
"id": "phone-time-example-with-other-select",
"name": "phone-time",
"label": {
"text": "Choose preferred time of day"
Expand Down
0 ...ample-radios-with-revealed-text-input.njk → .../example-radios-with-other-text-input.njk
View file
File renamed without changes.
18 changes: 9 additions & 9 deletions ...dios-with-revealed-text-area-expanded.njk → ...os/example-radios-with-other-textarea.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,64 +14,64 @@
"name": "travel",
"radios": [
{
"id": "home-example-radio-with-revealed-text-input",
"id": "home-example-radio-with-other-text-input",
"label": {
"text": "Work mainly from home"
},
"value": "home"
},
{
"id": "car-example-radio-with-revealed-text-input",
"id": "car-example-radio-with-other-text-input",
"label": {
"text": "Car or van"
},
"value": "car"
},
{
"id": "underground-example-radio-with-revealed-text-input",
"id": "underground-example-radio-with-other-text-input",
"label": {
"text": "Underground, metro, light rail or tram"
},
"value": "underground"
},
{
"id": "train-example-radio-with-revealed-text-input",
"id": "train-example-radio-with-other-text-input",
"label": {
"text": "Train"
},
"value": "train"
},
{
"id": "bus-example-radio-with-revealed-text-input",
"id": "bus-example-radio-with-other-text-input",
"label": {
"text": "Bus, minibus or coach"
},
"value": "bus"
},
{
"id": "bicycle-example-radio-with-revealed-text-input",
"id": "bicycle-example-radio-with-other-text-input",
"label": {
"text": "Bicycle"
},
"value": "bicycle"
},
{
"id": "walk-example-radio-with-revealed-text-input",
"id": "walk-example-radio-with-other-text-input",
"label": {
"text": "Walk"
},
"value": "walk"
},
{
"id": "other-radio-example-radio-with-revealed-text-input",
"id": "other-radio-example-radio-with-other-text-input",
"label": {
"text": "Other"
},
"value": "other",
"checked": true,
"other": {
"otherType": "textarea",
"id": "other-textbox-example-radio-with-revealed-text-input",
"id": "other-textbox-example-radio-with-other-text-input",
"name": "other-answer",
"label": {
"text": "Enter how you travel"
Expand Down
Loading

0 comments on commit 70b18ee

Please sign in to comment.