feat(Grid)!: remove top-level sub-component(s) (#1703)

- also mark as deprecated, linking to TW documentation
chanzuckerberg · Jul 19, 2023 · c8925c9 · c8925c9
1 parent e6cc9e5
commit c8925c9
Show file tree

Hide file tree

Showing 25 changed files with 257 additions and 267 deletions.
diff --git a/.storybook/components/DesignTokens/Tier1/Animation.jsx b/.storybook/components/DesignTokens/Tier1/Animation.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Grid, GridItem, Section } from '../../../../src';
+import { Grid, Section } from '../../../../src';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
@@ -11,7 +11,7 @@ export class Tier1Animation extends Component {
           <Grid>
             {filterTokens(`eds-anim-fade`).map(function (listItem) {
               return (
-                <GridItem key={listItem.name}>
+                <Grid.Item key={listItem.name}>
                   <TokenSpecimen
                     inlineStyles={{
                       transitionDuration: `var(${listItem.name})`,
@@ -20,7 +20,7 @@ export class Tier1Animation extends Component {
                     value={listItem.value}
                     variant="animation-fade"
                   />
-                </GridItem>
+                </Grid.Item>
               );
             })}
           </Grid>
@@ -30,7 +30,7 @@ export class Tier1Animation extends Component {
           <Grid>
             {filterTokens(`eds-anim-move`).map(function (listItem) {
               return (
-                <GridItem key={listItem.name}>
+                <Grid.Item key={listItem.name}>
                   <TokenSpecimen
                     inlineStyles={{
                       transitionDuration: `var(${listItem.name})`,
@@ -39,7 +39,7 @@ export class Tier1Animation extends Component {
                     value={listItem.value}
                     variant="animation-move"
                   />
-                </GridItem>
+                </Grid.Item>
               );
             })}
           </Grid>
@@ -49,7 +49,7 @@ export class Tier1Animation extends Component {
           <Grid>
             {filterTokens(`eds-anim-ease`).map(function (listItem) {
               return (
-                <GridItem key={listItem.name}>
+                <Grid.Item key={listItem.name}>
                   <TokenSpecimen
                     inlineStyles={{
                       transitionTimingFunction: `var(${listItem.name})`,
@@ -58,7 +58,7 @@ export class Tier1Animation extends Component {
                     value={listItem.value}
                     variant="animation-fade"
                   />
-                </GridItem>
+                </Grid.Item>
               );
             })}
           </Grid>

diff --git a/.storybook/components/DesignTokens/Tier1/Borders.jsx b/.storybook/components/DesignTokens/Tier1/Borders.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Grid, GridItem, Section } from '../../../../src';
+import { Grid, Section } from '../../../../src';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
@@ -11,7 +11,7 @@ export class Tier1Borders extends Component {
           <Grid>
             {filterTokens(`eds-border-width`).map(function (listItem) {
               return (
-                <GridItem key={listItem.name}>
+                <Grid.Item key={listItem.name}>
                   <TokenSpecimen
                     inlineStyles={{
                       backgroundColor: 'transparent',
@@ -22,7 +22,7 @@ export class Tier1Borders extends Component {
                     name={listItem.name}
                     value={listItem.value}
                   />
-                </GridItem>
+                </Grid.Item>
               );
             })}
           </Grid>
@@ -32,7 +32,7 @@ export class Tier1Borders extends Component {
           <Grid>
             {filterTokens(`eds-border-radius`).map(function (listItem) {
               return (
-                <GridItem key={listItem.name}>
+                <Grid.Item key={listItem.name}>
                   <TokenSpecimen
                     inlineStyles={{
                       backgroundColor: 'transparent',
@@ -44,7 +44,7 @@ export class Tier1Borders extends Component {
                     name={listItem.name}
                     value={listItem.value}
                   />
-                </GridItem>
+                </Grid.Item>
               );
             })}
           </Grid>

diff --git a/.storybook/components/DesignTokens/Tier1/FontFamilies.tsx b/.storybook/components/DesignTokens/Tier1/FontFamilies.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Grid, GridItem, Section } from '../../../../src';
+import { Grid, Section } from '../../../../src';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
@@ -8,7 +8,7 @@ export const FontFamilies = () => (
     <Grid>
       {filterTokens(`eds-font-family`).map(function (listItem) {
         return (
-          <GridItem key={listItem.name}>
+          <Grid.Item key={listItem.name}>
             <TokenSpecimen
               inlineStyles={{
                 fontFamily: `var(${listItem.name})`,
@@ -17,7 +17,7 @@ export const FontFamilies = () => (
               value={listItem.value}
               variant="typography-title"
             />
-          </GridItem>
+          </Grid.Item>
         );
       })}
     </Grid>

diff --git a/.storybook/components/DesignTokens/Tier1/FontSizes.tsx b/.storybook/components/DesignTokens/Tier1/FontSizes.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Grid, GridItem, Section } from '../../../../src';
+import { Grid, Section } from '../../../../src';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
@@ -8,7 +8,7 @@ export const FontSizes = () => (
     <Grid>
       {filterTokens(`eds-font-size`).map(function (listItem) {
         return (
-          <GridItem key={listItem.name}>
+          <Grid.Item key={listItem.name}>
             <TokenSpecimen
               inlineStyles={{
                 fontSize: `var(${listItem.name})`,
@@ -17,7 +17,7 @@ export const FontSizes = () => (
               value={listItem.value}
               variant="typography-title"
             />
-          </GridItem>
+          </Grid.Item>
         );
       })}
     </Grid>

diff --git a/.storybook/components/DesignTokens/Tier1/FontWeights.tsx b/.storybook/components/DesignTokens/Tier1/FontWeights.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Grid, GridItem, Section } from '../../../../src';
+import { Grid, Section } from '../../../../src';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
@@ -8,7 +8,7 @@ export const FontWeights = () => (
     <Grid>
       {filterTokens(`eds-font-weight`).map(function (listItem) {
         return (
-          <GridItem key={listItem.name}>
+          <Grid.Item key={listItem.name}>
             <TokenSpecimen
               inlineStyles={{
                 fontWeight: `var(${listItem.name})`,
@@ -17,7 +17,7 @@ export const FontWeights = () => (
               value={listItem.value}
               variant="typography-title"
             />
-          </GridItem>
+          </Grid.Item>
         );
       })}
     </Grid>

diff --git a/.storybook/components/DesignTokens/Tier1/Layout.jsx b/.storybook/components/DesignTokens/Tier1/Layout.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Grid, GridItem, Section } from '../../../../src';
+import { Grid, Section } from '../../../../src';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
@@ -11,15 +11,15 @@ export class Tier1Layout extends Component {
           <Grid>
             {filterTokens(`eds-l-`).map(function (listItem) {
               return (
-                <GridItem key={listItem.name}>
+                <Grid.Item key={listItem.name}>
                   <TokenSpecimen
                     inlineStyles={{
                       maxWidth: `var(${listItem.name})`,
                     }}
                     name={listItem.name}
                     value={listItem.value}
                   />
-                </GridItem>
+                </Grid.Item>
               );
             })}
           </Grid>

diff --git a/.storybook/components/DesignTokens/Tier1/Shadows.jsx b/.storybook/components/DesignTokens/Tier1/Shadows.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Grid, GridItem, Section } from '../../../../src';
+import { Grid, Section } from '../../../../src';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
@@ -11,7 +11,7 @@ export class Tier1Shadows extends Component {
           <Grid>
             {filterTokens(`eds-box-shadow-`).map(function (listItem) {
               return (
-                <GridItem key={listItem.name}>
+                <Grid.Item key={listItem.name}>
                   <TokenSpecimen
                     inlineStyles={{
                       backgroundColor: '#fbfbfb',
@@ -20,7 +20,7 @@ export class Tier1Shadows extends Component {
                     name={listItem.name}
                     value={listItem.value}
                   />
-                </GridItem>
+                </Grid.Item>
               );
             })}
           </Grid>

diff --git a/.storybook/components/DesignTokens/Tier1/Sizes.jsx b/.storybook/components/DesignTokens/Tier1/Sizes.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Grid, GridItem, Section } from '../../../../src';
+import { Grid, Section } from '../../../../src';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
@@ -10,7 +10,7 @@ export class Tier1Sizes extends Component {
         <Section title="Base Grid Size">
           <Grid>
             {filterTokens('eds-size-base').map((listItem) => (
-              <GridItem key={listItem.name}>
+              <Grid.Item key={listItem.name}>
                 <TokenSpecimen
                   comment="Calculated from a multiple of the base font size --eds-font-size-base"
                   inlineStyles={{
@@ -21,7 +21,7 @@ export class Tier1Sizes extends Component {
                   name={listItem.name}
                   value={listItem.value}
                 />
-              </GridItem>
+              </Grid.Item>
             ))}
           </Grid>
         </Section>
@@ -31,7 +31,7 @@ export class Tier1Sizes extends Component {
               .filter((listItem) => !listItem.name.endsWith('base-unit'))
               .map(function (listItem) {
                 return (
-                  <GridItem key={listItem.name}>
+                  <Grid.Item key={listItem.name}>
                     <TokenSpecimen
                       inlineStyles={{
                         width: `var(${listItem.name})`,
@@ -41,7 +41,7 @@ export class Tier1Sizes extends Component {
                       name={listItem.name}
                       value={listItem.value}
                     />
-                  </GridItem>
+                  </Grid.Item>
                 );
               })}
           </Grid>

diff --git a/.storybook/components/DesignTokens/Tier1/TypographyTokens.jsx b/.storybook/components/DesignTokens/Tier1/TypographyTokens.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Grid, GridItem, Section } from '../../../../src';
+import { Grid, Section } from '../../../../src';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
@@ -11,7 +11,7 @@ export class Tier1TypographyTokens extends Component {
           <Grid>
             {filterTokens(`eds-font-family`).map(function (listItem) {
               return (
-                <GridItem key={listItem.name}>
+                <Grid.Item key={listItem.name}>
                   <TokenSpecimen
                     inlineStyles={{
                       fontFamily: `var(${listItem.name})`,
@@ -20,7 +20,7 @@ export class Tier1TypographyTokens extends Component {
                     value={listItem.value}
                     variant="typography-title"
                   />
-                </GridItem>
+                </Grid.Item>
               );
             })}
           </Grid>
@@ -30,7 +30,7 @@ export class Tier1TypographyTokens extends Component {
           <Grid>
             {filterTokens(`eds-font-size`).map(function (listItem) {
               return (
-                <GridItem key={listItem.name}>
+                <Grid.Item key={listItem.name}>
                   <TokenSpecimen
                     inlineStyles={{
                       fontSize: `var(${listItem.name})`,
@@ -39,7 +39,7 @@ export class Tier1TypographyTokens extends Component {
                     value={listItem.value}
                     variant="typography-title"
                   />
-                </GridItem>
+                </Grid.Item>
               );
             })}
           </Grid>
@@ -49,7 +49,7 @@ export class Tier1TypographyTokens extends Component {
           <Grid>
             {filterTokens(`eds-font-weight`).map(function (listItem) {
               return (
-                <GridItem key={listItem.name}>
+                <Grid.Item key={listItem.name}>
                   <TokenSpecimen
                     inlineStyles={{
                       fontWeight: `var(${listItem.name})`,
@@ -58,7 +58,7 @@ export class Tier1TypographyTokens extends Component {
                     value={listItem.value}
                     variant="typography-title"
                   />
-                </GridItem>
+                </Grid.Item>
               );
             })}
           </Grid>

diff --git a/.storybook/components/DesignTokens/Tier2/Borders.jsx b/.storybook/components/DesignTokens/Tier2/Borders.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Grid, GridItem, Section } from '../../../../src';
+import { Grid, Section } from '../../../../src';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
@@ -11,7 +11,7 @@ export class Tier2Borders extends Component {
           <Grid>
             {filterTokens(`eds-theme-border-width`).map(function (listItem) {
               return (
-                <GridItem key={listItem.name}>
+                <Grid.Item key={listItem.name}>
                   <TokenSpecimen
                     inlineStyles={{
                       backgroundColor: 'transparent',
@@ -22,7 +22,7 @@ export class Tier2Borders extends Component {
                     name={listItem.name}
                     value={listItem.value}
                   />
-                </GridItem>
+                </Grid.Item>
               );
             })}
           </Grid>