change every button in lib/cli/renderassets and renderer/*/template to use the label prop

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>
     );
   },

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

@@ -14,30 +14,30 @@ export default {
 };
 
 // More on component templates: https://storybook.js.org/docs/mithril/writing-stories/introduction#using-args
-const Template = ({ children, ...args }) => ({
+const Template = ({ label, ...args }) => ({
-  view: () => m(Button, args, children),
+  view: () => m(Button, args, label),
 });
 
 export const Primary = Template.bind({});
 // More on args: https://storybook.js.org/docs/mithril/writing-stories/args
 Primary.args = {
   primary: true,
-  children: 'Button',
+  label: 'Button',
 };
 
 export const Secondary = Template.bind({});
 Secondary.args = {
-  children: 'Button',
+  label: 'Button',
 };
 
 export const Large = Template.bind({});
 Large.args = {
   size: 'large',
-  children: 'Button',
+  label: 'Button',
 };
 
 export const Small = Template.bind({});
 Small.args = {
   size: 'small',
-  children: 'Button',
+  label: 'Button',
 };

code/lib/cli/rendererAssets/mithril/Header.stories.js

@@ -7,8 +7,8 @@ export default {
   component: Header,
 };
 
-const Template = ({ children, ...args }) => ({
+const Template = ({ label, ...args }) => ({
-  view: () => m(Header, args, children),
+  view: () => m(Header, args, label),
 });
 
 export const LoggedIn = Template.bind({});

code/lib/cli/rendererAssets/mithril/Page.stories.js

@@ -8,8 +8,8 @@ export default {
   component: Page,
 };
 
-const Template = ({ children, ...args }) => ({
+const Template = ({ label, ...args }) => ({
-  view: () => m(Page, args, children),
+  view: () => m(Page, args, label),
 });
 
 export const LoggedIn = Template.bind({});

code/lib/cli/rendererAssets/vue/Button.stories.js

@@ -25,22 +25,22 @@ export const Primary = Template.bind({});
 // More on args: https://storybook.js.org/docs/vue/writing-stories/args
 Primary.args = {
   primary: true,
-  children: 'Button',
+  label: 'Button',
 };
 
 export const Secondary = Template.bind({});
 Secondary.args = {
-  children: 'Button',
+  label: 'Button',
 };
 
 export const Large = Template.bind({});
 Large.args = {
   size: 'large',
-  children: 'Button',
+  label: 'Button',
 };
 
 export const Small = Template.bind({});
 Small.args = {
   size: 'small',
-  children: 'Button',
+  label: 'Button',
 };

code/lib/cli/rendererAssets/vue/Button.vue

@@ -1,5 +1,5 @@
 <template>
-  <button type="button" :class="classes" @click="onClick" :style="style">{{ children }}</button>
+  <button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
 </template>
 
 <script>
@@ -9,7 +9,7 @@ export default {
   name: 'my-button',
 
   props: {
-    children: {
+    label: {
       type: String,
       required: true,
     },

code/lib/cli/rendererAssets/vue/Header.vue

@@ -13,9 +13,9 @@
       </div>
       <div>
         <span class="welcome" v-if="user">Welcome, <b>{{ user.name }}</b>!</span>
-        <my-button size="small" @onClick="onLogout" children="Log out" v-if="user" />
+        <my-button size="small" @onClick="onLogout" label="Log out" v-if="user" />
-        <my-button size="small" @onClick="onLogin" children="Log in" v-if="!user" />
+        <my-button size="small" @onClick="onLogin" label="Log in" v-if="!user" />
-        <my-button primary size="small" @onClick="onCreateAccount" children="Sign up" v-if="!user" />
+        <my-button primary size="small" @onClick="onCreateAccount" label="Sign up" v-if="!user" />
       </div>
     </div>
   </header>

code/lib/cli/rendererAssets/vue3/Button.stories.js

@@ -31,22 +31,22 @@ export const Primary = Template.bind({});
 // More on args: https://storybook.js.org/docs/vue/writing-stories/args
 Primary.args = {
   primary: true,
-  children: 'Button',
+  label: 'Button',
 };
 
 export const Secondary = Template.bind({});
 Secondary.args = {
-  children: 'Button',
+  label: 'Button',
 };
 
 export const Large = Template.bind({});
 Large.args = {
   size: 'large',
-  children: 'Button',
+  label: 'Button',
 };
 
 export const Small = Template.bind({});
 Small.args = {
   size: 'small',
-  children: 'Button',
+  label: 'Button',
 };

code/lib/cli/rendererAssets/vue3/Button.vue

@@ -1,5 +1,5 @@
 <template>
-  <button type="button" :class="classes" @click="onClick" :style="style">{{ children }}</button>
+  <button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
 </template>
 
 <script>
@@ -10,7 +10,7 @@ export default {
   name: 'my-button',
 
   props: {
-    children: {
+    label: {
       type: String,
       required: true,
     },

code/lib/cli/rendererAssets/vue3/Header.vue

@@ -13,9 +13,9 @@
       </div>
       <div>
         <span class="welcome" v-if="user">Welcome, <b>{{ user.name }}</b>!</span>
-        <my-button size="small" @click="$emit('logout')" children="Log out" v-if="user" />
+        <my-button size="small" @click="$emit('logout')" label="Log out" v-if="user" />
-        <my-button size="small" @click="$emit('login')" children="Log in" v-if="!user" />
+        <my-button size="small" @click="$emit('login')" label="Log in" v-if="!user" />
-        <my-button primary size="small" @click="$emit('createAccount')" children="Sign up" v-if="!user" />
+        <my-button primary size="small" @click="$emit('createAccount')" label="Sign up" v-if="!user" />
       </div>
     </div>
   </header>

code/lib/cli/templates/react-native/template-csf/storybook/stories/Button/index.js

@@ -2,16 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { TouchableHighlight } from 'react-native';
 
-export default function Button({ onPress, children }) {
+export default function Button({ onPress, label }) {
-  return <TouchableHighlight onPress={onPress}>{children}</TouchableHighlight>;
+  return <TouchableHighlight onPress={onPress}>{label}</TouchableHighlight>;
 }
 
 Button.defaultProps = {
-  children: null,
+  label: null,
   onPress: () => {},
 };
 
 Button.propTypes = {
-  children: PropTypes.node,
+  label: PropTypes.node,
   onPress: PropTypes.func,
 };

code/lib/cli/templates/react-native/template-csf/storybook/stories/CenterView/index.js

@@ -3,14 +3,14 @@ import PropTypes from 'prop-types';
 import { View } from 'react-native';
 import style from './style';
 
-export default function CenterView({ children }) {
+export default function CenterView({ label }) {
-  return <View style={style.main}>{children}</View>;
+  return <View style={style.main}>{label}</View>;
 }
 
 CenterView.defaultProps = {
-  children: null,
+  label: null,
 };
 
 CenterView.propTypes = {
-  children: PropTypes.node,
+  label: PropTypes.node,
 };

code/renderers/html/template/components/Button.js

@@ -2,7 +2,7 @@
 export const Button = (args) => {
   const button = document.createElement('button');
 
-  button.innerHTML = args.children;
+  button.innerHTML = args.label;
   button.addEventListener('click', args.onClick);
 
   return button;

code/renderers/react/template/components/Button.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export const Button = ({ onClick, children }) => (
+export const Button = ({ onClick, label }) => (
   <button type="button" onClick={onClick}>
-    {children}
+    {label}
   </button>
 );
 
 Button.propTypes = {
   onClick: PropTypes.func.isRequired,
-  children: PropTypes.node.isRequired,
+  label: PropTypes.string.isRequired,
 };

code/renderers/svelte/template/components/Button.svelte

@@ -19,7 +19,7 @@
   /**
    * Button contents
    */
-  export let children = '';
+  export let label = '';
 
   let mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
 
@@ -41,5 +41,5 @@
   {style}
   on:click={onClick}
 >
-  {children}
+  {label}
 </button>

code/renderers/svelte/template/stories/views/ButtonView.svelte

@@ -29,7 +29,7 @@
 
 <h1>Button view</h1>
 
-<Button {primary} on:click on:click={handleClick} children="{text}: {count}" />
+<Button {primary} on:click on:click={handleClick} label="{text}: {count}" />
 
 <p>A little text to show this is a view.</p>
 <p>If we need to test components in a Svelte environment, for instance to test slot behaviour,</p>

code/renderers/vue/template/components/Button.vue

@@ -1,5 +1,5 @@
 <template>
-  <button type="button" :class="classes" @click="onClick" :style="style">{{ children }}</button>
+  <button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
 </template>
 
 <script>
@@ -9,7 +9,7 @@ export default {
   name: 'my-button',
 
   props: {
-    children: {
+    label: {
       type: String,
       required: true,
     },

code/renderers/vue/template/stories/core-template.stories.js

@@ -3,4 +3,4 @@ export default {
   component: {},
 };
 
-export const StringOnly = () => '<global-button :primary="true" children="Primary button" />';
+export const StringOnly = () => '<global-button :primary="true" label="Primary button" />';

code/renderers/vue/template/stories/custom-decorators.stories.js

@@ -29,7 +29,7 @@ export default {
 };
 
 export const Template = () => ({
-  template: '<global-button children="MyButton with template" />',
+  template: '<global-button label="MyButton with template" />',
 });
 
 export const WithData = (_args, { parameters: { fileName, ...parameters }, hooks, ...rest }) => ({
@@ -38,6 +38,6 @@ export const WithData = (_args, { parameters: { fileName, ...parameters }, hooks
 
 export const Render = () => ({
   render(h) {
-    return h(MyButton, { props: { color: 'pink', children: 'renders component: MyButton' } });
+    return h(MyButton, { props: { color: 'pink', label: 'renders component: MyButton' } });
   },
 });

code/renderers/vue/template/stories/custom-rendering.stories.js

@@ -12,7 +12,7 @@ export const Render = () => ({
 
 export const RenderComponent = () => ({
   render(h) {
-    return h(MyButton, { props: { color: 'pink', children: 'renders component: MyButton' } });
+    return h(MyButton, { props: { color: 'pink', label: 'renders component: MyButton' } });
   },
 });
 
@@ -26,7 +26,7 @@ export const Template = () => ({
 
 export const TemplateComponent = () => ({
   components: { MyButton },
-  template: '<my-button children="MyButton rendered in a template" />',
+  template: '<my-button label="MyButton rendered in a template" />',
 });
 
 export const TemplateMethods = () => ({
@@ -34,7 +34,7 @@ export const TemplateMethods = () => ({
   template: `
       <p>
         <em>Clicking the button will navigate to another story using the 'addon-links'</em><br/>
-        <my-button :rounded="true" @click="action" children="MyButton rendered in a template + props & methods" />
+        <my-button :rounded="true" @click="action" label="MyButton rendered in a template + props & methods" />
       </p>`,
   methods: {
     action: () => {},
@@ -46,7 +46,7 @@ export const TemplateMethods = () => ({
 //   components: { MyButton },
 //   render() {
 //     // eslint-disable-next-line react/react-in-jsx-scope, react/no-children-prop
-//     return <my-button children="MyButton rendered with JSX" />;
+//     return <my-button label="MyButton rendered with JSX" />;
 //   },
 // });
 
@@ -57,6 +57,6 @@ export const PreRegisteredComponent = () => ({
   template: `
       <p>
         <em>This component was pre-registered in .storybook/preview.js</em><br/>
-        <global-button children="GlobalButton rendered in a template" />
+        <global-button label="GlobalButton rendered in a template" />
       </p>`,
 });

code/renderers/vue/template/stories/vue-mdx.stories.mdx

@@ -19,7 +19,7 @@ export const Template = (args, { argTypes }) => ({
   <Story name="Primary">
     {{
       components: { MyButton: Button },
-      template: '<my-button :primary="true" children="Primary button" />',
+      template: '<my-button :primary="true" label="Primary button" />',
     }}
   </Story>
 </Canvas>
@@ -30,7 +30,7 @@ export const Template = (args, { argTypes }) => ({
   <Story name="Secondary">
     {{
       components: { MyButton: Button },
-      template: '<my-button :primary="false" children="Secondary button" />',
+      template: '<my-button :primary="false" label="Secondary button" />',
     }}
   </Story>
 </Canvas>
@@ -38,7 +38,7 @@ export const Template = (args, { argTypes }) => ({
 ## From template
 
 <Canvas>
-  <Story name="From Template" args={{ children: 'From template' }}>
+  <Story name="From Template" args={{ label: 'From template' }}>
     {Template.bind({})}
   </Story>
 </Canvas>

code/renderers/vue3/template/components/Button.vue

@@ -1,5 +1,5 @@
 <template>
-  <button type="button" :class="classes" @click="onClick" :style="style">{{ children }}</button>
+  <button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
 </template>
 
 <script>
@@ -10,7 +10,7 @@ export default {
   name: 'my-button',
 
   props: {
-    children: {
+    label: {
       type: String,
       required: true,
     },

code/renderers/vue3/template/stories/GlobalUsage.stories.js

@@ -18,12 +18,12 @@ export default {
 export const Primary = {
   args: {
     primary: true,
-    children: 'Globally Defined',
+    label: 'Globally Defined',
   },
 };
 
 export const Secondary = {
   args: {
-    children: 'Globally Defined',
+    label: 'Globally Defined',
   },
 };

code/renderers/vue3/template/stories/decorators.stories.js

@@ -8,7 +8,7 @@ export default {
 };
 
 export const ComponentTemplate = {
-  args: { children: 'With component' },
+  args: { label: 'With component' },
   decorators: [
     () => ({
       components: {
@@ -23,7 +23,7 @@ export const ComponentTemplate = {
 };
 
 export const SimpleTemplate = {
-  args: { children: 'With border' },
+  args: { label: 'With border' },
   decorators: [
     () => ({
       template: `
@@ -36,7 +36,7 @@ export const SimpleTemplate = {
 };
 
 export const VueWrapper = {
-  args: { children: 'With Vue wrapper' },
+  args: { label: 'With Vue wrapper' },
   decorators: [
     (storyFn) => {
       // Call the `storyFn` to receive a component that Vue can render
@@ -50,7 +50,7 @@ export const VueWrapper = {
 };
 
 export const DynamicWrapper = {
-  args: { children: 'With dynamic wrapper', primary: true },
+  args: { label: 'With dynamic wrapper', primary: true },
   argTypes: {
     // Number type is detected, but we still want to constrain the range from 1-6
     level: { control: { type: 'range', min: 1, max: 6 } },

code/renderers/vue3/template/stories/vue3-mdx.stories.mdx

@@ -21,7 +21,7 @@ export const Template = (args, { argTypes }) => ({
   <Story name="Primary">
     {{
       components: { MyButton: Button },
-      template: '<my-button :primary="true" :children="Primary button" />',
+      template: '<my-button :primary="true" :label="Primary button" />',
     }}
   </Story>
 </Canvas>
@@ -32,7 +32,7 @@ export const Template = (args, { argTypes }) => ({
   <Story name="Secondary">
     {{
       components: { MyButton: Button },
-      template: '<my-button :primary="false" :children="Secondary button" />',
+      template: '<my-button :primary="false" :label="Secondary button" />',
     }}
   </Story>
 </Canvas>
@@ -40,7 +40,7 @@ export const Template = (args, { argTypes }) => ({
 ## From template
 
 <Canvas>
-  <Story name="From Template" args={{ children: 'From template' }}>
+  <Story name="From Template" args={{ label: 'From template' }}>
     {Template.bind({})}
   </Story>
 </Canvas>

code/renderers/web-components/template/components/Button.js

@@ -5,7 +5,7 @@ import { html, LitElement } from 'lit';
 const { CustomEvent, customElements } = globalThis;
 
 /**
- * @attr {string} children - Children of the button
+ * @attr {string} label - Label of the button
  * @attr {string} size - Size of the button, can be "small", "medium" or "large"; default is "medium".
  * @attr {string} backgroundColor - Color of the button's background
  *
@@ -24,7 +24,7 @@ export class SbButton extends LitElement {
   // https://github.com/Polymer/lit-html/issues/1476
   static get properties() {
     return {
-      children: { type: String, reflect: true },
+      label: { type: String, reflect: true },
       primary: { type: Boolean },
       size: { type: String },
       backgroundColor: { type: String, attribute: 'background-color' },
@@ -36,7 +36,7 @@ export class SbButton extends LitElement {
     this.primary = undefined;
     this.backgroundColor = undefined;
     this.size = 'medium';
-    this.children = '';
+    this.label = '';
   }
 
   onClick() {
@@ -56,7 +56,7 @@ export class SbButton extends LitElement {
         class=${['storybook-button', `storybook-button--${this.size ?? 'medium'}`, mode].join(' ')}
         @click="${this.onClick}"
       >
-        ${this.children}
+        ${this.label}
       </button>
     `;
   }