Merge pull request #80 from 8845musign/add-spacing-props

Add margin and padding props to layout components and button components

src/components/Box/Box.tsx

@@ -2,7 +2,6 @@
 
 import clsx from 'clsx';
 import styles from './Box.module.css';
-import {} from '../../types/style';
 import {
   paddingVariables,
   marginVariables,

src/components/Button/Button.module.css

@@ -26,6 +26,7 @@
   transition: 0.3s cubic-bezier(0.22, 1, 0.36, 1);
   cursor: pointer;
   overflow-wrap: anywhere;
+  margin: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
 }
 
 .button:focus-visible {

src/components/Button/Button.tsx

@@ -5,6 +5,7 @@ import { forwardRef } from 'react';
 import styles from './Button.module.css';
 import { CircularProgress } from './CircularProgress';
 import { VariantIcon } from './VariantIcon';
+import { marginVariables } from '../../utils/style';
 import type { ButtonProps } from './ButtonTypes';
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
@@ -21,6 +22,10 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       disabled = false,
       loading = false,
       onClick,
+      mt,
+      mr,
+      mb,
+      ml,
       ...props
     },
     ref,
@@ -50,6 +55,14 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       <button
         type={type}
         className={cls}
+        style={{
+          ...marginVariables({
+            mt,
+            mr,
+            mb,
+            ml,
+          }),
+        }}
         ref={ref}
         disabled={disabled}
         aria-disabled={loading}

src/components/Button/ButtonTypes.ts

@@ -1,3 +1,4 @@
+import type { MarginProps } from '../../types/style';
 import type { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, ReactElement } from 'react';
 
 export type BaseProps = {
@@ -37,7 +38,7 @@ export type BaseProps = {
    * 後方配置のアイコン
    */
   suffixIcon?: 'default' | ReactNode;
-};
+} & MarginProps;
 
 export type OnlyButtonProps = {
   /**

src/components/Button/LinkButton.tsx

@@ -4,6 +4,7 @@ import clsx from 'clsx';
 import { cloneElement, forwardRef } from 'react';
 import styles from './Button.module.css';
 import { VariantIcon } from './VariantIcon';
+import { marginVariables } from '../../utils/style';
 import type { LinkButtonProps } from './ButtonTypes';
 import type { ReactNode } from 'react';
 
@@ -18,6 +19,10 @@ export const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(
       icon: _icon,
       fixedIcon: _fixedIcon,
       suffixIcon: _suffixIcon,
+      mt,
+      mr,
+      mb,
+      ml,
       ...props
     },
     forwardedRef,
@@ -40,6 +45,14 @@ export const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(
     return createElement(
       {
         className: cls,
+        style: {
+          ...marginVariables({
+            mt,
+            mr,
+            mb,
+            ml,
+          }),
+        },
         ...props,
         ref: forwardedRef,
       },

src/components/Center/Center.module.css

@@ -2,6 +2,8 @@
   max-width: var(--max-width);
   margin-inline: auto;
   padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
+  margin-top: var(--margin-top);
+  margin-bottom: var(--margin-bottom);
 }
 
 .center.textCenter {

src/components/Center/Center.tsx

@@ -2,9 +2,9 @@
 
 import clsx from 'clsx';
 import styles from './Center.module.css';
-import { paddingVariables } from '../../utils/style';
+import { createSpacingVariableFromKey, paddingVariables } from '../../utils/style';
 import { HTMLTagname } from '../../utils/types';
-import type { PaddingProps } from '../../types/style';
+import type { MarginYProps, PaddingProps } from '../../types/style';
 import type { FC, PropsWithChildren, CSSProperties } from 'react';
 
 type Props = {
@@ -32,7 +32,8 @@ type Props = {
    * HTMLのID属性の値
    */
   id?: string;
-} & PaddingProps;
+} & MarginYProps &
+  PaddingProps;
 
 export const Center: FC<PropsWithChildren<Props>> = ({
   as: CenterCopmonent = 'div',
@@ -41,6 +42,8 @@ export const Center: FC<PropsWithChildren<Props>> = ({
   pr,
   pb,
   pl,
+  mt,
+  mb,
   textCenter,
   childrenCenter,
   id,
@@ -59,6 +62,10 @@ export const Center: FC<PropsWithChildren<Props>> = ({
             pb,
             pl,
           }),
+          ...{
+            '--margin-top': mt ? createSpacingVariableFromKey(mt) : 0,
+            '--margin-bottom': mb ? createSpacingVariableFromKey(mb) : 0,
+          },
         } as CSSProperties
       }
     >

src/components/Flex/Flex.module.css

@@ -4,6 +4,8 @@
   align-items: var(--align-items);
   justify-content: var(--justify-content);
   flex-flow: var(--flex-direction) var(--flex-wrap);
+  padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
+  margin: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
 }
 
 .flex.heightFull {

src/components/Flex/Flex.tsx

@@ -3,7 +3,9 @@
 import clsx from 'clsx';
 import styles from './Flex.module.css';
 import { Spacing, AlignItems, JustifyContent, FlexDirection } from '../../types/style';
+import { paddingVariables, marginVariables } from '../../utils/style';
 import { HTMLTagname } from '../../utils/types';
+import type { PaddingProps, MarginProps } from '../../types/style';
 import type { FC, PropsWithChildren } from 'react';
 
 type Props = {
@@ -44,7 +46,8 @@ type Props = {
    * デフォルトで<Flex>は横幅いっぱいを専有する。しかし例えば、フレックスコンテナの子要素として配置した場合、横幅が自身の子に合わせて小さくなる。これが不都合の場合に100%とする事が可能
    */
   width?: 'full';
-};
+} & MarginProps &
+  PaddingProps;
 
 export const Flex: FC<PropsWithChildren<Props>> = ({
   as: FlexCopmonent = 'div',
@@ -56,6 +59,14 @@ export const Flex: FC<PropsWithChildren<Props>> = ({
   spacing,
   height,
   width,
+  pt,
+  pr,
+  pb,
+  pl,
+  mt,
+  mr,
+  mb,
+  ml,
 }) => {
   // Directly specifying the markuplint will result in a markuplint error.
   const gapStyle = spacing ? `var(--size-spacing-${spacing})` : '0';
@@ -70,6 +81,18 @@ export const Flex: FC<PropsWithChildren<Props>> = ({
           '--align-items': alignItems,
           '--justify-content': justifyContent,
           '--flex-wrap': wrap ? 'wrap' : 'nowrap',
+          ...paddingVariables({
+            pt,
+            pr,
+            pb,
+            pl,
+          }),
+          ...marginVariables({
+            mt,
+            mr,
+            mb,
+            ml,
+          }),
         } as React.CSSProperties
       }
     >

src/components/Stack/Stack.module.css

@@ -1,4 +1,6 @@
 .stack {
   display: flex;
   flex-direction: column;
+  padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
+  margin: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
 }

src/components/Stack/Stack.tsx

@@ -4,7 +4,9 @@ import { clsx } from 'clsx';
 import { FC, ReactNode } from 'react';
 import styles from './Stack.module.css';
 import { Spacing, AlignItems, JustifyContent } from '../../types/style';
+import { paddingVariables, marginVariables } from '../../utils/style';
 import { HTMLTagname } from '../../utils/types';
+import type { PaddingProps, MarginProps } from '../../types/style';
 
 type Props = {
   /**
@@ -35,7 +37,8 @@ type Props = {
    * 子要素
    */
   children: ReactNode;
-};
+} & MarginProps &
+  PaddingProps;
 
 /**
  * Stackコンポーネント
@@ -48,13 +51,33 @@ export const Stack: FC<Props> = ({
   spacing,
   alignItems = 'flex-start',
   justifyContent = 'flex-start',
+  pt,
+  pr,
+  pb,
+  pl,
+  mt,
+  mr,
+  mb,
+  ml,
 }) => {
   return (
     <StackComponent
       style={{
         alignItems: `${alignItems}`,
         justifyContent: `${justifyContent}`,
         gap: `var(--size-spacing-${spacing})`,
+        ...paddingVariables({
+          pt,
+          pr,
+          pb,
+          pl,
+        }),
+        ...marginVariables({
+          mt,
+          mr,
+          mb,
+          ml,
+        }),
       }}
       className={clsx(className, styles.stack)}
     >

src/stories/Button.stories.tsx

@@ -143,3 +143,11 @@ export const Loading: Story = {
     </div>
   ),
 };
+
+export const Margin: Story = {
+  render: () => (
+    <div style={{ backgroundColor: 'var(--color-background-gray)', width: 'fit-content', overflow: 'hidden' }}>
+      <Button {...defaultArgs} mt="lg" mr="lg" mb="lg" ml="lg" />
+    </div>
+  ),
+};

src/stories/Center.stories.tsx

@@ -58,3 +58,20 @@ export const AsSection: Story = {
     </Center>
   ),
 };
+
+export const MarginAndPadding: Story = {
+  render: () => (
+    <div style={{ backgroundColor: 'var(--color-background-primary)', overflow: 'hidden' }}>
+      <div>prev element</div>
+
+      <Center mt="lg" mb="lg" pt="xxl" pr="xxl" pb="xxl" pl="xxl" maxWidth="400px">
+        <div style={{ width: '100%', backgroundColor: 'var(--color-background-accent-darken)', overflow: 'hidden' }}>
+          <h2>Heading</h2>
+          <p>body</p>
+        </div>
+      </Center>
+
+      <div>next element</div>
+    </div>
+  ),
+};

src/stories/Flex.stories.tsx

@@ -163,6 +163,17 @@ export const Wrap: Story = {
 export const AsSection: Story = {
   render: () => (
     <Flex as="section" spacing="md" alignItems="center">
+      <h1>Heading</h1>
+      <p>text</p>
+      <p>text</p>
+      <p>text</p>
+    </Flex>
+  ),
+};
+
+export const MarginAndPadding: Story = {
+  render: () => (
+    <Flex spacing="md" alignItems="center" mt="lg" mr="lg" mb="lg" ml="lg" pt="xxl" pr="xxl" pb="xxl" pl="xxl">
       <h1>Heading</h1>
       <p>Section</p>
       <p>Section</p>

src/stories/LinkButton.stories.tsx

@@ -115,3 +115,11 @@ export const Block: Story = {
     </div>
   ),
 };
+
+export const Margin: Story = {
+  render: () => (
+    <div style={{ backgroundColor: 'var(--color-background-gray)', width: 'fit-content', overflow: 'hidden' }}>
+      <LinkButton {...defaultArgs} mt="lg" mr="lg" mb="lg" ml="lg" />
+    </div>
+  ),
+};

src/stories/Stack.stories.tsx

@@ -95,3 +95,15 @@ export const BlockLevelElementsToFullWidth: Story = {
   ),
   args: defaultArgs,
 };
+
+export const MarginAndPadding: Story = {
+  render: (args) => (
+    <Stack {...args} mt="lg" mr="lg" mb="lg" ml="lg" pt="xxl" pr="xxl" pb="xxl" pl="xxl">
+      <p style={{ margin: 0 }}>Text</p>
+      <p style={{ margin: 0 }}>Text</p>
+      <p style={{ margin: 0 }}>Text</p>
+      <p style={{ margin: 0 }}>Text</p>
+    </Stack>
+  ),
+  args: defaultArgs,
+};

src/types/style.ts

@@ -66,6 +66,17 @@ export type MarginProps = {
   ml?: Spacing;
 };
 
+export type MarginYProps = {
+  /**
+   * margin-topの値。Spacing Tokenのキーを指定
+   */
+  mt?: Spacing;
+  /**
+   * margin-bottomの値。Spacing Tokenのキーを指定
+   */
+  mb?: Spacing;
+};
+
 export type FlexDirection = 'row' | 'column';
 
 export type AlignItems = 'normal' | 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';

src/utils/style.ts

@@ -26,7 +26,7 @@ export const opacityToClassName = (opacity: Opacity) => {
   }
 };
 
-const createSpacingVariableFromKey = (key: Spacing) => {
+export const createSpacingVariableFromKey = (key: Spacing) => {
   return `var(--${DesignTokens.size[`spacing-${key}`].path.join('-')})`;
 };