Docs: Ensure unique control id attributes across multiple Controls blocks

code/addons/docs/src/blocks/blocks/Controls.stories.tsx

@@ -4,7 +4,7 @@ import type { PlayFunctionContext } from 'storybook/internal/csf';
 
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { within } from 'storybook/test';
+import { expect, within } from 'storybook/test';
 
 import * as ExampleStories from '../examples/ControlsParameters.stories';
 import * as SubcomponentsExampleStories from '../examples/ControlsWithSubcomponentsParameters.stories';
@@ -159,3 +159,25 @@ export const EmptyArgTypes: Story = {
     of: EmptyArgTypesStories.Default,
   },
 };
+
+/**
+ * When multiple Controls blocks for different stories are on the same docs page, each control
+ * should have a unique id attribute (scoped by storyId). This verifies the fix for
+ * https://github.com/storybookjs/storybook/issues/26144
+ */
+export const MultipleControlsOnSamePage: Story = {
+  render: () => (
+    <>
+      <Controls of={ExampleStories.NoParameters} />
+      <Controls of={ExampleStories.Include} />
+    </>
+  ),
+  play: async ({ canvasElement }) => {
+    const allIds = Array.from(canvasElement.querySelectorAll('[id^="control-"]')).map(
+      (el) => el.id
+    );
+    const uniqueIds = new Set(allIds);
+    await expect(allIds.length).toBeGreaterThan(0);
+    await expect(uniqueIds.size).toBe(allIds.length);
+  },
+};

code/addons/docs/src/blocks/blocks/Controls.tsx

@@ -69,6 +69,7 @@ export const Controls: FC<ControlsProps> = (props) => {
     }
     return (
       <PureArgsTable
+        storyId={story.id}
         rows={filteredArgTypes as any}
         sort={sort}
         args={args}
@@ -101,6 +102,7 @@ export const Controls: FC<ControlsProps> = (props) => {
       globals={globals}
       updateArgs={updateArgs}
       resetArgs={resetArgs}
+      storyId={story.id}
     />
   );
 };

code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx

@@ -21,6 +21,7 @@ export interface ArgControlProps {
   arg: any;
   updateArgs: (args: Args) => void;
   isHovered: boolean;
+  storyId?: string;
 }
 
 const Controls: Record<string, FC<any>> = {
@@ -43,7 +44,7 @@ const Controls: Record<string, FC<any>> = {
 
 const NoControl = () => <>-</>;
 
-export const ArgControl: FC<ArgControlProps> = ({ row, arg, updateArgs, isHovered }) => {
+export const ArgControl: FC<ArgControlProps> = ({ row, arg, updateArgs, isHovered, storyId }) => {
   const { key, control } = row;
 
   const [isFocused, setFocused] = useState(false);
@@ -84,7 +85,15 @@ export const ArgControl: FC<ArgControlProps> = ({ row, arg, updateArgs, isHovere
   }
   // row.name is a display name and not a suitable DOM input id or name - i might contain whitespace etc.
   // row.key is a hash key and therefore a much safer choice
-  const props = { name: key, argType: row, value: boxedValue.value, onChange, onBlur, onFocus };
+  const props = {
+    name: key,
+    storyId,
+    argType: row,
+    value: boxedValue.value,
+    onChange,
+    onBlur,
+    onFocus,
+  };
   const Control = Controls[control.type] || NoControl;
   return <Control {...props} {...control} controlType={control.type} />;
 };

code/addons/docs/src/blocks/components/ArgsTable/ArgRow.tsx

@@ -21,6 +21,7 @@ interface ArgRowProps {
   compact?: boolean;
   expandable?: boolean;
   initialExpandedArgs?: boolean;
+  storyId?: string;
 }
 
 const Name = styled.span({ fontWeight: 'bold' });

code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx

@@ -204,6 +204,7 @@ export interface ArgsTableOptionProps {
   initialExpandedArgs?: boolean;
   isLoading?: boolean;
   sort?: SortType;
+  storyId?: string;
 }
 interface ArgsTableDataProps {
   rows: ArgTypes;
@@ -327,6 +328,7 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
     initialExpandedArgs,
     sort = 'none',
     isLoading,
+    storyId,
   } = props;
 
   if ('error' in props) {
@@ -380,7 +382,7 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
   }
   const expandable = Object.keys(groups.sections).length > 0;
 
-  const common = { updateArgs, compact, inAddonPanel, initialExpandedArgs };
+  const common = { updateArgs, compact, inAddonPanel, initialExpandedArgs, storyId };
 
   return (
     <ResetWrapper>

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

@@ -116,6 +116,7 @@ export type BooleanProps = ControlProps<BooleanValue> & BooleanConfig;
  */
 export const BooleanControl: FC<BooleanProps> = ({
   name,
+  storyId,
   value,
   onChange,
   onBlur,
@@ -130,15 +131,15 @@ export const BooleanControl: FC<BooleanProps> = ({
         ariaLabel={false}
         variant="outline"
         size="medium"
-        id={getControlSetterButtonId(name)}
+        id={getControlSetterButtonId(name, storyId)}
         onClick={onSetFalse}
         disabled={readonly}
       >
         Set boolean
       </Button>
     );
   }
-  const controlId = getControlId(name);
+  const controlId = getControlId(name, storyId);
 
   const parsedValue = typeof value === 'string' ? parse(value) : value;
 

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

@@ -360,6 +360,7 @@ const usePresets = (
 export type ColorControlProps = ControlProps<ColorValue> & ColorConfig;
 export const ColorControl: FC<ColorControlProps> = ({
   name,
+  storyId,
   value: initialValue,
   onChange,
   onFocus,
@@ -377,7 +378,7 @@ export const ColorControl: FC<ColorControlProps> = ({
   const Picker = ColorPicker[colorSpace];
 
   const readOnly = !!argType?.table?.readonly;
-  const controlId = getControlId(name);
+  const controlId = getControlId(name, storyId);
 
   return (
     <Wrapper>

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

@@ -66,7 +66,15 @@ const FlexSpaced = styled.fieldset({
 });
 
 export type DateProps = ControlProps<DateValue> & DateConfig;
-export const DateControl: FC<DateProps> = ({ name, value, onChange, onFocus, onBlur, argType }) => {
+export const DateControl: FC<DateProps> = ({
+  name,
+  storyId,
+  value,
+  onChange,
+  onFocus,
+  onBlur,
+  argType,
+}) => {
   const [valid, setValid] = useState(true);
   const dateRef = useRef<HTMLInputElement>();
   const timeRef = useRef<HTMLInputElement>();
@@ -114,7 +122,7 @@ export const DateControl: FC<DateProps> = ({ name, value, onChange, onFocus, onB
     setValid(!!time);
   };
 
-  const controlId = getControlId(name);
+  const controlId = getControlId(name, storyId);
 
   return (
     <FlexSpaced>

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

@@ -40,6 +40,7 @@ function revokeOldUrls(urls: string[]) {
 export const FilesControl: FC<FilesControlProps> = ({
   onChange,
   name,
+  storyId,
   accept = 'image/*',
   value,
   argType,
@@ -63,7 +64,7 @@ export const FilesControl: FC<FilesControlProps> = ({
     }
   }, [value, name]);
 
-  const controlId = getControlId(name);
+  const controlId = getControlId(name, storyId);
 
   return (
     <>

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

@@ -27,6 +27,7 @@ const FormInput = styled(Form.Input)(({ theme }) => ({
 
 export const NumberControl: FC<NumberProps> = ({
   name,
+  storyId,
   value,
   onChange,
   min,
@@ -102,7 +103,7 @@ export const NumberControl: FC<NumberProps> = ({
         ariaLabel={false}
         variant="outline"
         size="medium"
-        id={getControlSetterButtonId(name)}
+        id={getControlSetterButtonId(name, storyId)}
         onClick={onForceVisible}
         disabled={readonly}
       >
@@ -115,7 +116,7 @@ export const NumberControl: FC<NumberProps> = ({
     <Wrapper>
       <FormInput
         ref={htmlElRef}
-        id={getControlId(name)}
+        id={getControlId(name, storyId)}
         type="number"
         onChange={handleChange}
         size="flex"

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

@@ -163,7 +163,7 @@ const selectValue = (event: SyntheticEvent<HTMLInputElement>) => {
 
 export type ObjectProps = ControlProps<ObjectValue> & ObjectConfig;
 
-export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange, argType }) => {
+export const ObjectControl: FC<ObjectProps> = ({ name, storyId, value, onChange, argType }) => {
   const theme = useTheme();
   const data = useMemo(() => value && cloneDeep(value), [value]);
   const hasData = data !== null && data !== undefined;
@@ -208,7 +208,7 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange, argType
       <Button
         ariaLabel={false}
         disabled={readonly}
-        id={getControlSetterButtonId(name)}
+        id={getControlSetterButtonId(name, storyId)}
         onClick={onForceVisible}
       >
         Set object
@@ -219,7 +219,7 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange, argType
   const rawJSONForm = (
     <RawInput
       ref={htmlElRef}
-      id={getControlId(name)}
+      id={getControlId(name, storyId)}
       minRows={3}
       name={name}
       key={jsonString}

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

@@ -177,6 +177,7 @@ function getNumberOfDecimalPlaces(number: number) {
 
 export const RangeControl: FC<RangeProps> = ({
   name,
+  storyId,
   value,
   onChange,
   min = 0,
@@ -194,7 +195,7 @@ export const RangeControl: FC<RangeProps> = ({
   const numberOFDecimalsPlaces = useMemo(() => getNumberOfDecimalPlaces(step), [step]);
 
   const readonly = !!argType?.table?.readonly;
-  const controlId = getControlId(name);
+  const controlId = getControlId(name, storyId);
 
   return (
     <RangeWrapper readOnly={readonly}>

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

@@ -22,6 +22,7 @@ const MaxLength = styled.div<{ isMaxed: boolean }>(({ isMaxed }) => ({
 
 export const TextControl: FC<TextProps> = ({
   name,
+  storyId,
   value,
   onChange,
   onFocus,
@@ -49,7 +50,7 @@ export const TextControl: FC<TextProps> = ({
         variant="outline"
         size="medium"
         disabled={readonly}
-        id={getControlSetterButtonId(name)}
+        id={getControlSetterButtonId(name, storyId)}
         onClick={onForceVisible}
       >
         Set string
@@ -62,7 +63,7 @@ export const TextControl: FC<TextProps> = ({
   return (
     <Wrapper>
       <Form.Textarea
-        id={getControlId(name)}
+        id={getControlId(name, storyId)}
         maxLength={maxLength}
         onChange={handleChange}
         disabled={readonly}

code/addons/docs/src/blocks/controls/helpers.test.ts

@@ -11,6 +11,10 @@ describe('getControlId', () => {
   ])('%s', (name, input, expected) => {
     expect(getControlId(input)).toBe(expected);
   });
+
+  it('includes storyId when provided', () => {
+    expect(getControlId('some-id', 'story--name')).toBe('control-story--name-some-id');
+  });
 });
 
 describe('getControlSetterButtonId', () => {
@@ -22,4 +26,8 @@ describe('getControlSetterButtonId', () => {
   ])('%s', (name, input, expected) => {
     expect(getControlSetterButtonId(input)).toBe(expected);
   });
+
+  it('includes storyId when provided', () => {
+    expect(getControlSetterButtonId('some-id', 'story--name')).toBe('set-story--name-some-id');
+  });
 });

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

@@ -10,7 +10,10 @@
  *
  * @link http://xahlee.info/js/html_allowed_chars_in_attribute.html
  */
-export const getControlId = (value: string) => `control-${value.replace(/\s+/g, '-')}`;
+export const getControlId = (value: string, storyId?: string) => {
+  const base = value.replace(/\s+/g, '-');
+  return storyId ? `control-${storyId}-${base}` : `control-${base}`;
+};
 
 /**
  * Adds `set` prefix to make ID attribute more specific. Removes spaces because spaces are not
@@ -24,4 +27,7 @@ export const getControlId = (value: string) => `control-${value.replace(/\s+/g,
  *
  * @link http://xahlee.info/js/html_allowed_chars_in_attribute.html
  */
-export const getControlSetterButtonId = (value: string) => `set-${value.replace(/\s+/g, '-')}`;
+export const getControlSetterButtonId = (value: string, storyId?: string) => {
+  const base = value.replace(/\s+/g, '-');
+  return storyId ? `set-${storyId}-${base}` : `set-${base}`;
+};

code/addons/docs/src/blocks/controls/options/Checkbox.tsx

@@ -56,6 +56,7 @@ type CheckboxConfig = NormalizedOptionsConfig & { isInline: boolean };
 type CheckboxProps = ControlProps<OptionsMultiSelection> & CheckboxConfig;
 export const CheckboxControl: FC<CheckboxProps> = ({
   name,
+  storyId,
   options,
   value,
   onChange,
@@ -88,7 +89,7 @@ export const CheckboxControl: FC<CheckboxProps> = ({
     setSelected(selectedKeys(value || [], options));
   }, [value]);
 
-  const controlId = getControlId(name);
+  const controlId = getControlId(name, storyId);
 
   return (
     <Wrapper $isInline={isInline}>

code/addons/docs/src/blocks/controls/options/Radio.tsx

@@ -56,6 +56,7 @@ type RadioConfig = NormalizedOptionsConfig & { isInline: boolean };
 type RadioProps = ControlProps<OptionsSingleSelection> & RadioConfig;
 export const RadioControl: FC<RadioProps> = ({
   name,
+  storyId,
   options,
   value,
   onChange,
@@ -67,7 +68,7 @@ export const RadioControl: FC<RadioProps> = ({
     return <>-</>;
   }
   const selection = selectedKey(value, options);
-  const controlId = getControlId(name);
+  const controlId = getControlId(name, storyId);
 
   const readonly = !!argType?.table?.readonly;