Merge branch 'next' of github.com:storybookjs/storybook into next

addons/controls/README.md

@@ -84,23 +84,38 @@ export const Reflow = () => {
   const label = text('Label', 'reflow');
   return (
     <>
-      {Array.from({ length: count }, (_, i) => (
-        <Button label={`button ${i}`} />
+      {[...Array(count)].map((_, i) => (
+        <Button key={i} label={`button ${i}`} />
       ))}
     </>
   );
 };
-```
+``` 
 
 And again, as above, this can be rewritten using [fully custom args](https://storybook.js.org/docs/react/essentials/controls#fully-custom-args):
 
 ```jsx
 export const Reflow = ({ count, label, ...args }) => (
-  <>{Array.from({ length: count }, (_, i) => <Button label={`${label} ${i}` {...args}} />)}</>
+  <>
+    {[...Array(count)].map((_, i) => (
+        <Button key={i} label={`${label} ${i}`} {...args} />
+    ))}
+  </>
 );
-Reflow.args = { count: 3, label: 'reflow' };
+
+Reflow.args = { 
+  count: 3, 
+  label: 'reflow' 
+};
+
 Reflow.argTypes = {
-  count: { control: { type: 'range', min: 0, max: 20 } }
+  count: { 
+    control: { 
+      type: 'range', 
+      min: 0, 
+      max: 20 
+    } 
+  }
 };
 ```
 
@@ -125,6 +140,7 @@ export default {
 };
 
 export const Basic = (args) => <Button {...args} />;
+
 Basic.args = {
   label: 'hello',
   borderWidth: 1,