From 1b8e31eba557db1cdabfd2b2761a1558e2f38b34 Mon Sep 17 00:00:00 2001
From: Primo Sabatini <primo.sabatini@gmail.com>
Date: Sun, 19 Dec 2021 20:02:25 -0500
Subject: [PATCH] fix(slider): add className props to class list for Slider and
 SliderFilledTrack

---
 .changeset/fresh-jars-wave.md         |  6 +++
 packages/slider/src/slider.tsx        |  4 +-
 packages/slider/tests/slider.test.tsx | 63 +++++++++++++++++++++++++++
 3 files changed, 71 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/fresh-jars-wave.md

diff --git a/.changeset/fresh-jars-wave.md b/.changeset/fresh-jars-wave.md
new file mode 100644
index 00000000000..caf902806c8
--- /dev/null
+++ b/.changeset/fresh-jars-wave.md
@@ -0,0 +1,6 @@
+---
+"@chakra-ui/slider": patch
+---
+
+Allow classNames specified on Slider and SliderFilledTrack to be added to the
+class list
diff --git a/packages/slider/src/slider.tsx b/packages/slider/src/slider.tsx
index 1e36718f480..1733e624a23 100644
--- a/packages/slider/src/slider.tsx
+++ b/packages/slider/src/slider.tsx
@@ -53,7 +53,7 @@ export const Slider = forwardRef<SliderProps, "div">((props, ref) => {
       <StylesProvider value={styles}>
         <chakra.div
           {...rootProps}
-          className="chakra-slider"
+          className={cx("chakra-slider", props.className)}
           __css={styles.container}
         >
           {props.children}
@@ -127,7 +127,7 @@ export const SliderFilledTrack = forwardRef<SliderInnerTrackProps, "div">(
     return (
       <chakra.div
         {...trackProps}
-        className="chakra-slider__filled-track"
+        className={cx("chakra-slider__filled-track", props.className)}
         __css={styles.filledTrack}
       />
     )
diff --git a/packages/slider/tests/slider.test.tsx b/packages/slider/tests/slider.test.tsx
index bae9dc56a7b..f6680f008da 100644
--- a/packages/slider/tests/slider.test.tsx
+++ b/packages/slider/tests/slider.test.tsx
@@ -1,6 +1,7 @@
 import { extendTheme, ThemeProvider } from "@chakra-ui/react"
 import { press, render, testA11y } from "@chakra-ui/test-utils"
 import * as React from "react"
+import styled from "@emotion/styled"
 import {
   Slider,
   SliderFilledTrack,
@@ -30,6 +31,45 @@ const SimpleSlider = (props: {
   </Slider>
 )
 
+const StyledSlider = styled(Slider)`
+  width: 400px;
+  background-color: pink;
+`
+
+// This gets applied to SliderTrack!
+const StyledSliderTrack = styled(SliderTrack)`
+  background-color: blue;
+`
+
+// This doesn't get applied to SliderFilledTrack,
+const StyledSliderFilledTrack = styled(SliderFilledTrack)`
+  background-color: green;
+`
+// This gets applied to SliderThumb!
+const StyledSliderThumb = styled(SliderThumb)`
+  background-color: red;
+`
+
+const SimpleStyledSlider = (props: {
+  defaultValue?: number
+  isReversed?: boolean
+  orientation?: UseSliderProps["orientation"]
+}) => (
+  <StyledSlider
+    data-testid="slider"
+    aria-label="slider-2"
+    colorScheme="red"
+    orientation={props.orientation}
+    isReversed={props.isReversed || undefined}
+    defaultValue={props.defaultValue || defaultValue}
+  >
+    <StyledSliderTrack data-testid="slider-track">
+      <StyledSliderFilledTrack data-testid="slider-filled-track" />
+    </StyledSliderTrack>
+    <StyledSliderThumb data-testid="slider-thumb" />
+  </StyledSlider>
+)
+
 test("passes a11y test", async () => {
   await testA11y(<SimpleSlider />)
 })
@@ -139,3 +179,26 @@ test("renders correctly/unaffected by 'rtl' when orientation: vertical", () => {
   press.End(thumb)
   expect(thumb).toHaveAttribute("aria-valuenow", "100")
 })
+
+test("should have colors from styled", () => {
+  const { getByTestId } = render(<SimpleStyledSlider />)
+  let sliderElement = getByTestId("slider")
+  let styles = getComputedStyle(sliderElement)
+
+  expect(styles.backgroundColor).toBe("pink")
+
+  sliderElement = getByTestId("slider-track")
+  styles = getComputedStyle(sliderElement)
+
+  expect(styles.backgroundColor).toBe("blue")
+
+  sliderElement = getByTestId("slider-filled-track")
+  styles = getComputedStyle(sliderElement)
+
+  expect(styles.backgroundColor).toBe("green")
+
+  sliderElement = getByTestId("slider-thumb")
+  styles = getComputedStyle(sliderElement)
+
+  expect(styles.backgroundColor).toBe("red")
+})