assign min height elsewhere, add by row examples

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

@@ -63,7 +63,6 @@
   .content {
     align-items: flex-start;
     display: flex;
-    min-height: 1em; // Setting a line height so when a blank display is passed in the content maintains it's height instead of shrinking
     overflow: hidden; // VERY IMPORTANT FOR IE10
   }
 
@@ -103,6 +102,21 @@
       flex: 1 1 auto;
       float: left;
     }
+
+    // .content:blank {
+    //   min-height: 1.3em; // Setting a line height so when a blank display is passed in the content maintains it's height instead of shrinking
+    // }
+
+    // .content:empty {
+    //   &::before {
+    //     min-height: 1.3em; // Setting a line height so when a blank display is passed in the content maintains it's height instead of shrinking
+    //   }
+    // }
+
+    // ideally we only want to apply this when the content is blank/empty but I haven't been able to get that to work
+    .content {
+      min-height: 1.25em; // Setting a line height so when a blank display is passed in the content maintains it's height instead of shrinking
+    }
   }
 
   .two-columns-by-row {

packages/terra-clinical-item-view/src/terra-dev-site/test/clinical-item-view/BlankDisplayItemView.test.jsx

@@ -13,25 +13,48 @@ const display6 = <ItemView.Display text="display 6" key="128" />;
 const display7 = <ItemView.Display text="display 7" key="129" />;
 const display8 = <ItemView.Display text="display 8" key="130" />;
 const blankDisplay = <ItemView.Display text="" key="111" />;
-const primaryColumnBlankLine = [display1, display2, blankDisplay, display4, display5, display6, display7, display8];
-const secondaryColumnBlankLine = [display1, display2, display3, blankDisplay, display5, display6, display7, display8];
-const bothColumnsBlankLine = [display1, blankDisplay, display3, display4, blankDisplay, display6, display7, blankDisplay];
+const primaryColumnBlankDisplay = [display1, display2, blankDisplay, display4, display5, display6, display7, display8];
+const secondaryColumnBlankDisplay = [display1, display2, display3, blankDisplay, display5, display6, display7, display8];
+const bothColumnsBlankDisplays = [display1, blankDisplay, display3, display4, blankDisplay, display6, display7, display8];
+const bothColumnsBlankDisplaysSameRow = [display1, display2, display3, display4, blankDisplay, blankDisplay, display7, display8];
 
 const cx = classNames.bind(styles);
 
 const views = () => (
   <div className={cx('blank-displays-itemview-wrapper')}>
-    <h2>One Column Layout</h2>
-    <ItemView displays={primaryColumnBlankLine} id="test-blank-displays" />
+    <h2>Two Column Layout - Left and Right Column with Blank Display </h2>
+    <ItemView displays={bothColumnsBlankDisplays} layout="twoColumns" id="test-blank-displays-two" trueColumn />
+    <br />
+    <h2>Two Column Layout - Left and Right Column with Blank Displays on Same Line </h2>
+    <ItemView displays={bothColumnsBlankDisplaysSameRow} layout="twoColumns" id="test-blank-displays-two-same-line" trueColumn />
+    <br />
+    <h2>Two Column Layout - Left Column with Blank Display </h2>
+    <ItemView displays={primaryColumnBlankDisplay} layout="twoColumns" id="test-blank-displays-two-left" trueColumn />
+    <br />
+    <h2>Two Column Layout - Right Column with Blank Display </h2>
+    <ItemView displays={secondaryColumnBlankDisplay} layout="twoColumns" id="test-blank-displays-two-right" trueColumn />
     <br />
-    <h2>Two Column Layout - Left and Right Column with Blank Lines </h2>
-    <ItemView displays={bothColumnsBlankLine} layout="twoColumns" id="test-blank-displays-two" trueColumn />
     <br />
-    <h2>Two Column Layout - Left Column with Blank Line </h2>
-    <ItemView displays={primaryColumnBlankLine} layout="twoColumns" id="test-blank-displays-two-left" trueColumn />
     <br />
-    <h2>Two Column Layout - Right Column with Blank Line </h2>
-    <ItemView displays={secondaryColumnBlankLine} layout="twoColumns" id="test-blank-displays-two-right" trueColumn />
+    <h2>Two Column Layout By Row - Left and Right Column with Blank Displays on Different Lines </h2>
+    <p>
+      This should have what appears to be a newline when there is a blank display on one side of a `row` - that was the previous behavior for two column layout.
+      That is because when one column has a display and the other in the same row has an empty display, the height from the populated display spans the entire row and therefore the column with the empty display still has the same height as the other.
+      This means the side with the empty display appears to be an blank newline.
+      No additonal changes to the css is needed for this, just want an example to show the behavior.
+    </p>
+    <ItemView displays={bothColumnsBlankDisplays} layout="twoColumns" id="test-blank-displays-by-row" />
+    <br />
+    <h2>Two Column Layout By Row - Left and Right Column with Blank Displays on Same Line </h2>
+    <p>
+      This should **not** have what appears to be a newline when there are two blank displays in the same row.
+      That is because this formatting spans the entire row and therefore if the two blank displays are in the same row, they both have no height and therefore no newline is shown where those would usually be.
+    </p>
+    <ItemView displays={bothColumnsBlankDisplaysSameRow} layout="twoColumns" id="test-blank-displays-by-row-same-line" />
+    <br />
+    <h2>One Column Layout</h2>
+    <p>This should not have a newline where there are blank displays. Adding this test case specifcally to show that.</p>
+    <ItemView displays={primaryColumnBlankDisplay} id="test-blank-displays" />
   </div>
 );
 

packages/terra-clinical-item-view/tests/wdio/item-view-spec.js

@@ -23,8 +23,8 @@ Terra.describeViewports('Clinical Item View', ['tiny', 'small', 'medium', 'large
   it('renders with blank lines', () => {
     browser.url('/raw/tests/terra-clinical-item-view/clinical-item-view/blank-display-item-view');
 
-    Terra.validates.element('with blank line in one column', { selector: '#test-blank-displays' });
-    Terra.validates.element('with blank lines in two columns', { selector: '#test-blank-displays-two' });
+    Terra.validates.element('with blank displays in two columns', { selector: '#test-blank-displays-two' });
+    Terra.validates.element('with blank displays in two column and same line', { selector: '#test-blank-displays-two-same-line' });
   });
 
   it('renders with default comment set', () => {