fix: long title InformationPanel

kufu · Feb 6, 2020 · b9d47b5 · b9d47b5
1 parent 8e6e4e4
commit b9d47b5
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 23 deletions.
diff --git a/src/components/InformationPanel/InformationPanel.stories.tsx b/src/components/InformationPanel/InformationPanel.stories.tsx
@@ -13,7 +13,11 @@ storiesOf('InformationPanel', module)
   })
   .add('all', () => (
     <Wrapper>
-      <InformationPanel title="Panel Title" openButtonLabel="OPEN" closeButtonLabel="CLOSE">
+      <InformationPanel
+        title="Panel Title Panel Title Panel Title Panel Title Panel Title Panel Title Panel Title Panel Title Panel Title Panel Title Panel Title Panel Title Panel Title Panel Title Panel Title Panel Title"
+        openButtonLabel="OPEN"
+        closeButtonLabel="CLOSE"
+      >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
         labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
         laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in

diff --git a/src/components/InformationPanel/InformationPanel.tsx b/src/components/InformationPanel/InformationPanel.tsx
@@ -70,19 +70,23 @@ export const InformationPanel: FC<Props> = ({
 
   return (
     <Wrapper className={className} themes={theme}>
-      <Title themes={theme}>
-        <TitleIcon name={iconName} color={iconColor} themes={theme} />
-        <Heading type="blockTitle" tag={titleTag}>
-          {title}
-        </Heading>
-        <PanelButton
-          suffix={<Icon size={14} name={active ? 'fa-caret-up' : 'fa-caret-down'} />}
-          size="s"
-          onClick={handleClickTrigger}
-        >
-          {active ? closeButtonLabel : openButtonLabel}
-        </PanelButton>
-      </Title>
+      <Header themes={theme}>
+        <Title themes={theme}>
+          <TitleIcon name={iconName} color={iconColor} themes={theme} />
+          <StyledHeading type="blockTitle" tag={titleTag}>
+            {title}
+          </StyledHeading>
+        </Title>
+        <div>
+          <SecondaryButton
+            suffix={<Icon size={14} name={active ? 'fa-caret-up' : 'fa-caret-down'} />}
+            size="s"
+            onClick={handleClickTrigger}
+          >
+            {active ? closeButtonLabel : openButtonLabel}
+          </SecondaryButton>
+        </div>
+      </Header>
       {active && <Content themes={theme}>{children}</Content>}
     </Wrapper>
   )
@@ -99,14 +103,26 @@ const Wrapper = styled(Base)<{ themes: Theme }>`
   }}
 `
 
-const Title = styled.div<{ themes: Theme }>`
+const Header = styled.div<{ themes: Theme }>`
   display: flex;
-  justify-content: start;
-  align-items: center;
-  position: relative;
+  justify-content: space-between;
+`
+
+const Title = styled.div<{ themes: Theme }>`
+  vertical-align: middle;
+
+  ${({ themes }) => {
+    const { pxToRem, space } = themes.size
+
+    return css`
+      margin-right: ${pxToRem(space.XXS)};
+    `
+  }}
 `
 
 const TitleIcon = styled(Icon)<{ themes: Theme }>`
+  vertical-align: text-top;
+
   ${({ themes }) => {
     const { pxToRem, space } = themes.size
 
@@ -127,9 +143,6 @@ const Content = styled.div<{ themes: Theme }>`
   }}
 `
 
-const PanelButton = styled(SecondaryButton)`
-  position: absolute;
-  top: 50%;
-  right: 0;
-  transform: translateY(-50%);
+const StyledHeading = styled(Heading)`
+  display: inline;
 `