Implement MDC Card components

[zoofadoofa]

mwc-card

• raised ? guidelines show cards changing from default elevation of 1dp / 0dp to 8dp
  • there is no 8dp elevation mixin in mdc-card at the moment.
• outlined

mwc-card-primary-action or instead a slot to card primary-action mwc-media

• square
• 16-9
• slot content. ex: "media-content"

mwc-card-actions

• full-bleed
• slot buttons
• slot icons ? apply '.mdc-card__action, .mdc-card__action--button, .mdc-card__action--icon' to slot assign nodes

update @material/card to 0.44.1

implement in typescript

Creating a Fork with intent to PR

[zoofadoofa]

The Fork is almost ready for PR. There is a bug with (.mdc-card__primary-action)'s ripple styles in @material/card:0.44.0. The bug gets resolved in 1.0.0 but requires upgrading Foundation and Adapter patterns in 1.0.0.

So I am looking to see where the Update to mdc 1.0 PR ends up. As this would solve that problem.

Right now I could wrap this up with 0.44.0 and .mdc-card__primary-action will not ripple properly unless I manually include @material/ripple/mdc-ripple.scss or upgrade to 1.0.0 and wait for the other PR to merge.

[zoofadoofa]

Using 0.44.0 for now until mdc is upgraded to 1.0.0 Created Pull Request #254

[jrgleason]

Any update on when this might be added?

[jrgleason]

nm see https://github.com/material-components/material-components-web-components/issues/442

[e111077]

Work will continue work on this very soon as we are finishing up our landing of mwc-select, menu, and list & list-item

[yinonov]

Updated status on this? What are the challenges of card? Should it have other features besides UI styles?

[e111077]

The challenges of card are designing it for maintainability while at the same time providing all the use cases of card. From our years of component development and maintaining a google-wide component set in a monorepo we found that providing someone with a point in which they can insert any dom they want is a recipe for maintenance disaster. Users put the darndest things in them that you'd never expect the component to be used. Because of the monorepo and google's tradition of screenshot testing, any small change would break hundreds to thousands of screenshot tests that we must manually go through and fix (this is where you find the most bewildering abuse of your work).

Though if you restrict it too much (especially something as basic as a card) then you run into issues of endless feature requests and then eventually feature bloat. All the guard rails and safety equipment starts to weigh down the boat and then nobody wants to use it.

This is a huge developer experience design problem that requires a lot of an engineer's time to sit down with a designer and figure out how to provide all the supported use cases of card as well as keeping it maintainable and at the same time usable. And whenever someone embarks on this long journey, we often get pulled over to more-important tasks and projects. This is also generally lower priority because it's essentially some borders with padding and eventually elevation that can already be provided by mdc's card implementation.

[yinonov]

Understood. Guessing same went to drawer/dialog etc'... I would have guessed the card would be close in layout to dialog 🤔

Is this already in progress?

[e111077]

Drawer is actively being worked on because we are sticking more to a more-constrained spec similar to that of gmail. Dialog is one of these elements where we are already running into these issues. Card is still not in progress. In the meantime, you can use MDC card's distributed styles in their npm dist folder or unpkg

https://unpkg.com/browse/@material/card/dist/

[yinonov]

Will do!

[ranile]

Since card is currently not being developed, the readme should be updated so it doesn't mention that work on <mwc-card> starts in "Q4-2020", especially considering that we are almost at the end of Q4 and there's no work being done.

[Keuter]

For those who want to use the material card while this component is not (yet?) finished, this could be a solution meanwhile: https://materializecss.com/cards.html

[maicol07]

@Keuter instead of using MaterializeCSS, which doesn't follow the latest MD specs, you should use the official components (not Web Components): https://github.com/material-components/material-components-web/tree/master/packages/mdc-card (or from the official website: https://material.io/components/cards/web#using-cards)

[Keuter]

@Keuter instead of using MaterializeCSS, which doesn't follow the latest MD specs, you should use the official components (not Web Components): https://github.com/material-components/material-components-web/tree/master/packages/mdc-card (or from the official website: https://material.io/components/cards/web#using-cards)

Thank you @maicol07, I'll check it out!

[maicol07]

In the meantime I've realized a component that wraps MDC Card: https://github.com/maicol07/material-web-additions/blob/master/packages/card/README.md

Since I'm a newbie with WebComponents creation, it might have some issues. :sweat_smile:

However, I'm looking forward to the official component when it will be ready (I hope soon!)

P.S.: To anyone who will try my component, please send me your feedback!

[asyncLiz]

Filled, outlined, and elevated cards are now implemented in the labs folder. Closing this since the initial implementation is complete. Once it has been reviewed, it'll move out of labs as a feature for the next release.

import '@material/web/labs/card/filled-card.js';

html`
  <md-filled-card>
    Any dynamic content
  </md-filled-card>
`;