Label Value View Implementation

[emilyrohrbough]

Summary

Implemented the react component LabelValueView to replace TitleValueCard.

Additional Details

The upgrade to React 15.5 is non-passive. So I locked react down at 15.4.2, as done in terra-core in this pull request.

[StephenEsser]

Recently we had a discussion to keep line-heights unit-less (dropping px / rem): https://css-tricks.com/almanac/properties/l/line-height/#article-header-id-0

This line-height value is also different than the one used below

[emilyrohrbough]

Fixed here

[StephenEsser]

Dave brought up a good point about this styling. If a String is passed in as a value we should style it based on UX feedback, but if a component was passed in, we probably shouldn't apply a font-size and line-height.

[emilyrohrbough]

The current implementation uses this UX styling based on the styling sheet for the TitleValueView. As for any children (say <h1>) or components that are passed in, these styling are override. What is a better way to set these values?

[ryanthemanuel]

Could we dynamically set this class in the jsx file based on what children is? If it's a solitary string we add the class, otherwise not. I'm not 100% sold on this idea so I'd like other people to weigh in as well.

[tbiethman]

We could do two separate props instead of children. valueText and valueElement or valueComponent or something. I'd (personally) like to avoid type-checking props.

Or we could still use children too, something like:

<div {...customProps} className={labelValueViewClassNames}>
  <div className="terraClinical-LabelValueView-label">{props.label}</div>
  <div className="terraClinical-LabelValueView-value">{props.valueText}</div>
  {children}
</div>

We'd just need to document that valueText will be styled a certain way, and that children could be used for more substantial components.

[ryanthemanuel]

I'm cool with Tyler's suggestion. I definitely would like to see this addressed before it gets merged in.

[StephenEsser]

+1 To Tyler's suggestion of having a prop for value but keeping children, I would conditionally render the value wrapper.

The Button does something similar: https://github.com/cerner/terra-core/blob/master/packages/terra-button/src/Button.jsx#L73

When trying to render null nothing happens.

[StephenEsser]

A description should be added here, most people copy paste the description from the readme

[emilyrohrbough]

Added here

[StephenEsser]

I would keep children as type node

[emilyrohrbough]

Yeah, I wasn't sure when I changed this. Changed Back Here