[terra-clinical-item-view] Corrected readout order for two column lay…

…out (#897)

packages/terra-clinical-item-view/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Fixed the readout order for two column layout to read by column and not by row. Created true columns instead of split rows.
+
 ## 4.9.0 - (August 2, 2023)
 
 * Changed

packages/terra-clinical-item-view/src/ItemView.jsx

@@ -38,7 +38,7 @@ const propTypes = {
    */
   isTruncated: PropTypes.bool,
   /**
-   * The vertical alignment of the start and end accesories. One of `alignTop`, `alignCenter`.
+   * The vertical alignment of the start and end accessories. One of `alignTop`, `alignCenter`.
    */
   accessoryAlignment: PropTypes.oneOf(['alignTop', 'alignCenter']),
   /**
@@ -81,6 +81,7 @@ const defaultProps = {
 
 const renderAccessory = (accessory, reserveSpace, accessoryAlignment, type) => {
   let accessorySection;
+
   if (accessory || reserveSpace) {
     const accessoryClassNames = cx(
       'accessory',
@@ -95,6 +96,7 @@ const renderAccessory = (accessory, reserveSpace, accessoryAlignment, type) => {
       </div>
     );
   }
+
   return accessorySection;
 };
 
@@ -106,40 +108,49 @@ const defaultEmphasisContentClassesFromIndexes = (rowIndex, rowCount) => {
     contentSize = 'content-secondary-size';
   }
 
-  if (rowCount === 2 && rowIndex === 1) {
-    contentColor = 'content-secondary-color';
-  } else if (rowIndex >= 2) {
+  if (rowIndex >= 2 || (rowCount === 2 && rowIndex === 1)) {
     contentColor = 'content-secondary-color';
   }
 
   return [contentSize, contentColor];
 };
 
-const startEmphasisContentClassesFromIndexes = (rowIndex, rowCount, contentIndex) => {
-  if (contentIndex === 1) {
+const startEmphasisContentClassesFromIndexes = (rowIndex, rowCount, columnIndex) => {
+  if (columnIndex > 0 || rowIndex >= 2) {
     return ['content-secondary-size', 'content-secondary-color'];
   }
 
   return defaultEmphasisContentClassesFromIndexes(rowIndex, rowCount);
 };
 
-const classesForContent = (rowIndex, rowCount, contentIndex, emphasis) => {
+const classesForContent = (rowIndex, rowCount, columnIndex, emphasis) => {
   let classes;
+
   if (emphasis === TextEmphasisTypes.START) {
-    classes = startEmphasisContentClassesFromIndexes(rowIndex, rowCount, contentIndex);
+    classes = startEmphasisContentClassesFromIndexes(rowIndex, rowCount, columnIndex);
   } else {
     classes = defaultEmphasisContentClassesFromIndexes(rowIndex, rowCount);
   }
+
   return ['content'].concat(classes);
 };
 
-const renderRow = (row, rowIndex, rowCount, emphasis) => {
-  const rowKey = rowIndex;
+const renderColumn = (displayGroup, displayGroupIndex, emphasis) => {
+  const columnKey = displayGroupIndex;
+  const displayCount = displayGroup.length;
+  let containerStyling;
+
+  if (displayGroupIndex === 0) {
+    containerStyling = 'primary-column';
+  } else {
+    containerStyling = 'secondary-column';
+  }
+
   return (
-    <div className={cx('row')} key={rowKey}>
-      {row.map((display, contentIndex) => {
+    <div className={cx(containerStyling)} key={columnKey}>
+      {displayGroup.map((display, contentIndex) => {
         const contentKey = contentIndex;
-        const contentClasses = classesForContent(rowIndex, rowCount, contentIndex, emphasis);
+        const contentClasses = classesForContent(contentIndex, displayCount, displayGroupIndex, emphasis);
         return (
           <div className={cx(contentClasses)} key={contentKey}>
             {display}
@@ -150,24 +161,44 @@ const renderRow = (row, rowIndex, rowCount, emphasis) => {
   );
 };
 
-const renderRows = (displays, layout, emphasis) => {
+const renderView = (displays, layout, emphasis) => {
   if (displays === null || displays === undefined || !displays.length) {
     return undefined;
   }
 
+  const primaryColumn = [];
   const displayGroups = [];
   const displaysSlice = displays.slice(0, 8);
-  const spliceValue = layout === Layouts.TWO_COLUMNS ? 2 : 1;
 
-  while (displaysSlice.length) {
-    displayGroups.push(displaysSlice.splice(0, spliceValue));
+  if (layout === Layouts.TWO_COLUMNS) {
+    let count = 0;
+    const secondaryColumn = [];
+
+    while (displaysSlice.length) {
+      count += 1;
+
+      if (count % 2 === 0) {
+        secondaryColumn.push(displaysSlice.splice(0, 1));
+      } else {
+        primaryColumn.push(displaysSlice.splice(0, 1));
+      }
+    }
+
+    displayGroups.push(primaryColumn);
+    displayGroups.push(secondaryColumn);
+  } else {
+    while (displaysSlice.length) {
+      primaryColumn.push(displaysSlice.splice(0, 1));
+    }
+
+    displayGroups.push(primaryColumn);
   }
 
   return (
-    <div className={cx('row-container')}>
+    <div className={cx('column-container')}>
       {displayGroups.map((group, index) => {
-        const row = renderRow(group, index, displayGroups.length, emphasis);
-        return row;
+        const column = renderColumn(group, index, emphasis);
+        return column;
       })}
     </div>
   );
@@ -192,7 +223,8 @@ const ItemView = ({
       'item-view',
       { 'is-truncated': isTruncated },
       { 'one-column': layout === Layouts.ONE_COLUMN },
-      { 'two-columns': layout === Layouts.TWO_COLUMNS },
+      { 'two-columns': (layout === Layouts.TWO_COLUMNS && !isTruncated) },
+      { 'truncated-two-columns': (layout === Layouts.TWO_COLUMNS && isTruncated) },
       theme.className,
     ),
     customProps.className,
@@ -202,7 +234,7 @@ const ItemView = ({
     <div {...customProps} className={viewClassNames} ref={refCallback}>
       {renderAccessory(startAccessory, reserveStartAccessorySpace, accessoryAlignment, 'start')}
       <div className={cx('body')}>
-        {renderRows(displays, layout, textEmphasis)}
+        {renderView(displays, layout, textEmphasis)}
         {comment}
       </div>
       {renderAccessory(endAccessory, false, accessoryAlignment, 'end')}

packages/terra-clinical-item-view/src/ItemView.module.scss

@@ -55,9 +55,9 @@
     overflow: hidden; // VERY IMPORTANT FOR IE10
   }
 
-  .row {
+  .column-container {
     display: flex;
-    width: 100%;
+    flex-flow: row nowrap;
   }
 
   .content {
@@ -67,6 +67,18 @@
     overflow: hidden; // VERY IMPORTANT FOR IE10
   }
 
+  .secondary-column {
+    flex: 1 0 auto;
+    float: right;
+    max-width: 60%;
+
+    .content {
+      @include terra-text-align-end();
+      justify-content: flex-end;
+      padding-left: 5px;
+    }
+  }
+
   .is-truncated,
   .is-truncated [data-terra-clinical-item-display-text] {
     @include terra-clinical-text-truncate;
@@ -75,31 +87,26 @@
   // Layouts
   /* stylelint-disable selector-max-compound-selectors */
   .one-column {
-    .row-container {
-      display: flex;
-      flex-flow: row wrap;
-
-      .content {
-        width: 100%;
-      }
+    .primary-column {
+      width: 100%;
     }
   }
   /* stylelint-enable selector-max-compound-selectors */
 
   .two-columns {
-    .content:nth-child(odd) {
+    .primary-column {
       flex: 1 1 auto;
-      justify-content: flex-start;
+      float: left;
     }
+  }
 
-    .content:nth-child(even) {
-      @include terra-text-align-end();
-      flex: 1 0 auto;
-      justify-content: flex-end;
-      // Set a max-width and disable flexbox-squishing on the right-most displays. This will ensure that they aren't
-      // prematurely squished and maximize the available space for all labels.
-      max-width: 60%;
-      padding-left: 5px;
+  .truncated-two-columns {
+    .primary-column {
+      flex: 1 1 auto;
+      float: left;
+      // Without a max width set below, the content within the primary column won't truncate properly
+      // Width isn't set for primary-column anywhere else because it will mess up the column spacing when isTruncated is false
+      max-width: 40%;
     }
   }