fix(ListRow) Improve centering of subtitle when list row is expanded;…

… fix subtitle text overflowing onto button; fix overflow section columns on list catalog page; Update ListFlowOverflow spec; bottomsheet catalog page; sectionItemShape (#162)
ticketmaster · Sep 13, 2018 · 71c3a65 · 71c3a65
1 parent 5645f38
commit 71c3a65
Show file tree

Hide file tree

Showing 10 changed files with 485 additions and 654 deletions.
diff --git a/catalog/pages/bottom_sheet/index.js b/catalog/pages/bottom_sheet/index.js
@@ -8,6 +8,9 @@ import { sections } from "../list_row/mock";
 import ListRowOverflow from "../../../src/components/List/Overflow";
 import Section from "../../../src/components/List/Section";
 import SectionItem from "../../../src/components/List/SectionItem";
+import { constants } from "../../../src/theme";
+
+const { MAX_COLUMNS } = constants;
 
 export default {
   path: "/bottomSheet",
@@ -19,7 +22,8 @@ export default {
     SectionItem,
     sections,
     ListRowOverflow,
-    ReactCSSTransitionGroup
+    ReactCSSTransitionGroup,
+    MAX_COLUMNS
   },
   content: pageLoader(() => import("./index.md"))
 };
diff --git a/catalog/pages/bottom_sheet/index.md b/catalog/pages/bottom_sheet/index.md
@@ -15,7 +15,7 @@ responsive: true
     <BottomSheet>
      <ListRowOverflow>
       {sections.map(section =>
-        <Section title={section.title} totalSections={4} key={section.key}>
+        <Section title={section.title} noOfColumns={MAX_COLUMNS / sections.length} key={section.key}>
           {section.items.map(item =>
           <SectionItem item={item} key={item.title}/>)}
         </Section>

diff --git a/catalog/pages/list_row/index.js b/catalog/pages/list_row/index.js
@@ -8,8 +8,11 @@ import {
   SectionItem
 } from "../../../src/components/List";
 import { Button } from "../../../src/components/Button";
+import { constants } from "../../../src/theme";
 import { listItems, sections } from "./mock";
 
+const { MAX_COLUMNS } = constants;
+
 const onOverflowButtonClick = ({ scope, index }) => ({ event }) => ev => {}; // eslint-disable-line
 
 export default {
@@ -24,7 +27,8 @@ export default {
     Button,
     listItems,
     sections,
-    onOverflowButtonClick
+    onOverflowButtonClick,
+    MAX_COLUMNS
   },
   content: pageLoader(() => import("./index.md"))
 };
diff --git a/catalog/pages/list_row/index.md b/catalog/pages/list_row/index.md
@@ -26,7 +26,7 @@ rows:
 
 ### ListContainer
 
-Container Component which contians all the ListRows and is responsible for managing the expand or collapse state for the row.
+Container Component which contains all the ListRows and is responsible for managing the expand or collapse state for the row.
 
 ### Props
 
@@ -107,7 +107,7 @@ responsive: true
   <ListRow rowItem={listItems[0]} index={0} onOverflowClick={()=>{}}>
     <ListRowOverflow>
     {sections.map(section =>
-        <Section title={section.title} totalSections={4} key={section.key}>
+        <Section title={section.title} noOfColumns={MAX_COLUMNS / sections.length} key={section.key}>
           {section.items.map(item =>
           <SectionItem item={item} key={item.title}/>)}
         </Section>
@@ -117,11 +117,11 @@ responsive: true
 
   <ListRow rowItem={listItems[1]} index={1} onOverflowClick={()=>{}}>
     <ListRowOverflow>
-      <Section title={sections[0].title} totalSections={2} key={sections[0].key}>
+      <Section title={sections[0].title} noOfColumns={MAX_COLUMNS / sections.length} key={sections[0].key}>
           {sections[0].items.map(item =>
           <SectionItem item={item} key={item.title}/>)}
       </Section>
-       <Section title={sections[1].title} totalSections={2} key={sections[1].key}>
+       <Section title={sections[1].title} noOfColumns={MAX_COLUMNS / sections.length} key={sections[1].key}>
           {sections[1].items.map(item =>
           <SectionItem item={item} key={item.title}/>)}
       </Section>
@@ -131,15 +131,15 @@ responsive: true
 
   <ListRow rowItem={listItems[2]} index={2} onOverflowClick={()=>{}}>
     <ListRowOverflow>
-     <Section title={sections[0].title} totalSections={3} key={sections[0].key}>
+     <Section title={sections[0].title} noOfColumns={MAX_COLUMNS / sections.length} key={sections[0].key}>
           {sections[0].items.map(item =>
           <SectionItem item={item} key={item.title}/>)}
       </Section>
-       <Section title={sections[1].title} totalSections={3} key={sections[1].key}>
+       <Section title={sections[1].title} noOfColumns={MAX_COLUMNS / sections.length} key={sections[1].key}>
           {sections[1].items.map(item =>
           <SectionItem item={item} key={item.title}/>)}
       </Section>
-      <Section title={sections[2].title} totalSections={3} key={sections[2].key}>
+      <Section title={sections[2].title} noOfColumns={MAX_COLUMNS / sections.length} key={sections[2].key}>
           {sections[2].items.map(item =>
           <SectionItem item={item} key={item.title}/>)}
       </Section>
@@ -148,15 +148,15 @@ responsive: true
 
   <ListRow rowItem={listItems[3]} index={3} onOverflowClick={()=>{}}>
     <ListRowOverflow>
-     <Section title={sections[0].title} totalSections={3} key={sections[0].key}>
+     <Section title={sections[0].title} noOfColumns={MAX_COLUMNS / sections.length} key={sections[0].key}>
           {sections[0].items.map(item =>
           <SectionItem item={item} key={item.title}/>)}
       </Section>
-       <Section title={sections[1].title} totalSections={3} key={sections[1].key}>
+       <Section title={sections[1].title} noOfColumns={MAX_COLUMNS / sections.length} key={sections[1].key}>
           {sections[1].items.map(item =>
           <SectionItem item={item} key={item.title}/>)}
       </Section>
-      <Section title={sections[2].title} totalSections={3} key={sections[2].key}>
+      <Section title={sections[2].title} noOfColumns={MAX_COLUMNS / sections.length} key={sections[2].key}>
           {sections[2].items.map(item =>
           <SectionItem item={item} key={item.title}/>)}
       </Section>
@@ -176,7 +176,7 @@ responsive: true
  <ListRow rowItem={listItems[0]} index={0} onOverflowClick={()=>{}}>
  <ListRowOverflow>
  {sections.map(section =>
-    <Section title={section.title} totalSections={4} key={section.key}>
+    <Section title={section.title} noOfColumns={MAX_COLUMNS / sections.length} key={section.key}>
       {section.items.map(item =>
       <SectionItem item={item} key={item.title}/>)}
     </Section>

diff --git a/catalog/pages/list_row/mock.js b/catalog/pages/list_row/mock.js
@@ -34,7 +34,7 @@ export const listItems = [
   {
     rowId: "570",
     title: "Del Mar Fairgrounds",
-    subTitle: "KABOO 3-Day Pass",
+    subTitle: "KABOO 3-Day Premium Pass with Exclusive Back Stage Access",
     dateTitle: "apr 23",
     dateSubTitle: "Thu, 8:00 PM",
     buttonText: "Acheter des Billets",
@@ -70,8 +70,7 @@ export const sections = [
         title: "Parking Pass Available",
         icon: <ParkingIcon size={26} color={colors.blackPearl} />
       }
-    ],
-    totalSections: 4
+    ]
   },
 
   {
@@ -85,8 +84,7 @@ export const sections = [
         onItemClick: () => {},
         url: "/"
       }
-    ],
-    totalSections: 4
+    ]
   },
 
   {
@@ -116,8 +114,7 @@ export const sections = [
         ),
         onItemClick: () => {}
       }
-    ],
-    totalSections: 4
+    ]
   },
   {
     title: "More",
@@ -128,8 +125,7 @@ export const sections = [
         icon: <TicketIcon size={26} color={colors.blackPearl} />,
         onItemClick: () => {}
       }
-    ],
-    totalSections: 4
+    ]
   }
 ];
 

diff --git a/src/components/List/RowContent.js b/src/components/List/RowContent.js
@@ -11,7 +11,7 @@ import { Row, Column } from "../Grid";
 import { PrimaryText, SecondaryText, BoldText, Link } from "../Text";
 import OverflowIcon from "../Icons/Overflow";
 import ChevronIcon from "../Icons/Chevron";
-import { mediumAndUp, largeAndUp } from "../../theme/mediaQueries";
+import { mediumAndUp } from "../../theme/mediaQueries";
 import { rowDataShape } from "./shape";
 import constants from "../../theme/constants";
 
@@ -102,6 +102,7 @@ const DateWrapper = styled.div`
 const ContentColumn = styled(Column)`
   display: none;
   ${mediumAndUp`
+  position: relative;
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -196,25 +197,19 @@ const MultilinePrimaryText = styled(PrimaryText)`
   /* stylelint-enable */
 
   ${mediumAndUp`
-    &.multiline-text {
+    &.subtitle--hidden {
       position: absolute;
       transition: opacity 0.1s ${constants.easing.easeInQuad};
       opacity: 0;
     }
 
-    &.multiline-text--active {
+    &.subtitle--active {
       transition: opacity 0.3s ${constants.easing.easeInOutQuad} 0.2s;
       opacity: 1;
     }
 
-    &.multiline-text__subtitle {
-      margin-left: 40px;
-    }
-  `};
-
-  ${largeAndUp`
-    &.multiline-text__subtitle {
-      margin-left: 125px;
+    &.subtitle--expanded {
+      transform: translateX(-55%);
     }
   `};
 `;
@@ -305,9 +300,7 @@ const ListRowContent = ({
 
           <ContentColumn
             key="primary"
-            medium={4.5}
-            large={4}
-            xLarge={5}
+            medium={6}
             className={classnames({
               column__content: true,
               "list-row--title": true,
@@ -317,25 +310,25 @@ const ListRowContent = ({
           >
             <MultilinePrimaryText>{title}</MultilinePrimaryText>
           </ContentColumn>
-          <ContentColumn key="secondary" medium={7.5} large={8} xLarge={7}>
+          <ContentColumn key="secondary" medium={6}>
             <MultilinePrimaryText
               key="collapsed"
               className={classnames({
-                "multiline-text": true,
-                "multiline-text__subtitle": true,
+                subtitle: true,
                 "list-row--subtitle": true,
-                "multiline-text--active": !isOpen,
-                "multiline-text--hidden": isOpen
+                "subtitle--active": !isOpen,
+                "subtitle--hidden": isOpen
               })}
             >
               {subTitle}
             </MultilinePrimaryText>
             <MultilinePrimaryText
               key="expanded"
               className={classnames({
-                "multiline-text": true,
-                "multiline-text--active": isOpen,
-                "multiline-text--hidden": !isOpen
+                subtitle: true,
+                "subtitle--expanded": true,
+                "subtitle--active": isOpen,
+                "subtitle--hidden": !isOpen
               })}
             >
               {isOpen && onExpandShow === "title" ? title : subTitle}

diff --git a/src/components/List/__tests__/ListRowOverflow.spec.js b/src/components/List/__tests__/ListRowOverflow.spec.js
@@ -5,6 +5,9 @@ import { sections } from "../../../../catalog/pages/list_row/mock";
 import ListRowOverflow from "../Overflow";
 import Section from "../Section";
 import SectionItem from "../SectionItem";
+import { constants } from "../../../theme";
+
+const { MAX_COLUMNS } = constants;
 
 describe("<ListRowOverflow />", () => {
   it("renders ListRowOverflow correctly", () => {
@@ -13,7 +16,7 @@ describe("<ListRowOverflow />", () => {
         {sections.map(section => (
           <Section
             title={section.title}
-            totalSections={4}
+            totalSections={MAX_COLUMNS / sections.length}
             key={section.id}
             id={section.id}
           >