From 0794a18ca8f2c78faa2ceafb18b0f058b3503b52 Mon Sep 17 00:00:00 2001 From: Julie Muzina Date: Thu, 13 Jun 2024 09:09:10 -0400 Subject: [PATCH] Add aspect ratio & highlighted background image classes. Deprecate old image classes. --- package.json | 2 +- releases.yml | 10 +++++ scss/_patterns_image.scss | 32 +++++++++++++ .../image/container/aspect-ratio/16-9.html | 10 +++++ .../image/container/aspect-ratio/all.html | 37 +++++++++++++++ .../patterns/image/container/highlighted.html | 10 +++++ templates/docs/patterns/images.md | 45 ++++++++++++++++++- 7 files changed, 144 insertions(+), 2 deletions(-) create mode 100644 templates/docs/examples/patterns/image/container/aspect-ratio/16-9.html create mode 100644 templates/docs/examples/patterns/image/container/aspect-ratio/all.html create mode 100644 templates/docs/examples/patterns/image/container/highlighted.html diff --git a/package.json b/package.json index 535a0dd77..cc334bc3a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vanilla-framework", - "version": "4.12.2", + "version": "4.13.0", "author": { "email": "webteam@canonical.com", "name": "Canonical Webteam" diff --git a/releases.yml b/releases.yml index 6e35b6ef9..d4c690d57 100644 --- a/releases.yml +++ b/releases.yml @@ -1,3 +1,13 @@ +- version: 4.13.0 + features: + - component: Images + url: /docs/patterns/images + status: Updated + notes: "We've added new classes for controlling image aspect ratio and background." + - component: Images + url: /docs/patterns/images + status: Deprecated + notes: "We've deprecated the p-image--bordered and p-image--shadowed classes. Use p-image-container is-highlighted instead." - version: 4.12.0 features: - component: Typography diff --git a/scss/_patterns_image.scss b/scss/_patterns_image.scss index de771425b..e6cb7dd2f 100644 --- a/scss/_patterns_image.scss +++ b/scss/_patterns_image.scss @@ -1,6 +1,37 @@ @import 'settings'; @mixin vf-p-image { + .p-image-container, + [class^='p-image-container--'] { + align-items: center; + display: grid; + justify-content: center; + text-align: center; + .p-image-container__image { + object-fit: contain; + } + &.is-highlighted { + background: $colors--theme--background-alt; + } + } + + .p-image-container--16-9 { + aspect-ratio: 16/9; + } + .p-image-container--3-2 { + aspect-ratio: 3/2; + } + .p-image-container--2-3 { + aspect-ratio: 2/3; + } + .p-image-container--cinematic { + aspect-ratio: 2.4/1; + } + .p-image-container--square { + aspect-ratio: 1/1; + } + + // Deprecated; will be removed in v5 .p-image--bordered { border: { color: $color-mid-light; @@ -9,6 +40,7 @@ } } + // Deprecated; will be removed in v5 .p-image--shadowed { box-shadow: 0 1px 5px 1px transparentize($color-mid-light, 0.8); } diff --git a/templates/docs/examples/patterns/image/container/aspect-ratio/16-9.html b/templates/docs/examples/patterns/image/container/aspect-ratio/16-9.html new file mode 100644 index 000000000..768397866 --- /dev/null +++ b/templates/docs/examples/patterns/image/container/aspect-ratio/16-9.html @@ -0,0 +1,10 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Image Container / Aspect Ratio / 16:9{% endblock %} + +{% block standalone_css %}patterns_image{% endblock %} + +{% block content %} +
+ +
+{% endblock %} diff --git a/templates/docs/examples/patterns/image/container/aspect-ratio/all.html b/templates/docs/examples/patterns/image/container/aspect-ratio/all.html new file mode 100644 index 000000000..43b462ed0 --- /dev/null +++ b/templates/docs/examples/patterns/image/container/aspect-ratio/all.html @@ -0,0 +1,37 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Image Container / Aspect Ratio / All{% endblock %} + +{% block standalone_css %}patterns_image{% endblock %} + +{% block content %} +
+ 16:9 +
+ +
+
+
+ 3:2 +
+ +
+
+
+ 2:3 +
+ +
+
+
+ 2.4:1 (Cinematic) +
+ +
+
+
+ 1:1 (Square) +
+ +
+
+{% endblock %} diff --git a/templates/docs/examples/patterns/image/container/highlighted.html b/templates/docs/examples/patterns/image/container/highlighted.html new file mode 100644 index 000000000..23434ba7d --- /dev/null +++ b/templates/docs/examples/patterns/image/container/highlighted.html @@ -0,0 +1,10 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Image container / Highlighted{% endblock %} + +{% block standalone_css %}patterns_image{% endblock %} + +{% block content %} +
+ +
+{% endblock %} diff --git a/templates/docs/patterns/images.md b/templates/docs/patterns/images.md index 3aaf06afc..27dafa68e 100644 --- a/templates/docs/patterns/images.md +++ b/templates/docs/patterns/images.md @@ -4,10 +4,46 @@ context: title: Images | Components --- -Enhance images by adding a variant style with a border or drop shadow. +Enhance images by distinguishing them from their background or controlling their container's aspect ratio. + +## Highlighted image + +Insulate an image from its surroundings. This can help to emphasize the image +and/or prevent its white space from becoming indistinguishable from the surrounding white space. + +
+View example of the image container with a highlighted background +
+ +## Image container with aspect ratio + +You can modify the aspect ratio of an image container to neatly wrap an image in a container of the desired aspect ratio. +This is useful for aligning images or other content with mismatching aspect ratios. + +All image containers center the `.p-image-container__image` element inside them by default. +If you need to change image alignment within the image container, use the [image position utility](/docs/utilities/image-position). + +| CSS Class | Aspect ratio | +| ------------------------------ | ------------ | +| `p-image-container--16-9` | 16:9 | +| `p-image-container--3-2` | 3:2 | +| `p-image-container--2-3` | 2:3 | +| `p-image-container--cinematic` | 2.4:1 | +| `p-image-container--square` | 1:1 | + +
+View example of image container with 16/9 aspect ratio +
## Image with border +
+
+

Deprecated

+

Image with border is deprecated. Use `.p-image-container` with `.is-highlighted` modifier instead.

+
+
+ A simple key-line around your image.
@@ -16,6 +52,13 @@ View example of image with border ## Image with drop shadow +
+
+

Deprecated

+

Image with drop shadow is deprecated. Use `.p-image-container` with `.is-highlighted` modifier instead.

+
+
+ Add depth using our drop shadow around your image.