search

material-components / material-web

Material Design Web Components
https://material-web.dev
Apache License 2.0
9.35k stars 895 forks source link

Implement Card components #231

Closed zoofadoofa closed 1 year ago

zoofadoofa commented 5 years ago

mwc-card

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

mwc-card-actions

update @material/card to 0.44.1

implement in typescript

Creating a Fork with intent to PR

zoofadoofa commented 5 years ago

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 commented 5 years ago

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

jrgleason commented 4 years ago

Any update on when this might be added?

jrgleason commented 4 years ago

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

e111077 commented 4 years ago

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

yinonov commented 3 years ago

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

e111077 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

Will do!

ranile commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

@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 commented 2 years ago

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 commented 1 year ago

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>
`;