Merge pull request #31103 from rileytb/master

Add radios option to @storybook/addon-knobs

types/storybook__addon-knobs/index.d.ts

@@ -11,7 +11,7 @@ import { RenderFunction } from '@storybook/react';
 
 export interface KnobOption<T> {
     value: T;
-    type: 'text' | 'boolean' | 'number' | 'color' | 'object' | 'select' | 'date';
+    type: 'text' | 'boolean' | 'number' | 'color' | 'object' | 'select' | 'date' | 'radios';
 }
 
 export interface StoryContext {
@@ -47,6 +47,8 @@ export function color(name: string, value: string, groupId?: string): string;
 
 export function object<T>(name: string, value: T, groupId?: string): T;
 
+export function radios<T>(name: string, options: { [s: string]: T }, value?: T, groupId?: string): string;
+
 export type SelectValue = string | number;
 export function select<T extends string>(name: string, options: { [s: string]: string }, value: T, groupId?: string): T;
 export function select<T extends number>(name: string, options: { [s: number]: string }, value: T, groupId?: string): T;

types/storybook__addon-knobs/storybook__addon-knobs-tests.tsx

@@ -15,6 +15,7 @@ import {
   button,
   knob,
   selectV2,
+  radios,
 } from '@storybook/addon-knobs';
 
 enum SomeEnum {
@@ -35,6 +36,7 @@ stories.add('with all knobs', () => {
   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 radioStation = radios('Favorite Radio Station', { 1100: "1100", 2200: "2200", 3300: "3300" });
   const textDecoration = select('Decoration', {
     none: 'None',
     underline: 'Underline',
@@ -78,6 +80,7 @@ stories.add('with all knobs', () => {
       I'm {name} and I was born on "{dob}"
       <p>My favorite number is {favoriteNumber}.</p>
       <p>My most comfortable room temperature is {comfortTemp} degrees Fahrenheit.</p>
+      <p>My favorite radio station is: {radioStation}</p>
     </div>
   );
 });
@@ -111,6 +114,7 @@ number('label', 1, {}, groupId);
 color('label', '#ffffff', groupId);
 object('label', {}, groupId);
 array('label', [], ',', groupId);
+radios('label', {}, null, groupId);
 select<any>('label', { option: 'Option' }, null, groupId);
 files('label', 'image/*', []);
 date('label', new Date(), groupId);