feat(ld-loading): use new color vars

emdgroup-liquid · Nov 9, 2021 · c681698 · c681698
1 parent 2b29117
commit c681698
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 99 deletions.
diff --git a/screenshot/builds/master.json b/screenshot/builds/master.json
@@ -4998,7 +4998,7 @@
     },
     {
       "id": "affe4442",
-      "image": "36a7962630ed28589185edde294fa3e3.png",
+      "image": "42831b3bdfe73373c92aadfb62fd9cbd.png",
       "userAgent": "default",
       "desc": "ld-loading renders",
       "testPath": "./src/liquid/components/ld-loading/test/ld-loading.e2e.ts",
@@ -5011,7 +5011,7 @@
     },
     {
       "id": "677b9485",
-      "image": "36a7962630ed28589185edde294fa3e3.png",
+      "image": "42831b3bdfe73373c92aadfb62fd9cbd.png",
       "userAgent": "default",
       "desc": "ld-loading renders as css component",
       "testPath": "./src/liquid/components/ld-loading/test/ld-loading.e2e.ts",
@@ -5022,32 +5022,6 @@
       "isLandscape": false,
       "isMobile": false
     },
-    {
-      "id": "89f0595a",
-      "image": "c380d5920fa51e4d94c32d371f3286b0.png",
-      "userAgent": "default",
-      "desc": "ld-loading spins",
-      "testPath": "./src/liquid/components/ld-loading/test/ld-loading.e2e.ts",
-      "width": 600,
-      "height": 600,
-      "deviceScaleFactor": 1,
-      "hasTouch": false,
-      "isLandscape": false,
-      "isMobile": false
-    },
-    {
-      "id": "2772b321",
-      "image": "c380d5920fa51e4d94c32d371f3286b0.png",
-      "userAgent": "default",
-      "desc": "ld-loading spins as css component",
-      "testPath": "./src/liquid/components/ld-loading/test/ld-loading.e2e.ts",
-      "width": 600,
-      "height": 600,
-      "deviceScaleFactor": 1,
-      "hasTouch": false,
-      "isLandscape": false,
-      "isMobile": false
-    },
     {
       "id": "2d63ca44",
       "image": "c7d9faac3dcba3dc509e3816bad06f44.png",

diff --git a/screenshot/images/36a7962630ed28589185edde294fa3e3.png b/screenshot/images/36a7962630ed28589185edde294fa3e3.png
diff --git a/screenshot/images/42831b3bdfe73373c92aadfb62fd9cbd.png b/screenshot/images/42831b3bdfe73373c92aadfb62fd9cbd.png
diff --git a/screenshot/images/c380d5920fa51e4d94c32d371f3286b0.png b/screenshot/images/c380d5920fa51e4d94c32d371f3286b0.png
diff --git a/src/liquid/components/ld-loading/ld-loading.css b/src/liquid/components/ld-loading/ld-loading.css
@@ -1,16 +1,18 @@
 /**
- * @prop --ld-loading-size: Size of the loading indicator (1.5rem by default).
+ * @prop --ld-loading-col: Color of the loading indicator.
+ * @prop --ld-loading-size: Size of the loading indicator.
  */
 :host,
 .ld-loading {
   --ld-loading-size: 1.5rem;
+  --ld-loading-col: var(--ld-col-neutral-300);
+
+  background: var(--ld-loading-col);
   height: var(--ld-loading-size);
   width: var(--ld-loading-size);
   display: inline-flex;
   flex-shrink: 0;
-  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyMyAyMyI+PGRlZnMvPjxjaXJjbGUgY3g9IjExLjUiIGN5PSIxMS41IiByPSI5LjUiIHN0cm9rZT0iI0JGQkZCRiIgc3Ryb2tlLWRhc2hhcnJheT0iMi41NSA1IiBzdHJva2Utd2lkdGg9IjQiLz48L3N2Zz4=');
-  background-size: 100%;
-  background-repeat: no-repeat;
+  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 23 23"><defs/><circle cx="11.5" cy="11.5" r="9.5" stroke="currentColor" stroke-dasharray="2.55 5" stroke-width="4"/></svg>');
   animation: ld-loading-animation 1.5s linear infinite;
 }
 

diff --git a/src/liquid/components/ld-loading/readme.md b/src/liquid/components/ld-loading/readme.md
@@ -23,9 +23,10 @@ Use the `ld-loading` component to indicate that the user should wait for a proce
 
 ## CSS Variables
 
-| Variable             | Description                   | Default  |
-| -------------------- | ----------------------------- | -------- |
-| `--ld-loading-size`  | Size of the loading indicator | `1.5rem` |
+| Variable             | Description                     | Default                     |
+| -------------------- | ------------------------------- | --------------------------- |
+| `--ld-loading-col`   | Color of the loading indicator. | `var(--ld-col-neutral-300)` |
+| `--ld-loading-size`  | Size of the loading indicator.  | `1.5rem`                    |
 
 <!-- Auto Generated Below -->
 

diff --git a/src/liquid/components/ld-loading/test/ld-loading.e2e.ts b/src/liquid/components/ld-loading/test/ld-loading.e2e.ts
@@ -3,44 +3,13 @@ import { LdLoading } from '../ld-loading'
 
 jest.useRealTimers()
 
-const allowableMismatchedPixels = 100
-
 describe('ld-loading', () => {
   it('renders', async () => {
     const page = await getPageWithContent(
       `<ld-loading style="animation: none;" />`
     )
     const results = await page.compareScreenshot()
-    expect(results).toMatchScreenshot({ allowableMismatchedPixels })
-  })
-
-  it('spins', async () => {
-    const page = await getPageWithContent(
-      `<ld-loading style="animation-play-state: paused;"></ld-loading>
-      <ld-loading style="animation-play-state: paused; animation-delay: -0.25s; "></ld-loading>
-      <ld-loading style="animation-play-state: paused; animation-delay: -0.5s;"></ld-loading>
-      <ld-loading style="animation-play-state: paused; animation-delay: -0.75s;"></ld-loading>
-      <ld-loading style="animation-play-state: paused; animation-delay: -1s;"></ld-loading>
-      <ld-loading style="animation-play-state: paused; animation-delay: -1.25s;"></ld-loading>
-      <ld-loading style="animation-play-state: paused; animation-delay: -1.5s;"></ld-loading>`
-    )
-    page.addStyleTag({
-      content: `
-      .ld-loading {
-        position: relative;
-      }
-      .ld-loading::before {
-        background: red;
-        content: "";
-        height: 3px;
-        position: absolute;
-        right: 0;
-        top: 0;
-        width: 3px;
-      }`,
-    })
-    const results = await page.compareScreenshot()
-    expect(results).toMatchScreenshot({ allowableMismatchedPixels })
+    expect(results).toMatchScreenshot()
   })
 
   it('renders as css component', async () => {
@@ -50,37 +19,6 @@ describe('ld-loading', () => {
       LdLoading
     )
     const results = await page.compareScreenshot()
-    expect(results).toMatchScreenshot({ allowableMismatchedPixels })
-  })
-
-  it('spins as css component', async () => {
-    const page = await getPageWithContent(
-      `<span class="ld-loading" style="animation-play-state: paused;"></span>
-      <span class="ld-loading" style="animation-play-state: paused; animation-delay: -0.25s; "></span>
-      <span class="ld-loading" style="animation-play-state: paused; animation-delay: -0.5s;"></span>
-      <span class="ld-loading" style="animation-play-state: paused; animation-delay: -0.75s;"></span>
-      <span class="ld-loading" style="animation-play-state: paused; animation-delay: -1s;"></span>
-      <span class="ld-loading" style="animation-play-state: paused; animation-delay: -1.25s;"></span>
-      <span class="ld-loading" style="animation-play-state: paused; animation-delay: -1.5s;"></span>`,
-      undefined,
-      LdLoading
-    )
-    page.addStyleTag({
-      content: `
-      .ld-loading {
-        position: relative;
-      }
-      .ld-loading::before {
-        background: red;
-        content: "";
-        height: 3px;
-        position: absolute;
-        right: 0;
-        top: 0;
-        width: 3px;
-      }`,
-    })
-    const results = await page.compareScreenshot()
-    expect(results).toMatchScreenshot({ allowableMismatchedPixels })
+    expect(results).toMatchScreenshot()
   })
 })