make the button component accept a label prop, (not children) (used for sandboxes and renderAssets in cli)

.github/workflows/generate-repros-next.yml

@@ -8,7 +8,6 @@ on:
   push:
     branches:
       - vite-frameworks-xyz
-      - norbert/sb-565-javascript
 
 jobs:
   generate:
@@ -27,7 +26,7 @@ jobs:
       - name: Install dependencies
         run: node ./scripts/check-dependencies.js
       - name: Bootstrap Storybook libraries
-        run: yarn task --task compile --start-from=auto --no-link
+        run: yarn task --task publish --start-from=auto --no-link
       - name: Generate repros
         run: yarn generate-repros-next --local-registry
         working-directory: ./code

code/addons/actions/template/stories/argtype.stories.ts

@@ -3,7 +3,7 @@ import globalThis from 'global';
 export default {
   component: globalThis.Components.Button,
   args: {
-    children: 'Click Me!',
+    label: 'Click Me!',
   },
   argTypes: {
     onClick: {},

code/addons/actions/template/stories/basics.stories.ts

@@ -5,7 +5,7 @@ import { action } from '@storybook/addon-actions';
 export default {
   component: globalThis.Components.Button,
   args: {
-    children: 'Click Me!',
+    label: 'Click Me!',
   },
   parameters: {
     chromatic: { disable: true },

code/addons/actions/template/stories/configs.stories.ts

@@ -7,7 +7,7 @@ const configs = actions('actionA', 'actionB', 'actionC');
 export default {
   component: globalThis.Components.Button,
   args: {
-    children: 'Click Me!',
+    label: 'Click Me!',
   },
   parameters: {
     chromatic: { disable: true },

code/addons/actions/template/stories/parameters.stories.ts

@@ -3,7 +3,7 @@ import globalThis from 'global';
 export default {
   component: globalThis.Components.Button,
   args: {
-    children: 'Click Me!',
+    label: 'Click Me!',
   },
   parameters: {
     chromatic: { disable: true },

code/addons/backgrounds/template/stories/grid.stories.ts

@@ -3,7 +3,7 @@ import globalThis from 'global';
 export default {
   component: globalThis.Components.Button,
   args: {
-    children: 'Click Me!',
+    label: 'Click Me!',
   },
   parameters: {
     backgrounds: {

code/addons/backgrounds/template/stories/parameters.stories.ts

@@ -12,7 +12,7 @@ const COLORS = [
 export default {
   component: globalThis.Components.Button,
   args: {
-    children: 'Click Me!',
+    label: 'Click Me!',
   },
   parameters: {
     backgrounds: {

code/addons/docs/template/stories/docs2/button.stories.ts

@@ -9,13 +9,13 @@ export default {
 };
 
 export const Basic = {
-  args: { children: 'Basic' },
+  args: { label: 'Basic' },
 };
 
 export const One = {
-  args: { children: 'One' },
+  args: { label: 'One' },
 };
 
 export const Two = {
-  args: { children: 'Two' },
+  args: { label: 'Two' },
 };

code/addons/docs/template/stories/docspage/basic.stories.ts

@@ -2,19 +2,19 @@ import globalThis from 'global';
 
 export default {
   component: globalThis.Components.Button,
-  args: { children: 'Click Me!' },
+  args: { label: 'Click Me!' },
   parameters: { chromatic: { disable: true } },
 };
 
 export const Basic = {
-  args: { children: 'Basic' },
+  args: { label: 'Basic' },
 };
 
 export const Disabled = {
-  args: { children: 'Disabled in DocsPage' },
+  args: { label: 'Disabled in DocsPage' },
   parameters: { docs: { disable: true } },
 };
 
 export const Another = {
-  args: { children: 'Another' },
+  args: { label: 'Another' },
 };

code/addons/docs/template/stories/docspage/description.stories.ts

@@ -6,7 +6,7 @@ export default {
   subcomponents: {
     Pre: globalThis.Components.Pre,
   },
-  args: { children: 'Click Me!' },
+  args: { label: 'Click Me!' },
   parameters: {
     docs: {
       description: {

code/addons/docs/template/stories/docspage/extract-description.stories.ts

@@ -2,7 +2,7 @@ import globalThis from 'global';
 
 export default {
   component: globalThis.Components.Button,
-  args: { children: 'Click Me!' },
+  args: { label: 'Click Me!' },
   parameters: {
     docs: {
       // FIXME: this is typically provided by the renderer preset to extract

code/addons/docs/template/stories/docspage/iframe.stories.ts

@@ -2,7 +2,7 @@ import globalThis from 'global';
 
 export default {
   component: globalThis.Components.Button,
-  args: { children: 'Rendered in iframe' },
+  args: { label: 'Rendered in iframe' },
   parameters: {
     chromatic: { disable: true },
     docs: { iframeHeight: 120, inlineStories: true },

code/addons/docs/template/stories/docspage/override.stories.ts

@@ -15,7 +15,7 @@ const Override = () => 'overridden';
 
 export default {
   component: globalThis.Components.Button,
-  args: { children: 'Click Me!' },
+  args: { label: 'Click Me!' },
   parameters: {
     chromatic: { disable: true },
     docs: { page: Override },

code/addons/docs/template/stories/docspage/source.stories.ts

@@ -2,7 +2,7 @@ import globalThis from 'global';
 
 export default {
   component: globalThis.Components.Button,
-  args: { children: 'Click Me!' },
+  args: { label: 'Click Me!' },
   parameters: { chromatic: { disable: true } },
 };
 

code/addons/docs/template/stories/stories-mdx/basic.stories.mdx

@@ -10,9 +10,7 @@ This file demonstrates defining stories inside MDX.
 <Canvas>
   <Story
     name="Primary"
-    args={{
-      children: 'Primary',
-    }}
+    args={{ label: 'Primary' }}
   />
 </Canvas>
 
@@ -21,8 +19,6 @@ This file demonstrates defining stories inside MDX.
 <Canvas>
   <Story
     name="Secondary"
-    args={{
-      children: 'Secondary',
-    }}
+    args={{ label: 'Secondary' }}
   />
 </Canvas>

code/addons/docs/template/stories/stories-mdx/csf-in-mdx.stories.js

@@ -8,13 +8,13 @@
 // };
 
 export const Primary = {
-  args: { children: 'Primary' },
+  args: { label: 'Primary' },
 };
 
 export const Secondary = {
-  args: { children: 'Secondary' },
+  args: { label: 'Secondary' },
 };
 
 export const ImplicitName = {
-  args: { children: 'Implicit Name' },
+  args: { label: 'Implicit Name' },
 };

code/addons/docs/template/stories/stories-mdx/play-functions.stories.mdx

@@ -15,18 +15,14 @@ This file demonstrates defining stories inside MDX.
 <Canvas>
   <Story
     name="Component Play"
-    args={{
-      children: 'Component Play',
-    }}
+    args={{ label: 'Component Play' }}
   />
 </Canvas>
 
 <Canvas>
   <Story
     name="Story Play"
-    args={{
-      children: 'Story Play',
-    }}
+    args={{ label: 'Story Play' }}
     play={() => console.log('story play')}
   />
 </Canvas>

code/addons/links/template/stories/linkto.stories.ts

@@ -4,7 +4,7 @@ import { linkTo } from '@storybook/addon-links';
 export default {
   component: globalThis.Components.Button,
   args: {
-    children: 'Click Me!',
+    label: 'Click Me!',
   },
   parameters: {
     chromatic: { disable: true },

code/addons/viewport/template/stories/parameters.stories.ts

@@ -4,7 +4,7 @@ import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
 export default {
   component: globalThis.Components.Button,
   args: {
-    children: 'Click Me!',
+    label: 'Click Me!',
   },
   parameters: {
     viewport: {

code/frameworks/angular/template/stories/angular-mdx.stories.mdx

@@ -15,9 +15,9 @@ export const Button = globalThis.Components.Button;
 <Canvas>
   <Story name="Angular Story">
     {{
-      template: `<storybook-button-component [children]="text" (onClick)="onClick($event)"></storybook-button-component>`,
+      template: `<storybook-button-component [label]="text" (onClick)="onClick($event)"></storybook-button-component>`,
       props: {
-        children: 'hello button',
+        label: 'hello button',
         onClick: () => {},
       },
     }}

code/lib/cli/rendererAssets/aurelia/1-Button.stories.ts

@@ -7,7 +7,7 @@ export default {
   title: 'Button',
   component: Button,
   argTypes: {
-    text: { control: 'text' },
+    label: { control: 'text' },
   },
 };
 
@@ -18,19 +18,19 @@ const Template = (args) => ({
 
 export const Text = Template.bind({});
 Text.args = {
-  text: 'Button',
+  label: 'Button',
   onClick: action('onClick'),
 };
 
 export const Emoji = Template.bind({});
 Emoji.args = {
-  text: '😀 😎 👍 💯',
+  label: '😀 😎 👍 💯',
 };
 
 export const TextWithAction = () => ({
   component: Button,
   props: {
-    text: 'Trigger Action',
+    label: 'Trigger Action',
     onClick: () => action('This was clicked')(),
   },
 });
@@ -41,7 +41,7 @@ TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
 export const ButtonWithLinkToAnotherStory = () => ({
   component: Button,
   props: {
-    text: 'Go to Welcome Story',
+    label: 'Go to Welcome Story',
     onClick: linkTo('example-introduction--page'),
   },
 });

code/lib/cli/rendererAssets/aurelia/button.ts

@@ -4,7 +4,7 @@ import { customElement, bindable } from 'aurelia';
   name: 'storybook-button-component',
   template: `
   <template>
-    <button click.delegate="onClick($event)">\${text}</button>
+    <button click.delegate="onClick($event)">\${label}</button>
     <style>
     button {
       border: 1px solid #eee;
@@ -21,7 +21,7 @@ import { customElement, bindable } from 'aurelia';
 })
 export default class Button {
   @bindable()
-  text = '';
+  label = '';
 
   @bindable()
   onClick: MouseEvent;

code/lib/cli/rendererAssets/ember/1-Button.stories.js

@@ -7,26 +7,26 @@ export default {
   title: 'Button',
   // More on argTypes: https://storybook.js.org/docs/ember/api/argtypes
   argTypes: {
-    children: { control: 'text' },
+    label: { control: 'text' },
   },
 };
 
 // More on component templates: https://storybook.js.org/docs/ember/writing-stories/introduction#using-args
 const Template = (args) => ({
-  template: hbs`<button {{action onClick}}>{{children}}</button>`,
+  template: hbs`<button {{action onClick}}>{{label}}</button>`,
   context: args,
 });
 
 export const Text = Template.bind({});
 // More on args: https://storybook.js.org/docs/ember/writing-stories/args
 Text.args = {
-  children: 'Button',
+  label: 'Button',
   onClick: action('onClick'),
 };
 
 export const Emoji = Template.bind({});
 Emoji.args = {
-  children: '😀 😎 👍 💯',
+  label: '😀 😎 👍 💯',
 };
 
 export const TextWithAction = () => ({

code/lib/cli/rendererAssets/marko/1-Button.stories.js

@@ -6,7 +6,7 @@ export default {
   title: 'Button',
   // More on argTypes: https://storybook.js.org/docs/marko/api/argtypes
   argTypes: {
-    children: { control: 'text' },
+    label: { control: 'text' },
   },
 };
 
@@ -19,6 +19,6 @@ const Template = (args) => ({
 export const Text = Template.bind({});
 // More on args: https://storybook.js.org/docs/marko/writing-stories/args
 Text.args = {
-  children: 'Button',
+  label: 'Button',
   onClick: action('onClick'),
 };

code/lib/cli/rendererAssets/marko/Button.marko

@@ -9,5 +9,5 @@ class {
 }
 
 <div>
-  <button type="button" on-click("handleClick")>${input.children}</button>
+  <button type="button" on-click("handleClick")>${input.label}</button>
 </div>

code/lib/cli/rendererAssets/mithril/Button.js

@@ -4,7 +4,7 @@ import m from 'mithril';
 import './button.css';
 
 export const Button = {
-  view: ({ children, attrs }) => {
+  view: ({ label, attrs }) => {
     const mode = attrs.primary ? 'storybook-button--primary' : 'storybook-button--secondary';
     const size = attrs.size || 'medium';
 
@@ -15,7 +15,7 @@ export const Button = {
         style={attrs.backgroundColor && { backgroundColor: attrs.backgroundColor }}
         onclick={attrs.onClick}
       >
-        {children}
+        {label}
       </button>
     );
   },