diff --git a/packages/addon-knobs/example/typescript/index.tsx b/packages/addon-knobs/example/typescript/index.tsx index d98bb51e924e..5917454c81aa 100644 --- a/packages/addon-knobs/example/typescript/index.tsx +++ b/packages/addon-knobs/example/typescript/index.tsx @@ -25,7 +25,9 @@ stories.add('with all knobs', () => { const dob = date('DOB', new Date('January 20 1887')); const bold = boolean('Bold', false); - const color = color('Color', 'black'); + const selectedColor = color('Color', 'black'); + const favoriteNumber = number('Favorite Number', 42); + const comfortTemp = number('Comfort Temp', 72, { range: true, min: 60, max: 90, step: 1 }); const textDecoration = select('Decoration', { none: 'None', underline: 'Underline', @@ -39,13 +41,15 @@ stories.add('with all knobs', () => { const style = Object.assign({}, customStyle, { fontWeight: bold ? 800: 400, - color, + color: selectedColor, textDecoration }); return (
I'm {name} and I was born on "{moment(dob).format("DD MMM YYYY")}" +

My favorite number is {favoriteNumber}.

+

My most comfortable room temperature is {comfortTemp} degrees Fahrenheit.

); }); diff --git a/packages/addon-knobs/storybook-addon-knobs.d.ts b/packages/addon-knobs/storybook-addon-knobs.d.ts index cf7828322cbf..526ea574f939 100644 --- a/packages/addon-knobs/storybook-addon-knobs.d.ts +++ b/packages/addon-knobs/storybook-addon-knobs.d.ts @@ -10,13 +10,20 @@ interface StoryContext { story: string, } +interface NumberOptions { + range: boolean, + min: number, + max: number, + step: number, +} + export function knob(name: string, options: KnobOption): T; export function text(name: string, value: string | null): string; export function boolean(name: string, value: boolean): boolean; -export function number(name: string, value: number): number; +export function number(name: string, value: number, options?: NumberOptions): number; export function color(name: string, value: string): string;