Updates Code example [LG-2954, LG-2950, LG-2951] (#1700)

* Update Portal.story.tsx

* moves menu item children in story

* ignore stories.js*

* Update StoryMeta.ts

* moves menu children back

* import StoryMeta in typography story

* Update Toast.story.tsx

* Updates default `as` prop in SB

* updates Button tsdoc

* add comments

* Update Toast.story.tsx

* rm children, as from default StoryMeta

* fix story meta tests

* Create lovely-drinks-fix.md

* use correct constant in seg-ctrl story

* matk storybookArgTypes as const

* changesets

* Rename type to StoryMetaType

* Update small-baboons-smile.md

* fixes prop types in banner & box

* rm children from excluded params

* explicitly exclude children from args.

Convert to using StoryMeta

* Create lovely-zebras-shout.md

* ts fix

* exclude props from table story

* adds display name to Stepper

* Create early-suns-protect.md

Author: TheSonOfThomp

.changeset/early-suns-protect.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/stepper': patch
+---
+
+Adds explicit `displayName` for Stepper

.changeset/lovely-drinks-fix.md

@@ -0,0 +1,10 @@
+---
+'@leafygreen-ui/button': patch
+'@leafygreen-ui/lib': patch
+'@leafygreen-ui/menu': patch
+'@leafygreen-ui/portal': patch
+'@leafygreen-ui/toast': patch
+'@leafygreen-ui/typography': patch
+---
+
+Updates TSDocs

.eslintignore

@@ -4,4 +4,4 @@ lib
 packages/icon/src/glyphs/*.svg
 packages/icon/src/generated/*.tsx
 storybook-static
-packages/**/stories.js
+packages/**/stories.js*

.gitignore

@@ -39,7 +39,7 @@ parsed-docs.json
 packages/**/tsdoc.json
 
 # Compiled story files
-packages/**/stories.js
+packages/**/stories.js*
 
 # Local yarn releases
-.yarn
+.yarn

.prettierignore

@@ -8,4 +8,4 @@ storybook-static
 **/package.json
 **/tsconfig.json
 **/tsdoc.json
-packages/**/stories.js
+packages/**/stories.js*

packages/button/src/Button.story.tsx

@@ -1,33 +1,23 @@
-import React, { ElementType } from 'react';
-import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { Story } from '@storybook/react';
 
-import { BoxProps } from '@leafygreen-ui/box';
 import Icon, { glyphs } from '@leafygreen-ui/icon';
 import LeafygreenProvider from '@leafygreen-ui/leafygreen-provider';
-import { storybookArgTypes } from '@leafygreen-ui/lib';
+import { StoryMeta } from '@leafygreen-ui/lib';
 
 import { Size } from './types';
 import Button, { ButtonProps, Variant } from '.';
 
-type ButtonStoryProps = BoxProps<ElementType<HTMLButtonElement>, ButtonProps>;
-
-// TODO: Ensure that TSDocs are being read from the Button component directly, not this StoryButton component
-/**
- * Buttons allow users to take actions, and make choices, with a single tap.
- */
-export const StoryButton: React.FC<ButtonStoryProps> = props => (
-  <Button {...props} />
-);
-
-export default {
+export default StoryMeta({
   title: 'Components/Button',
-  component: StoryButton,
+  component: Button,
   excludeStories: ['StoryButton'],
   args: {
     children: 'MongoDB',
     variant: Variant.Default,
   },
   parameters: {
+    default: 'Default',
     controls: {
       exclude: ['ref', 'onClick', 'className'],
     },
@@ -57,15 +47,14 @@ export default {
     href: {
       control: 'text',
     },
-    ...storybookArgTypes,
   },
-} as Meta<ButtonStoryProps>;
+});
 
-const Template: Story<ButtonStoryProps> = ({
+const Template: Story<ButtonProps> = ({
   leftGlyph,
   rightGlyph,
   ...args
-}: ButtonStoryProps) => (
+}: ButtonProps) => (
   <Button
     // @ts-expect-error
     leftGlyph={leftGlyph ? <Icon glyph={leftGlyph} /> : undefined}
@@ -105,7 +94,7 @@ BaseGreen.args = {
   variant: Variant.BaseGreen,
 };
 
-export const WithGlobalDarkMode: Story<ButtonStoryProps> = args => (
+export const WithGlobalDarkMode: Story<ButtonProps> = args => (
   <LeafygreenProvider darkMode={true}>
     <Button {...args}>Test</Button>
   </LeafygreenProvider>

packages/button/src/types.ts

@@ -56,7 +56,7 @@ export interface ButtonProps {
   /**
    * Specifies the `type` property of the HTML button element
    *
-   * @default 'button'
+   * @default button
    */
   type?: HTMLProps<HTMLButtonElement>['type'];
 
@@ -68,7 +68,7 @@ export interface ButtonProps {
   /**
    * Sets the variant for the Button
    *
-   * @default 'default'
+   * @default default
    */
   variant?: Variant;
 
@@ -89,7 +89,7 @@ export interface ButtonProps {
   /**
    * Sets the size for the Button
    *
-   * @default 'default'
+   * @default default
    */
   size?: Size;
 
@@ -127,6 +127,7 @@ export interface ButtonProps {
    * <Button as={Linker} />
    * ```
    * @type HTMLElement | React.Component
+   * @default button
    */
   as?: React.ElementType<any>;
 }

packages/lib/src/storybook/IntrinsicElements.ts

@@ -1,6 +1,6 @@
 const IntrinsicElements: Array<keyof JSX.IntrinsicElements> = [
-  'symbol',
-  // 'object',
+  // 'symbol', - SVG only element
+  // 'object', - irrelevant for `as` prop
   'small',
   'button',
   'a',
@@ -9,31 +9,31 @@ const IntrinsicElements: Array<keyof JSX.IntrinsicElements> = [
   // 'area', - Void element - cannot accept Children
   'article',
   'aside',
-  'audio',
+  // 'audio', irrelevant for `as` prop
   'b',
   // 'base', - Void element - cannot accept Children
-  'bdi',
-  'bdo',
+  // 'bdi', irrelevant for `as` prop
+  // 'bdo', irrelevant for `as` prop
   'big',
   'blockquote',
-  'body',
+  // 'body', irrelevant for `as` prop
   // 'br', - Void element - cannot accept Children
-  'canvas',
+  // 'canvas', irrelevant for `as` prop
   'caption',
   'cite',
   'code',
   // 'col', - Void element - cannot accept Children
-  'colgroup',
-  'data',
-  'datalist',
+  // 'colgroup', irrelevant for `as` prop
+  // 'data', irrelevant for `as` prop
+  // 'datalist', irrelevant for `as` prop
   'dd',
   'del',
   'details',
   'dfn',
   'dialog',
   'div',
-  'dl',
-  'dt',
+  // 'dl', irrelevant for `as` prop
+  // 'dt', irrelevant for `as` prop
   'em',
   // 'embed', - Void element - cannot accept Children
   'fieldset',
@@ -51,9 +51,9 @@ const IntrinsicElements: Array<keyof JSX.IntrinsicElements> = [
   'header',
   'hgroup',
   // 'hr', - Void element - cannot accept Children
-  'html',
+  // 'html', irrelevant for `as` prop
   'i',
-  'iframe',
+  // 'iframe', irrelevant for `as` prop
   // 'img', - Void element - cannot accept Children
   // 'input', - Void element - cannot accept Children
   'ins',
@@ -71,14 +71,14 @@ const IntrinsicElements: Array<keyof JSX.IntrinsicElements> = [
   // 'meta', - Void element - cannot accept Children
   'meter',
   'nav',
-  'noindex',
+  // 'noindex', irrelevant for `as` prop
   'noscript',
   'ol',
-  'optgroup',
-  'option',
-  'output',
+  // 'optgroup', irrelevant for `as` prop
+  // 'option', irrelevant for `as` prop
+  // 'output', irrelevant for `as` prop
   'p',
-  'param',
+  // 'param', irrelevant for `as` prop
   'picture',
   'pre',
   'progress',
@@ -99,11 +99,11 @@ const IntrinsicElements: Array<keyof JSX.IntrinsicElements> = [
   'sub',
   'summary',
   'sup',
-  'table',
+  // 'table', irrelevant for `as` prop
   'template',
   'tbody',
   'td',
-  'textarea',
+  // 'textarea', irrelevant for `as` prop
   'tfoot',
   'th',
   'thead',
@@ -113,11 +113,11 @@ const IntrinsicElements: Array<keyof JSX.IntrinsicElements> = [
   // 'track', - Void element - cannot accept Children
   'u',
   'ul',
-  'var',
-  'video',
+  // 'var', irrelevant for `as` prop
+  // 'video', irrelevant for `as` prop
   // 'wbr', - Void element - cannot accept Children
-  'webview',
-  'svg',
+  // 'webview', irrelevant for `as` prop
+  // 'svg', - SVG only element
 ];
 
 export default IntrinsicElements;

packages/lib/src/storybook/StoryMeta.ts

@@ -50,12 +50,16 @@ export const baseMeta: Partial<StoryMetaType<any>> = {
   },
 };
 
-export const StoryMeta = <T extends React.ElementType>(
-  meta: StoryMetaType<T> = baseMeta as StoryMetaType<T>,
-): StoryMetaType<T> => {
+export const StoryMeta = <
+  T extends React.ElementType,
+  XP extends Record<string, any>,
+>(
+  meta: StoryMetaType<T, XP> = baseMeta as StoryMetaType<T, XP>,
+): StoryMetaType<T, XP> => {
   return mergeWith(meta, baseMeta, (metaVal, baseVal) => {
     if (Array.isArray(metaVal)) return metaVal.concat(baseVal);
     if (typeof metaVal === 'string') return metaVal;
     // default to _.merge behavior
+    return;
   });
 };

packages/lib/src/storybook/storybookArgTypes.ts

@@ -24,14 +24,6 @@ export const storybookArgTypes = {
     description: 'Render the component in dark mode.',
     control: 'boolean',
   },
-  ref: {
-    description: '`ref` passed to the component',
-    control: 'none',
-  },
-  onClick: {
-    description: 'Function to handle a click event.',
-    control: 'none',
-  },
   children: {
     description: 'Element rendered inside the component',
     control: 'text',
@@ -42,5 +34,6 @@ export const storybookArgTypes = {
     options: IntrinsicElements,
     type: { name: 'string' },
     control: { type: 'select' },
+    defaultValue: 'button',
   },
 } as const;