feat(slider): add outline-none styling for slider (#102)

warp-ds · May 24, 2023 · 48fdd8a · 48fdd8a
1 parent aed6c64
commit 48fdd8a
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 0 deletions.
diff --git a/src/_rules/slider.js b/src/_rules/slider.js
@@ -14,3 +14,15 @@ export const sliderHandleShadow = [
     }),
   ],
 ];
+
+// Solution from Fabric for ouline styling for slider
+// TODO: Replace with outline-offset when implemented
+export const sliderOutlineNone = [
+  [
+    /^slider-handle-outline-none$/,
+    () => ({
+      outline: 'rgba(0, 0, 0, 0) solid 2px',
+      'outline-offset': '2px',
+    }),
+  ],
+];
diff --git a/test/__snapshots__/slider.js.snap b/test/__snapshots__/slider.js.snap
@@ -9,3 +9,13 @@ exports[`slider > get hover slider shadow 1`] = `
 "/* layer: default */
 .slider-handle-shadow-hover{box-shadow:0 0 0 6px rgba(0, 0, 0, .08);}"
 `;
+
+exports[`slider > get hover slider shadow 2`] = `
+"/* layer: default */
+.slider-handle-outline-none{outline:rgba(0, 0, 0, 0) solid 2px;outline-offset:2px;}"
+`;
+
+exports[`slider > get slider outline none 1`] = `
+"/* layer: default */
+.slider-handle-outline-none{outline:rgba(0, 0, 0, 0) solid 2px;outline-offset:2px;}"
+`;
diff --git a/test/slider.js b/test/slider.js
@@ -13,4 +13,9 @@ describe('slider', () => {
     const { css } = await uno.generate(['slider-handle-shadow-hover']);
     expect(css).toMatchSnapshot();
   });
+
+  test('get slider outline none', async ({ uno }) => {
+    const { css } = await uno.generate(['slider-handle-outline-none']);
+    expect(css).toMatchSnapshot();
+  });
 });