fix(ld-circular-progress): handle box-sizing reset

emdgroup-liquid · Jan 31, 2023 · f29bfe8 · f29bfe8
1 parent fdc845c
commit f29bfe8
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 0 deletions.
diff --git a/screenshot/builds/master.json b/screenshot/builds/master.json
@@ -7791,6 +7791,32 @@
       "isLandscape": false,
       "isMobile": false
     },
+    {
+      "id": "87a3acbb",
+      "image": "26807b10fdae0172f414f8b77f1f6779.png",
+      "userAgent": "default",
+      "desc": "ld-circular-progress reset renders with box-sizing reset as CSS component",
+      "testPath": "./src/liquid/components/ld-circular-progress/test/ld-circular-progress.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
+    {
+      "id": "00aa03af",
+      "image": "26807b10fdae0172f414f8b77f1f6779.png",
+      "userAgent": "default",
+      "desc": "ld-circular-progress reset renders with box-sizing reset as Web Component",
+      "testPath": "./src/liquid/components/ld-circular-progress/test/ld-circular-progress.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
     {
       "id": "3d455876",
       "image": "5b450704fa5ce1ba379630649c5afab8.png",

diff --git a/src/liquid/components/ld-circular-progress/ld-circular-progress.css b/src/liquid/components/ld-circular-progress/ld-circular-progress.css
@@ -43,6 +43,7 @@
   );
 
   align-items: center;
+  box-sizing: content-box !important;
   display: inline-flex;
   flex-direction: column;
   gap: var(--ld-sp-4);

diff --git a/src/liquid/components/ld-circular-progress/test/ld-circular-progress.e2e.ts b/src/liquid/components/ld-circular-progress/test/ld-circular-progress.e2e.ts
@@ -443,4 +443,50 @@ describe('ld-circular-progress', () => {
       expect(results).toMatchScreenshot()
     })
   })
+
+  describe('reset', () => {
+    it('renders with box-sizing reset as Web Component', async () => {
+      const page = await getPageWithContent(
+        `
+        <style>
+          *, ::before, ::after {
+            box-sizing: border-box;
+          }
+        </style>
+        <ld-circular-progress aria-valuenow="25">
+          <ld-typo variant="b6">25%</ld-typo>
+          <ld-typo variant="label-s">complete</ld-typo>
+        </ld-circular-progress>`
+      )
+
+      const results = await page.compareScreenshot()
+      expect(results).toMatchScreenshot()
+    })
+
+    it('renders with box-sizing reset as CSS component', async () => {
+      const page = await getPageWithContent(
+        `
+          <style>
+            *, ::before, ::after {
+              box-sizing: border-box;
+            }
+          </style>
+          <div class="ld-circular-progress"
+             aria-valuenow="25"
+             role="progressbar"
+             style="--ld-circular-progress-valuenow: 25">
+          <span class="ld-typo ld-typo--b6">25%</span>
+          <span class="ld-typo ld-typo--label-s">complete</span>
+          ${svg}
+        </div>`,
+        {
+          components: [LdCircularProgress, LdTypo],
+          disableAllTransitions: true,
+        }
+      )
+
+      const results = await page.compareScreenshot()
+      expect(results).toMatchScreenshot()
+    })
+  })
 })