Merge pull request #121 from 8845musign/inline-box-and-flex

Add Inline prop to box and flex component
ubie-oss · Jul 17, 2024 · 2c53526 · 2c53526
2 parents 4e19e3b + 026d147
commit 2c53526
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 1 deletion.
diff --git a/src/components/Box/Box.module.css b/src/components/Box/Box.module.css
@@ -83,3 +83,7 @@
 .box.textNoWrap {
   white-space: nowrap;
 }
+
+.box.inline {
+  display: inline-block;
+}
diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx
@@ -64,6 +64,11 @@ type BaseProps = {
    * 領域が狭い場合でも、テキストを折り返えさない
    */
   textNoWrap?: boolean;
+  /**
+   * inline-blockとして扱う
+   * @default false
+   */
+  inline?: boolean;
 } & PaddingProps &
   MarginProps &
   RadiusProp &
@@ -185,6 +190,7 @@ export const Box: FC<PropsWithoutText | PropsWithTextBody | PropsWithTextNote> =
   backgroundColor,
   border,
   width,
+  inline = false,
   textType,
   textSize,
   textLeading,
@@ -209,6 +215,7 @@ export const Box: FC<PropsWithoutText | PropsWithTextBody | PropsWithTextNote> =
         backgroundColor && styles[`backgroundColor${capitalize(backgroundColor)}`],
         border && styles[`border${capitalize(border)}`],
         width && styles.widthFull,
+        inline && styles.inline,
         textBold && styles.textBold,
         textBold === false && styles.textNormal,
         textAlign && styles[`text${capitalize(textAlign)}`],

diff --git a/src/components/Flex/Flex.module.css b/src/components/Flex/Flex.module.css
@@ -15,3 +15,7 @@
 .flex.widthFull {
   width: 100%;
 }
+
+.flex.inline {
+  display: inline-flex;
+}
diff --git a/src/components/Flex/Flex.tsx b/src/components/Flex/Flex.tsx
@@ -50,6 +50,11 @@ type Props = {
    * デフォルト<Flex>は横幅いっぱいを専有する。しかし例えば、フレックスコンテナの子要素として配置した場合、横幅が自身の子に合わせて小さくなる。これが不都合の場合に100%とする事が可能
    */
   width?: 'full';
+  /**
+   * inline-flexとして扱う
+   * @default false
+   */
+  inline?: boolean;
 } & MarginProps &
   PaddingProps &
   CustomDataAttributeProps;
@@ -64,6 +69,7 @@ export const Flex: FC<PropsWithChildren<Props>> = ({
   spacing,
   height,
   width,
+  inline,
   p,
   px,
   py,
@@ -91,7 +97,12 @@ export const Flex: FC<PropsWithChildren<Props>> = ({
 
   return createElement(
     {
-      className: clsx(styles.flex, height === 'full' && styles.heightFull, width === 'full' && styles.widthFull),
+      className: clsx(
+        styles.flex,
+        height === 'full' && styles.heightFull,
+        width === 'full' && styles.widthFull,
+        inline && styles.inline,
+      ),
       style: {
         '--flex-direction': direction,
         '--align-items': alignItems,

diff --git a/src/stories/Box.stories.tsx b/src/stories/Box.stories.tsx
@@ -367,3 +367,23 @@ export const TextWrap: Story = {
     ...defaultArgs,
   },
 };
+
+export const Inline: Story = {
+  render: (args) => (
+    <p>
+      文章文章文章
+      <Box {...args} inline>
+        インライン
+      </Box>
+      文章文章文章
+    </p>
+  ),
+  args: {
+    ...defaultArgs,
+    as: 'span',
+    backgroundColor: 'primary',
+    inline: true,
+    p: 'xs',
+    m: 'sm',
+  },
+};
diff --git a/src/stories/Flex.stories.tsx b/src/stories/Flex.stories.tsx
@@ -225,3 +225,23 @@ export const WithFlexItem: Story = {
     </div>
   ),
 };
+
+export const Inline: Story = {
+  render: () => (
+    <p>
+      文章文章文章文章文章文章
+      <Flex as="span" spacing="md" inline>
+        <Box as="span" inline backgroundColor="primary" p="xs" radius="md">
+          Item
+        </Box>
+        <Box as="span" inline backgroundColor="primary" p="xs" radius="md">
+          Item
+        </Box>
+        <Box as="span" inline backgroundColor="primary" p="xs" radius="md">
+          Item
+        </Box>
+      </Flex>
+      文章
+    </p>
+  ),
+};