Merge pull request #47 from 8845musign/fix-layout

Fixed layout collapse due to deletion of Stack's directions
ubie-oss · Apr 19, 2024 · 7ba4b10 · 7ba4b10
2 parents af9b783 + 5561401
commit 7ba4b10
Show file tree

Hide file tree

Showing 12 changed files with 48 additions and 50 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
     "@types/react-syntax-highlighter": "^15.5.11",
     "@ubie/design-tokens": "^0.1.4",
     "@ubie/ubie-icons": "^0.6.1",
-    "@ubie/ubie-ui": "^0.0.13",
+    "@ubie/ubie-ui": "^0.0.14",
     "@unocss/reset": "^0.58.5",
     "astro": "^4.4.4",
     "astro-icon": "^1.1.0",

diff --git a/src/components/react/ExampleSwitcher.tsx b/src/components/react/ExampleSwitcher.tsx
@@ -1,4 +1,4 @@
-import { Button, Stack } from '@ubie/ubie-ui';
+import { Button, Stack, Flex } from '@ubie/ubie-ui';
 import { useState, useMemo } from 'react';
 import Example from './Example';
 import type { Example as ExampleType } from '@utils/server';
@@ -22,7 +22,7 @@ const ExampleSwitcher: FC<Props> = ({ examples }) => {
   return (
     <>
       <Stack spacing="md" alignItems="normal">
-        <Stack direction="row" spacing="xs">
+        <Flex spacing="xs">
           {examples.map(({ name, url }) => (
             <Button
               size="small"
@@ -35,7 +35,7 @@ const ExampleSwitcher: FC<Props> = ({ examples }) => {
               {name}
             </Button>
           ))}
-        </Stack>
+        </Flex>
 
         {currentExample && <Example example={currentExample} />}
       </Stack>

diff --git a/src/components/react/WithCode/Codes.tsx b/src/components/react/WithCode/Codes.tsx
@@ -1,4 +1,4 @@
-import { Stack } from '@ubie/ubie-ui';
+import { Flex } from '@ubie/ubie-ui';
 import { clsx } from 'clsx';
 import { useState } from 'react';
 import { Code } from '../Code.jsx';
@@ -13,7 +13,7 @@ export const Codes: FC<Types> = ({ codes }) => {
 
   return (
     <div className={styles.codesBlock}>
-      <Stack direction="row" spacing="xxs">
+      <Flex spacing="xxs">
         {codes.map(({ lang, filename }, index) => (
           <button
             key={index}
@@ -26,7 +26,7 @@ export const Codes: FC<Types> = ({ codes }) => {
             {filename || lang}
           </button>
         ))}
-      </Stack>
+      </Flex>
       {codes.map(({ lang, code }, index) => (
         <div key={index} hidden={current !== index}>
           <Code lang={lang}>{code}</Code>

diff --git a/src/components/react/examples/stack/Centralized.tsx b/src/components/react/examples/stack/Centralized.tsx
@@ -1,9 +1,9 @@
-import { Stack } from '@ubie/ubie-ui';
+import { Flex } from '@ubie/ubie-ui';
 import type { FC } from 'react';
 
 const Centralized: FC = () => {
   return (
-    <Stack spacing="md" direction="row" justifyContent="center" alignItems="center">
+    <Flex spacing="md" justifyContent="center" alignItems="center">
       <span>
         Words
         <br />
@@ -17,7 +17,7 @@ const Centralized: FC = () => {
         <br />
         text
       </span>
-    </Stack>
+    </Flex>
   );
 };
 

diff --git a/src/components/react/examples/text/Body.tsx b/src/components/react/examples/text/Body.tsx
@@ -1,4 +1,4 @@
-import { Text, Stack } from '@ubie/ubie-ui';
+import { Text, Stack, Flex } from '@ubie/ubie-ui';
 import type { FC } from 'react';
 
 const Body: FC = () => {
@@ -10,7 +10,7 @@ const Body: FC = () => {
       <div>
         <dt>Default Leading</dt>
         <dd>
-          <Stack spacing="md" direction="row" alignItems="center">
+          <Flex spacing="md" alignItems="center">
             <Text type="body" size="sm">
               sm
               <br />
@@ -26,14 +26,14 @@ const Body: FC = () => {
               <br />
               {`${bodyText}`}
             </Text>
-          </Stack>
+          </Flex>
         </dd>
       </div>
 
       <div>
         <dt>Narrow Leading</dt>
         <dd>
-          <Stack spacing="md" direction="row" alignItems="center">
+          <Flex spacing="md" alignItems="center">
             <Text leading="narrow" type="body" size="sm">
               sm
               <br />
@@ -49,14 +49,14 @@ const Body: FC = () => {
               <br />
               {`${bodyText}`}
             </Text>
-          </Stack>
+          </Flex>
         </dd>
       </div>
 
       <div>
         <dt>Tight Leading</dt>
         <dd>
-          <Stack spacing="md" direction="row" alignItems="center">
+          <Flex spacing="md" alignItems="center">
             <Text leading="tight" type="body" size="sm">
               sm
               <br />
@@ -72,7 +72,7 @@ const Body: FC = () => {
               <br />
               {`${bodyText}`}
             </Text>
-          </Stack>
+          </Flex>
         </dd>
       </div>
     </Stack>

diff --git a/src/components/react/examples/text/Button.tsx b/src/components/react/examples/text/Button.tsx
@@ -1,11 +1,11 @@
-import { Text, Stack } from '@ubie/ubie-ui';
+import { Text, Flex } from '@ubie/ubie-ui';
 import type { FC } from 'react';
 
 const Button: FC = () => {
   const buttonText = '同意して症状から調べる';
 
   return (
-    <Stack spacing="md" direction="row" alignItems="center">
+    <Flex spacing="md" alignItems="center">
       <Text type="button" size="sm">
         sm
         <br />
@@ -21,7 +21,7 @@ const Button: FC = () => {
         <br />
         {`${buttonText}`}
       </Text>
-    </Stack>
+    </Flex>
   );
 };
 

diff --git a/src/components/react/examples/text/Color.tsx b/src/components/react/examples/text/Color.tsx
@@ -1,8 +1,8 @@
-import { Text, Stack } from '@ubie/ubie-ui';
+import { Text, Flex } from '@ubie/ubie-ui';
 import type { FC } from 'react';
 
 const Color: FC = () => (
-  <Stack spacing="md" direction="row">
+  <Flex spacing="md">
     <Text color="main">main</Text>
     <Text color="sub">sub</Text>
     <Text color="link">link</Text>
@@ -14,7 +14,7 @@ const Color: FC = () => (
     <span style={{ background: 'black', padding: '0 0.5em' }}>
       <Text color="white">white</Text>
     </span>
-  </Stack>
+  </Flex>
 );
 
 export default Color;
diff --git a/src/components/react/examples/text/Heading.tsx b/src/components/react/examples/text/Heading.tsx
@@ -1,11 +1,11 @@
-import { Text, Stack } from '@ubie/ubie-ui';
+import { Text, Flex } from '@ubie/ubie-ui';
 import type { FC } from 'react';
 
 const Heading: FC = () => {
   const headingText = '近くの医療機関から調べる';
 
   return (
-    <Stack spacing="md" direction="row" alignItems="center">
+    <Flex spacing="md" alignItems="center">
       <Text bold type="heading" size="xs">
         xs
         <br />
@@ -31,7 +31,7 @@ const Heading: FC = () => {
         <br />
         {`${headingText}`}
       </Text>
-    </Stack>
+    </Flex>
   );
 };
 

diff --git a/src/components/react/examples/text/Note.tsx b/src/components/react/examples/text/Note.tsx
@@ -1,4 +1,4 @@
-import { Text, Stack } from '@ubie/ubie-ui';
+import { Text, Stack, Flex } from '@ubie/ubie-ui';
 import type { FC } from 'react';
 
 const Note: FC = () => {
@@ -10,7 +10,7 @@ const Note: FC = () => {
       <div>
         <dt>Default Leading</dt>
         <dd>
-          <Stack spacing="md" direction="row" alignItems="center">
+          <Flex spacing="md" alignItems="center">
             <Text type="note" size="sm">
               sm
               <br />
@@ -26,14 +26,14 @@ const Note: FC = () => {
               <br />
               {`${noteText}`}
             </Text>
-          </Stack>
+          </Flex>
         </dd>
       </div>
 
       <div>
         <dt>Narrow Leading</dt>
         <dd>
-          <Stack spacing="md" direction="row" alignItems="center">
+          <Flex spacing="md" alignItems="center">
             <Text leading="narrow" type="note" size="sm">
               sm
               <br />
@@ -49,13 +49,13 @@ const Note: FC = () => {
               <br />
               {`${noteText}`}
             </Text>
-          </Stack>
+          </Flex>
         </dd>
       </div>
       <div>
         <dt>Tight Leading</dt>
         <dd>
-          <Stack spacing="md" direction="row" alignItems="center">
+          <Flex spacing="md" alignItems="center">
             <Text leading="tight" type="note" size="sm">
               sm
               <br />
@@ -71,7 +71,7 @@ const Note: FC = () => {
               <br />
               {`${noteText}`}
             </Text>
-          </Stack>
+          </Flex>
         </dd>
       </div>
     </Stack>

diff --git a/src/components/react/examples/text/Tag.tsx b/src/components/react/examples/text/Tag.tsx
@@ -1,11 +1,11 @@
-import { Text, Stack } from '@ubie/ubie-ui';
+import { Text, Flex } from '@ubie/ubie-ui';
 import type { FC } from 'react';
 
 const Tag: FC = () => {
   const tagText = '循環器内科';
 
   return (
-    <Stack spacing="md" direction="row" alignItems="center">
+    <Flex spacing="md" alignItems="center">
       <Text type="tag" size="sm">
         sm
         <br />
@@ -21,7 +21,7 @@ const Tag: FC = () => {
         <br />
         {`${tagText}`}
       </Text>
-    </Stack>
+    </Flex>
   );
 };
 

diff --git a/src/pages/components/stack.mdx b/src/pages/components/stack.mdx
@@ -2,7 +2,7 @@
 title: 'Stack'
 exampleKey: 'stack'
 layout: '@layouts/ComponentLayout.astro'
-description: '一方向に、一定のリズムで要素を積み上げるレイアウト'
+description: '垂直方向に、一定のリズムで要素を積み上げるレイアウト'
 thumbnail: '/assets/images/components/thumbnail-stack.svg'
 ---
 
@@ -14,10 +14,8 @@ thumbnail: '/assets/images/components/thumbnail-stack.svg'
 
 ## Usage
 
-- デフォルトでは垂直方向にStackします。水平方向にStackしたい場合は`direction='row'`を指定してください
 - Figma上で垂直/水平方向のAuto Layoutが指定されていた場合、`<Stack>`が最適です
 - 後に、子要素が増減したとしても、最小限のコード変更で対応することができます。`<Stack>`の子要素を増やすだけで済みます
-- 子要素の折り返しには対応していないため、`direction='row'`の場合は注意してください。横幅が足りなくなる可能性があります
 
 ## Accessibility