From 6248363c613f7cc43b01d8e914942ea3353d8864 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Tue, 5 Nov 2024 14:42:22 +0100 Subject: [PATCH 1/4] Excluding ratios --- packages/react/src/ImageSlider/ImageSlider.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/ImageSlider/ImageSlider.tsx b/packages/react/src/ImageSlider/ImageSlider.tsx index a3181dfd8a..ef44e442db 100644 --- a/packages/react/src/ImageSlider/ImageSlider.tsx +++ b/packages/react/src/ImageSlider/ImageSlider.tsx @@ -14,9 +14,9 @@ import { ImageSliderThumbnails } from './ImageSliderThumbnails' import { Ratio } from '../AspectRatio' import { Image, ImageProps } from '../Image/Image' -export type ImageSliderImageProps = ImageProps & { +export type ImageSliderImageProps = Omit & { /** Specify the aspect ratio to use for the images. */ - aspectRatio: Ratio + aspectRatio: Exclude } export type ImageSliderProps = { From 05fa52ad44503b50d51d67cf8cbf4d06f397a189 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Tue, 5 Nov 2024 18:48:30 +0100 Subject: [PATCH 2/4] Update packages/react/src/ImageSlider/ImageSlider.tsx Co-authored-by: Vincent Smedinga --- packages/react/src/ImageSlider/ImageSlider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/ImageSlider/ImageSlider.tsx b/packages/react/src/ImageSlider/ImageSlider.tsx index ef44e442db..e115777014 100644 --- a/packages/react/src/ImageSlider/ImageSlider.tsx +++ b/packages/react/src/ImageSlider/ImageSlider.tsx @@ -16,7 +16,7 @@ import { Image, ImageProps } from '../Image/Image' export type ImageSliderImageProps = Omit & { /** Specify the aspect ratio to use for the images. */ - aspectRatio: Exclude + aspectRatio: Pick } export type ImageSliderProps = { From a4d93061e52deb40522d646c1bdc8ad7344f8ee4 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Tue, 5 Nov 2024 20:27:21 +0100 Subject: [PATCH 3/4] Restore support for tall images --- packages/react/src/ImageSlider/ImageSlider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/ImageSlider/ImageSlider.tsx b/packages/react/src/ImageSlider/ImageSlider.tsx index e115777014..0e300d15b0 100644 --- a/packages/react/src/ImageSlider/ImageSlider.tsx +++ b/packages/react/src/ImageSlider/ImageSlider.tsx @@ -16,7 +16,7 @@ import { Image, ImageProps } from '../Image/Image' export type ImageSliderImageProps = Omit & { /** Specify the aspect ratio to use for the images. */ - aspectRatio: Pick + aspectRatio: Pick } export type ImageSliderProps = { From 2a2c373ccf3496c8b79c702d6dd3837683ec56ef Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Tue, 5 Nov 2024 20:27:47 +0100 Subject: [PATCH 4/4] Update documentation --- packages/css/src/components/image-slider/README.md | 2 ++ packages/react/src/ImageSlider/ImageSlider.tsx | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/css/src/components/image-slider/README.md b/packages/css/src/components/image-slider/README.md index 7fd89082ce..92d818f70d 100644 --- a/packages/css/src/components/image-slider/README.md +++ b/packages/css/src/components/image-slider/README.md @@ -17,6 +17,8 @@ The images do not slide automatically. - Use this for a series of images that belong together. - Provide at least 2 images and at most 5. - Feature the most essential image first. +- All images must have the same aspect ratio. + Note that very wide or tall aspect ratios are not supported. - Assume that some or many users will not navigate between the slides and only see the first image. Display all images separately if you want each of them to receive attention. - A full-width Image Slider should run from one edge of the Screen to the other; diff --git a/packages/react/src/ImageSlider/ImageSlider.tsx b/packages/react/src/ImageSlider/ImageSlider.tsx index 0e300d15b0..1608421fb9 100644 --- a/packages/react/src/ImageSlider/ImageSlider.tsx +++ b/packages/react/src/ImageSlider/ImageSlider.tsx @@ -15,7 +15,7 @@ import { Ratio } from '../AspectRatio' import { Image, ImageProps } from '../Image/Image' export type ImageSliderImageProps = Omit & { - /** Specify the aspect ratio to use for the images. */ + /** The aspect ratio to use for the images. Options: `tall`, `square`, `wide`, and `x-wide`. */ aspectRatio: Pick }