Empty State for Cards

[LHinson]

There are implementations for empty state for cards in both pf-ng and pf-react and they look different. It would be great to have some design documentation on some standards.

pf-react https://rawgit.com/patternfly/patternfly-react/gh-pages/index.html?knob-Match%20Height=true&selectedKind=Cards&selectedStory=Base%20Card%20w%2FHeightMatching&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybooks%2Fstorybook-addon-knobs

pf-ng https://rawgit.com/patternfly/patternfly-ng/master-dist/dist-demo/#/card

[sjcox-rh]

@LHinson @catrobson

Amy and I were just discussing how to move forward with the empty state card we are using in iPaaS. Could we possibly add in what we are using in iPaaS as a design option rather than the standard in the design documentation?

We noticed that ng and react are somewhat similar, where as ipaas varies more. See below:

We didn't want the card to be a primary action, but rather an option for the user. We also wanted to visually differentiate the empty state card from the rest to imply that once a user creates a new connection it will generate a new card.

Michael Coker is currently working on the implementation of this design shown above. Would this also be worth updating the contribution to patternfly-ng to show this as an option?

Let us know if this would be valuable in this contribution! Happy to help in any way we can.

[dlabrecq]

FYI, we don't have an implementation of an empty card state for patternfly-ng. I believe you may be looking at a custom card? If so, that's just used to test a custom layout for OpenShift.io.

[catrobson]

@sjcox-rh I think this is a valid variant of an empty state card for the reasons you mentioned and worthy of its own design documentation. Its actually unique in that this is used I think in a list view where you're pointing out that you can add more cards in an additional way than just having the "create" button up in the header, which gives users more context about how they can get cards to show up in this view. Is that accurate?

[sjcox-rh]

@catrobson Yes that's exactly right! Glad that intention came across.

So moving forward, did you want me to create design documentation for this particular option and it will just be added to the design docs for the empty state card?

Also, since Michael Coker is working on implementation, should he go ahead and contribute it back to patternfly-ng, or wait until the design docs are complete?

@dlabrecq thanks for clarifying, I must have misunderstood what was said in the meeting. I see now that the card I'm referring to for io is under the Custom tab. Does the io team intend that to be an empty state card or its still in testing? It just looks similar to React's empty state card.

[catrobson]

@mcarrano do you think this pattern belongs in the card list view, or in a new empty state card (probably reference one way or another, but for where the content lives). I think SJ's situation is specific to a card view, so I feel like it might belong there.

Michael can contribute back to patternfly-ng before the design docs are complete.

We never created a specific empty state card for patternfly-ng or patternfly I think since there was feedback that this is a just a card with content - hence the 'custom card' definition in ng to get the code we needed for OpenShift.io. If we end up with a real empty state card pattern, we can move that into a real pattern on NG too rather than just being an example of a custom card.

[mcarrano]

Per 3/22 UXS meeting, lets have--

Empty state added to Base Card pattern. Add a card added to Card View. (Matt to create a new issue)

[dlabrecq]

@sjcox-rh OpenShift.io adds their own empty state to the body of the patternfly-ng card. It's not really part of the card component perse, but it could be.

We do have a empty state component in patternfly-ng that's used elsewhere in OpenShift.io. It's also used as a stand alone component in the Planner UI.

For patternfly-ng, we display the empty state component when the table has no rows. We were planning to add the empty state component to the pie chart, but that contribution fizzled out.

[sjcox-rh]

Started a design doc here, can also be found on issue #623

[mcarrano]

I am going to close this issue as I think it's redundant with #623. For dashboard cards we should just be following the guidance that we already have here: http://www.patternfly.org/pattern-library/cards/base-card/#design