From 52e51c15028bc2b242a920ca1f7602875d943db5 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Wed, 27 Jul 2022 10:05:29 -0700 Subject: [PATCH 1/5] Fix `
` element appearing when no caption is passed --- .../image/__snapshots__/image.test.tsx.snap | 27 ------------------- src/components/image/image_caption.tsx | 4 +-- 2 files changed, 2 insertions(+), 29 deletions(-) diff --git a/src/components/image/__snapshots__/image.test.tsx.snap b/src/components/image/__snapshots__/image.test.tsx.snap index 0f72150156c..062f422cf8a 100644 --- a/src/components/image/__snapshots__/image.test.tsx.snap +++ b/src/components/image/__snapshots__/image.test.tsx.snap @@ -11,9 +11,6 @@ exports[`EuiImage is rendered 1`] = ` data-test-subj="test subject string" src="/cat.jpg" /> -
`; @@ -47,9 +44,6 @@ exports[`EuiImage props allowFullScreen 1`] = ` /> -
`; @@ -85,9 +79,6 @@ exports[`EuiImage props float 1`] = ` data-test-subj="test subject string" src="/cat.jpg" /> -
`; @@ -121,9 +112,6 @@ exports[`EuiImage props fullScreenIconColor 1`] = ` /> -
`; @@ -157,9 +145,6 @@ exports[`EuiImage props hasShadow 1`] = ` /> -
`; @@ -174,9 +159,6 @@ exports[`EuiImage props margin 1`] = ` data-test-subj="test subject string" src="/cat.jpg" /> -
`; @@ -192,9 +174,6 @@ exports[`EuiImage props size 1`] = ` src="/cat.jpg" style="max-width:50px;max-height:50px" /> -
`; @@ -207,9 +186,6 @@ exports[`EuiImage props src vs url src 1`] = ` class="euiImage emotion-euiImage-original" src="/dog.jpg" /> -
`; @@ -222,9 +198,6 @@ exports[`EuiImage props src vs url url 1`] = ` class="euiImage emotion-euiImage-original" src="/dog.jpg" /> -
`; diff --git a/src/components/image/image_caption.tsx b/src/components/image/image_caption.tsx index d27db0505d2..c1692566217 100644 --- a/src/components/image/image_caption.tsx +++ b/src/components/image/image_caption.tsx @@ -22,11 +22,11 @@ export const EuiImageCaption = forwardRef( isOnOverlayMask && styles.isOnOverlayMask, ]; - return ( + return caption ? (
{caption}
- ); + ) : null; } ); From 0ee3b2df429e30f4e2f7cc82b78e300ff2306105 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Wed, 27 Jul 2022 10:17:28 -0700 Subject: [PATCH 2/5] Fix image alignment on EuiEmptyPrompt - max width is causing the figure to not be centered - we should set horizontal margins to `auto` if EuiEmptyPrompt is setting a custom max-width --- src/components/empty_prompt/_empty_prompt.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/empty_prompt/_empty_prompt.scss b/src/components/empty_prompt/_empty_prompt.scss index da915ad7705..d3e9c94b5db 100644 --- a/src/components/empty_prompt/_empty_prompt.scss +++ b/src/components/empty_prompt/_empty_prompt.scss @@ -12,6 +12,7 @@ > * { flex-shrink: 1; max-width: convertToRem(360px); + margin-inline: auto; } } From caae60e9ae20a06a8d187aaf118f7e4cea5a969b Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Wed, 27 Jul 2022 10:24:30 -0700 Subject: [PATCH 3/5] changelog --- upcoming_changelogs/6081.md | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 upcoming_changelogs/6081.md diff --git a/upcoming_changelogs/6081.md b/upcoming_changelogs/6081.md new file mode 100644 index 00000000000..c4d408b433e --- /dev/null +++ b/upcoming_changelogs/6081.md @@ -0,0 +1,4 @@ +**Bug fixes** + +- Fixed `EuiImage` rendering empty captions +- Fixed `EuiEmptyPrompt` rendering non-centered `EuiImage`s in the `icon` prop From 1f07c9b610d68d65e3f6d8eccf3f9f996ae3a3c9 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Wed, 27 Jul 2022 11:41:02 -0700 Subject: [PATCH 4/5] [PR feedback] revert display: table --- src/components/empty_prompt/_empty_prompt.scss | 1 - src/components/image/image_wrapper.styles.ts | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/empty_prompt/_empty_prompt.scss b/src/components/empty_prompt/_empty_prompt.scss index d3e9c94b5db..da915ad7705 100644 --- a/src/components/empty_prompt/_empty_prompt.scss +++ b/src/components/empty_prompt/_empty_prompt.scss @@ -12,7 +12,6 @@ > * { flex-shrink: 1; max-width: convertToRem(360px); - margin-inline: auto; } } diff --git a/src/components/image/image_wrapper.styles.ts b/src/components/image/image_wrapper.styles.ts index 4c68d66da93..87d0a376f46 100644 --- a/src/components/image/image_wrapper.styles.ts +++ b/src/components/image/image_wrapper.styles.ts @@ -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 From 3b0bd8bbee12ffc30c9097f7ddce754bfb353077 Mon Sep 17 00:00:00 2001 From: Constance Date: Wed, 27 Jul 2022 12:34:32 -0700 Subject: [PATCH 5/5] [PR feedback] CL --- upcoming_changelogs/6081.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/upcoming_changelogs/6081.md b/upcoming_changelogs/6081.md index c4d408b433e..f764ba6a3d2 100644 --- a/upcoming_changelogs/6081.md +++ b/upcoming_changelogs/6081.md @@ -1,4 +1,4 @@ **Bug fixes** - Fixed `EuiImage` rendering empty captions -- Fixed `EuiEmptyPrompt` rendering non-centered `EuiImage`s in the `icon` prop +- Fixed `EuiImage` not respecting `text-align` on parents