feat(description-list): added description list demo

[mattnolting]

closes #1921

@mcarrano Inline edit isn't yet available via React outside of pf-c-table, so I think it's best to add those demo features when it's available globally.

[patternfly-build]

Preview: https://patternfly-pr-4715.surge.sh

A11y report: https://patternfly-pr-4715-a11y.surge.sh

[mcarrano]

This is looking good @mattnolting . I agree regarding the edit in-place example. I do have a couple of question for @mceledonia , however.

1- When a description list is placed in a page as in these demos, should it be on a white or gray background? The designs show white, however to get that, would we place this inside a card?

2- The drawer example feels a bit dense to me vs the designs, but I can't say why. Anything different that you would recommend @mceledonia ?

Here is the design link: https://marvelapp.com/prototype/6e72b59/screen/85219622

[mattnolting]

1- When a description list is placed in a page as in these demos, should it be on a white or gray background? The designs show white, however to get that, would we place this inside a card?

@mcarrano I can place the description list in a page main section with a white background or a card, but because of the age of the mockups, I assumed the page main section should be white. Happy to update however you want.

2- The drawer example feels a bit dense to me vs the designs, but I can't say why. Anything different that you would recommend @mceledonia ?

I updated the width of the drawer panel to have a bit more room.

[mceledonia]

1- When a description list is placed in a page as in these demos, should it be on a white or gray background? The designs show white, however to get that, would we place this inside a card?

We will want to be sure they work on both, but I do think inside of a card or on a white background is where this will be used most.

2- The drawer example feels a bit dense to me vs the designs, but I can't say why. Anything different that you would recommend @mceledonia ?

I updated the width of the drawer panel to have a bit more room.

This new spacing in the drawer panel looks good to me!

[mattnolting]

@mcarrano @mceledonia I've updated the demos to show several content color combinations.

https://patternfly-pr-4715.surge.sh/components/description-list/html-demos/basic
https://patternfly-pr-4715.surge.sh/components/description-list/html-demos/in-drawer
https://patternfly-pr-4715.surge.sh/components/description-list/html-demos/complex-content

[mcoker]

LPTM!! Do you need to set the table bg color? Doesn't seem like it's necessary since it's against a white background.

[mcoker]

Suggested change

	{{#> table table--id="service-port" table--grid="true" table--modifier="pf-m-grid-md pf-m-compact" table--attribute='aria-label="Service address" style="--pf-c-table--BackgroundColor: transparent"'}}
	{{#> table table--id="service-port" table--grid="true" table--modifier="pf-m-grid-md pf-m-compact" table--attribute='aria-label="Service address"'}}

[mcoker]

Suggested change

	{{#> table table--id="service-address" table--grid="true" table--modifier="pf-m-grid-md pf-m-compact" table--attribute='aria-label="Service address" style="--pf-c-table--BackgroundColor: transparent"'}}
	{{#> table table--id="service-address" table--grid="true" table--modifier="pf-m-grid-md pf-m-compact" table--attribute='aria-label="Service address"'}}

[patternfly-build]

🎉 This PR is included in version 4.181.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀