Slider core design feedback (#4899)

Author: tayyabataimur

packages/lab/src/__tests__/__e2e__/slider/RangeSlider.cy.tsx

@@ -389,10 +389,13 @@ describe("Given a Range Slider", () => {
     cy.findByText("Custom Max Label").should("exist");
   });
 
-  it("should be disabled when set", () => {
+  it("should be disabled when set and should not receive focus when disabled", () => {
     cy.mount(<Default disabled defaultValue={[2, 3]} />);
 
     cy.findAllByRole("slider").should("be.disabled");
+    cy.realPress("Tab");
+    cy.findAllByRole("slider").eq(0).should("not.be.focused");
+    cy.findAllByRole("slider").eq(1).should("not.be.focused");
   });
 
   it("should format the tooltip text and min/max labels when a format function is passed", () => {

packages/lab/src/__tests__/__e2e__/slider/Slider.cy.tsx

@@ -198,15 +198,15 @@ describe("Given a Slider", () => {
     cy.findByRole("slider").focus().realPress("ArrowRight");
     cy.findByRole("slider").should("have.value", "5");
     cy.findByRole("slider").focus().realPress("ArrowRight");
-    cy.findByRole("slider").should("have.value", 9);
+    cy.findByRole("slider").should("have.value", "9");
 
     // Reverse
     cy.findByRole("slider").focus().realPress("ArrowLeft");
-    cy.findByRole("slider").should("have.value", 5);
+    cy.findByRole("slider").should("have.value", "5");
     cy.findByRole("slider").focus().realPress("ArrowLeft");
-    cy.findByRole("slider").should("have.value", 2);
+    cy.findByRole("slider").should("have.value", "2");
     cy.findByRole("slider").focus().realPress("ArrowLeft");
-    cy.findByRole("slider").should("have.value", 2);
+    cy.findByRole("slider").should("have.value", "2");
   });
 
   it("should render inline min/max labels and marks when provided", () => {
@@ -310,10 +310,12 @@ describe("Given a Slider", () => {
     cy.findByText("Custom Max Label").should("exist");
   });
 
-  it("should be disabled when set", () => {
+  it("should be disabled when set and should not receive focus when disabled", () => {
     cy.mount(<Default disabled defaultValue={2} />);
 
     cy.findByRole("slider").should("be.disabled");
+    cy.realPress("Tab");
+    cy.findByRole("slider").should("not.be.focused");
   });
 
   it("should format the tooltip text when a format function is passed", () => {

packages/lab/src/slider/internal/SliderTooltip.css

@@ -1,6 +1,6 @@
 .saltSliderTooltip {
   background: var(--salt-container-primary-background);
-  border-color: var(--salt-status-info-borderColor);
+  border-color: var(--salt-container-primary-borderColor);
   border-style: var(--saltTooltip-borderStyle, var(--salt-container-borderStyle));
   border-width: var(--saltTooltip-borderWidth, var(--salt-size-border));
   border-radius: var(--saltTooltip-borderRadius, var(--salt-palette-corner-weak, 0));
@@ -29,7 +29,11 @@
   pointer-events: none;
   top: 100%;
   transform: translateX(-50%);
-  stroke: var(--salt-status-info-borderColor);
+  stroke: var(--salt-container-primary-borderColor);
   stroke-width: var(--salt-size-border);
   width: var(--salt-size-icon);
 }
+
+.saltSliderTooltip-text {
+  white-space: nowrap;
+}

packages/lab/src/slider/internal/SliderTooltip.tsx

@@ -32,9 +32,16 @@ export const SliderTooltip = ({ value, open }: SliderTooltipProps) => {
         aria-hidden="true"
         viewBox="0 1 14 14"
       >
-        <path d="M0,0 H14 L7,7 Q7,7 7,7 Z" />
+        <path
+          d="M0,0 H14 L7,7 Q7,7 7,7 Z"
+          stroke=" var(--salt-container-primary-background)"
+        />
+        <path
+          d="M0,0 H14 L7,7 Q7,7 7,7 Z"
+          stroke="var(--salt-container-primary-borderColor)"
+        />
       </svg>
-      <Text>{value}</Text>
+      <Text className={withBaseName("text")}>{value}</Text>
     </div>
   );
 };

packages/lab/src/slider/internal/SliderTrack.css

@@ -2,16 +2,20 @@
   --slider-track-background: var(--salt-track-borderColor);
   --slider-track-fill: var(--salt-accent-borderColor);
   --slider-progressPercentage: 0%;
+  --slider-tick-height: calc((var(--salt-size-selectable) - var(--salt-size-bar)) / 2);
   /* For range */
   --slider-progressPercentageStart: 0%;
   --slider-progressPercentageEnd: 0%;
 
-  --slider-mark-percentage: 0%;
-
   display: flex;
   width: 100%;
 }
 
+.saltSliderTrack.saltSliderTrack-withMarks {
+  /* To wrap the marks within the boundary box */
+  margin-bottom: calc(var(--salt-size-base) / 2);
+}
+
 .saltSliderTrack-disabled {
   cursor: var(--salt-selectable-cursor-disabled);
 }
@@ -20,21 +24,30 @@
   align-items: center;
   display: flex;
   flex-direction: row;
-  gap: var(--salt-spacing-50);
+  gap: var(--salt-spacing-100);
   width: 100%;
 }
 
 .saltSliderTrack-wrapper {
   align-items: center;
+  cursor: var(--salt-selectable-cursor-hover);
   display: flex;
   flex: 1;
-  height: var(--salt-size-base);
+  height: var(--salt-size-selectable);
   position: relative;
   width: 100%;
 }
 
+.saltSliderTrack-disabled,
+.saltSliderTrack-disabled .saltSliderTrack-wrapper {
+  cursor: var(--salt-selectable-cursor-disabled);
+}
+
+.saltSliderTrack-disabled .saltSliderTrack-wrapper {
+  pointer-events: none;
+}
+
 .saltSliderTrack-rail {
-  cursor: var(--salt-selectable-cursor-hover);
   display: flex;
   flex: 100%;
   height: var(--salt-size-bar);
@@ -53,7 +66,7 @@
   background: var(--slider-track-fill);
   border-top-left-radius: var(--salt-palette-corner-weaker);
   border-bottom-left-radius: var(--salt-palette-corner-weaker);
-  width: calc(var(--slider-progressPercentage) - (var(--salt-size-border-strong) / 2));
+  width: calc(var(--slider-progressPercentage) - 1.5 * var(--salt-size-border-strong));
 }
 
 .saltSliderTrack-hasMinTick.saltSliderTrack-rail::before {
@@ -64,7 +77,7 @@
   background: var(--slider-track-background);
   border-top-right-radius: var(--salt-palette-corner-weaker);
   border-bottom-right-radius: var(--salt-palette-corner-weaker);
-  width: calc(100% - var(--slider-progressPercentage) - (var(--salt-size-border-strong) * 2));
+  width: calc(100% - var(--slider-progressPercentage) - 1.5 * var(--salt-size-border-strong));
 }
 
 .saltSliderTrack-hasMaxTick.saltSliderTrack-rail::after {
@@ -73,20 +86,20 @@
 
 .saltSliderTrack-range .saltSliderTrack-rail::before {
   background: var(--slider-track-background);
-  width: calc(var(--slider-progressPercentageStart) - (var(--salt-size-border-strong) * 2));
+  width: calc(var(--slider-progressPercentageStart) - (var(--salt-size-border-strong) * 1.5));
 }
 
 .saltSliderTrack-range .saltSliderTrack-rail::after {
   background: var(--slider-track-background);
-  width: calc(100% - var(--slider-progressPercentageEnd) - (var(--salt-size-border-strong) * 2));
+  width: calc(100% - var(--slider-progressPercentageEnd) - (var(--salt-size-border-strong) * 1.5));
 }
 
 .saltSliderTrack-range .saltSliderTrack-rail .saltSliderTrack-fill {
   background: var(--slider-track-fill);
   height: 100%;
-  left: calc(var(--slider-progressPercentageStart) + (var(--salt-size-border-strong) / 2));
+  left: calc(var(--slider-progressPercentageStart) + 1.5 * var(--salt-size-border-strong));
   position: absolute;
-  width: calc(var(--slider-progressPercentageEnd) - var(--slider-progressPercentageStart) - var(--salt-size-border-strong));
+  width: calc(var(--slider-progressPercentageEnd) - var(--slider-progressPercentageStart) - var(--salt-size-border-strong) * 3);
 }
 
 .saltSliderTrack-minLabel,
@@ -95,7 +108,7 @@
 }
 
 .saltSliderTrack-dragging,
-.saltSliderTrack-dragging .saltSliderTrack-rail {
+.saltSliderTrack-dragging .saltSliderTrack-wrapper {
   cursor: var(--salt-draggable-grab-cursor-active);
 }
 
@@ -104,65 +117,76 @@
   --slider-track-background: var(--salt-track-borderColor-disabled);
 }
 
-.saltSliderTrack-disabled .saltSliderTrack-rail {
-  pointer-events: none;
-}
-
-.saltSliderTrack-marks {
+.saltSliderTrack-ticks {
+  top: calc(var(--salt-size-bar) + var(--slider-tick-height));
   position: absolute;
-  user-select: none;
   width: 100%;
-  top: calc((var(--salt-size-base) / 2) + (var(--salt-size-bar) / 2));
 }
 
-.saltSliderTrack-mark {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
+.saltSliderTrack-tick {
+  background: var(--slider-track-background);
+  height: var(--slider-tick-height);
   position: absolute;
-  justify-content: center;
-  left: var(--slider-mark-percentage);
-  transform: translateX(-50%);
-  gap: 4px;
+  transform: translate(-50%);
+  width: var(--salt-size-border-strong);
 }
 
-.saltSliderTrack-markLabel {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.saltSliderTrack-withTicks .saltSliderTrack-tickHidden {
+  visibility: hidden;
 }
 
-.saltSliderTrack-markTick {
-  height: 5px;
-  width: var(--salt-size-border-strong);
-  background: var(--slider-track-background);
-  visibility: hidden;
+.saltSliderTrack-tickSelected {
+  background: var(--slider-track-fill);
 }
 
-.saltSliderTrack-withMarkTicks .saltSliderTrack-markTick {
-  visibility: visible;
+.saltSliderTrack-tick:first-of-type {
+  transform: unset;
 }
 
-.saltSliderTrack-withMarkTicks .saltSliderTrack-markTickHidden {
-  visibility: hidden;
+.saltSliderTrack-tick:last-of-type {
+  transform: translateX(-100%);
+}
+
+.saltSliderTrack-marks {
+  position: absolute;
+  user-select: none;
+  width: 100%;
 }
 
-.saltSliderTrack-mark:last-of-type .saltSliderTrack-markTick {
+.saltSliderTrack-markLabel {
+  color: var(--salt-content-secondary-foreground);
+  font-family: var(--salt-text-label-fontFamily);
+  font-weight: var(--salt-text-label-fontWeight);
+  font-size: var(--salt-text-label-fontSize);
+  line-height: var(--salt-text-label-lineHeight);
+  overflow: hidden;
+  position: absolute;
+  text-overflow: ellipsis;
   transform: translateX(-50%);
+  top: calc(var(--slider-tick-height) + var(--salt-spacing-50));
+  white-space: nowrap;
 }
 
-.saltSliderTrack-mark:first-of-type .saltSliderTrack-markTick {
-  transform: translateX(50%);
+.saltSliderTrack-constrainLabelPosition .saltSliderTrack-markLabel:first-of-type {
+  transform: translateX(0%);
 }
 
-.saltSliderTrack-markSelected {
-  background: var(--slider-track-fill);
+.saltSliderTrack-constrainLabelPosition .saltSliderTrack-markLabel:last-of-type {
+  transform: translateX(-100%);
 }
 
-.saltSliderTrack-constrainLabelPosition .saltSliderTrack-mark:first-of-type .saltSliderTrack-markLabel {
-  transform: translateX(50%);
+/* Styles applied when slider and range slider are inside a form field */
+
+.saltFormField .saltSliderTrack.saltSliderTrack-withMark {
+  margin-bottom: 0;
 }
 
-.saltSliderTrack-constrainLabelPosition .saltSliderTrack-mark:last-of-type .saltSliderTrack-markLabel {
-  transform: translateX(-50%);
+.saltFormField .saltSliderTrack-container {
+  --saltFormField-label-width: 10%;
+
+  height: var(--salt-size-base);
+}
+
+.saltFormField .saltSliderTrack-markLabel {
+  top: calc((var(--salt-size-base) - var(--salt-size-bar)) / 2);
 }