Terra-core: Add <pre> tags to improve readability

[emilyrohrbough]

Issue Description

Some component's props are of type shape. The props table displays these object structures, but they are not easily readable if the shape is large. Adding the <pre> tags around the output would improve readability.

Issue Type

• [ ] New Feature
• [x] Enhancement
• [ ] Bug
• [ ] Other

Expected Behavior

Current Behavior

[saigorantla]

I will be working on this issue

[saigorantla]

@emilyrohrbough is this enhancement to add <pre> tag on all table columns or just type and Description columns data? as those are the two columns that can possibly have large data?

[emilyrohrbough]

I would expect to see tag added to the type column.

Take a look at these lines

• https://github.com/cerner/terra-core/blob/master/packages/terra-props-table/src/PropsTable.jsx#L19
• https://github.com/cerner/terra-core/blob/master/packages/terra-props-table/bin/generateMarkdown/generatePropType.js#L2

[saigorantla]

Looks like pre tag has some styling with gray background, below image will shows how it will look after code changes.

I personally don't like gray background on pre tag in a row that contains white background (referring to one of type row in screen shot) let me know if thats acceptable or we need to update background of pre tag accordingly.

[emilyrohrbough]

I agree. I think we will want to update the background of any pre tags that occur in a white row. Additionally, it seems the pre tag is adding addition bottom-margin that can also be removed.

[bjankord]

Let's move forward with a PR for this. We can address the pre background color in another PR.

[emilyrohrbough]

Resolved in #873