Merge pull request #803 from gympass/fix/div-nested-p-tag

🐞 fix: fix <div> nested in a <p> tag causing error on hydratation
gympass · May 16, 2024 · 8533e5f · 8533e5f
2 parents bdf158b + f3c0652
commit 8533e5f
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 192 deletions.
diff --git a/packages/yoga/src/ActionRequirement/web/ActionRequirement.jsx b/packages/yoga/src/ActionRequirement/web/ActionRequirement.jsx
@@ -84,11 +84,7 @@ function ActionRequirement(props) {
         <Text.Body1 mt="small" color="deep">
           {description}
         </Text.Body1>
-        {list && (
-          <Text.Body1 mt="large" color="deep">
-            <Box>{list}</Box>
-          </Text.Body1>
-        )}
+        {list && <Box mt="large">{list}</Box>}
         {checkable && <Box mt="xxlarge">{checkable}</Box>}
         <Actions mt="xlarge">
           {primaryButton}

diff --git a/packages/yoga/src/ActionRequirement/web/__snapshots__/ActionRequirement.test.jsx.snap b/packages/yoga/src/ActionRequirement/web/__snapshots__/ActionRequirement.test.jsx.snap
@@ -132,27 +132,19 @@ exports[`<ActionRequirement /> should default match snapshot 1`] = `
 `;
 
 exports[`<ActionRequirement /> should match snapshot with list 1`] = `
-.c3 {
-  margin: 0;
-  padding: 0;
-  font-size: 16px;
-  line-height: 24px;
-  color: #231B22;
-  font-family: Rubik;
-  font-weight: 400;
-  margin-top: 16px;
-  color: #6B6B78;
+.c4 {
+  margin-top: 24px;
 }
 
-.c4 {
+.c3 {
   margin: 0;
   padding: 0;
   font-size: 16px;
   line-height: 24px;
   color: #231B22;
   font-family: Rubik;
   font-weight: 400;
-  margin-top: 24px;
+  margin-top: 16px;
   color: #6B6B78;
 }
 
@@ -290,36 +282,31 @@ exports[`<ActionRequirement /> should match snapshot with list 1`] = `
       >
         description
       </p>
-      <p
+      <div
         class="c4"
-        color="deep"
       >
-        <div
-          class=""
+        <p
+          class="c5"
+          font-size="medium"
         >
-          <p
-            class="c5"
-            font-size="medium"
-          >
-            <svg />
-             1x/day standard access
-          </p>
-          <p
-            class="c6"
-            font-size="medium"
-          >
-            <svg />
-             4x/month 1-on-1 sessions
-          </p>
-          <p
-            class="c6"
-            font-size="medium"
-          >
-            <svg />
-             2x/month premium classes
-          </p>
-        </div>
-      </p>
+          <svg />
+           1x/day standard access
+        </p>
+        <p
+          class="c6"
+          font-size="medium"
+        >
+          <svg />
+           4x/month 1-on-1 sessions
+        </p>
+        <p
+          class="c6"
+          font-size="medium"
+        >
+          <svg />
+           2x/month premium classes
+        </p>
+      </div>
       <div
         class="c7"
       />