Descriptionlist in drawer demo

[ajaypratap003]

What: Closes #10227
Descriptionlist in drawer demo

Additional issues:

[patternfly-build]

Preview: https://patternfly-react-pr-10229.surge.sh

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

[mcoker]

The core demo is setup so that the drawer is attached to the <Page> component's main content area. AFAIK the only way to do that on the react side is to use the <Page notificationDrawer={}> prop, which you can find references to in the notification drawer demos.

Someone on the react side please verify that though, I may just not know how to do it differently.

That will fix this issue where the drawer is attached to a page section (screenshot from the demo)

And should make it look like this (screenshot from the core demo)

[ajaypratap003]

The core demo is setup so that the drawer is attached to the <Page> component's main content area. AFAIK the only way to do that on the react side is to use notificationDrawer prop, which you can find references to in the notification drawer demos.

Someone on the react side please verify that though, I may just not know how to do it differently.

That will fix this issue where the drawer is attached to a page section (screenshot from the demo)

And should make it look like this (screenshot from the core demo)

I'll try it.

[ajaypratap003]

The core demo is setup so that the drawer is attached to the <Page> component's main content area. AFAIK the only way to do that on the react side is to use notificationDrawer prop, which you can find references to in the notification drawer demos.
Someone on the react side please verify that though, I may just not know how to do it differently.
That will fix this issue where the drawer is attached to a page section (screenshot from the demo)

And should make it look like this (screenshot from the core demo)

I'll try it.

[thatblindgeye]

One issue with the core demo and this one is that the drawer can't be opened via keyboard, since the Cards beings used in the main page content area aren't interactive in any way.

If the intent is that we want to show how to have cards that can open their own drawer for their own DescriptionList, we should use actionable cards (and optionally ensure each Drawer has a unique title based on the card that was clicked to convey that intent better?). If it's more simply to just show a description list in a drawer, would a single button in the main page area suffice? cc @mmenestr

[thatblindgeye]

Couple more comments below, otherwise we would just need input on my previous comments above from design/core

[thatblindgeye]

In addition to opening/closing the drawer, we should set focus on the appropriate element.

• For the Drawer onExpand, the close button of the Drawer should receive focus, similar to our basic drawer example
• When the Drawer gets closed, focus should be set back on the element that previously had focus before the Drawer was expanded. In this case it's easier since there's only the one button controlling expansion.

[ajaypratap003]

Can you please help me on first point, is there any props in drawer component for setting focus on close button. In basic drawer example, I can't see the focus on close button.

Second point I've covered.

[thatblindgeye]

Ah yeah so in that example I linked we're focusing the content of the drawer rather than the close button. We should actually do a similar thing here since the close button comes after the content in the DOM. We can just add a ref similar to that basic drawer example.

We'll also want to move the logic you currently have on the "Open drawer" button, tabIndex={isExpanded ? 0 : -1} to the drawer content title.

[mcoker]

LGTM! One typo and an outstanding question about whether we should include tabs or not.

[mmenestr]

Sorry I missed your previous comment @thatblindgeye - it's true that a selectable/deselectable card would be a more accurate way to show a drawer interaction via a card view, rather than just having link in a card. But I think since this demo is for the purpose of showing a description list in a drawer, the interaction is fine as is!

If you have extra time on your hands though, I would change it to a clickable card interaction because people get confused when we show different interactions in different places and don't know which one is "correct". And it could just be a single card, doesn't need to be a full page of clickable cards...

Will let you guys make the call though! Everything in the drawer looks good though!!

[thatblindgeye]

This is looking good! We'd probably want to open an issue to update the core demo to match this if this is what we want it to look like (cc @mcoker ).

Can you try force pushing to this PR? For some reason the PR is building oddly in that it's building a drawer based on the latest update and as though we're still creating a Drawer component inside the demo. Pulling the PR locally everything seems fine, though.

[ajaypratap003]

This is looking good! We'd probably want to open an issue to update the core demo to match this if this is what we want it to look like (cc @mcoker ).

Can you try force pushing to this PR? For some reason the PR is building oddly in that it's building a drawer based on the latest update and as though we're still creating a Drawer component inside the demo. Pulling the PR locally everything seems fine, though.

I tried force push but nothing happened. Any idea, why a11y job is failing

[nicolethoen]

The a11y tests are failing on this PR: https://patternfly-react-pr-10229-a11y.surge.sh/

because there is a rendered DrawerPanel in a DrawerPanel which both have the id="pf-drawer-panel-0"

This is happening because you are passing a Drawer component via the DashboardWrapper's notificationDrawer prop. But I think it's expecting you to pass the contents of a drawer to the notificationDrawer prop rather than build one yourself.
I think i'd recommend you don't use the notificationDrawer prop but instead, wrap the Page in your Drawer instead?

[mattnolting]

Nice! Looks like some extra elements are being added

I see @nicolethoen was already on it 😆 !