Change prop to default to false

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

@@ -32,7 +32,8 @@ const propTypes = {
   /**
   * Determines whether the displays are programmatically separated by row or as true columns when layout is set to `twoColumns`.
   * Screenreaders will read `trueColumn` displays from top to bottom, one column at a time.
-  * When this prop is set to false the screenreader will read the displays in both columns together, left to right, one row at a time.
+  * However, this prop defaults to false and therefore the screenreader will read the displays in both columns together, left to right, one row at a time.
+  * For accessibility purposes it is recommended to set trueColumn to true.
   */
   trueColumn: PropTypes.bool,
   /**
@@ -79,7 +80,7 @@ const propTypes = {
 
 const defaultProps = {
   layout: Layouts.ONE_COLUMN,
-  trueColumn: true,
+  trueColumn: false,
   textEmphasis: TextEmphasisTypes.DEFAULT,
   overrideDefaultStyling: false,
   isTruncated: false,

packages/terra-clinical-item-view/src/terra-dev-site/doc/clinical-item-view/clinicalItemView.1.doc.mdx

@@ -36,11 +36,13 @@ import ItemView from 'terra-clinical-item-view';
 <ItemViewStandard title="ItemView - Default" />
 <ItemViewTwoColumn
     title="ItemView - Two Column Layout"
-    description="When including icons as part of an '<ItemView.Display />'', it is recommended to use the iconAlignment='inline' prop for best alignment and wrapping with the text."
+    description="When including icons as part of an '<ItemView.Display />', it is recommended to use the iconAlignment='inline' prop for best alignment and wrapping with the text."
 />
 <ItemViewTwoColumnByRow
     title="ItemView - Two Column Layout By Row"
-    description="When the `trueColumn` prop is set to `false` the displays are split two at a time into rows which are stylized to look like columns instead of true columns. So the ItemView is formatted to look like columns but programmatically it's handled by row."
+    description="The 'trueColumn' prop defaults to 'false' so this is the default behavior for the two column layout.
+    The displays are split two at a time into rows which are stylized to look like columns instead of actual true columns - programmatically it's handled by row.
+    When using the two column layout, it is recommended to have the 'trueColumn' prop set to 'true' for best accessibility adhearence."
 />
 <ItemViewTwoColumnStart title="ItemView - Start Emphasis" />
 <ItemViewComment title="ItemView - Comment" />

packages/terra-clinical-item-view/src/terra-dev-site/doc/example/ItemViewAll.jsx

@@ -27,5 +27,6 @@ export default () => (
     startAccessory={accessoryStart}
     endAccessory={accessoryEnd}
     comment={comment}
+    trueColumn
   />
 );

packages/terra-clinical-item-view/src/terra-dev-site/doc/example/ItemViewAllTopAligned.jsx

@@ -28,5 +28,6 @@ export default () => (
     startAccessory={accessoryStart}
     endAccessory={accessoryEnd}
     comment={comment}
+    trueColumn
   />
 );

packages/terra-clinical-item-view/src/terra-dev-site/doc/example/ItemViewTwoColumn.jsx

@@ -11,4 +11,4 @@ const display5 = <ItemView.Display text="Start Time: 08-05-2016 12:00:00" />;
 const display6 = <ItemView.Display text="End Time: 08-05-2016 16:00:00" />;
 const displays = [display1, display2, display3, display4, display5, display6];
 
-export default () => <ItemView displays={displays} layout="twoColumns" />;
+export default () => <ItemView displays={displays} layout="twoColumns" trueColumn />;

packages/terra-clinical-item-view/src/terra-dev-site/doc/example/ItemViewTwoColumnByRow.jsx

@@ -11,4 +11,4 @@ const display5 = <ItemView.Display text="Start Time: 08-05-2016 12:00:00" />;
 const display6 = <ItemView.Display text="End Time: 08-05-2016 16:00:00" />;
 const displays = [display1, display2, display3, display4, display5, display6];
 
-export default () => <ItemView displays={displays} layout="twoColumns" trueColumn={false} />;
+export default () => <ItemView displays={displays} layout="twoColumns" />;

packages/terra-clinical-item-view/src/terra-dev-site/doc/example/ItemViewTwoColumnStart.jsx

@@ -10,4 +10,4 @@ const display5 = <ItemView.Display text="Start Time: 08-05-2016 12:00:00" />;
 const display6 = <ItemView.Display text="End Time: 08-05-2016 16:00:00" />;
 const displays = [display1, display2, display3, display4, display5, display6];
 
-export default () => <ItemView displays={displays} layout="twoColumns" textEmphasis="start" />;
+export default () => <ItemView displays={displays} layout="twoColumns" textEmphasis="start" trueColumn />;

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

@@ -31,6 +31,7 @@ const views = () => (
       layout="twoColumns"
       accessoryAlignment="alignTop"
       id="test-both-accessory-top"
+      trueColumn
     />
     <h2>Reserve Start Acessory Space</h2>
     <ItemView
@@ -39,6 +40,7 @@ const views = () => (
       endAccessory={<button type="button" id="EndAccessory3" size="medium">Disclose</button>}
       layout="twoColumns"
       id="test-reserve-start-accessory"
+      trueColumn
     />
     <h2>Start Accessory with Font Size 100px</h2>
     <ul><li><h3>The max-height and max-width of 40px is maintained</h3></li></ul>

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

@@ -16,10 +16,10 @@ const views = () => (
     <ItemView displays={displays} id="test-displays" />
     <br />
     <h2>Two Column Layout </h2>
-    <ItemView displays={displays} layout="twoColumns" id="test-displays-two" />
+    <ItemView displays={displays} layout="twoColumns" id="test-displays-two" trueColumn />
     <br />
     <h2>Two Column Layout with Start TextEmphasis</h2>
-    <ItemView displays={displays} layout="twoColumns" textEmphasis="start" id="test-displays-two-start" />
+    <ItemView displays={displays} layout="twoColumns" textEmphasis="start" id="test-displays-two-start" trueColumn />
   </div>
 );
 

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

@@ -13,10 +13,10 @@ const displays = [display1, display2, display3, display4, display5, display6];
 const views = () => (
   <div>
     <h2>Two Column Layout by Row </h2>
-    <ItemView displays={displays} trueColumn={false} layout="twoColumns" id="test-displays-two-row" />
+    <ItemView displays={displays} layout="twoColumns" id="test-displays-two-row" />
     <br />
     <h2>Two Column Layout by Row with Start TextEmphasis </h2>
-    <ItemView displays={displays} trueColumn={false} layout="twoColumns" textEmphasis="start" id="test-displays-two-row-start" />
+    <ItemView displays={displays} layout="twoColumns" textEmphasis="start" id="test-displays-two-row-start" />
   </div>
 );
 

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

@@ -42,13 +42,13 @@ const views = () => (
     <ItemView displays={leftPartialTruncatedDisplays} comment={comment(5)} startAccessory={accessoryStart(13)} endAccessory={accessoryEnd(21)} textEmphasis="start" id="ItemView-one-partial-truncate" />
     <br />
     <h2>Partial Truncation Examples - Two Column Left and Right Truncated</h2>
-    <ItemView displays={partialTruncatedDisplays} comment={comment(6)} startAccessory={accessoryStart(14)} endAccessory={accessoryEnd(22)} layout="twoColumns" textEmphasis="start" id="ItemView-two-partial-truncate" />
+    <ItemView displays={partialTruncatedDisplays} comment={comment(6)} startAccessory={accessoryStart(14)} endAccessory={accessoryEnd(22)} layout="twoColumns" trueColumn textEmphasis="start" id="ItemView-two-partial-truncate" />
     <br />
     <h2>Partial Truncation Examples - Two Column Left Truncated</h2>
-    <ItemView displays={leftPartialTruncatedDisplays} comment={comment(7)} startAccessory={accessoryStart(15)} endAccessory={accessoryEnd(23)} layout="twoColumns" textEmphasis="start" id="ItemView-two-partial-left-truncate" />
+    <ItemView displays={leftPartialTruncatedDisplays} comment={comment(7)} startAccessory={accessoryStart(15)} endAccessory={accessoryEnd(23)} layout="twoColumns" trueColumn textEmphasis="start" id="ItemView-two-partial-left-truncate" />
     <br />
     <h2>Partial Truncation Examples - Two Column Right Truncated</h2>
-    <ItemView displays={rightPartialTruncatedDisplays} comment={comment(8)} startAccessory={accessoryStart(16)} endAccessory={accessoryEnd(24)} layout="twoColumns" textEmphasis="start" id="ItemView-two-partial-right-truncate" />
+    <ItemView displays={rightPartialTruncatedDisplays} comment={comment(8)} startAccessory={accessoryStart(16)} endAccessory={accessoryEnd(24)} layout="twoColumns" trueColumn textEmphasis="start" id="ItemView-two-partial-right-truncate" />
   </div>
 );
 

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

@@ -29,19 +29,19 @@ const views = () => (
     <p>Applied width of 900px to show the default vs truncated styling.</p>
     <br />
     <h2>Default ItemView</h2>
-    <ItemView trueColumn={false} comment={comment(2)} startAccessory={accessoryStart(10)} endAccessory={accessoryEnd(18)} displays={displays} layout="twoColumns" id="ItemView-by-row-two-wrap" />
+    <ItemView comment={comment(2)} startAccessory={accessoryStart(10)} endAccessory={accessoryEnd(18)} displays={displays} layout="twoColumns" id="ItemView-by-row-two-wrap" />
     <br />
     <h2>Truncated ItemView</h2>
-    <ItemView trueColumn={false} displays={displays} isTruncated comment={comment(4)} startAccessory={accessoryStart(12)} endAccessory={accessoryEnd(20)} layout="twoColumns" textEmphasis="start" id="ItemView-by-row-two-truncate" />
+    <ItemView displays={displays} isTruncated comment={comment(4)} startAccessory={accessoryStart(12)} endAccessory={accessoryEnd(20)} layout="twoColumns" textEmphasis="start" id="ItemView-by-row-two-truncate" />
     <br />
     <h2>Left and Right Displays Truncated</h2>
-    <ItemView trueColumn={false} displays={partialTruncatedDisplays} comment={comment(6)} startAccessory={accessoryStart(14)} endAccessory={accessoryEnd(22)} layout="twoColumns" textEmphasis="start" id="ItemView-by-row-two-partial-truncate" />
+    <ItemView displays={partialTruncatedDisplays} comment={comment(6)} startAccessory={accessoryStart(14)} endAccessory={accessoryEnd(22)} layout="twoColumns" textEmphasis="start" id="ItemView-by-row-two-partial-truncate" />
     <br />
     <h2>Left Display Truncated</h2>
-    <ItemView trueColumn={false} displays={leftPartialTruncatedDisplays} comment={comment(7)} startAccessory={accessoryStart(15)} endAccessory={accessoryEnd(23)} layout="twoColumns" textEmphasis="start" id="ItemView-by-row-two-partial-left-truncate" />
+    <ItemView displays={leftPartialTruncatedDisplays} comment={comment(7)} startAccessory={accessoryStart(15)} endAccessory={accessoryEnd(23)} layout="twoColumns" textEmphasis="start" id="ItemView-by-row-two-partial-left-truncate" />
     <br />
     <h2>Right Display Truncated</h2>
-    <ItemView trueColumn={false} displays={rightPartialTruncatedDisplays} comment={comment(8)} startAccessory={accessoryStart(16)} endAccessory={accessoryEnd(24)} layout="twoColumns" textEmphasis="start" id="ItemView-by-row-two-partial-right-truncate" />
+    <ItemView displays={rightPartialTruncatedDisplays} comment={comment(8)} startAccessory={accessoryStart(16)} endAccessory={accessoryEnd(24)} layout="twoColumns" textEmphasis="start" id="ItemView-by-row-two-partial-right-truncate" />
   </div>
 );
 

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

@@ -21,7 +21,7 @@ const views = () => (
     <ItemView displays={displays} overrideDefaultStyling comment={comment(1)} id="test-displays-override" />
     <br />
     <h2>Override Default Styling Two Column Layout </h2>
-    <ItemView displays={displays} layout="twoColumns" overrideDefaultStyling comment={comment(2)} id="test-displays-override-two" />
+    <ItemView displays={displays} layout="twoColumns" trueColumn overrideDefaultStyling comment={comment(2)} id="test-displays-override-two" />
     <br />
     <h2>Override Default Styling with TextEmphasis</h2>
     <p>This test is just showing that even if TextEmphasis has been explicitly set to start, it will be ignored when the override prop is set to true.</p>

packages/terra-clinical-item-view/tests/jest/ItemView.test.jsx

@@ -79,7 +79,7 @@ it('should render truncated two column displays when isTruncated is only set on
   const display1 = (<ItemView.Display text="display1display1display1display1display1display1display1display1" isTruncated />);
   const display2 = (<ItemView.Display text="display2display2display2display2display2display2display2display2" />);
   const displays = [display1, display2];
-  const itemView = shallow(<ItemView displays={displays} layout="twoColumns" />);
+  const itemView = shallow(<ItemView displays={displays} layout="twoColumns" trueColumn />);
   expect(itemView.find('div.truncated-two-columns')).toHaveLength(1);
   expect(itemView).toMatchSnapshot();
 });
@@ -211,7 +211,7 @@ it('should render two columns with 8 displays', () => {
   const display9 = shallowWithIntl(<ItemView.Display text="display 9" />);
 
   const displays = [display1, display2, display3, display4, display5, display6, display7, display8, display9];
-  const itemView = shallow(<ItemView layout="twoColumns" displays={displays} />);
+  const itemView = shallow(<ItemView layout="twoColumns" trueColumn displays={displays} />);
   expect(itemView.find('ItemDisplay')).toHaveLength(8);
   expect(itemView.find('div.two-columns')).toHaveLength(1);
   expect(itemView).toMatchSnapshot();
@@ -222,7 +222,7 @@ it('should render two columns with an odd number of displays', () => {
   const display2 = shallowWithIntl(<ItemView.Display text="display 2" />);
   const display3 = shallowWithIntl(<ItemView.Display text="display 3" />);
   const displays = [display1, display2, display3];
-  const itemView = shallow(<ItemView layout="twoColumns" displays={displays} />);
+  const itemView = shallow(<ItemView layout="twoColumns" trueColumn displays={displays} />);
   expect(itemView.find('ItemDisplay')).toHaveLength(3);
   expect(itemView.find('div.two-columns')).toHaveLength(1);
   expect(itemView).toMatchSnapshot();
@@ -240,7 +240,7 @@ it('should render two columns with 8 displays when trueColumn is false', () => {
   const display9 = shallowWithIntl(<ItemView.Display text="display 9" />);
 
   const displays = [display1, display2, display3, display4, display5, display6, display7, display8, display9];
-  const itemView = shallow(<ItemView layout="twoColumns" trueColumn={false} displays={displays} />);
+  const itemView = shallow(<ItemView layout="twoColumns" displays={displays} />);
   expect(itemView.find('ItemDisplay')).toHaveLength(8);
   expect(itemView.find('div.two-columns-by-row')).toHaveLength(1);
   expect(itemView).toMatchSnapshot();