feat(ld-label): use up-to-date css custom props

emdgroup-liquid · Nov 5, 2021 · 8d1c931 · 8d1c931
1 parent 4507c5c
commit 8d1c931
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 28 deletions.
diff --git a/src/liquid/components/ld-label/ld-label.css b/src/liquid/components/ld-label/ld-label.css
@@ -7,10 +7,18 @@
 }
 
 .ld-label {
-  --ld-label-col-gap: 0.625rem;
+  /* layout */
+  --ld-label-column-gap: 0.625rem;
+  --ld-label-row-gap: var(--ld-sp-6);
+
+  /* colors */
+  --ld-label-col: var(--ld-col-neutral);
+  --ld-label-disabled-col: var(--ld-col-neutral-200);
+
+  color: var(--ld-label-col);
   font: var(--ld-typo-label-s);
   display: inline-grid;
-  row-gap: var(--ld-sp-6);
+  row-gap: var(--ld-label-row-gap);
   column-gap: 0;
   max-width: 100%;
   align-content: flex-start;
@@ -20,7 +28,7 @@
 .ld-label--right {
   justify-content: flex-start;
   align-items: center;
-  column-gap: var(--ld-label-col-gap);
+  column-gap: var(--ld-label-column-gap);
   row-gap: 0;
 
   > ::slotted(.ld-checkbox),
@@ -80,5 +88,5 @@
 }
 
 :where(.ld-label[disabled]) {
-  color: var(--ld-col-rblck2);
+  color: var(--ld-label-disabled-col);
 }
diff --git a/src/liquid/components/ld-label/test/ld-label.e2e.ts b/src/liquid/components/ld-label/test/ld-label.e2e.ts
@@ -7,13 +7,11 @@ import { LdLabel } from '../ld-label'
 
 jest.useRealTimers()
 
-const allowableMismatchedRatio = 0.02
-
 describe('ld-label', () => {
   it('renders', async () => {
     const page = await getPageWithContent('<ld-label>Email Address</ld-label>')
     const results = await page.compareScreenshot()
-    expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+    expect(results).toMatchScreenshot()
   })
 
   it('renders as css component', async () => {
@@ -23,7 +21,7 @@ describe('ld-label', () => {
       LdLabel
     )
     const results = await page.compareScreenshot()
-    expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+    expect(results).toMatchScreenshot()
   })
 
   describe('size', () => {
@@ -32,7 +30,7 @@ describe('ld-label', () => {
         '<ld-label size="m">Email Address</ld-label>'
       )
       const results = await page.compareScreenshot()
-      expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+      expect(results).toMatchScreenshot()
     })
 
     it('renders with size m as css component', async () => {
@@ -42,7 +40,7 @@ describe('ld-label', () => {
         LdLabel
       )
       const results = await page.compareScreenshot()
-      expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+      expect(results).toMatchScreenshot()
     })
   })
 
@@ -54,7 +52,7 @@ describe('ld-label', () => {
           <ld-input placeholder="jane.doe@example.com" type="email"></ld-input>
         </ld-label>`)
       const results = await page.compareScreenshot()
-      expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+      expect(results).toMatchScreenshot()
     })
 
     it('renders at the top by default as css component', async () => {
@@ -70,7 +68,7 @@ describe('ld-label', () => {
         [LdInput, LdLabel]
       )
       const results = await page.compareScreenshot()
-      expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+      expect(results).toMatchScreenshot()
     })
 
     it('renders at the top by default with input message at the bottom', async () => {
@@ -81,7 +79,7 @@ describe('ld-label', () => {
           <ld-input-message>This field is required.</ld-input-message>
         </ld-label>`)
       const results = await page.compareScreenshot()
-      expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+      expect(results).toMatchScreenshot()
     })
 
     it('renders at the top by default with input message at the bottom as css component', async () => {
@@ -105,7 +103,7 @@ describe('ld-label', () => {
         [LdInput, LdInputMessage, LdLabel]
       )
       const results = await page.compareScreenshot()
-      expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+      expect(results).toMatchScreenshot()
     })
 
     it('renders on the left', async () => {
@@ -115,7 +113,7 @@ describe('ld-label', () => {
           <ld-input placeholder="jane.doe@example.com" type="email"></ld-input>
         </ld-label>`)
       const results = await page.compareScreenshot()
-      expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+      expect(results).toMatchScreenshot()
     })
 
     it('renders on the left as css component', async () => {
@@ -131,7 +129,7 @@ describe('ld-label', () => {
         [LdInput, LdLabel]
       )
       const results = await page.compareScreenshot()
-      expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+      expect(results).toMatchScreenshot()
     })
 
     it('renders on the left with input message at the bottom', async () => {
@@ -142,7 +140,7 @@ describe('ld-label', () => {
           <ld-input-message>This field is required.</ld-input-message>
         </ld-label>`)
       const results = await page.compareScreenshot()
-      expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+      expect(results).toMatchScreenshot()
     })
 
     it('renders on the left with input message at the bottom as css component', async () => {
@@ -166,7 +164,7 @@ describe('ld-label', () => {
         [LdInput, LdInputMessage, LdLabel]
       )
       const results = await page.compareScreenshot()
-      expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+      expect(results).toMatchScreenshot()
     })
 
     it('renders on the left with left-aligned input message at the bottom', async () => {
@@ -177,7 +175,7 @@ describe('ld-label', () => {
           <ld-input-message mode="info">Recommended.</ld-input-message>
         </ld-label>`)
       const results = await page.compareScreenshot()
-      expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+      expect(results).toMatchScreenshot()
     })
 
     it('renders on the left with left-aligned input message at the bottom as css component', async () => {
@@ -203,7 +201,7 @@ describe('ld-label', () => {
         [LdToggle, LdInputMessage, LdLabel]
       )
       const results = await page.compareScreenshot()
-      expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+      expect(results).toMatchScreenshot()
     })
 
     it('renders on the right', async () => {
@@ -213,7 +211,7 @@ describe('ld-label', () => {
           <ld-input placeholder="jane.doe@example.com" type="email"></ld-input>
         </ld-label>`)
       const results = await page.compareScreenshot()
-      expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+      expect(results).toMatchScreenshot()
     })
 
     it('renders on the right as css component', async () => {
@@ -229,7 +227,7 @@ describe('ld-label', () => {
         [LdInput, LdLabel]
       )
       const results = await page.compareScreenshot()
-      expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+      expect(results).toMatchScreenshot()
     })
 
     it('renders on the right with input message at the bottom', async () => {
@@ -240,7 +238,7 @@ describe('ld-label', () => {
           <ld-input-message>This field is required.</ld-input-message>
         </ld-label>`)
       const results = await page.compareScreenshot()
-      expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+      expect(results).toMatchScreenshot()
     })
 
     it('renders on the right with input message at the bottom as css component', async () => {
@@ -264,7 +262,7 @@ describe('ld-label', () => {
         [LdInput, LdInputMessage, LdLabel]
       )
       const results = await page.compareScreenshot()
-      expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+      expect(results).toMatchScreenshot()
     })
 
     it('renders on the right with left-aligned input message at the bottom', async () => {
@@ -275,7 +273,7 @@ describe('ld-label', () => {
           <ld-input-message mode="info">Recommended.</ld-input-message>
         </ld-label>`)
       const results = await page.compareScreenshot()
-      expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+      expect(results).toMatchScreenshot()
     })
 
     it('renders on the right with left-aligned input message at the bottom as css component', async () => {
@@ -301,7 +299,7 @@ describe('ld-label', () => {
         [LdToggle, LdInputMessage, LdLabel]
       )
       const results = await page.compareScreenshot()
-      expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+      expect(results).toMatchScreenshot()
     })
   })
 
@@ -313,7 +311,7 @@ describe('ld-label', () => {
           <ld-checkbox></ld-checkbox>
         </ld-label>`)
       const results = await page.compareScreenshot()
-      expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+      expect(results).toMatchScreenshot()
     })
 
     it('renders with html content as css component', async () => {
@@ -346,7 +344,7 @@ describe('ld-label', () => {
         [LdCheckbox, LdLabel]
       )
       const results = await page.compareScreenshot()
-      expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+      expect(results).toMatchScreenshot()
     })
   })
 })