Skip to content

feat(basic-section): container_class for the image config - #5845

Open
guillaume-flambard wants to merge 1 commit into
canonical:mainfrom
guillaume-flambard:feat/basic-section-image-container-class
Open

guillaume-flambard wants to merge 1 commit into
canonical:mainfrom
guillaume-flambard:feat/basic-section-image-container-class

Conversation

@guillaume-flambard

Copy link
Copy Markdown

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_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 and is-cover booleans. 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:

<div class="p-image-container--16-9 u-hide">
  <img class="p-image-container__image " src="a.png" alt="a" />
</div>

Happy to adjust the key name if you would rather see a different shape (a container_attrs dictionary, for instance).

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.
@webteam-app

Copy link
Copy Markdown

guillaume-flambard is not a collaborator of the repo

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[support u-hide on image containers]: <Basic Section, image>

2 participants