feat(addon-controls): add maxPresetColors option to ColorControl

The ColorControl preset limit was previously hardcoded to 27 colors.
This prevented users with large design systems (more than 27 colors)
from displaying all their preset colors.

Add a new optional maxPresetColors prop to ColorConfig/ColorControl
that allows users to configure or remove this limit:
- Defaults to 27 for backward compatibility
- Setting to 0 or Infinity removes the limit entirely
- Any other positive number limits presets to that count

Add two new stories demonstrating the feature:
- WithMaxPresetColors (limit to 5)
- WithUnlimitedPresetColors (maxPresetColors: 0, 40 colors)

Fixes #20298

Author: mixelburg

code/addons/docs/src/blocks/controls/Color.stories.tsx

@@ -65,6 +65,36 @@ export const WithPresetColors: Story = {
   },
 };
 
+export const WithMaxPresetColors: Story = {
+  name: 'With maxPresetColors (limit to 5)',
+  args: {
+    value: '#00ffff',
+    maxPresetColors: 5,
+    presetColors: [
+      { color: '#ff4785', title: 'Coral' },
+      { color: '#1EA7FD', title: 'Ocean' },
+      { color: 'rgb(252, 82, 31)', title: 'Orange' },
+      { color: 'rgba(255, 174, 0, 0.5)', title: 'Gold' },
+      { color: 'hsl(101, 52%, 49%)', title: 'Green' },
+      { color: 'hsla(179,65%,53%,0.5)', title: 'Seafoam' },
+      { color: '#6F2CAC', title: 'Purple' },
+      { color: '#2A0481', title: 'Ultraviolet' },
+    ],
+  },
+};
+
+export const WithUnlimitedPresetColors: Story = {
+  name: 'With unlimited presets (maxPresetColors: 0)',
+  args: {
+    value: '#00ffff',
+    maxPresetColors: 0,
+    presetColors: Array.from({ length: 40 }, (_, i) => {
+      const hue = Math.round((i / 40) * 360);
+      return { color: `hsl(${hue}, 70%, 50%)`, title: `Color ${i + 1}` };
+    }),
+  },
+};
+
 export const StartOpen: Story = {
   args: {
     startOpen: true,

code/addons/docs/src/blocks/controls/Color.tsx

@@ -307,7 +307,8 @@ const id = (value: string) => value.replace(/\s*/, '').toLowerCase();
 const usePresets = (
   presetColors: PresetColor[],
   currentColor: ParsedColor | undefined,
-  colorSpace: ColorSpace
+  colorSpace: ColorSpace,
+  maxPresetColors = 27
 ) => {
   const [selectedColors, setSelectedColors] = useState(currentColor?.valid ? [currentColor] : []);
 
@@ -330,8 +331,12 @@ const usePresets = (
       }
       return parseValue(preset.color);
     });
-    return initialPresets.concat(selectedColors).filter(Boolean).slice(-27);
-  }, [presetColors, selectedColors]);
+    const combined = initialPresets.concat(selectedColors).filter(Boolean);
+    if (!maxPresetColors || maxPresetColors === Infinity) {
+      return combined;
+    }
+    return combined.slice(-maxPresetColors);
+  }, [presetColors, selectedColors, maxPresetColors]);
 
   const addPreset: (color: ParsedColor) => void = useCallback(
     (color) => {
@@ -365,6 +370,7 @@ export const ColorControl: FC<ColorControlProps> = ({
   onFocus,
   onBlur,
   presetColors,
+  maxPresetColors,
   startOpen = false,
   argType,
 }) => {
@@ -373,7 +379,7 @@ export const ColorControl: FC<ColorControlProps> = ({
     initialValue,
     debouncedOnChange
   );
-  const { presets, addPreset } = usePresets(presetColors ?? [], color, colorSpace);
+  const { presets, addPreset } = usePresets(presetColors ?? [], color, colorSpace, maxPresetColors);
   const Picker = ColorPicker[colorSpace];
 
   const readOnly = !!argType?.table?.readonly;

code/addons/docs/src/blocks/controls/types.ts

@@ -17,6 +17,14 @@ export type ColorValue = string;
 export type PresetColor = ColorValue | { color: ColorValue; title?: string };
 export interface ColorConfig {
   presetColors?: PresetColor[];
+  /**
+   * Maximum number of preset colors shown in the color picker. When the number of presets exceeds
+   * this value, the oldest presets are removed first (most-recently-used order). Set to `Infinity`
+   * or `0` to disable the limit and show all presets.
+   *
+   * @default 27
+   */
+  maxPresetColors?: number;
   /**
    * Whether the color picker should be open by default when rendered.
    *