[EuiImage] Fix wrapperProps.css overriding EUI css

elastic · Jun 30, 2023 · e8c1018 · e8c1018
1 parent 2181854
commit e8c1018
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/src/components/image/__snapshots__/image.test.tsx.snap b/src/components/image/__snapshots__/image.test.tsx.snap
@@ -205,7 +205,7 @@ exports[`EuiImage props wrapperProps 1`] = `
 <figure
   alt=""
   aria-label="aria-label"
-  class="euiImageWrapper testClass1 testClass2 emotion-euiTestCss"
+  class="euiImageWrapper testClass1 testClass2 emotion-euiImageWrapper-euiTestCss"
   data-test-subj="test subject string"
   src="/cat.jpg"
   style="border:2px solid red"

diff --git a/src/components/image/image_wrapper.tsx b/src/components/image/image_wrapper.tsx
@@ -51,16 +51,17 @@ export const EuiImageWrapper: FunctionComponent<EuiImageWrapperProps> = ({
     margin && styles[margin],
     allowFullScreen && styles.allowFullScreen,
     isFullWidth && styles.fullWidth,
+    wrapperProps?.css,
   ];
 
   const [optionalCaptionRef, optionalCaptionText] = useInnerText();
 
   return (
     <figure
       aria-label={optionalCaptionText}
-      css={cssFigureStyles}
       {...wrapperProps}
       className={classes}
+      css={cssFigureStyles}
     >
       {allowFullScreen ? (
         <>