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