improve: FloatArea で p > div になっていたので修正 (#1788)

kufu · Aug 12, 2021 · 992f9ca · 992f9ca
1 parent b12322b
commit 992f9ca
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 43 deletions.
diff --git a/src/components/FloatArea/FloatArea.stories.tsx b/src/components/FloatArea/FloatArea.stories.tsx
@@ -13,7 +13,7 @@ storiesOf('FloatArea', module)
       sidebar: readme,
     },
   })
-  .add('FloatArea', () => (
+  .add('all', () => (
     <FloatArea
       primaryButton={<PrimaryButton>Submit</PrimaryButton>}
       secondaryButton={<SecondaryButton>Cancel</SecondaryButton>}
@@ -24,3 +24,16 @@ storiesOf('FloatArea', module)
       top={40}
     />
   ))
+  .add('withoutTertiary', () => (
+    <FloatArea
+      primaryButton={<PrimaryButton>Submit</PrimaryButton>}
+      secondaryButton={<SecondaryButton>Cancel</SecondaryButton>}
+      errorIcon={<FaExclamationTriangleIcon color="#e01e5a" />}
+      errorText="This is the error text."
+      width="80%"
+      top={40}
+    />
+  ))
+  .add('onlyPrimary', () => (
+    <FloatArea primaryButton={<PrimaryButton>Submit</PrimaryButton>} top={40} />
+  ))
diff --git a/src/components/FloatArea/FloatArea.tsx b/src/components/FloatArea/FloatArea.tsx
@@ -3,6 +3,8 @@ import styled, { css } from 'styled-components'
 
 import { DialogBase as BaseComponent } from '../Base'
 import { FaExclamationCircleIcon, FaExclamationTriangleIcon } from '../Icon'
+import { Text } from '../Text'
+import { LineUp } from '../Layout'
 import { Theme, useTheme } from '../../hooks/useTheme'
 
 type ErrorIcons =
@@ -43,26 +45,26 @@ export const FloatArea: VFC<Props> = ({
 
   return (
     <Base themes={theme} className={className} $width={width} {...props}>
-      {tertiaryButton && tertiaryButton}
-      {errorText && (
-        <ErrorTextArea>
-          {errorIcon && <ErrorIcon themes={theme}>{errorIcon}</ErrorIcon>}
-          <ErrorText themes={theme}>{errorText}</ErrorText>
-        </ErrorTextArea>
-      )}
-      <ActionArea themes={theme}>
-        {secondaryButton && secondaryButton}
-        {primaryButton && primaryButton}
-      </ActionArea>
+      <LineUp align="space-between" vAlign="center">
+        {tertiaryButton && tertiaryButton}
+        <RightSide gap={1} vAlign="center">
+          {errorText && (
+            <LineUp gap={0.25} vAlign="center" as="p">
+              {errorIcon && <ErrorIcon themes={theme}>{errorIcon}</ErrorIcon>}
+              <Text size="S">{errorText}</Text>
+            </LineUp>
+          )}
+          {secondaryButton && secondaryButton}
+          {primaryButton && primaryButton}
+        </RightSide>
+      </LineUp>
     </Base>
   )
 }
 
 const Base = styled(BaseComponent)<StyleProps & { themes: Theme; $width: string }>`
   ${({ themes: { spacingByChar }, top, bottom, $width, zIndex = 500 }) =>
     css`
-      display: flex;
-      align-items: center;
       position: fixed;
       ${exist(top) && `top: ${top}px;`}
       ${exist(bottom) && `bottom: ${bottom}px;`}
@@ -71,35 +73,13 @@ const Base = styled(BaseComponent)<StyleProps & { themes: Theme; $width: string
       padding: ${spacingByChar(1)};
     `}
 `
-
-const ActionArea = styled.div<{ themes: Theme }>`
-  ${({ themes: { spacingByChar } }) =>
-    css`
-      > button,
-      > a {
-        margin-left: ${spacingByChar(1)};
-      }
-    `}
-`
-const ErrorTextArea = styled.p`
-  display: flex;
-  align-items: center;
-  margin: 0 0 0 auto;
-  line-height: 1;
-  max-width: 40%;
-`
-const ErrorIcon = styled.div<{ themes: Theme }>`
-  ${({ themes: { spacingByChar } }) =>
-    css`
-      margin-right: ${spacingByChar(0.5)};
-      flex-shrink: 0;
-    `}
+const RightSide = styled(LineUp)`
+  margin-left: auto;
 `
+const ErrorIcon = styled.span<{ themes: Theme }>`
+  flex-shrink: 0;
 
-const ErrorText = styled.div<{ themes: Theme }>`
-  ${({ themes: { fontSize } }) => {
-    return css`
-      font-size: ${fontSize.S};
-    `
-  }}
+  > svg {
+    display: block; /* 隙間対策 */
+  }
 `