ColorPicker: Improvements to story organization (#86539)

.betterer.results

@@ -6371,9 +6371,6 @@ exports[`no undocumented stories`] = {
     "packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.story.tsx:5381": [
       [0, 0, 0, "No undocumented stories are allowed, please add an .mdx file with some documentation", "5381"]
     ],
-    "packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.story.tsx:5381": [
-      [0, 0, 0, "No undocumented stories are allowed, please add an .mdx file with some documentation", "5381"]
-    ],
     "packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.story.tsx:5381": [
       [0, 0, 0, "No undocumented stories are allowed, please add an .mdx file with some documentation", "5381"]
     ],

packages/grafana-ui/src/components/ColorPicker/ColorPicker.mdx

@@ -1,5 +1,6 @@
 import { Meta, ArgTypes } from '@storybook/blocks';
-import { ColorPicker } from './ColorPicker';
+import { ColorPicker, SeriesColorPicker } from './ColorPicker';
+import { ColorPickerInput } from './ColorPickerInput';
 
 <Meta title="Pickers and Editors/ColorPicker/ColorPicker" />
 
@@ -9,7 +10,7 @@ The `ColorPicker` component group consists of several building blocks that are c
 
 The `Popover` is a tabbed view where you can switch between `Palettes`. The `NamedColorsPalette` shows an arrangement of preset colors, while the `SpectrumPalette` is an unlimited HSB color picker. The preset colors are optimized to work well with both light and dark theme. `Popover` is triggered, for example, by the series legend of graphs, or by `Pickers`.
 
-The `Pickers` are single circular color fields that show the currently picked color. On click, they open the `Popover`.
+The `Pickers` are by default single circular color fields that show the currently picked color. On click, they open the `Popover`.
 
 ## ColorPickerInput
 
@@ -17,4 +18,16 @@ Color picker component, modified to be used inside forms. Supports all usual inp
 
 The format in which the color is returned to the `onChange` callback can be customised via `returnColorAs` prop.
 
+## Props
+
+### ColorPicker
+
 <ArgTypes of={ColorPicker} />
+
+### SeriesColorPicker
+
+<ArgTypes of={SeriesColorPicker} />
+
+### ColorPickerInput
+
+<ArgTypes of={ColorPickerInput} />

packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx

@@ -3,18 +3,13 @@ import { useArgs } from '@storybook/client-api';
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 
-import { SeriesColorPicker, ColorPicker, clearButtonStyles, useStyles2 } from '@grafana/ui';
+import { SeriesColorPicker, ColorPicker, clearButtonStyles, useStyles2, ColorPickerInput } from '@grafana/ui';
 
 import mdx from './ColorPicker.mdx';
-import { ColorPickerInput } from './ColorPickerInput';
 
 const meta: Meta<typeof ColorPicker> = {
   title: 'Pickers and Editors/ColorPicker',
   component: ColorPicker,
-  // SB7 has broken subcomponent types due to dropping support for the feature
-  // https://github.com/storybookjs/storybook/issues/20782
-  // @ts-ignore
-  subcomponents: { SeriesColorPicker, ColorPickerInput },
   parameters: {
     docs: {
       page: mdx,
@@ -47,15 +42,31 @@ export const Basic: StoryFn<typeof ColorPicker> = ({ color, enableNamedColors })
 };
 
 export const SeriesPicker: StoryFn<typeof SeriesColorPicker> = ({ color, enableNamedColors }) => {
+  const [, updateArgs] = useArgs();
+  return (
+    <div style={{ display: 'flex', alignItems: 'flex-start' }}>
+      <SeriesColorPicker
+        enableNamedColors={enableNamedColors}
+        yaxis={1}
+        onToggleAxis={() => {}}
+        color={color}
+        onChange={(color) => {
+          action('Color changed')(color);
+          updateArgs({ color });
+        }}
+      />
+    </div>
+  );
+};
+
+export const CustomTrigger: StoryFn<typeof ColorPicker> = ({ color, enableNamedColors }) => {
   const [, updateArgs] = useArgs();
   const clearButton = useStyles2(clearButtonStyles);
   return (
-    <SeriesColorPicker
+    <ColorPicker
       enableNamedColors={enableNamedColors}
-      yaxis={1}
-      onToggleAxis={() => {}}
       color={color}
-      onChange={(color) => {
+      onChange={(color: string) => {
         action('Color changed')(color);
         updateArgs({ color });
       }}
@@ -72,7 +83,7 @@ export const SeriesPicker: StoryFn<typeof SeriesColorPicker> = ({ color, enableN
           Open color picker
         </button>
       )}
-    </SeriesColorPicker>
+    </ColorPicker>
   );
 };
 

packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.story.tsx

@@ -3,16 +3,18 @@ import React from 'react';
 
 import { useTheme2 } from '../../themes';
 
+import mdx from './ColorPicker.mdx';
 import { ColorPickerPopover } from './ColorPickerPopover';
 import { SeriesColorPickerPopover } from './SeriesColorPickerPopover';
 
 const meta: Meta<typeof ColorPickerPopover> = {
   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 (
     <div style={{ position: 'absolute' }}>
       <SeriesColorPickerPopover
         theme={theme}
+        yaxis={yAxis}
+        onToggleAxis={() => (yAxis ? setYAxis(0) : setYAxis(2))}
         color="#BC67E6"
         onChange={(color: string) => {
           console.log(color);

packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx

@@ -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<NamedColorsPaletteProps> {
-  selectedColor: string;
-}
-
-export const NamedColors: Story<StoryProps> = ({ selectedColor }) => {
-  const [color, setColor] = useState('green');
-  return <NamedColorsPalette color={color} onChange={setColor} />;
-};
-
-NamedColors.args = {
-  color: 'green',
-};
-
-export default meta;

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<typeof NamedColorsPalette> = ({ color }) => {
+  const [colorVal, setColor] = useState(color);
+  return <NamedColorsPalette color={colorVal} onChange={setColor} />;
+};
+
+export const Spectrum: StoryFn<typeof SpectrumPalette> = ({ color }) => {
+  const [, updateArgs] = useArgs();
+  return (
+    <SpectrumPalette
+      color={color}
+      onChange={(color: string) => {
+        action('Color changed')(color);
+        updateArgs({ color });
+      }}
+    />
+  );
+};
+
+export default meta;

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 (
-              <Switch
-                key="yaxisSwitch"
-                label="Use right y-axis"
-                className={styles.colorPickerAxisSwitch}
-                labelClass={styles.colorPickerAxisSwitchLabel}
-                checked={yaxis === 2}
-                onChange={() => {
-                  if (onToggleAxis) {
-                    onToggleAxis();
-                  }
-                }}
-              />
+              <InlineField labelWidth={20} label="Use right y-axis">
+                <InlineSwitch value={yaxis === 2} label="Use right y-axis" onChange={onToggleAxis} />
+              </InlineField>
             );
           },
         },
@@ -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,
-    }),
-  };
-};

packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.story.tsx

@@ -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<typeof SpectrumPalette> = {
-  title: 'Pickers and Editors/ColorPicker/Palettes/SpectrumPalette',
-  component: SpectrumPalette,
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-    controls: {
-      exclude: ['onChange'],
-    },
-  },
-  args: {
-    color: 'red',
-  },
-};
-
-export const Simple: StoryFn<typeof SpectrumPalette> = ({ color }) => {
-  const [, updateArgs] = useArgs();
-  return renderComponentWithTheme(SpectrumPalette, {
-    color,
-    onChange: (color: string) => {
-      action('Color changed')(color);
-      updateArgs({ color });
-    },
-  });
-};
-
-export default meta;