[@react-ui & implementation] Change 'spacing' prop to 'gap' (#813)

* chore(layout): change spacing to gap * chore: run formatter * chore: run formatter on all projects
kadena-community · Aug 23, 2023 · 2feb3fc · 2feb3fc · vercel · Aug 23, 2023
1 parent 9f43e24
commit 2feb3fc
Show file tree

Hide file tree

Showing 35 changed files with 94 additions and 98 deletions.
diff --git a/packages/apps/docs/src/components/Blog/BlogItem/BlogItem.tsx b/packages/apps/docs/src/components/Blog/BlogItem/BlogItem.tsx
@@ -17,8 +17,8 @@ export const BlogItem: FC<IProps> = ({ item }) => {
   return (
     <li className={blogitem}>
       <Link className={link} href={item.root}>
-        <Stack direction="column" spacing="$3">
-          <Stack alignItems="center" spacing="$2">
+        <Stack direction="column" gap="$3">
+          <Stack alignItems="center" gap="$2">
             <Avatar name={item.author} />
             <Heading as="h4" variant="h6">
               {item.author}

diff --git a/packages/apps/docs/src/components/BottomPageSection/components/Subscribe.tsx b/packages/apps/docs/src/components/BottomPageSection/components/Subscribe.tsx
@@ -22,13 +22,13 @@ export const Subscribe: FC = () => {
 
   return (
     <section data-cy="subscribe">
-      <Stack direction="column" spacing="$sm">
+      <Stack direction="column" gap="$sm">
         <Heading as="h6">Receive important developer updates</Heading>
 
         {!hasSuccess ? (
           <>
             <form>
-              <Stack spacing="$sm">
+              <Stack gap="$sm">
                 <TextField
                   inputProps={{
                     id: 'email',

diff --git a/packages/apps/docs/src/components/BrowseSection/LinkBlock.tsx b/packages/apps/docs/src/components/BrowseSection/LinkBlock.tsx
@@ -18,9 +18,9 @@ export const LinkBlock: FC<ILinkBlock> = ({ title, subtitle, icon, href }) => {
   return (
     <li className={listItemClass}>
       <Link href={href} className={listItemLinkClass}>
-        <Stack direction="row" spacing="$2">
+        <Stack direction="row" gap="$2">
           <Icon className={iconClass} />
-          <Stack direction="column" spacing={0}>
+          <Stack direction="column" gap={0}>
             <Heading as="h6">{title}</Heading>
             <Text as="span" color="emphasize">
               {subtitle}

diff --git a/packages/apps/docs/src/components/ConsentModal/ConsentModal.tsx b/packages/apps/docs/src/components/ConsentModal/ConsentModal.tsx
@@ -43,7 +43,7 @@ export const ConsentModal: FC = () => {
       <>
         <Text>We are using cookies on this website!</Text>
         <Box marginTop="$10">
-          <Stack spacing="$4">
+          <Stack gap="$4">
             <button
               onClick={handleAccept}
               title="Accept analytics cookies"

diff --git a/packages/apps/docs/src/components/InfiniteScroll/InfiniteScroll.tsx b/packages/apps/docs/src/components/InfiniteScroll/InfiniteScroll.tsx
@@ -40,7 +40,7 @@ export const InfiniteScroll: FC<IProps> = ({
 
   return (
     <div ref={loadRef}>
-      <Stack justifyContent="center" alignItems="center" spacing="$10">
+      <Stack justifyContent="center" alignItems="center" gap="$10">
         {isLoading && <Loading />}
         {error && (
           <>

diff --git a/packages/apps/docs/src/components/Layout/Blog/Blog.tsx b/packages/apps/docs/src/components/Layout/Blog/Blog.tsx
@@ -56,7 +56,7 @@ export const Blog: FC<IPageProps> = ({
             {children}
 
             <div className={bottomWrapperClass}>
-              <Grid.Root spacing="$xl" columns={12}>
+              <Grid.Root gap="$xl" columns={12}>
                 <Grid.Item columnSpan={4}>
                   <Stack
                     alignItems="flex-start"

diff --git a/packages/apps/docs/src/components/Layout/Landing/components/Headers/HomeHeader.tsx b/packages/apps/docs/src/components/Layout/Landing/components/Headers/HomeHeader.tsx
@@ -18,8 +18,8 @@ export const HomeHeader: FC<IProps> = ({ popularPages }) => {
         <Heading as="h1" variant="h2">
           Kadena
         </Heading>
-        <Stack spacing="$2xl" wrap="wrap">
-          <Stack direction="column" spacing="$2xs">
+        <Stack gap="$2xl" wrap="wrap">
+          <Stack direction="column" gap="$2xs">
             <Heading as="h2" variant="h4">
               Build your <GradientText>own</GradientText> Internet
             </Heading>

diff --git a/packages/apps/docs/src/components/Layout/Landing/components/Headers/SearchHeader.tsx b/packages/apps/docs/src/components/Layout/Landing/components/Headers/SearchHeader.tsx
@@ -15,7 +15,7 @@ export const SearchHeader: FC<IProps> = ({ children }) => {
         <Heading as="h1" variant="h2">
           Search spaces
         </Heading>
-        <Stack direction="column" spacing="$2xs">
+        <Stack direction="column" gap="$2xs">
           <Heading as="h2" variant="h4">
             Traditional or the <GradientText>new</GradientText> way
           </Heading>

diff --git a/packages/apps/docs/src/components/NotFound/NotFound.tsx b/packages/apps/docs/src/components/NotFound/NotFound.tsx
@@ -8,7 +8,7 @@ import React, { FC } from 'react';
 export const NotFound: FC = () => {
   return (
     <Stack
-      spacing="$2"
+      gap="$2"
       paddingTop="$20"
       paddingX={0}
       direction="column"

diff --git a/packages/apps/docs/src/pages/docs/blogchain/2018/index.tsx b/packages/apps/docs/src/pages/docs/blogchain/2018/index.tsx
@@ -9,7 +9,7 @@ import React, { FC } from 'react';
 
 const Home: FC = () => {
   return (
-    <Stack direction="column" spacing="$2xl">
+    <Stack direction="column" gap="$2xl">
       <div>
         <Heading as="h2">BlogChain 2018</Heading>
       </div>

diff --git a/packages/apps/docs/src/pages/docs/blogchain/2019/index.tsx b/packages/apps/docs/src/pages/docs/blogchain/2019/index.tsx
@@ -9,7 +9,7 @@ import React, { FC } from 'react';
 
 const Home: FC = () => {
   return (
-    <Stack direction="column" spacing="$2xl">
+    <Stack direction="column" gap="$2xl">
       <div>
         <Heading as="h2">BlogChain 2019</Heading>
       </div>

diff --git a/packages/apps/docs/src/pages/docs/blogchain/2021/index.tsx b/packages/apps/docs/src/pages/docs/blogchain/2021/index.tsx
@@ -9,7 +9,7 @@ import React, { FC } from 'react';
 
 const Home: FC = () => {
   return (
-    <Stack direction="column" spacing="$2xl">
+    <Stack direction="column" gap="$2xl">
       <div>
         <Heading as="h2">BlogChain 2021</Heading>
       </div>

diff --git a/packages/apps/docs/src/pages/docs/blogchain/2022/index.tsx b/packages/apps/docs/src/pages/docs/blogchain/2022/index.tsx
@@ -9,7 +9,7 @@ import React, { FC } from 'react';
 
 const Home: FC = () => {
   return (
-    <Stack direction="column" spacing="$2xl">
+    <Stack direction="column" gap="$2xl">
       <div>
         <Heading as="h2">BlogChain 2022</Heading>
       </div>

diff --git a/packages/apps/docs/src/pages/docs/blogchain/2023/index.tsx b/packages/apps/docs/src/pages/docs/blogchain/2023/index.tsx
@@ -9,7 +9,7 @@ import React, { FC } from 'react';
 
 const Home: FC = () => {
   return (
-    <Stack direction="column" spacing="$2xl">
+    <Stack direction="column" gap="$2xl">
       <div>
         <Heading as="h2">BlogChain 2023</Heading>
       </div>

diff --git a/packages/apps/docs/src/pages/docs/build/index.tsx b/packages/apps/docs/src/pages/docs/build/index.tsx
@@ -8,7 +8,7 @@ import { GetStaticProps } from 'next';
 import React, { FC } from 'react';
 
 const Home: FC = () => {
-  return <Stack direction="column" spacing="$2xl"></Stack>;
+  return <Stack direction="column" gap="$2xl"></Stack>;
 };
 
 export const getStaticProps: GetStaticProps = async () => {

diff --git a/packages/apps/docs/src/pages/docs/chainweb/index.tsx b/packages/apps/docs/src/pages/docs/chainweb/index.tsx
@@ -9,7 +9,7 @@ import React, { FC } from 'react';
 
 const Home: FC = () => {
   return (
-    <Stack direction="column" spacing="$2xl">
+    <Stack direction="column" gap="$2xl">
       <div>
         <Heading as="h2">Chainweb</Heading>
       </div>

diff --git a/packages/apps/docs/src/pages/docs/contribute/index.tsx b/packages/apps/docs/src/pages/docs/contribute/index.tsx
@@ -10,7 +10,7 @@ import React, { FC } from 'react';
 
 const Home: FC = () => {
   return (
-    <Stack direction="column" spacing="$2xl">
+    <Stack direction="column" gap="$2xl">
       <BrowseSection>
         <BrowseSection.LinkBlock
           title="Run a Node"

diff --git a/packages/apps/docs/src/pages/docs/kadena/index.tsx b/packages/apps/docs/src/pages/docs/kadena/index.tsx
@@ -13,7 +13,7 @@ import React, { FC } from 'react';
 
 const Home: FC = () => {
   return (
-    <Stack direction="column" spacing="$2xl">
+    <Stack direction="column" gap="$2xl">
       <div>
         <Heading as="h2">Welcome to Kadena&apos;s documentation!</Heading>
         <Text>

diff --git a/packages/apps/docs/src/pages/docs/marmalade/index.tsx b/packages/apps/docs/src/pages/docs/marmalade/index.tsx
@@ -9,7 +9,7 @@ import React, { FC } from 'react';
 
 const Home: FC = () => {
   return (
-    <Stack direction="column" spacing="$2xl">
+    <Stack direction="column" gap="$2xl">
       <div>
         <Heading as="h2">Marmalade</Heading>
       </div>

diff --git a/packages/apps/docs/src/pages/index.tsx b/packages/apps/docs/src/pages/index.tsx
@@ -64,7 +64,7 @@ const Home: FC<IProps> = ({ popularPages }) => {
             </Stack>
           </Box>
           <Heading as="h4">Browse by Resources</Heading>
-          <Stack direction="column" spacing="$2xl">
+          <Stack direction="column" gap="$2xl">
             <BrowseSection title="General" titleAs="h5" direction="row">
               <BrowseSection.LinkBlock
                 title="Overview of Pact"

diff --git a/packages/apps/tools/src/components/Global/FormItemCard/FormItemCard.tsx b/packages/apps/tools/src/components/Global/FormItemCard/FormItemCard.tsx
@@ -34,7 +34,7 @@ export const FormItemCard: FC<IFormItemCardProps> = ({
   return (
     <div>
       <Card fullWidth disabled={disabled}>
-        <Grid.Root columns={2} spacing="$3xl">
+        <Grid.Root columns={2} gap="$3xl">
           <Grid.Item>
             <Heading as="h5">{heading}</Heading>
           </Grid.Item>

diff --git a/packages/apps/tools/src/pages/transactions/cross-chain-transfer-tracker/index.tsx b/packages/apps/tools/src/pages/transactions/cross-chain-transfer-tracker/index.tsx
@@ -186,16 +186,16 @@ const CrossChainTransferTracker: FC = () => {
         direction="column"
         paddingTop={'$2'}
         paddingBottom={'$10'}
-        spacing={'$6'}
+        gap={'$6'}
       >
-        <Stack direction="column" spacing={'$2'}>
+        <Stack direction="column" gap={'$2'}>
           {' '}
           <Breadcrumbs.Root>
             <Breadcrumbs.Item>{t('Transfer')}</Breadcrumbs.Item>
             <Breadcrumbs.Item>{t('Cross Chain Tracker')}</Breadcrumbs.Item>
           </Breadcrumbs.Root>
           <Stack
-            spacing={'$6'}
+            gap={'$6'}
             justifyContent={'space-between'}
             alignItems={'flex-end'}
           >

diff --git a/packages/libs/react-components/src/components/Grid/Grid.stories.tsx b/packages/libs/react-components/src/components/Grid/Grid.stories.tsx
@@ -20,7 +20,7 @@ const meta: Meta<typeof Grid.Container> = {
   title: 'Layout/Grid',
   component: Grid.Container,
   argTypes: {
-    spacing: {
+    gap: {
       options: Object.keys(spacingVariant) as (keyof typeof spacingVariant)[],
       control: { type: 'select' },
     },
@@ -39,11 +39,11 @@ type Story = StoryObj<typeof Grid.Container>;
 export const Primary: Story = {
   name: 'Grid',
   args: {
-    spacing: 'xl',
+    gap: 'xl',
   },
-  render: ({ spacing }) => (
+  render: ({ gap }) => (
     <>
-      <Grid.Container spacing={spacing}>
+      <Grid.Container gap={gap}>
         <Grid.Item>
           <Content>1</Content>
         </Grid.Item>
@@ -109,16 +109,16 @@ export const Primary: Story = {
 export const GridAreas: Story = {
   name: 'GridTemplate areas',
   args: {
-    spacing: 'md',
+    gap: 'md',
     templateRows: '50px 1fr 30px',
     templateColumns: `150px 1fr`,
     templateAreas: `"header header"
                   "nav main"
                   "nav footer"`,
   },
-  render: ({ spacing, templateColumns, templateRows, templateAreas }) => (
+  render: ({ gap, templateColumns, templateRows, templateAreas }) => (
     <Grid.Container
-      spacing={spacing}
+      gap={gap}
       templateAreas={templateAreas}
       templateRows={templateRows}
       templateColumns={templateColumns}

diff --git a/packages/libs/react-components/src/components/Grid/GridContainer.tsx b/packages/libs/react-components/src/components/Grid/GridContainer.tsx
@@ -5,15 +5,15 @@ import React, { FC, ReactNode } from 'react';
 
 export interface IGridContainerProps {
   children?: ReactNode;
-  spacing?: VariantProps<typeof BaseContainer>['spacing'];
+  gap?: VariantProps<typeof BaseContainer>['gap'];
   templateRows?: CSSProperties['gridTemplateRows'];
   templateColumns?: CSSProperties['gridTemplateColumns'];
   templateAreas?: CSSProperties['gridTemplateAreas'];
 }
 
 const GridContainer: FC<IGridContainerProps> = ({
   children,
-  spacing,
+  gap,
   templateAreas,
   templateRows,
   templateColumns,
@@ -24,7 +24,7 @@ const GridContainer: FC<IGridContainerProps> = ({
     gridTemplateColumns: templateColumns,
   };
   return (
-    <BaseContainer css={styles} spacing={spacing}>
+    <BaseContainer css={styles} gap={gap}>
       {children}
     </BaseContainer>
   );

diff --git a/packages/libs/react-components/src/components/Grid/styles.ts b/packages/libs/react-components/src/components/Grid/styles.ts
@@ -36,10 +36,10 @@ export const GridContainer = styled('div', {
   display: 'grid',
   gridTemplateColumns: 'repeat(12, 1fr)',
   defaultVariants: {
-    spacing: '$md',
+    gap: '$md',
   },
   variants: {
-    spacing: spacingVariant,
+    gap: spacingVariant,
   },
 });
 

diff --git a/packages/libs/react-components/src/components/Icons/Icon.stories.tsx b/packages/libs/react-components/src/components/Icons/Icon.stories.tsx
@@ -44,13 +44,13 @@ export const Primary: Story = {
     const searchRegexp = new RegExp(icon, 'i');
     return (
       <>
-        <Grid.Container spacing="xl" templateColumns="repeat(6, 1fr)">
+        <Grid.Container gap="xl" templateColumns="repeat(6, 1fr)">
           {Object.entries(SystemIcons)
             .filter(([k]) => searchRegexp.test(k))
             // eslint-disable-next-line @typescript-eslint/naming-convention
             .map(([k, Icon]) => (
               <Grid.Item key={k}>
-                <Stack direction="column" alignItems="center" spacing="xs">
+                <Stack direction="column" alignItems="center" gap="xs">
                   <Icon size={size} />
                   <Text size="sm">System.{k}</Text>
                 </Stack>

diff --git a/packages/libs/react-components/src/components/ProductIcons/ProductIcon.stories.tsx b/packages/libs/react-components/src/components/ProductIcons/ProductIcon.stories.tsx
@@ -44,13 +44,13 @@ export const Primary: Story = {
     const searchRegexp = new RegExp(icon, 'i');
     return (
       <>
-        <Grid.Container spacing="xl" templateColumns="repeat(6, 1fr)">
+        <Grid.Container gap="xl" templateColumns="repeat(6, 1fr)">
           {Object.entries(ProductIcons)
             .filter(([k]) => searchRegexp.test(k))
             // eslint-disable-next-line @typescript-eslint/naming-convention
             .map(([k, Icon]) => (
               <Grid.Item key={k}>
-                <Stack direction="column" alignItems="center" spacing="xs">
+                <Stack direction="column" alignItems="center" gap="xs">
                   <Icon size={size} />
                   <Text size="sm">ProductIcons.{k}</Text>
                 </Stack>