Improving EuiText image styles

elastic · Jun 28, 2022 · cba8d5a · cba8d5a
1 parent c801e40
commit cba8d5a
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 7 deletions.
diff --git a/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiDataGridCell componentDidUpdate handles the cell popover by forwarding the cell's DOM node and contents to the parent popover context 1`] = `
 Array [
   <div
-    class="euiText emotion-euiText-m"
+    class="euiText css-qqidm-euiText-m"
   >
     <div>
       <button

diff --git a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
@@ -59,7 +59,7 @@ Array [
             class="euiModalBody__overflow"
           >
             <div
-              class="euiText emotion-euiText-m"
+              class="euiText css-qqidm-euiText-m"
               data-test-subj="confirmModalBodyText"
             >
               <p>

diff --git a/src/components/text/__snapshots__/text.test.tsx.snap b/src/components/text/__snapshots__/text.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiText is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiText testClass1 testClass2 emotion-euiText-m"
+  class="euiText testClass1 testClass2 css-qqidm-euiText-m"
   data-test-subj="test subject string"
 >
   <p>
@@ -39,7 +39,7 @@ exports[`EuiText props grow false 1`] = `
 exports[`EuiText props style 1`] = `
 <div
   aria-label="aria-label"
-  class="euiText testClass1 testClass2 emotion-euiText-m-euiTextColor-customColor"
+  class="euiText testClass1 testClass2 css-o9ff8-euiText-m-euiTextColor-customColor"
   data-test-subj="test subject string"
   style="background-color:#000;color:#fff"
 >

diff --git a/src/components/text/text.styles.ts b/src/components/text/text.styles.ts
@@ -206,7 +206,7 @@ export const euiTextStyles = (euiThemeContext: UseEuiTheme) => {
 
       img {
         display: block;
-        width: 100%;
+        max-width: 100%;
       }
 
       ul {

diff --git a/src/components/tree_view/__snapshots__/tree_view.test.tsx.snap b/src/components/tree_view/__snapshots__/tree_view.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`EuiTreeView is rendered 1`] = `
 <div
-  class="euiText euiTreeView__wrapper emotion-euiText-m"
+  class="euiText euiTreeView__wrapper css-qqidm-euiText-m"
 >
   <p
     class="emotion-euiScreenReaderOnly"
@@ -44,7 +44,7 @@ exports[`EuiTreeView is rendered 1`] = `
         id="euiTreeView_generated-id_item_one"
       >
         <div
-          class="euiText euiTreeView__wrapper emotion-euiText-m"
+          class="euiText euiTreeView__wrapper css-qqidm-euiText-m"
         >
           <ul
             aria-label="Item One child of aria-label"

diff --git a/upcoming_changelogs/5969.md b/upcoming_changelogs/5969.md
@@ -1,3 +1,5 @@
+- Updated styles for the `EuiText.img` to prevent them from unnecessarily growing full width
+
 **CSS-in-JS**
 
 - Converted `EuiImage` to Emotion
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,7 +3,7 @@ @@
     exports[`EuiDataGridCell componentDidUpdate handles the cell popover by forwarding the cell's DOM node and contents to the parent popover context 1`] = `
     Array [
       <div
-        class="euiText emotion-euiText-m"
+        class="euiText css-qqidm-euiText-m"
       >
         <div>
           <button
@@ Expand Down @@