diff --git a/superset-frontend/src/components/Slider/Slider.stories.tsx b/superset-frontend/src/components/Slider/Slider.stories.tsx
index 3f8abeacebe36..34ac644041538 100644
--- a/superset-frontend/src/components/Slider/Slider.stories.tsx
+++ b/superset-frontend/src/components/Slider/Slider.stories.tsx
@@ -16,15 +16,58 @@
* specific language governing permissions and limitations
* under the License.
*/
-import Slider, { SliderSingleProps } from '.';
+import Slider, { SliderSingleProps, SliderRangeProps } from '.';
export default {
title: 'Slider',
component: Slider,
};
-export const InteractiveSlider = (args: SliderSingleProps) => (
-
+const tooltipPlacement = [
+ 'top',
+ 'left',
+ 'bottom',
+ 'right',
+ 'topLeft',
+ 'topRight',
+ 'bottomLeft',
+ 'bottomRight',
+ 'leftTop',
+ 'leftBottom',
+ 'rightTop',
+ 'rightBottom',
+] as const;
+
+export const InteractiveSlider = ({
+ tooltipOpen,
+ tooltipPosition,
+ ...args
+}: SliderSingleProps & {
+ tooltipOpen: boolean;
+ tooltipPosition: (typeof tooltipPlacement)[number];
+}) => (
+
+);
+
+export const InteractiveRangeSlider = ({
+ tooltipOpen,
+ draggableTrack,
+ ...args
+}: SliderRangeProps & { tooltipOpen: boolean; draggableTrack: boolean }) => (
+
);
InteractiveSlider.args = {
@@ -32,17 +75,33 @@ InteractiveSlider.args = {
max: 100,
defaultValue: 70,
step: 1,
+ marks: {},
+ disabled: false,
+ reverse: false,
+ vertical: false,
+ autoFocus: false,
+ keyboard: true,
+ dots: false,
+ included: true,
+ tooltipPosition: 'bottom',
};
InteractiveSlider.argTypes = {
onChange: { action: 'onChange' },
- disabled: {
+ onChangeComplete: { action: 'onChangeComplete' },
+ tooltipOpen: {
control: { type: 'boolean' },
},
- reverse: {
- control: { type: 'boolean' },
- },
- vertical: {
- control: { type: 'boolean' },
+ tooltipPosition: {
+ options: tooltipPlacement,
+ control: { type: 'select' },
},
};
+
+InteractiveRangeSlider.args = {
+ ...InteractiveSlider.args,
+ defaultValue: [50, 70],
+ draggableTrack: false,
+};
+
+InteractiveRangeSlider.argTypes = InteractiveSlider.argTypes;
diff --git a/superset-frontend/src/components/Slider/Slider.test.tsx b/superset-frontend/src/components/Slider/Slider.test.tsx
new file mode 100644
index 0000000000000..8413e0ebc67aa
--- /dev/null
+++ b/superset-frontend/src/components/Slider/Slider.test.tsx
@@ -0,0 +1,39 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { render, screen } from 'spec/helpers/testing-library';
+import Slider from '.';
+
+const mockedProps = {
+ defaultValue: 90,
+ tooltip: {
+ open: true,
+ },
+};
+
+test('should render', () => {
+ const { container } = render();
+ expect(container).toBeInTheDocument();
+});
+
+test('should render with default value on tooltip', () => {
+ render();
+ expect(
+ screen.getAllByText(`${mockedProps.defaultValue}`)[0],
+ ).toBeInTheDocument();
+});
diff --git a/superset-frontend/src/components/Slider/index.tsx b/superset-frontend/src/components/Slider/index.tsx
index 27a3d3d90c093..05f21b0bb9ed7 100644
--- a/superset-frontend/src/components/Slider/index.tsx
+++ b/superset-frontend/src/components/Slider/index.tsx
@@ -16,13 +16,11 @@
* specific language governing permissions and limitations
* under the License.
*/
-import AntdSlider, {
- SliderSingleProps,
- SliderRangeProps,
-} from 'antd/lib/slider';
+import { SliderSingleProps, SliderRangeProps } from 'antd-v5/lib/slider';
+import { Slider as AntdSlider } from 'antd-v5';
export type { SliderSingleProps, SliderRangeProps };
export default function Slider(props: SliderSingleProps | SliderRangeProps) {
- return ;
+ return ;
}
diff --git a/superset-frontend/src/theme/index.ts b/superset-frontend/src/theme/index.ts
index ea51101c2638e..857e95888f935 100644
--- a/superset-frontend/src/theme/index.ts
+++ b/superset-frontend/src/theme/index.ts
@@ -40,7 +40,7 @@ const baseConfig: ThemeConfig = {
colorSuccess: supersetTheme.colors.success.base,
colorTextBase: supersetTheme.colors.grayscale.dark2,
colorWarning: supersetTheme.colors.warning.base,
- controlHeight: supersetTheme.gridUnit * 32,
+ controlHeight: 32,
fontFamily: supersetTheme.typography.families.sansSerif,
fontFamilyCode: supersetTheme.typography.families.monospace,
fontSize: supersetTheme.typography.sizes.m,
@@ -61,7 +61,7 @@ const baseConfig: ThemeConfig = {
fontWeightStrong: supersetTheme.typography.weights.medium,
},
Tag: {
- borderRadiusSM: supersetTheme.gridUnit / 2,
+ borderRadiusSM: 2,
defaultBg: supersetTheme.colors.grayscale.light4,
},
Progress: {
@@ -69,6 +69,12 @@ const baseConfig: ThemeConfig = {
colorText: supersetTheme.colors.text.label,
remainingColor: supersetTheme.colors.grayscale.light4,
},
+ Slider: {
+ trackBgDisabled: supersetTheme.colors.grayscale.light1,
+ colorBgElevated: supersetTheme.colors.grayscale.light5,
+ handleSizeHover: 10,
+ handleLineWidthHover: 2,
+ },
},
};