@workday/canvas-kit-docs 8.0.0-alpha.166-next.1 → 8.0.0-alpha.170-next.3

package/dist/mdx/react/layout/Grid.mdx

@@ -1,11 +1,9 @@
 import {Grid, GridItem} from '@workday/canvas-kit-react/layout';
 // examples
 import GridLayout from './examples/Grid/GridLayout';
-import UIExample from './examples/Grid/UIExample';
+import Basic from './examples/Grid/Basic';
 import GridLayoutInteractive from './examples/Grid/GridLayoutInteractive';
-import {GridStyle} from './examples/PropTables.splitprops.tsx';
-import {GridStyleProps} from '../lib/utils/grid';
-import {GridItemStyleProps} from '../lib/utils/gridItem';
+import {GridStyle, GridItemStyle} from './examples/PropTables.splitprops.tsx';
 
 
 # Canvas Kit Grid
@@ -14,9 +12,6 @@ import {GridItemStyleProps} from '../lib/utils/gridItem';
 two-dimensional layouts (rows and columns) with
 [CSS Grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids).
 
-If you want to see how Flexbox and Grid can
-[work together](https://css-tricks.com/css-grid-replace-flexbox/).
-
 ## Installation
 
 ```sh
@@ -27,66 +22,66 @@ yarn add @workday/canvas-kit-react
 
 ### Basic Example
 
-Below is a basic layout built with `Grid`. We created four components: `Header`, `SideBar`,
-`BodyContent` and `Footer`. We also used those names for their respective `gridArea` props. Then we
-can use those names in the parent component, `UIExample`, to organize the UI however we want. This
-allows the parent container to control how its children render. For page layouts, Workday typically
-uses a 12 column grid. In the example below, the Sidebar is 3 columns and the Body Content is 9
-columns.
+> **Note**: We recommend you familiarize yourself with CSS Grid
+> ([MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids),
+> [CSS-Tricks](https://css-tricks.com/snippets/css/complete-guide-grid/)) before diving into our
+> `Grid` component. This example makes use of
+> [Grid Areas](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Areas).
 
-> Note: You can learn more about CSS Grid's `gridArea` and `gridTemplateAreas`
-> [here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas).
+In this example, we set up a basic layout built with `Grid` using four child components: `Header`,
+`SideBar`, `BodyContent` and `Footer`. By assigning the same names to each child's `gridArea` prop,
+we're able to arrange them by referencing their names in the parent `Grid` container. Our example
+uses a 12-column grid with `SideBar` occupying three columns and `BodyContent` occupying the
+remaining nine.
 
-<ExampleCodeBlock code={UIExample} />
+<ExampleCodeBlock code={Basic} />
 
 ### Using Grid Items
 
 In the example above we nested `Grid` components to create our layout, and we controlled the layout
-structure from the top-level `Grid` container. That's a perfectly valid approach. However, we can
-also use `Grid.Item` components to allow child cells to have more control. While any direct child of
-a `Grid` component is implicitly a grid item, `Grid.Item` provides special CSS Grid Item style props
-that allow you to have more control over how and where each item renders.
+structure from the top-level `Grid` container. We can also use `Grid.Item` components to allow child
+cells to have more control. While any direct child of a `Grid` component is implicitly a grid item,
+`Grid.Item` provides special CSS Grid Item style props that allow you to have more control over how
+and where each item renders.
 
 To demonstrate this behavior, the example below has a `Grid` container with nine cells. The eight
 `soap500` cells are `Grid` components, and the `peach300` cell is a `Grid.Item`. We can use the
 `Grid.Item` style props `gridRowStart` and `gridColumnStart` to manipulate where the cell renders.
-You can use the `Row` and `Column` buttons to manipulate these props and see the `Grid.Item`'s
-position adjust accordingly.
+Use the `Row` and `Column` buttons to manipulate these props and see the `Grid.Item`'s position
+adjust accordingly.
 
-> Note: This example is solely intended to demonstrate the `Grid.Item`'s functionality and is NOT
-> considered an accessibility best practice. Visually reordering content does not change the order
-> it is read by a screen reader or the tab order. You can learn more about CSS Grid layout and
-> accessibility
-> [here](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility).
+> **Note**: This example is solely intended to demonstrate `Grid.Item`'s functionality and is
+> **not** considered an accessibility best practice. Visually reordering content does not change the
+> tab order or the order it is read in by a screen reader. Learn more about
+> [CSS Grid layout and accessibility](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility).
 
 <ExampleCodeBlock code={GridLayoutInteractive} />
 
 Let's look at another `Grid.Item` example. Below, we have a `Grid` container with two rows: one with
-seven elements and the other with two elements. This example is to show how a user can use the
-`<Grid.Item/>` component to wrap a `Grid` component. This would allow a user to have access to the
-child props of `Grid.Item` to place a layout where needed. The row with elements 3 - 7 is put before
-the 1 & 2 elements since that layout is wrapped by the `Grid.Item` component.
+seven elements and another with two elements. Each row is a `Grid.Item` that wraps a nested `Grid`.
+This allows you to use `Grid.Item` to place a layout where needed. Here, we use `gridRowStart` to
+place the row with elements 3 through 7 before the row with elements 1 and 2.
 
 <ExampleCodeBlock code={GridLayout} />
 
-### Using Grid vs. Flex vs. Box
+### Grid vs. Flex vs. Box
 
-`Box` is the underlying layout component that `Grid` and `Flex` are built upon. So `Grid` and `Flex`
-have access to all `BoxProps`. But `Grid` and `Flex` have their own specific style props that map to
-CSS Grid and Flexbox properties, respectively. When using these components to build layouts, it is
-not a matter of choosing `Grid` _or_ `Flex` _or_ `Box`, but rather deciding how to use them
-together. They are intended to be complementary not exclusionary. With that said, here are some
-general rules for when to use which:
+`Grid` and `Flex` are built on top of `Box`, so they have access to all `BoxProps`. Additionally,
+`Grid` and `Flex` have their own specific style props that map to CSS Grid and Flexbox properties,
+respectively. When using these components to build layouts, it is not a matter of choosing `Grid`
+_or_ `Flex` _or_ `Box`, but rather deciding how to
+[use them together](https://css-tricks.com/css-grid-replace-flexbox/). They are intended to be
+complementary not exclusionary. With that said, here are general guidelines for when to use which:
 
-- Use `Grid` for building **two-dimensional** layouts (rows AND columns).
-- Use `Flex` for building **one-dimensional** layouts (a row OR a column).
+- Use `Grid` for **two-dimensional** layouts (rows AND columns).
+- Use `Flex` for **one-dimensional** layouts (a row OR a column).
 - Use `Box` for generic containers that don't need CSS Flexbox or Grid.
 
 ## Components
 
 ### Grid
 
-Grid is a container component for creating two-dimensional layouts with CSS Grid. It has special
+`Grid` is a container component for creating two-dimensional layouts with CSS Grid. It has special
 style props that map to CSS Grid style properties to provide a common, ergonomic API for building
 layouts.
 
@@ -104,14 +99,14 @@ layouts.
 
 As previously mentioned, `Grid` is built on top of `Box` and has access to all its props, including
 [grid container properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#the_grid_container)
-through style props as well. Here are the grid container props:
+through style props as well.
 
-<ArgsTable of={GridStyleProps} />
+<ArgsTable of={GridStyle} />
 
 ### Grid.Item
 
 `Grid.Item` is a subcomponent of Grid. It has specific grid item style props that map to CSS Grid
-Item properties. This allows you greater control over how child components render in your layout.
+Item properties. This provides greater control over how child components render in your layout.
 
 #### Usage
 
@@ -127,4 +122,4 @@ Item properties. This allows you greater control over how child components rende
 
 #### Props
 
-<ArgsTable of={GridItemStyleProps} />
+<ArgsTable of={GridItemStyle} />

package/dist/mdx/react/layout/examples/Grid/{UIExample.tsx → Basic.tsx}

@@ -44,8 +44,7 @@ const Footer = ({children, ...props}: GridProps) => (
 
 export default () => {
   const parentCont = {
-    gridTemplateAreas:
-      "'Header Header Header Header' 'SideBar BodyContent BodyContent BodyContent' 'Footer Footer Footer Footer'",
+    gridTemplateAreas: "'Header Header' 'SideBar BodyContent' 'Footer Footer'",
     gridGap: fontSizes[16],
     gridTemplateColumns: '3fr 9fr',
     gridTemplateRows: 'auto 300px auto',

package/dist/mdx/react/layout/examples/Grid/GridLayout.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Grid} from '@workday/canvas-kit-react/layout';
+import {Box, Grid} from '@workday/canvas-kit-react/layout';
 
 const Cell = (props: {children: React.ReactNode}) => {
   return (
@@ -37,7 +37,7 @@ const CellItem = (props: {children: React.ReactNode}) => {
 
 export default () => {
   return (
-    <Grid gridAutoFlow="row" padding="xs" gridGap="10px 0">
+    <Box padding="xs">
       <Grid
         gridTemplateColumns="repeat(auto-fit, minmax(300px, 1fr))"
         gridGap="10px"
@@ -60,6 +60,6 @@ export default () => {
           </Grid>
         </Grid.Item>
       </Grid>
-    </Grid>
+    </Box>
   );
 };

package/dist/mdx/react/layout/examples/PropTables.splitprops.tsx

@@ -1,9 +1,16 @@
 import React from 'react';
 
-import {FlexStyleProps, StackStyleProps, GridStyleProps} from '@workday/canvas-kit-react/layout';
+import {
+  FlexStyleProps,
+  StackStyleProps,
+  GridStyleProps,
+  GridItemStyleProps,
+} from '@workday/canvas-kit-react/layout';
 
 export const FlexStyle = (props: FlexStyleProps) => <div />;
 
 export const StackStyle = (props: StackStyleProps) => <div />;
 
 export const GridStyle = (props: GridStyleProps) => <div />;
+
+export const GridItemStyle = (props: GridItemStyleProps) => <div />;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "8.0.0-alpha.166-next.1+ca16362c",
+  "version": "8.0.0-alpha.170-next.3+5a6d1f8b",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -42,7 +42,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^8.0.0-alpha.166-next.1+ca16362c"
+    "@workday/canvas-kit-react": "^8.0.0-alpha.170-next.3+5a6d1f8b"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -50,5 +50,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.1"
   },
-  "gitHead": "ca16362cd6fee2e013e61bdc3f16433f4159b06a"
+  "gitHead": "5a6d1f8bce5cc7ec386c6e5f78ba8e87a3873592"
 }