Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 3 commits into from
Aug 23, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1c081a4
chore(layout): change spacing to gap
KristinaSpasevska Aug 23, 2023
8188fc1
chore: run formatter
KristinaSpasevska Aug 23, 2023
7a0e574
chore: run formatter on all projects
KristinaSpasevska Aug 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/apps/docs/src/components/Blog/BlogItem/BlogItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions packages/apps/docs/src/components/BottomPageSection/components/Subscribe.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
4 changes: 2 additions & 2 deletions packages/apps/docs/src/components/BrowseSection/LinkBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/docs/src/components/ConsentModal/ConsentModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/docs/src/components/InfiniteScroll/InfiniteScroll.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 && (
<>
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/docs/src/components/Layout/Blog/Blog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions packages/apps/docs/src/components/Layout/Landing/components/Headers/HomeHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/docs/src/components/Layout/Landing/components/Headers/SearchHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/docs/src/components/NotFound/NotFound.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/docs/src/pages/docs/blogchain/2018/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/docs/src/pages/docs/blogchain/2019/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/docs/src/pages/docs/blogchain/2021/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/docs/src/pages/docs/blogchain/2022/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/docs/src/pages/docs/blogchain/2023/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/docs/src/pages/docs/build/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/docs/src/pages/docs/chainweb/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/docs/src/pages/docs/contribute/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/docs/src/pages/docs/kadena/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/docs/src/pages/docs/marmalade/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/docs/src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/tools/src/components/Global/FormItemCard/FormItemCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions packages/apps/tools/src/pages/transactions/cross-chain-transfer-tracker/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'}
>
Expand Down
14 changes: 7 additions & 7 deletions packages/libs/react-components/src/components/Grid/Grid.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' },
},
Expand All @@ -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>
Expand Down Expand Up @@ -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}
Expand Down
6 changes: 3 additions & 3 deletions packages/libs/react-components/src/components/Grid/GridContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -24,7 +24,7 @@ const GridContainer: FC<IGridContainerProps> = ({
gridTemplateColumns: templateColumns,
};
return (
<BaseContainer css={styles} spacing={spacing}>
<BaseContainer css={styles} gap={gap}>
{children}
</BaseContainer>
);
Expand Down
4 changes: 2 additions & 2 deletions packages/libs/react-components/src/components/Grid/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
});

Expand Down
4 changes: 2 additions & 2 deletions packages/libs/react-components/src/components/Icons/Icon.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions packages/libs/react-components/src/components/ProductIcons/ProductIcon.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading