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

Avoid duplicated --error class on character count #2821

Merged
merged 2 commits into from
Sep 5, 2022

Conversation

36degrees
Copy link
Contributor

The character count is adding the --error modifier class when there is an error message passed, but as part of a call to the textarea component which is already handling this for us using similar logic:

<textarea class="govuk-textarea {{- ' govuk-textarea--error' if params.errorMessage }} {{- ' ' + params.classes if params.classes}}" id="{{ params.id }}" name="{{ params.name }}" rows="{%if params.rows %} {{- params.rows -}} {% else %}5{%endif %}"

As a result, when an error message is passed we currently end up with duplicated --error modifier classes on the textarea:

<textarea class="govuk-textarea govuk-textarea--error govuk-js-character-count govuk-textarea--error" id="exceeding-characters" name="exceeding" rows="5" aria-describedby="exceeding-characters-info exceeding-characters-error">
</textarea>

Remove the logic to add the --error modifier class from the character count component and leave it to the textarea component to handle this.

The character count is adding the `--error` modifier class when there is an error message passed, but as part of a call to the textarea component which is already handling this for us using similar logic:

https://github.com/alphagov/govuk-frontend/blob/8f8fa6f9a64753f4bc3c36328c6fdb0539cbb52c/src/govuk/components/textarea/template.njk#L40

As a result, when an error message is passed we currently end up with duplicated `--error` modifier classes on the textarea:

```html
<textarea class="govuk-textarea govuk-textarea--error govuk-js-character-count govuk-textarea--error" id="exceeding-characters" name="exceeding" rows="5" aria-describedby="exceeding-characters-info exceeding-characters-error">
</textarea>
```

Remove the logic to add the `--error` modifier class from the character count component and leave it to the textarea component to handle this.
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-2821 September 2, 2022 10:23 Inactive
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-2821 September 2, 2022 10:24 Inactive
Copy link
Contributor

@owenatgov owenatgov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@36degrees 36degrees merged commit 5427209 into main Sep 5, 2022
@36degrees 36degrees deleted the character-count-duplicated-class branch September 5, 2022 10:22
@36degrees 36degrees added this to the [NEXT] milestone Sep 5, 2022
@romaricpascal romaricpascal mentioned this pull request Nov 10, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Development

Successfully merging this pull request may close these issues.

3 participants