Hint component can render block-level elements as valid HTML #1855
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1855
vanitabarrett
changed the title
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1855
vanitabarrett
force-pushed
the
make-hint-block-element
branch
from
a98eb58 to
501e764
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1855
vanitabarrett
force-pushed
the
make-hint-block-element
branch
from
501e764 to
df9e46c
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1855
hannalaakso
approved these changes
Jul 8, 2020
36degrees
reviewed
Jul 8, 2020
added 3 commits
July 8, 2020 14:47
It's possible to pass HTML into the hint component, but this becomes invalid HTML if someone passes a block element in (for example: a <p> tag) as the hint wraps everything in a span. This commit switches the hint from using a wrapping span to a div, so block elements can be passed in as valid HTML.
vanitabarrett
force-pushed
the
make-hint-block-element
branch
from
df9e46c to
266f091
Compare
2 tasks
Merged
andymantell
added a commit
to surevine/govuk-react-jsx
that referenced
this pull request
Jul 30, 2020
andymantell
added a commit
to andymantell/govuk-frontend-jinja
that referenced
this pull request
Aug 10, 2020
peteryates
added a commit
to x-govuk/govuk-form-builder
that referenced
this pull request
Aug 12, 2020
This makes hints behave more like labels, captions and legends. However, there is a slight difference based on the kinds of arguments passed. The following behaviour only applies to hints. * When a single string of text is supplied, the hint is wrapped in a `span` tag. * When a block of HTML is supplied, the hint is wrapped in a `div`. This is because rendering block level elements inside a span results in invalid HTML[0][1] [0] alphagov/govuk-frontend#1855 [1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What
Why
We allow HTML to be passed to the component, and it seems reasonable that someone may want to pass (for example) 2 paragraphs in. At the moment this would render correctly but would be invalid HTML.
Preview: https://govuk-frontend-review-pr-1855.herokuapp.com/components/hint (no visual changes expected)
Fixes #1835