Merge branch 'next' into 10723-update-cli-template-stories

MIGRATION.md

@@ -383,10 +383,10 @@ The story store no longer emits `renderCurrentStory`/`RENDER_CURRENT_STORY` to t
 
 We've removed the ability to specify the hierarchy separators (how you control the grouping of story kinds in the sidebar). From Storybook 6.0 we have a single separator `/`, which cannot be configured.
 
-If you are currently using using custom separators, we encourage you to migrate to using `/` as the sole separator. If you are using `|` or `.` as a separator currently, we provide a codemod, [`upgrade-hierarchy-separators`](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md#upgrade-hierarchy-separators), that can be used to rename all your components.
+If you are currently using using custom separators, we encourage you to migrate to using `/` as the sole separator. If you are using `|` or `.` as a separator currently, we provide a codemod, [`upgrade-hierarchy-separators`](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md#upgrade-hierarchy-separators), that can be used to rename your components. **Note: the codemod will not work for `.mdx` components, you will need to make the changes by hand.**
 
 ```
-yarn sb migrate upgrade-hierarchy-separators --glob="*.stories.js"
+npx sb@next migrate upgrade-hierarchy-separators --glob="*/**/*.stories.@(tsx|jsx|ts|js)"
 ```
 
 We also now default to showing "roots", which are non-expandable groupings in the sidebar for the top-level groups. If you'd like to disable this, set the `showRoots` option in `.storybook/manager.js`:

addons/docs/src/blocks/Meta.tsx

@@ -10,7 +10,7 @@ type Decorator = (...args: any) => any;
 interface MetaProps {
   title: string;
   component?: Component;
-  subcomponents: Record<string, Component>;
+  subcomponents?: Record<string, Component>;
   decorators?: [Decorator];
   parameters?: any;
 }

addons/docs/src/blocks/enhanceSource.test.ts

@@ -6,6 +6,7 @@ const emptyContext: StoryContext = {
   kind: 'foo',
   name: 'bar',
   args: {},
+  argTypes: {},
   globals: {},
   parameters: {},
 };

addons/docs/src/frameworks/common/enhanceArgTypes.test.ts

@@ -35,6 +35,7 @@ const enhance = ({
       },
     },
     args: {},
+    argTypes: {},
     globals: {},
   };
   return enhanceArgTypes(context);

app/vue/src/client/preview/index.ts

@@ -69,6 +69,7 @@ const defaultContext: StoryContext = {
   kind: 'unspecified',
   parameters: {},
   args: {},
+  argTypes: {},
   globals: {},
 };
 

lib/addons/src/types.ts

@@ -56,6 +56,7 @@ export type StoryContext = StoryIdentifier & {
   [key: string]: any;
   parameters: Parameters;
   args: Args;
+  argTypes: ArgTypes;
   globals: Args;
   hooks?: HooksContext;
 };

lib/client-api/src/decorators.ts

@@ -11,6 +11,7 @@ const defaultContext: StoryContext = {
   kind: 'unspecified',
   parameters: {},
   args: {},
+  argTypes: {},
   globals: {},
 };
 

lib/client-api/src/story_store.ts

@@ -375,6 +375,7 @@ export default class StoryStore {
           storyFn: original,
           parameters: accumlatedParameters,
           args: {},
+          argTypes: {},
           globals: {},
         }),
       }),
@@ -391,6 +392,7 @@ export default class StoryStore {
         parameters: this.combineStoryParameters(storyParametersWithArgTypes, kind),
         hooks,
         args: _stories[id].args,
+        argTypes,
         globals: this._globals,
       });
 
@@ -414,6 +416,7 @@ export default class StoryStore {
 
       parameters: { ...storyParameters, argTypes },
       args: initialArgs,
+      argTypes,
       initialArgs,
     };
   }

lib/client-api/src/types.ts

@@ -55,6 +55,7 @@ export type StoreItem = StoryIdentifier & {
   hooks: HooksContext;
   args: Args;
   initialArgs: Args;
+  argTypes: ArgTypes;
 };
 
 export type PublishedStoreItem = StoreItem & {

lib/components/src/ActionBar/ActionBar.tsx

@@ -9,7 +9,6 @@ const Container = styled.div<{}>(({ theme }) => ({
   maxWidth: '100%',
   display: 'flex',
   background: theme.background.content,
-  zIndex: 1,
 }));
 
 export const ActionButton = styled.button<{ disabled: boolean }>(