Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix error styles on input component #241

Merged
merged 3 commits into from Mar 26, 2018
Merged

Fix error styles on input component #241

merged 3 commits into from Mar 26, 2018

Conversation

@fofr
Copy link
Contributor

@fofr fofr commented Mar 23, 2018

Spotted on alphagov/email-alert-frontend#183 where the error message wasn't showing in red as expected.

  • Rearrange styling classes so that correct red text and borders apply to field
  • Update documentation to clarify why hint text is not inside a label

See: https://govuk-publishing-compon-pr-241.herokuapp.com/component-guide/input

Before

screen shot 2018-03-23 at 15 44 17

After

screen shot 2018-03-23 at 15 43 59

@fofr fofr requested review from nickcolley and tijmenb Mar 23, 2018
@tijmenb tijmenb temporarily deployed to govuk-publishing-compon-pr-241 Mar 23, 2018 Inactive
}
// scss-lint:enable QualifyingElement

@media (min-width: 40.0625em) {
.govuk-c-input {
.gem-c-input {

This comment has been minimized.

@fofr

fofr Mar 23, 2018
Author Contributor

I wasn't sure whether to delete this or update it. cc @nickcolley
I still need to check the specificity of it too: see https://github.com/alphagov/govuk_publishing_components/pull/241/files#diff-57a28dc54e1ce322564d3c1e15811c5fR7

@@ -22,26 +22,19 @@ input[type=text].gem-c-input {

// Disable inner shadow and remove rounded corners
appearance: none;

This comment has been minimized.

@fofr

fofr Mar 23, 2018
Author Contributor

Moving these into main block after specificity was updated in 19035c7

@@ -24,16 +24,16 @@
<% end %>
>
<%= text %>
<% if hint_text.present? %>

This comment has been minimized.

@nickcolley

nickcolley Mar 24, 2018
Contributor

I did a bunch of work to move the hint outside the label, tested it extensively.

But if it's easier might be better to have parity with GOV.UK Frontend, even if it's somewhat a regression.

If we do move it back in, we should remove the code and tests for this specific behaviour.

This comment has been minimized.

@fofr

fofr Mar 26, 2018
Author Contributor

Thanks Nick. As you were the author I figured it was intentional but couldn't see anything in the commit history and then referred to GOV.UK Frontend as canonical source. I'll back that change out and refactor the fixes, but also make sure the accessibility context is in the docs 👍

This comment has been minimized.

@nickcolley

nickcolley Mar 26, 2018
Contributor

The commit history was somewhat lost by moving the work into this repository, sorry.

Copy link
Contributor

@nickcolley nickcolley left a comment

I don't think this is right since the hint text (and error message) should be using aria-describedby, let's chat and figure it out?

fofr added 3 commits Mar 23, 2018
* Show hint in red (before the hint styles were too specific and it
showed in grey)
* Show a red border (the border on the [input] class was too specific
and was overriding the error class when applied)
@fofr fofr force-pushed the input-error-fix branch from d462259 to a413bc6 Mar 26, 2018
@fofr fofr dismissed nickcolley’s stale review Mar 26, 2018

The hint text changes have been removed from this PR

@fofr fofr changed the title [WIP] Fix error styles on input component Fix error styles on input component Mar 26, 2018
Copy link
Contributor

@vanitabarrett vanitabarrett left a comment

Looks good to me 👍

@fofr fofr merged commit c461e47 into master Mar 26, 2018
1 check passed
1 check passed
continuous-integration/jenkins/branch This commit looks good
Details
@fofr fofr deleted the input-error-fix branch Mar 26, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

4 participants
You can’t perform that action at this time.