Allow for an optional divider between radio items #849

kr8n3r · 2018-07-01T10:21:24Z

It used to be a feature in GOV.UK Elements and it's not currently available in our macros.

Direct url: https://govuk-frontend-review-pr-849.herokuapp.com/components/radios/with-a-divider/preview

This PR:

Adds an example
Updates the component template
Adds a test to check the divider item gets output
Updates README

Fixes: #729

Works fine with conditional reveal as well.

Screenshots

IE 8

IE 9

IE 11

Firefox 60

Safari 9.3

kr8n3r · 2018-07-01T10:29:08Z

src/components/radios/radios.yaml

+        text: Use Government Gateway
+      - value: govuk-verify
+        text: 'Use GOV.UK Verify'
+      - divider: 'or'


we could follow the same rules as with all our text params and allow for either text or html, but surely it should only be text. it could be

- divider: { text: text here }

as well

kr8n3r · 2018-07-01T10:47:17Z

@dashouse question about text alignment in relationship to the radio. in elements it's aligned to the left

dashouse · 2018-07-03T07:49:15Z

Design wise 👍

36degrees · 2018-07-03T07:51:28Z

src/components/radios/_radios.scss

+    @include govuk-font($size: 19);
+    display: block;
+    margin-bottom: govuk-spacing(2);
+    padding: 0 0 0 ($govuk-radios-size / 4);


This is visually centring the text, but it's relying on the string being 'or' - if you use a different string then it doesn't work. What about making this element the same width as the radio buttons / checkboxes and then use text-align: center? That way it should work correctly for short strings, and automatically fall back to left-aligning if the string is long enough that centring it doesn't make sense.

the aim is for the left alignment to be where the line is in the conditional reveal. i've update the calculation

we agreed to go with Ollie's suggestions

36degrees · 2018-07-03T07:51:58Z

src/components/radios/radios.yaml

+    name: example
+    fieldset:
+      legend:
+        text: Have you changed your name?


Can we make this example make sense? The answers don't relate to the question.

36degrees · 2018-07-03T07:52:04Z

src/components/radios/template.njk

@@ -44,9 +44,12 @@
  <div class="govuk-radios {%- if params.classes %} {{ params.classes }}{% endif %}"
    {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
    {%- if isConditional %} data-module="radios"{% endif -%}>
-    {% for item in params.items %}
+    {% for item in params.items %}    


Trailing whitespace

36degrees · 2018-07-03T07:52:13Z

src/components/radios/template.njk

@@ -59,12 +62,13 @@
        attributes: item.label.attributes,
        for: id
      }) | indent(6) | trim }}
-    </div>
+    </div> 


Trailing whitespace

36degrees

Generally looks really good, but I think the argument docs could be clearer.

36degrees · 2018-07-05T15:13:10Z

src/components/radios/index.njk

+        text: 'No'
+      },
+      {
+        html: 'Optional divider to separate options, e.g "or".'


I think it needs to be clearer how to use this – it's not obvious for example that specifying 'divider' means that all other options will be ignored.

hannalaakso · 2018-07-09T15:57:52Z

src/components/radios/template.njk

@@ -47,6 +47,9 @@
    {% for item in params.items %}
    {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
    {% set conditionalId = "conditional-" + id %}
+    {%- if item.divider %}
+    <span class="govuk-radios__divider">{{ item.divider }}</span>


Should this just be a div, instead of span that has display: block set. It would make it consistent with the markup of the radios.

it's now a div

36degrees · 2018-07-10T14:16:29Z

src/components/radios/_radios.scss

+  .govuk-radios__divider {
+    $govuk-divider-size: $govuk-radios-size !default;
+    @include govuk-font($size: 19);
+    display: block;


This is redundant now that the divider is a div.

NickColley · 2018-07-11T10:25:26Z

src/components/radios/_radios.scss

@@ -138,6 +138,14 @@
    }
  }

+  .govuk-radios__divider {
+    $govuk-divider-size: $govuk-radios-size !default;


This seems to work well but I wonder if it'll stand up to the following scenarios:

A divider longer than 'or'

A user changing their text size

It may be more flexible to have this span the full width of the component, and align it with the radios by some padding-left

That was the original approach – see related discussion in #849 (comment)

When the divider is longer than or the text will overflow to the right, like this:

I don't think we'd tested with users changing their text size though – good call. It seems to work though, having enabled $govuk-typography-use-rem: true; in app.scss:

Firefox, with size set to 28 in appearance settings:

Safari, with 'Never use font sizes smaller than 24' configured under 'Advanced':

Chrome, with 'Font size' set to very large in appearance settings:

Sweet thanks for that. 👍

NickColley

This looks really well thought out. Great naming for the API choices 👍

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-849 July 1, 2018 10:21 Inactive

kr8n3r commented Jul 1, 2018

View reviewed changes

kr8n3r force-pushed the divider-in-radios-and-checkboxes branch from 7f71a88 to c71006e Compare July 1, 2018 10:32

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-849 July 1, 2018 10:32 Inactive

kr8n3r added the enhancement label Jul 2, 2018

36degrees reviewed Jul 3, 2018

View reviewed changes

kr8n3r force-pushed the divider-in-radios-and-checkboxes branch from c71006e to 36c5e5b Compare July 3, 2018 08:02

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-849 July 3, 2018 08:02 Inactive

kr8n3r force-pushed the divider-in-radios-and-checkboxes branch from 36c5e5b to 36d2706 Compare July 3, 2018 08:15

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-849 July 3, 2018 08:15 Inactive

kr8n3r force-pushed the divider-in-radios-and-checkboxes branch from 36d2706 to f01a6e1 Compare July 3, 2018 08:31

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-849 July 3, 2018 08:31 Inactive

kr8n3r force-pushed the divider-in-radios-and-checkboxes branch from f01a6e1 to d29e0b0 Compare July 3, 2018 08:45

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-849 July 3, 2018 08:45 Inactive

kr8n3r force-pushed the divider-in-radios-and-checkboxes branch from d29e0b0 to 714bfda Compare July 3, 2018 08:54

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-849 July 3, 2018 08:54 Inactive

kr8n3r force-pushed the divider-in-radios-and-checkboxes branch from 714bfda to d561e25 Compare July 3, 2018 08:57

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-849 July 3, 2018 08:57 Inactive

kr8n3r changed the title ~~WIP: Allow for optional divider between radio items~~ Allow for an optional divider between radio items Jul 3, 2018

kr8n3r force-pushed the divider-in-radios-and-checkboxes branch from d561e25 to dff8aec Compare July 3, 2018 09:01

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-849 July 3, 2018 09:02 Inactive

kr8n3r added this to the v1.1.0 milestone Jul 4, 2018

kr8n3r force-pushed the divider-in-radios-and-checkboxes branch from dff8aec to 9671ffe Compare July 4, 2018 13:57

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-849 July 4, 2018 13:57 Inactive

36degrees reviewed Jul 5, 2018

View reviewed changes

kr8n3r force-pushed the divider-in-radios-and-checkboxes branch from 9671ffe to 21991cd Compare July 6, 2018 08:29

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-849 July 6, 2018 08:29 Inactive

kr8n3r force-pushed the divider-in-radios-and-checkboxes branch from 21991cd to d3c0ee0 Compare July 6, 2018 12:01

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-849 July 6, 2018 12:02 Inactive

hannalaakso reviewed Jul 9, 2018

View reviewed changes

kr8n3r force-pushed the divider-in-radios-and-checkboxes branch from d3c0ee0 to 3813723 Compare July 10, 2018 09:00

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-849 July 10, 2018 09:01 Inactive

36degrees reviewed Jul 10, 2018

View reviewed changes

kr8n3r force-pushed the divider-in-radios-and-checkboxes branch from 3813723 to 31a21b6 Compare July 10, 2018 14:53

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-849 July 10, 2018 14:53 Inactive

kr8n3r force-pushed the divider-in-radios-and-checkboxes branch from 31a21b6 to 5bb1129 Compare July 10, 2018 15:59

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-849 July 10, 2018 15:59 Inactive

NickColley reviewed Jul 11, 2018

View reviewed changes

kr8n3r removed this from the v1.1.0 milestone Jul 13, 2018

NickColley added feature request User requests a new feature and removed enhancement labels Jul 13, 2018

kr8n3r force-pushed the divider-in-radios-and-checkboxes branch from 5bb1129 to f161ac3 Compare July 13, 2018 18:48

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-849 July 13, 2018 18:48 Inactive

kr8n3r force-pushed the divider-in-radios-and-checkboxes branch from f161ac3 to 7b03bee Compare July 13, 2018 18:49

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-849 July 13, 2018 18:49 Inactive

kr8n3r force-pushed the divider-in-radios-and-checkboxes branch from 7b03bee to 6b2b82a Compare July 13, 2018 19:02

govuk-design-system-ci deployed to govuk-frontend-review-pr-849 July 13, 2018 19:02 View deployment

NickColley approved these changes Jul 17, 2018

View reviewed changes

igloosi added 2 commits July 19, 2018 09:00

Allow for optional divider between radio items

2119b68

Document in CHANGELOG

95b8ffa

kr8n3r force-pushed the divider-in-radios-and-checkboxes branch from 6b2b82a to 95b8ffa Compare July 19, 2018 08:01

kr8n3r added this to the [NEXT] milestone Jul 19, 2018

kr8n3r merged commit e83b54a into master Jul 19, 2018

kr8n3r deleted the divider-in-radios-and-checkboxes branch July 19, 2018 08:09

kr8n3r mentioned this pull request Jul 26, 2018

Release v1.2.0 (feature release) #928

Merged

colinrotherham mentioned this pull request Jul 1, 2024

Fix divider width for small checkboxes #5114

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow for an optional divider between radio items #849

Allow for an optional divider between radio items #849

kr8n3r commented Jul 1, 2018 •

edited

Loading

kr8n3r Jul 1, 2018 •

edited

Loading

kr8n3r commented Jul 1, 2018

dashouse commented Jul 3, 2018

36degrees Jul 3, 2018

kr8n3r Jul 3, 2018

kr8n3r Jul 3, 2018

36degrees Jul 3, 2018

36degrees Jul 3, 2018

36degrees Jul 3, 2018

36degrees left a comment

36degrees Jul 5, 2018

hannalaakso Jul 9, 2018

kr8n3r Jul 10, 2018 •

edited

Loading

36degrees Jul 10, 2018

NickColley Jul 11, 2018

36degrees Jul 11, 2018

NickColley Jul 11, 2018

NickColley left a comment

Allow for an optional divider between radio items #849

Allow for an optional divider between radio items #849

Conversation

kr8n3r commented Jul 1, 2018 • edited Loading

kr8n3r Jul 1, 2018 • edited Loading

Choose a reason for hiding this comment

kr8n3r commented Jul 1, 2018

dashouse commented Jul 3, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

36degrees left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kr8n3r Jul 10, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

NickColley left a comment

Choose a reason for hiding this comment

kr8n3r commented Jul 1, 2018 •

edited

Loading

kr8n3r Jul 1, 2018 •

edited

Loading

kr8n3r Jul 10, 2018 •

edited

Loading