QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-06-01 13:49:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: replace react-color with AntD ColorPicker for theming support (#34712)

Browse Source 
Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Maxime Beauchemin
2025-08-15 11:05:30 -07:00
committed by GitHub
parent fc95c4fc89
commit fbcdf6909c
12 changed files with 222 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx
View File

@@ -19,8 +19,12 @@
import { PureComponent } from 'react';
import rison from 'rison';
import PropTypes from 'prop-types';
import { CompactPicker } from 'react-color';
import { Button, AsyncSelect, EmptyState } from '@superset-ui/core/components';
import {
Button,
AsyncSelect,
EmptyState,
ColorPicker,
} from '@superset-ui/core/components';
import {
t,
SupersetClient,
@@ -836,23 +840,38 @@ class AnnotationLayer extends PureComponent {
value={opacity}
onChange={value => this.setState({ opacity: value })}
/>
<div>
<ControlHeader label={t('Color')} />
<div style={{ display: 'flex', flexDirection: 'column' }}>
<CompactPicker
color={color}
colors={colorScheme}
onChangeComplete={v => this.setState({ color: v.hex })}
/>
<Button
style={{ marginTop: '0.5rem', marginBottom: '0.5rem' }}
buttonStyle={color === AUTOMATIC_COLOR ? 'success' : 'default'}
buttonSize="xsmall"
onClick={() => this.setState({ color: AUTOMATIC_COLOR })}
>
{t('Automatic color')}
</Button>
</div>
<div
style={{
marginTop: this.props.theme.sizeUnit * 2,
marginBottom: this.props.theme.sizeUnit * 2,
}}
>
<CheckboxControl
name="annotation-layer-automatic-color"
label={t('Use automatic color')}
value={color === AUTOMATIC_COLOR}
onChange={useAutomatic => {
if (useAutomatic) {
this.setState({ color: AUTOMATIC_COLOR });
} else {
// Set to first theme color or black as fallback
this.setState({ color: colorScheme[0] || '#000000' });
}
}}
/>
{color !== AUTOMATIC_COLOR && (
<div style={{ marginTop: this.props.theme.sizeUnit * 2 }}>
<ControlHeader label={t('Color')} />
<ColorPicker
value={color}
presets={[{ label: 'Theme colors', colors: colorScheme }]}
onChangeComplete={colorValue =>
this.setState({ color: colorValue.toHexString() })
}
showText
/>
</div>
)}
</div>
<TextControl
name="annotation-layer-stroke-width"

3
superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.test.tsx
View File

@@ -220,13 +220,14 @@ test('keeps apply disabled when missing required fields', async () => {
expect(await screen.findByText('Chart A')).toBeInTheDocument();
userEvent.click(screen.getByText('Chart A'));
await screen.findByText(/title column/i);
userEvent.click(screen.getByRole('button', { name: 'Automatic color' }));
userEvent.click(
screen.getByRole('combobox', { name: 'Annotation layer title column' }),
);
expect(await screen.findByText(/none/i)).toBeInTheDocument();
userEvent.click(screen.getByText('None'));
userEvent.click(screen.getByText('Style'));
// The checkbox for automatic color is in the Style tab
userEvent.click(screen.getByText('Use automatic color'));
userEvent.click(
screen.getByRole('combobox', { name: 'Annotation layer stroke' }),
);