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..6fc0ee80d 100644 --- a/releases.yml +++ b/releases.yml @@ -1,3 +1,13 @@ +- version: 4.13.0 + features: + - component: Image container + url: /docs/patterns/images + status: New + notes: "We've added a new image container component for controlling image aspect ratio and background." + - component: Images / Legacy variants + 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..3bf56f251 100644 --- a/scss/_patterns_image.scss +++ b/scss/_patterns_image.scss @@ -1,6 +1,60 @@ +/* + @classreference + image-container: + Image container: + .p-image-container: + Main element of the image component. + "&.is-highlighted": + Highlighted variant, to be used to highlight contents. + .p-image-container--16-9: + Wraps contents in a container with an aspect ratio of 16:9. + .p-image-container--3-2: + Wraps contents in a container with an aspect ratio of 3:2. + .p-image-container--2-3: + Wraps contents in a container with an aspect ratio of 2:3. + .p-image-container--cinematic: + Wraps contents in a container with an aspect ratio of 2.4:1. + .p-image-container--square: + Wraps contents in a container with an aspect ratio of 1:1. + Image: + .p-image-container__image: + Image element within an image container. +*/ + @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 +63,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..57ee24cb5 --- /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..fdf84d353 100644 --- a/templates/docs/patterns/images.md +++ b/templates/docs/patterns/images.md @@ -4,10 +4,40 @@ 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). + +See the [class references section](#class-reference) for more information on the available aspect ratio classes. + +
+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 +46,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.
@@ -38,6 +75,10 @@ Adds spacing to the top of a media element. This is usually needed when image or View example of media element with spacing
+## Class reference + +{{ class_reference("image-container") }} + ## Import To import just this component into your project, copy the snippet below and include it in your main Sass file.