Tanner update playgrounds v2 (#12256)

* chore(grid/flexgrid): updated story books

* chore(formlabel): updated story books

* chore(formlabel): updated story books

* chore(grid/flexgrid): updated story books again

* chore(textarea): updated story books

* chore(react): closes #12251 #12250 #12249 #12248

* chore(react): fixed textinput/area stories, updated snapshots

* chore(react): fixed tabs index file for unit test

* fix(react): update tabs index.js

* Update packages/react/src/components/Grid/FlexGrid.stories.js

Co-authored-by: Abbey Hart <abbeyhrt@gmail.com>

* Update packages/react/src/components/Grid/Grid.mdx

Co-authored-by: Abbey Hart <abbeyhrt@gmail.com>

* Update packages/react/src/components/FormLabel/FormLabel.stories.js

Co-authored-by: Abbey Hart <abbeyhrt@gmail.com>

* chore(react): removed args from tab stories

* chore(react): updated unordered list story

* chore(react): updates to stories

Co-authored-by: Abbey Hart <abbeyhrt@gmail.com>
Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -7441,15 +7441,8 @@ Map {
       "className": Object {
         "type": "string",
       },
-      "type": Object {
-        "args": Array [
-          Array [
-            "",
-            "default",
-            "container",
-          ],
-        ],
-        "type": "oneOf",
+      "contained": Object {
+        "type": "bool",
       },
     },
   },

packages/react/src/components/FormLabel/FormLabel-story.js → packages/react/src/components/FormLabel/FormLabel.stories.js

@@ -52,7 +52,8 @@ export const WithTooltip = (controls) => {
         lowContrast
         inline
         className="notification"
-        aria-label="Accessiblity note on form labels">
+        aria-label="Accessibility note on form labels"
+        actionButtonLabel="Accessibility button note on form labels">
         <p>
           <strong>Note:</strong>
           &nbsp; It is not recommended to include interactive items, such as

packages/react/src/components/Grid/next/FlexGrid.stories.js → packages/react/src/components/Grid/FlexGrid.stories.js

@@ -1,6 +1,6 @@
 import './FlexGrid.stories.scss';
 import React from 'react';
-import { FlexGrid, Row, Column } from '../';
+import { FlexGrid, Row, Column } from './';
 import mdx from './FlexGrid.mdx';
 
 export default {
@@ -16,6 +16,13 @@ export default {
       page: mdx,
     },
   },
+  argTypes: {
+    columns: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
 
 function DemoContent({ children }) {
@@ -289,3 +296,49 @@ export const MixedGridModes = () => (
     </Row>
   </FlexGrid>
 );
+
+export const Playground = (args) => (
+  <FlexGrid {...args}>
+    <Row>
+      <Column>
+        <DemoContent>1/4</DemoContent>
+      </Column>
+      <Column>
+        <DemoContent>1/4</DemoContent>
+      </Column>
+      <Column>
+        <DemoContent>1/4</DemoContent>
+      </Column>
+      <Column>
+        <DemoContent>1/4</DemoContent>
+      </Column>
+    </Row>
+  </FlexGrid>
+);
+
+Playground.argTypes = {
+  as: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'div',
+  },
+  fullWidth: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+  narrow: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+  condensed: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+};