feat(basic-section): container_class for the image config - #5845
Open
guillaume-flambard wants to merge 1 commit into
Open
guillaume-flambard wants to merge 1 commit into
guillaume-flambard wants to merge 1 commit into
Conversation
There was no way to apply hide utility classes to the image container of a basic section: attrs only reach the img, so hiding the image on smaller screens left the reserved container space on the page (issue canonical#5830). Downstream sites currently work around this with the deprecated CTA section slots or by breaking out of the framework. Add a container_class key to the image config: a free-form string of utility classes appended to the p-image-container classes, alongside the existing is-highlighted / is-cover booleans. Docs updated with the hide utilities as the intended use case.
|
guillaume-flambard is not a collaborator of the repo |
This branch has not been deployed
This file contains hidden or 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
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.
Fixes #5830.
The image config of a basic section could only forward attributes to the img element, so applying the hide utilities left the container's reserved space on the page. Downstream sites (canonical.com/juju, ubuntu.com/ceph/install, ubuntu.com/certified) currently work around it with the deprecated CTA section slots or by breaking out of the framework entirely, as listed in the issue.
This adds a
container_classkey to the image config: a free-form string of utility classes appended to thep-image-containerclasses, alongside the existingis-highlightedandis-coverbooleans. Intended use is the hide utilities, for example:{ "type": "image", "item": { "attrs": {"src": "hero.png", "alt": ""}, "container_class": "u-hide--small u-hide--medium" } }Docs updated (config block + key description, pointing at the hide utilities). Renders verified for the default, the new key, and the combined aspect-ratio / no-highlight / container_class cases:
Happy to adjust the key name if you would rather see a different shape (a
container_attrsdictionary, for instance).