refactor(Slider): Upgrade Slider to Antd 5 (#29786)

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) => (
-  <Slider {...args} style={{ width: 400, height: 400 }} />
+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];
+}) => (
+  <Slider
+    {...args}
+    tooltip={{
+      ...args.tooltip,
+      open: tooltipOpen,
+      placement: tooltipPosition,
+    }}
+    style={{ width: 400, height: 400 }}
+  />
+);
+
+export const InteractiveRangeSlider = ({
+  tooltipOpen,
+  draggableTrack,
+  ...args
+}: SliderRangeProps & { tooltipOpen: boolean; draggableTrack: boolean }) => (
+  <Slider
+    {...args}
+    tooltip={{ open: tooltipOpen }}
+    range={{ draggableTrack }}
+    style={{ width: 400, height: 400 }}
+  />
 );
 
 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;

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(<Slider {...mockedProps} />);
+  expect(container).toBeInTheDocument();
+});
+
+test('should render with default value on tooltip', () => {
+  render(<Slider {...mockedProps} />);
+  expect(
+    screen.getAllByText(`${mockedProps.defaultValue}`)[0],
+  ).toBeInTheDocument();
+});

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 <AntdSlider {...props} css={{ marginLeft: 0, marginRight: 0 }} />;
+  return <AntdSlider {...props} />;
 }

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,
+    },
   },
 };