From 992f9cab2440bf397490b4ba87d74d571a37a0ae Mon Sep 17 00:00:00 2001
From: KANAMORI Yu <y.kinmori@gmail.com>
Date: Thu, 12 Aug 2021 14:55:35 +0900
Subject: [PATCH] =?UTF-8?q?improve:=20FloatArea=20=E3=81=A7=20p=20>=20div?=
 =?UTF-8?q?=20=E3=81=AB=E3=81=AA=E3=81=A3=E3=81=A6=E3=81=84=E3=81=9F?=
 =?UTF-8?q?=E3=81=AE=E3=81=A7=E4=BF=AE=E6=AD=A3=20(#1788)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FloatArea/FloatArea.stories.tsx           | 15 ++++-
 src/components/FloatArea/FloatArea.tsx        | 64 +++++++------------
 2 files changed, 36 insertions(+), 43 deletions(-)

diff --git a/src/components/FloatArea/FloatArea.stories.tsx b/src/components/FloatArea/FloatArea.stories.tsx
index ce8e3608df..702dae5b2d 100644
--- 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
index 532803435f..f39eae1207 100644
--- 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,17 +45,19 @@ 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>
   )
 }
@@ -61,8 +65,6 @@ export const FloatArea: VFC<Props> = ({
 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; /* 隙間対策 */
+  }
 `