Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiImage] Fix empty figcaptions and non-centered EuiEmptyPrompt images #6081

Merged
merged 5 commits into from
Jul 27, 2022
Merged

[EuiImage] Fix empty figcaptions and non-centered EuiEmptyPrompt images #6081

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
52e51c1
Fix `<figcaption>` element appearing when no caption is passed
cee-chen Jul 27, 2022
0ee3b2d
Fix image alignment on EuiEmptyPrompt
cee-chen Jul 27, 2022
caae60e
changelog
cee-chen Jul 27, 2022
1f07c9b
[PR feedback] revert display: table
cee-chen Jul 27, 2022
3b0bd8b
[PR feedback] CL
constancecchen Jul 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 0 additions & 27 deletions src/components/image/__snapshots__/image.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,6 @@ exports[`EuiImage is rendered 1`] = `
data-test-subj="test subject string"
src="/cat.jpg"
/>
<figcaption
class="emotion-euiImageCaption"
/>
</figure>
`;

Expand Down Expand Up @@ -47,9 +44,6 @@ exports[`EuiImage props allowFullScreen 1`] = `
/>
</div>
</button>
<figcaption
class="emotion-euiImageCaption"
/>
</figure>
`;

Expand Down Expand Up @@ -85,9 +79,6 @@ exports[`EuiImage props float 1`] = `
data-test-subj="test subject string"
src="/cat.jpg"
/>
<figcaption
class="emotion-euiImageCaption"
/>
</figure>
`;

Expand Down Expand Up @@ -121,9 +112,6 @@ exports[`EuiImage props fullScreenIconColor 1`] = `
/>
</div>
</button>
<figcaption
class="emotion-euiImageCaption"
/>
</figure>
`;

Expand Down Expand Up @@ -157,9 +145,6 @@ exports[`EuiImage props hasShadow 1`] = `
/>
</div>
</button>
<figcaption
class="emotion-euiImageCaption"
/>
</figure>
`;

Expand All @@ -174,9 +159,6 @@ exports[`EuiImage props margin 1`] = `
data-test-subj="test subject string"
src="/cat.jpg"
/>
<figcaption
class="emotion-euiImageCaption"
/>
</figure>
`;

Expand All @@ -192,9 +174,6 @@ exports[`EuiImage props size 1`] = `
src="/cat.jpg"
style="max-width:50px;max-height:50px"
/>
<figcaption
class="emotion-euiImageCaption"
/>
</figure>
`;

Expand All @@ -207,9 +186,6 @@ exports[`EuiImage props src vs url src 1`] = `
class="euiImage emotion-euiImage-original"
src="/dog.jpg"
/>
<figcaption
class="emotion-euiImageCaption"
/>
</figure>
`;

Expand All @@ -222,9 +198,6 @@ exports[`EuiImage props src vs url url 1`] = `
class="euiImage emotion-euiImage-original"
src="/dog.jpg"
/>
<figcaption
class="emotion-euiImageCaption"
/>
</figure>
`;

Expand Down
4 changes: 2 additions & 2 deletions src/components/image/image_caption.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,11 @@ export const EuiImageCaption = forwardRef<HTMLDivElement, EuiImageCaptionProps>(
isOnOverlayMask && styles.isOnOverlayMask,
];

return (
return caption ? (
<figcaption ref={ref} css={cssStyles}>
{caption}
</figcaption>
);
) : null;
}
);

Expand Down
2 changes: 1 addition & 1 deletion src/components/image/image_wrapper.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const euiImageWrapperStyles = (euiThemeContext: UseEuiTheme) => {
return {
// Base
euiImageWrapper: css`
display: table; // inline-block causes margins not to correctly collapse
display: inline-block;
${logicalCSS('max-width', '100%')}
${logicalTextAlignCSS('center')}; // Aligns both caption and image
line-height: 0; // Fixes cropping when image is resized by forcing its height to be determined by the image not line-height
Expand Down
4 changes: 4 additions & 0 deletions upcoming_changelogs/6081.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
**Bug fixes**

- Fixed `EuiImage` rendering empty captions
- Fixed `EuiEmptyPrompt` rendering non-centered `EuiImage`s in the `icon` prop
cee-chen marked this conversation as resolved.
Show resolved Hide resolved