Add select component hint #2594
Conversation
andysellick
force-pushed
the
add-select-hint
branch
from
a562118 to
1334598
Compare
| @@ -37,6 +48,10 @@ | |||
| <%= label_tag(id, label, class: label_classes) %> | |||
| <% end %> | |||
|
|
|||
| <% if hint_text %> | |||
| <%= tag.span hint_text, id: hint_id, class: "govuk-hint" %> | |||
There was a problem hiding this comment.
just to note that in govuk-frontend v3.8 span became div and in v4 styles which made the hint display as block were removed
migration can either be addressed here or in #2533
There was a problem hiding this comment.
The hint component already uses a div element. However, we have two instances (character count and checkboxes) where the component is not being used and a span is still in place. I have updated #2533 to address these two special cases (until we update them to use the hint component). For this PR I suggest we use the hint component as we do for most form components.
There was a problem hiding this comment.
Thanks for the input both. Yes, agree that we should definitely use the hint component here, have changed 🤦
There was a problem hiding this comment.
The hint component already uses a
divelement. However, we have two instances (character count and checkboxes) where the component is not being used and aspanis still in place. I have updated #2533 to address these two special cases (until we update them to use the hint component). For this PR I suggest we use the hint component as we do for most form components.
sorry didn't see you folk have a hint component 👍
There was a problem hiding this comment.
Thanks for the nudge, @kr8n3r – otherwise I wouldn't have found the two exceptions 😄
andysellick
force-pushed
the
add-select-hint
branch
from
1334598 to
0e6aa63
Compare
| @@ -10,12 +10,23 @@ | |||
| heading_size = false unless shared_helper.valid_heading_size?(heading_size) | |||
| error_message ||= nil | |||
| error_id ||= nil | |||
| hint_text ||= nil | |||
There was a problem hiding this comment.
I seems like we use hint for the hint text, looking at other component's APIs. I would stick to hint for consistency, although I appreciate hint_text might be clearer.
- based on the Design system - an optional hint attribute, with optional hint id - the aria-describedby attribute of the select points to the hint, if an error is also present the describedby attribute includes both hint and error IDs
andysellick
force-pushed
the
add-select-hint
branch
from
0e6aa63 to
f64f967
Compare
Prior to this change, the documentation for the select component suggests passing a parameter called `hint_text`, however it looks that this should actually be `hint`. Comment on hint_text vs hint on original PR: alphagov#2594 (comment)
Prior to this change, the documentation for the select component suggests passing a parameter called `hint_text`, however it looks that this should actually be `hint`. Comment on hint_text vs hint on original PR: alphagov#2594 (comment)
What
Adds a option for a hint to the select component.
During this work I noticed that there's a lot of code in the template and some other refactoring that should be looked at (e.g. the helper file isn't named correctly - it's
select.rbinstead ofselect_helper.rb) but I think I'll do that separately to not over-complicate this PR.Why
Needed in
smart-answers.Visual Changes
Trello card: https://trello.com/c/P0YMGgDs/594-add-hint-to-select-component