chore: Merge prerelease/minor into prerelease/major (#2183)

.storybook/main.js

@@ -4,6 +4,8 @@ const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
 const modulesPath = path.resolve(__dirname, '../modules');
 const getSpecifications = require('../modules/docs/utils/get-specifications');
 
+const processDocs = process.env.SKIP_DOCGEN !== 'true';
+
 module.exports = {
   stories: [
     '../modules/docs/mdx/**/*.mdx',
@@ -27,56 +29,60 @@ module.exports = {
   },
   webpackFinal: async config => {
     // Get the specifications object and replace with a real object in the spec.ts file
-    const specs = await getSpecifications();
+    if (processDocs) {
+      const specs = await getSpecifications();
+
+      config.module.rules.push({
+        test: /.ts$/,
+        include: [path.resolve(__dirname, '../modules/docs')],
+        use: [
+          {
+            loader: require.resolve('string-replace-loader'),
+            options: {
+              search: '[/* SPEC_FILES_REPLACE_BY_WEBPACK */]',
+              replace: JSON.stringify(specs, null, '  '),
+            },
+          },
+        ],
+      });
+
+      // Load the source code of story files to display in docs.
+      config.module.rules.push({
+        test: /stories.*\.tsx?$/,
+        include: [modulesPath],
+        loaders: [
+          {
+            loader: require.resolve('@storybook/source-loader'),
+            options: {parser: 'typescript'},
+          },
+        ],
+        enforce: 'pre',
+      });
 
+      config.module.rules.push({
+        test: /.+\.tsx?$/,
+        include: [modulesPath],
+        exclude: /examples|stories|spec|codemod|docs/,
+        loaders: [
+          {
+            loader: path.resolve(__dirname, 'symbol-doc-loader'),
+          },
+        ],
+        enforce: 'pre',
+      });
+    }
+
+    // Convert mdx links to point to github
     /**
      * This was added to tell webpack not to parse the typescript.js file in node_modules and suppress these warnings:
      * WARN Module not found: Error: Can't resolve 'perf_hooks' in 'node_modules/typescript/lib'
      * WARN resolve 'perf_hooks' in 'node_modules/typescript/lib
-     * 
+     *
      * These warnings relate to this open GitHub issue: https://github.com/microsoft/TypeScript/issues/39436
      * If you no longer see these warnings when this is config is removed, you can safely delete this config.
-    */ 
-    config.module = {
-      ...config.module,
-      // This solution was taken from this comment: https://github.com/microsoft/TypeScript/issues/39436#issuecomment-817029140
-      noParse: [require.resolve('typescript/lib/typescript.js')],
-    }
-
-    config.module.rules.push({
-      test: /.ts$/,
-      include: [path.resolve(__dirname, '../modules/docs')],
-      use: [
-        {
-          loader: require.resolve('string-replace-loader'),
-          options: {
-            search: '[/* SPEC_FILES_REPLACE_BY_WEBPACK */]',
-            replace: JSON.stringify(specs, null, '  '),
-          },
-        },
-      ],
-    });
-
-    /**
-     * Added this because Storybook 6.3 is on emotion 10, so we rewrote the imports to point to emotion 11
-     * https://github.com/storybookjs/storybook/issues/13145
      */
-    config.resolve = {
-      ...config.resolve,
-      alias: {
-        ...config.resolve.alias,
-        '@emotion/core': '@emotion/react',
-        'emotion-theming': '@emotion/react',
-      },
-    };
+    config.module.noParse = [require.resolve('typescript/lib/typescript.js')];
 
-    // Update @storybook/addon-docs webpack rules to load all .mdx files in storybook
-    const mdxRule = config.module.rules.find(rule => rule.test.toString() === /\.mdx$/.toString());
-    mdxRule.use.find(loader => loader.loader.includes('mdx1-csf')).options['compilers'] = [
-      createCompiler({}),
-    ];
-
-    // Convert mdx links to point to github
     config.module.rules.push({
       test: /\.mdx?$/,
       include: [path.resolve(__dirname, '..')],
@@ -91,19 +97,6 @@ module.exports = {
       ],
     });
 
-    // Load the source code of story files to display in docs.
-    config.module.rules.push({
-      test: /stories.*\.tsx?$/,
-      include: [modulesPath],
-      loaders: [
-        {
-          loader: require.resolve('@storybook/source-loader'),
-          options: {parser: 'typescript'},
-        },
-      ],
-      enforce: 'pre',
-    });
-
     // Load the whole example code of story files to display in docs.
     config.module.rules.push({
       test: /examples\/.*\.tsx?$/,
@@ -116,17 +109,24 @@ module.exports = {
       enforce: 'pre',
     });
 
-    config.module.rules.push({
-      test: /.+\.tsx?$/,
-      include: [modulesPath],
-      exclude: /examples|stories|spec|codemod|docs/,
-      loaders: [
-        {
-          loader: path.resolve(__dirname, 'symbol-doc-loader'),
-        },
-      ],
-      enforce: 'pre',
-    });
+    /**
+     * Added this because Storybook 6.3 is on emotion 10, so we rewrote the imports to point to emotion 11
+     * https://github.com/storybookjs/storybook/issues/13145
+     */
+    config.resolve = {
+      ...config.resolve,
+      alias: {
+        ...config.resolve.alias,
+        '@emotion/core': '@emotion/react',
+        'emotion-theming': '@emotion/react',
+      },
+    };
+
+    // Update @storybook/addon-docs webpack rules to load all .mdx files in storybook
+    const mdxRule = config.module.rules.find(rule => rule.test.toString() === /\.mdx$/.toString());
+    mdxRule.use.find(loader => loader.loader.includes('mdx1-csf')).options['compilers'] = [
+      createCompiler({}),
+    ];
 
     // Load our scss files with postscss.
     // Note: This is the same as @storybook/preset-scss, but with postcss added.
@@ -144,14 +144,6 @@ module.exports = {
       include: modulesPath,
     });
 
-    // Remove progress updates to reduce log lines in Travis
-    // See: https://github.com/storybookjs/storybook/issues/2029
-    if (process.env.TRAVIS) {
-      config.plugins = config.plugins.filter(
-        plugin => plugin.constructor.name !== 'ProgressPlugin'
-      );
-    }
-
     return config;
   },
   babel: async options => ({

modules/docs/mdx/9.0-UPGRADE-GUIDE.mdx

@@ -14,6 +14,7 @@ any questions.
 - [Removals](#Removals)
   - [Drawer](#drawer)
   - [Layout and Column](#layout-and-column)
+  - [composeModelHooks](#composemodelhook)
   - [Stack, HStack, and VStack](#stack-hstack-and-vstack)
   - [focusRing](#focusring)
   - [useCanvasTheme and getCanvasTheme](#usecanvastheme-and-getcanvastheme)
@@ -147,6 +148,16 @@ layouts using `Grid`.
 
 ---
 
+### composeModelHooks
+
+**PR:** [#2180](https://github.com/Workday/canvas-kit/pull/2180)
+
+We're removing this hook. It is a duplicate of `componseHooks` that was never used by anything. This
+should have no impact on your code. We couldn't find any references to this function in any code
+bases we have access to.
+
+---
+
 ### Stack, HStack and VStack
 
 **PR:** [#2012](https://github.com/Workday/canvas-kit/pull/2012)

modules/preview-react/table/stories/Table.stories.mdx

@@ -1,10 +1,9 @@
 import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
 import {Table} from '@workday/canvas-kit-preview-react/table';
-// examples
+// Examples
 import {Basic} from './examples/Basic';
 import {BasicWithHeading} from './examples/BasicWithHeading';
 import {FixedColumn} from './examples/FixedColumn';
-import {TableWithContainer} from './examples/TableWithContainer';
 
 <Meta title="Preview/Table" component={Table} />
 
@@ -25,34 +24,26 @@ yarn add @workday/canvas-kit-preview-react
 
 ### Basic Example
 
-Users may not want to use a `caption` so they can import
-[Heading](/docs/components-text-heading--basic) or [Text](/docs/components-text-text--basic)
-instead. This will give the user more flexibility around the customization of the title/heading of
-their table.
+Users may not want to use a `caption` so they can import [Heading](/components/text/heading/) or
+[Text](/components/text/text/) instead. This will give the user more flexibility around the
+customization of the title/heading of their table.
 
 <ExampleCodeBlock code={BasicWithHeading} />
 
-### Example with Container
-
-Users may want to have some padding around the `table` and have inset dividers for their rows. This
-showcases how a user can achieve this with creating a styled component to wrap the `table`.
-
-<ExampleCodeBlock code={TableWithContainer} />
-
 ### Example with Caption
 
-We built a simple table that includes a `caption` without a Heading. A `caption` is not required but
-it is good for
+Users are free to use a `caption` instead of a heading. A `caption` is not required but it is good
+for
 [accessibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#accessibility_concerns)
 purposes.
 
 <ExampleCodeBlock code={Basic} />
 
-### Fixed Column with TableContainer
+### Fixed Column
 
-Users may want to have some padding surrounding their table and have a fixed column. They can use
-the `TableContainer` to wrap the `Table` component and some styles to make it so that the left
-column is fixed.
+Users may add styles to the `Table.Header` to render a fixed column. The example below assigns a
+`width` to the `Table` to guarantee the fixed column is triggered, but you are free to omit the
+`width` if you would only like the fixed column to be triggered if necessary.
 
 <ExampleCodeBlock code={FixedColumn} />
 

modules/preview-react/table/stories/examples/BasicWithHeading.tsx

@@ -6,7 +6,9 @@ import {Heading} from '@workday/canvas-kit-react/text';
 export const BasicWithHeading = () => {
   return (
     <>
-      <Heading size="small">Pizza Toppings</Heading>
+      <Heading size="small" marginBottom="s">
+        Pizza Toppings
+      </Heading>
       <Table>
         <Table.Head>
           <Table.Row>

modules/preview-react/table/stories/examples/FixedColumn.tsx

@@ -75,8 +75,10 @@ export const FixedColumn = () => {
   ];
   return (
     <>
-      <Heading size="small">Performance Car Specs</Heading>
-      <Table>
+      <Heading size="small" marginBottom="s">
+        Performance Car Specs
+      </Heading>
+      <Table width={690}>
         <Table.Head>
           <Table.Row>
             <Table.Header