diff --git a/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx b/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx index bc562ea5568e..6d51fe88d318 100644 --- a/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx +++ b/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx @@ -13,11 +13,10 @@ import { RangeControl, TextControl, } from '../../controls'; -import type { Args } from './types'; -import type { InputType } from '@storybook/types'; +import type { Args, ArgType } from './types'; export interface ArgControlProps { - row: InputType; + row: ArgType; arg: any; updateArgs: (args: Args) => void; isHovered: boolean; @@ -66,8 +65,9 @@ export const ArgControl: FC = ({ row, arg, updateArgs, isHovere const onBlur = useCallback(() => setFocused(false), []); const onFocus = useCallback(() => setFocused(true), []); - if (!control && row.type !== 'function') - return isHovered ? ( + if (!control || control.disabled) { + const canBeSetup = control?.disabled !== true && row?.type?.name !== 'function'; + return isHovered && canBeSetup ? ( = ({ 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 }; diff --git a/code/ui/blocks/src/components/ArgsTable/types.ts b/code/ui/blocks/src/components/ArgsTable/types.ts index a8f3dd1d453e..b8d097e851ce 100644 --- a/code/ui/blocks/src/components/ArgsTable/types.ts +++ b/code/ui/blocks/src/components/ArgsTable/types.ts @@ -41,6 +41,9 @@ export interface ArgType { description?: string; defaultValue?: any; if?: Conditional; + type?: { + name?: string; + }; [key: string]: any; }