Merge pull request #533 from catho/QTM-548

fix(QTM-548): Size adjustment in content when there is no icon
catho · Dec 26, 2023 · 9516969 · 9516969
2 parents 153bbff + b292232
commit 9516969
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 8 deletions.
diff --git a/.loki/reference/chrome_iphone7_Alert_Default_Without_Icon.png b/.loki/reference/chrome_iphone7_Alert_Default_Without_Icon.png
diff --git a/.loki/reference/chrome_laptop_Alert_Default_Without_Icon.png b/.loki/reference/chrome_laptop_Alert_Default_Without_Icon.png
diff --git a/components/Alert/Alert.jsx b/components/Alert/Alert.jsx
@@ -15,7 +15,7 @@ const Content = styled.div`
   align-items: start;
   display: flex;
 
-  svg + span {
+  & > span {
     flex: 1;
   }
 `;

diff --git a/components/Alert/__snapshots__/Alert.unit.test.jsx.snap b/components/Alert/__snapshots__/Alert.unit.test.jsx.snap
@@ -93,7 +93,7 @@ exports[`Alert component Should match a skin snapshot 1`] = `
   display: flex;
 }
 
-.c2 svg + span {
+.c2 > span {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -296,7 +296,7 @@ exports[`Alert component Should match a skin snapshot 2`] = `
   display: flex;
 }
 
-.c2 svg + span {
+.c2 > span {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -499,7 +499,7 @@ exports[`Alert component Should match a skin snapshot 3`] = `
   display: flex;
 }
 
-.c2 svg + span {
+.c2 > span {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -702,7 +702,7 @@ exports[`Alert component Should match a skin snapshot 4`] = `
   display: flex;
 }
 
-.c2 svg + span {
+.c2 > span {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -905,7 +905,7 @@ exports[`Alert component Should match a skin snapshot 5`] = `
   display: flex;
 }
 
-.c2 svg + span {
+.c2 > span {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -1108,7 +1108,7 @@ exports[`Alert component Should match the snapshot of a simple alert 1`] = `
   display: flex;
 }
 
-.c2 svg + span {
+.c2 > span {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -1275,7 +1275,7 @@ exports[`Alert component Should match the snapshot with an icon 1`] = `
   display: flex;
 }
 
-.c2 svg + span {
+.c2 > span {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;

diff --git a/stories/Alert/Alert.regression-test.story.jsx b/stories/Alert/Alert.regression-test.story.jsx
@@ -29,6 +29,9 @@ Default.args = { ...props };
 export const DefaultWithoutClose = Template.bind({});
 DefaultWithoutClose.args = { ...props, onClose: undefined };
 
+export const DefaultWithoutIcon = Template.bind({});
+DefaultWithoutIcon.args = { ...props, icon: undefined };
+
 export const SkinPrimary = Template.bind({});
 SkinPrimary.args = {
   ...Default.args,