Skip to content

Commit

Permalink
Old pictureClassName/pictureStyle props now control the <picture>…
Browse files Browse the repository at this point in the history 
… tag instead of the `<img>` tag. For the `<img>` tag, you can use the new props `imgClassName/imgStyle`.
  • Loading branch information
@stefanoverna
stefanoverna committed Jun 23, 2024
1 parent 8811da7 commit bcab174
Show file tree
Hide file tree
Showing 5 changed files with 54 additions and 24 deletions.
2 changes: 1 addition & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

### Added

- You can now specify `style` and `pictureStyle` props;
- You can now specify `style` and `imgStyle` props;

### Fixed

Expand Down
6 changes: 4 additions & 2 deletions docs/image.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,8 +168,10 @@ Here's a complete recap of what `responsiveImage` offers:
| srcSetCandidates | Array<number> | :x: | If `data` does not contain `srcSet`, the candidates for the `srcset` attribute of the image will be auto-generated based on these width multipliers | [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4] |
| className | string | :x: | Additional CSS className for root node | null |
| style | CSS properties | :x: | Additional CSS rules to add to the root node | null |
| pictureClassName | string | :x: | Additional CSS class for the image inside the inner `<picture />` tag | null |
| pictureStyle | CSS properties | :x: | Additional CSS rules to add to the image inside the inner `<picture />` tag | null |
| pictureClassName | string | :x: | Additional CSS class for the inner `<picture />` tag | null |
| pictureStyle | CSS properties | :x: | Additional CSS rules to add to the inner `<picture />` tag | null |
| imgClassName | string | :x: | Additional CSS class for the image inside the `<picture />` tag | null |
| imgStyle | CSS properties | :x: | Additional CSS rules to add to the image inside the `<picture />` tag | null |
| placeholderClassName | string | :x: | Additional CSS class for the placeholder image | null |
| placeholderStyle | CSS properties | :x: | Additional CSS rules for the placeholder image | null |

Expand Down
38 changes: 29 additions & 9 deletions src/Image/__tests__/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1748,16 +1748,22 @@ exports[`Image passing className and/or style renders correctly 1`] = `
"width": 750,
}
}
imgClassName="img-class-name"
imgStyle={
{
"border": "1px solid yellow",
}
}
pictureClassName="picture-class-name"
pictureStyle={
{
"border": "1px solid yellow ",
"border": "1px solid pink",
}
}
placeholderClassName="placeholder-class-name"
placeholderStyle={
{
"border": "1px solid green ",
"border": "1px solid green",
}
}
style={
Expand All @@ -1781,11 +1787,11 @@ exports[`Image passing className and/or style renders correctly 1`] = `
<img
alt=""
aria-hidden="true"
className="picture-class-name"
className="img-class-name"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NTAiIGhlaWdodD0iNDIxIj48L3N2Zz4="
style={
{
"border": "1px solid yellow ",
"border": "1px solid yellow",
"display": "block",
"width": "100%",
}
Expand All @@ -1798,7 +1804,7 @@ exports[`Image passing className and/or style renders correctly 1`] = `
src="data:image/jpeg;base64,<IMAGE-DATA>"
style={
{
"border": "1px solid green ",
"border": "1px solid green",
"height": "auto",
"left": "-5%",
"maxHeight": "none",
Expand All @@ -1813,18 +1819,25 @@ exports[`Image passing className and/or style renders correctly 1`] = `
}
}
/>
<picture>
<picture
className="picture-class-name"
style={
{
"border": "1px solid pink",
}
}
>
<source
srcSet="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.25 187w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.5 375w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.75 562w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750 750w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=1.5 1125w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=2 1500w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=3 2250w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=4 3000w"
/>
<img
alt=""
className="picture-class-name"
className="img-class-name"
onLoad={[Function]}
src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
style={
{
"border": "1px solid yellow ",
"border": "1px solid yellow",
"height": "100%",
"left": 0,
"maxHeight": "none",
Expand All @@ -1841,7 +1854,14 @@ exports[`Image passing className and/or style renders correctly 1`] = `
/>
</picture>
<noscript>
<picture />
<picture
className="picture-class-name"
style={
{
"border": "1px solid pink",
}
}
/>
</noscript>
</div>
</ForwardRef>
Expand Down
6 changes: 4 additions & 2 deletions src/Image/__tests__/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,9 +107,11 @@ describe('Image', () => {
className="class-name"
style={{ border: '1px solid red' }}
pictureClassName="picture-class-name"
pictureStyle={{ border: '1px solid yellow ' }}
pictureStyle={{ border: '1px solid pink' }}
imgClassName="img-class-name"
imgStyle={{ border: '1px solid yellow' }}
placeholderClassName="placeholder-class-name"
placeholderStyle={{ border: '1px solid green ' }}
placeholderStyle={{ border: '1px solid green' }}
/>,
);
mockAllIsIntersecting(true);
Expand Down
26 changes: 16 additions & 10 deletions src/Image/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,10 @@ export type ImagePropTypes = {
data: ResponsiveImageType;
/** Additional CSS className for root node */
className?: string;
/** Additional CSS class for the image inside the `<picture />` tag */
/** Additional CSS class for the `<picture />` tag */
pictureClassName?: string;
/** Additional CSS class for the image inside the `<picture />` tag */
imgClassName?: string;
/** Additional CSS class for the placeholder image */
placeholderClassName?: string;
/** Duration (in ms) of the fade-in transition effect upon image loading */
Expand All @@ -64,8 +66,10 @@ export type ImagePropTypes = {
intersectionMargin?: string;
/** Additional CSS rules to add to the root node */
style?: React.CSSProperties;
/** Additional CSS rules to add to the image inside the `<picture />` tag */
/** Additional CSS rules to add to the `<picture />` tag */
pictureStyle?: React.CSSProperties;
/** Additional CSS rules to add to the image inside the `<picture />` tag */
imgStyle?: React.CSSProperties;
/** Additional CSS rules to add to the placeholder image */
placeholderStyle?: React.CSSProperties;
/**
Expand Down Expand Up @@ -156,8 +160,10 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
intersectionThreshold,
intersectionMargin,
pictureClassName,
imgClassName,
style,
pictureStyle,
imgStyle,
layout = 'intrinsic',
objectFit,
objectPosition,
Expand Down Expand Up @@ -242,11 +248,11 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
const sizer =
layout !== 'fill' ? (
<img
className={pictureClassName}
className={imgClassName}
style={{
display: 'block',
width: '100%',
...pictureStyle,
...imgStyle,
}}
src={`data:image/svg+xml;base64,${universalBtoa(svg)}`}
aria-hidden="true"
Expand All @@ -273,7 +279,7 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
{sizer}
{placeholder}
{addImage && (
<picture>
<picture className={pictureClassName} style={pictureStyle}>
{webpSource}
{regularSource}
{data.src && (
Expand All @@ -285,21 +291,21 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
title={data.title ?? undefined}
onLoad={handleLoad}
{...priorityProp(priority ? 'high' : undefined)}
className={pictureClassName}
className={imgClassName}
style={{
opacity: showImage ? 1 : 0,
transition,
...absolutePositioning,
objectFit,
objectPosition,
...pictureStyle,
...imgStyle,
}}
/>
)}
</picture>
)}
<noscript>
<picture>
<picture className={pictureClassName} style={pictureStyle}>
{webpSource}
{regularSource}
{data.src && (
Expand All @@ -308,12 +314,12 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
src={data.src}
alt={data.alt ?? ''}
title={data.title ?? undefined}
className={pictureClassName}
className={imgClassName}
style={{
...absolutePositioning,
objectFit,
objectPosition,
...pictureStyle,
...imgStyle,
}}
loading={priority ? undefined : 'lazy'}
{...priorityProp(priority ? 'high' : undefined)}
Expand Down

0 comments on commit bcab174

Please sign in to comment.