feat(Slideshow): allow images with border radius inside (#1363)

WEB-2152

Author: atabel

src/image.css.ts

@@ -31,14 +31,18 @@ export const image = style([
     },
 ]);
 
-export const noBorderRadius = style({
+export const withoutBorderRadius = style({
     borderRadius: 0,
 });
 
 export const circularBorderRadius = style({
     borderRadius: '50%',
 });
 
+export const withBorderRadius = style({
+    borderRadius: skinVars.borderRadii.container,
+});
+
 export const defaultBorderRadius = style({
     borderRadius: fallbackVar(mediaBorderRadius, skinVars.borderRadii.container),
 });

src/image.tsx

@@ -170,8 +170,10 @@ export const ImageContent = React.forwardRef<HTMLImageElement, ImageProps>(
         const borderRadiusStyle = props.circular
             ? styles.circularBorderRadius
             : noBorderRadius
-              ? styles.noBorderRadius
-              : styles.defaultBorderRadius;
+              ? styles.withoutBorderRadius
+              : noBorderRadius === false // explicitly set to false, so we set border radius
+                ? styles.withBorderRadius
+                : styles.defaultBorderRadius; // === undefined, use the default border radius (or the setting set by parent component, like cards or slideshow)
 
         const [isError, setIsError] = React.useState(!src);
         const [hideLoadingFallback, setHideLoadingFallback] = React.useState(false);