Merge branch 'next' into tech/core-builder

examples/vue-3-cli/src/stories/OverrideArgs.stories.js

@@ -0,0 +1,43 @@
+import OverrideArgs from './OverrideArgs.vue';
+
+// Emulate something that isn't serializable
+const icons = {
+  Primary: {
+    template: '<span>Primary Icon</span>',
+  },
+  Secondary: {
+    template: '<span>Secondary Icon</span>',
+  },
+};
+
+export default {
+  title: 'Example/Override Args',
+  component: OverrideArgs,
+  argTypes: {
+    // To show that other props are passed through
+    backgroundColor: { control: 'color' },
+    icon: {
+      control: {
+        type: 'select',
+        options: Object.keys(icons),
+      },
+      defaultValue: 'Primary',
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => {
+  return {
+    props: Object.keys(argTypes),
+    components: { OverrideArgs },
+    template: '<override-args v-bind="$props" :icon="icon" />',
+    setup(props) {
+      return {
+        icon: icons[props.icon],
+      };
+    },
+  };
+};
+
+export const TestOne = Template.bind({});
+export const TestTwo = Template.bind({});

examples/vue-3-cli/src/stories/OverrideArgs.vue

@@ -0,0 +1,41 @@
+<template>
+  <button type="button" :class="classes" :style="style">
+    <!-- You can use <component /> with `:is` when passing a component as a prop -->
+    <component :is="icon" />
+  </button>
+</template>
+
+<script lang="typescript">
+import './button.css';
+import { h, computed, reactive } from 'vue';
+
+export default {
+  name: 'override-args',
+
+  props: {
+    icon: {
+      type: Object,
+      required: true,
+    },
+
+    backgroundColor: {
+      type: String
+    },
+  },
+
+  // @ts-ignore
+  setup(props, { emit }) {
+    const classes = {
+      'storybook-button': true,
+      'storybook-button--primary': true,
+      'storybook-button--large': true,
+    };
+    const style = computed(() => ({
+      backgroundColor: props.backgroundColor,
+    }));
+
+    // Notice that `icon` prop component is still passed through even though it isn't mapped
+    return { classes, style, }
+  },
+};
+</script>

lib/addons/src/types.ts

@@ -166,7 +166,7 @@ export type BaseDecorators<StoryFnReturnType> = Array<
 export interface BaseAnnotations<Args, StoryFnReturnType> {
   /**
    * Dynamic data that are provided (and possibly updated by) Storybook and its addons.
-   * @see [Arg story inputs](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/formats/component-story-format/index.md#args-story-inputs)
+   * @see [Arg story inputs](https://storybook.js.org/docs/react/api/csf#args-story-inputs)
    */
   args?: Partial<Args>;
 

lib/components/src/Zoom/Zoom.stories.tsx

@@ -10,7 +10,7 @@ export default {
     },
   },
   parameters: {
-    chromatic: { delay: 300 },
+    chromatic: { delay: 500, diffThreshold: 0.2 },
   },
 };
 const EXAMPLE_ELEMENT = (