= {
title: 'Pickers and Editors/ColorPicker/Popovers',
component: ColorPickerPopover,
- // SB7 has broken subcomponent types due to dropping support for the feature
- // https://github.com/storybookjs/storybook/issues/20782
- // @ts-ignore
- subcomponents: { SeriesColorPickerPopover },
+ parameters: {
+ docs: {
+ page: mdx,
+ },
+ },
};
export const Basic = () => {
@@ -30,11 +32,14 @@ export const Basic = () => {
export const SeriesColorPickerPopoverExample = () => {
const theme = useTheme2();
+ const [yAxis, setYAxis] = React.useState(0);
return (
(yAxis ? setYAxis(0) : setYAxis(2))}
color="#BC67E6"
onChange={(color: string) => {
console.log(color);
diff --git a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx
deleted file mode 100644
index 8f76f18b1073..000000000000
--- a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Meta, Story } from '@storybook/react';
-import React, { useState } from 'react';
-
-import mdx from './ColorPicker.mdx';
-import { NamedColorsPalette, NamedColorsPaletteProps } from './NamedColorsPalette';
-
-const meta: Meta = {
- title: 'Pickers and Editors/ColorPicker/Palettes/NamedColorsPalette',
- component: NamedColorsPalette,
- parameters: {
- docs: {
- page: mdx,
- },
- controls: {
- exclude: ['theme', 'color'],
- },
- },
- argTypes: {
- selectedColor: { control: { type: 'select', options: ['green', 'red', 'light-blue', 'yellow'] } },
- },
-};
-
-interface StoryProps extends Partial {
- selectedColor: string;
-}
-
-export const NamedColors: Story = ({ selectedColor }) => {
- const [color, setColor] = useState('green');
- return ;
-};
-
-NamedColors.args = {
- color: 'green',
-};
-
-export default meta;
diff --git a/packages/grafana-ui/src/components/ColorPicker/Palettes.story.tsx b/packages/grafana-ui/src/components/ColorPicker/Palettes.story.tsx
new file mode 100644
index 000000000000..0308d31783af
--- /dev/null
+++ b/packages/grafana-ui/src/components/ColorPicker/Palettes.story.tsx
@@ -0,0 +1,43 @@
+import { action } from '@storybook/addon-actions';
+import { useArgs } from '@storybook/client-api';
+import { Meta, StoryFn } from '@storybook/react';
+import React, { useState } from 'react';
+
+import mdx from './ColorPicker.mdx';
+import { NamedColorsPalette } from './NamedColorsPalette';
+import SpectrumPalette from './SpectrumPalette';
+
+const meta: Meta = {
+ title: 'Pickers and Editors/ColorPicker/Palettes',
+ parameters: {
+ docs: {
+ page: mdx,
+ },
+ controls: {
+ exclude: ['theme', 'color'],
+ },
+ },
+ args: {
+ color: 'green',
+ },
+};
+
+export const NamedColors: StoryFn = ({ color }) => {
+ const [colorVal, setColor] = useState(color);
+ return ;
+};
+
+export const Spectrum: StoryFn = ({ color }) => {
+ const [, updateArgs] = useArgs();
+ return (
+ {
+ action('Color changed')(color);
+ updateArgs({ color });
+ }}
+ />
+ );
+};
+
+export default meta;
diff --git a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
index d1ca21ad805a..90f5e80f6054 100644
--- a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
@@ -1,8 +1,8 @@
-import { css } from '@emotion/css';
import React from 'react';
-import { withTheme2, useStyles2 } from '../../themes';
-import { Switch } from '../Forms/Legacy/Switch/Switch';
+import { withTheme2 } from '../../themes';
+import { InlineField } from '../Forms/InlineField';
+import { InlineSwitch } from '../Switch/Switch';
import { PopoverContentProps } from '../Tooltip';
import { ColorPickerPopover, ColorPickerProps } from './ColorPickerPopover';
@@ -13,7 +13,6 @@ export interface SeriesColorPickerPopoverProps extends ColorPickerProps, Popover
}
export const SeriesColorPickerPopover = (props: SeriesColorPickerPopoverProps) => {
- const styles = useStyles2(getStyles);
const { yaxis, onToggleAxis, color, ...colorPickerProps } = props;
const customPickers = onToggleAxis
@@ -22,18 +21,9 @@ export const SeriesColorPickerPopover = (props: SeriesColorPickerPopoverProps) =
name: 'Y-Axis',
tabComponent() {
return (
- {
- if (onToggleAxis) {
- onToggleAxis();
- }
- }}
- />
+
+
+
);
},
},
@@ -44,15 +34,3 @@ export const SeriesColorPickerPopover = (props: SeriesColorPickerPopoverProps) =
// This component is to enable SeriesColorPickerPopover usage via series-color-picker-popover directive
export const SeriesColorPickerPopoverWithTheme = withTheme2(SeriesColorPickerPopover);
-
-const getStyles = () => {
- return {
- colorPickerAxisSwitch: css({
- width: '100%',
- }),
- colorPickerAxisSwitchLabel: css({
- display: 'flex',
- flexGrow: 1,
- }),
- };
-};
diff --git a/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.story.tsx b/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.story.tsx
deleted file mode 100644
index ab03ae9076fd..000000000000
--- a/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.story.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { useArgs } from '@storybook/client-api';
-import { Meta, StoryFn } from '@storybook/react';
-
-import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
-
-import mdx from './ColorPicker.mdx';
-import SpectrumPalette from './SpectrumPalette';
-
-const meta: Meta = {
- title: 'Pickers and Editors/ColorPicker/Palettes/SpectrumPalette',
- component: SpectrumPalette,
- parameters: {
- docs: {
- page: mdx,
- },
- controls: {
- exclude: ['onChange'],
- },
- },
- args: {
- color: 'red',
- },
-};
-
-export const Simple: StoryFn = ({ color }) => {
- const [, updateArgs] = useArgs();
- return renderComponentWithTheme(SpectrumPalette, {
- color,
- onChange: (color: string) => {
- action('Color changed')(color);
- updateArgs({ color });
- },
- });
-};
-
-export default meta;