search

alphagov / govuk_elements

❗️GOV.UK Elements is deprecated, and will only receive major bug fixes and security patches.
https://govuk-elements.herokuapp.com/
MIT License
227 stars 90 forks source link

Idea: make conditional content line up with label content #422

Closed kateiw closed 6 years ago

kateiw commented 7 years ago

Hey, I've had an idea based on playing around with conditional content on radio buttons.

With conditional content drop downs, the text doesn't align with the content in the label above, which looks a bit weird and makes it harder to read.

Before:

screen_shot_2017-03-16_at_17 55 44

What we've been playing around with: screen shot 2017-03-16 at 18 03 12

joelanman commented 7 years ago

Looks nice, what part is conditional in this example? Just the continue button?

kateiw commented 7 years ago

Ignore the button for now... that's also another new thing we've invented apparently!

But this particular idea is about bringing the text in the drop down inline with the text above, and then shifting the grey line across to sit aligned to the middle of the radio.

joelanman commented 7 years ago

conditional

edwardhorsford commented 7 years ago

I like the idea of content lining up with the labels - it feels and looks neater.

I'm less sure about moving the border, but can see that if you don't, you get a big bit of white space.

In most cases conditional content is the child of a radio or checkbox - but we also use inset for child content of the details element. Would we also inset these?

screen shot 2017-03-17 at 13 26 59

gemmaleigh commented 7 years ago

Thanks for raising this @kateiw!

I'm trying to close some of the govuk-elements issues, what's the verdict on this one - would we like to move the left grey border when we reveal extra content - using radio buttons or checkboxes?

I'm happy to make that change if there's consensus.

edwardhorsford commented 7 years ago

It would be good to see this in other use cases.

kateiw commented 7 years ago

heeey, erm i dont know if anyone else tried it out any where else. Can we catch up tomorrow? I wanted to change something on it (how close the grey line is to the radio buttons when the text folds onto a second line on mobile makes it look a bit confusing), but i dont know if this is a totally separate issue.

K

On 14 June 2017 at 15:22, Ed Horsford notifications@github.com wrote:

It would be good to see this in other use cases.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/alphagov/govuk_elements/issues/422#issuecomment-308446892, or mute the thread https://github.com/notifications/unsubscribe-auth/ATw9IuiMFlyZtvvigwV9uwsxe4av2uCTks5sD-yegaJpZM4MfrKd .

-- Kate Ivey-Williams | Service Designer for GOV.UK

36degrees commented 6 years ago

Following the launch of the GOV.UK Design System, GOV.UK Elements will now only get major bug fixes and security patches, so I'm going to close this.

This has however been implemented in the Design System for conditional reveals in both the checkboxes and radios components:

design-system service gov uk_components_radios_conditional-reveal_index html

Thanks, @kateiw! 🎉