fix(slider): add less visually effectacious style to the slider outpu…

…t when editable
adobe · Nov 11, 2022 · 8702294 · 8702294
1 parent 643fcff
commit 8702294
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 1 deletion.
diff --git a/packages/slider/src/slider.css b/packages/slider/src/slider.css
@@ -80,7 +80,16 @@ sp-field-label {
 }
 
 :host([editable]) output {
-    opacity: 0;
+    border: 0;
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: 0 -1px -1px 0;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    white-space: nowrap;
 }
 
 :host([disabled]) {

diff --git a/packages/slider/stories/slider.stories.ts b/packages/slider/stories/slider.stories.ts
@@ -438,6 +438,24 @@ export const Quiet = (args: StoryArgs = {}): TemplateResult => {
     `;
 };
 
+export const inPopover = (args: StoryArgs = {}): TemplateResult => {
+    return html`
+        <sp-popover open dialog style="min-width: 0">
+            <sp-slider
+                editable
+                hide-stepper
+                quiet
+                value="5"
+                step="0.5"
+                min="0"
+                max="20"
+                label="Intensity"
+                ...=${spreadProps(args)}
+            ></sp-slider>
+        </sp-popover>
+    `;
+};
+
 export const Indeterminate = (args: StoryArgs = {}): TemplateResult => {
     return html`
         <div style="width: 500px; margin: 12px 20px;">