search

generoi / genero-design-system

https://gds.generogrowth.com/
MIT License
4 stars 0 forks source link

Simplify slots for media-card #45

Closed oxyc closed 1 year ago

oxyc commented 3 years ago

It would be nice if it only had a content + image slot but due to the spacing requirements each sub element has its own slot...

taromorimoto commented 3 years ago

What do you want to do with this? :)

oxyc commented 3 years ago

Not sure :D Last time I worked on it, I didnt find a solution without the granular slots but ideally I'd like it to be:

<gds-media-card>
  <img slot="media">
  <gds-card slot="card">
  </gds-card>
</gds-media-card>

<gds-media-card>
  <video slot="media">
  <div slot="card">
  </div>
</gds-media-card>

And things would just work, but that's a lot to ask. I'm going to look into it if something can be improved though. Maybe the vertical spacing can be tied to <gds-card>

taromorimoto commented 3 years ago

Since this gds-media-card is used in so many ways, we could also provide many different way of using it. We could use this trick from gds-button to see what slots are in use and render accordingly?

  componentWillRender() {
    this.hasLeftIconSlot = !!this.hostElement.querySelector('[slot="left-icon"]')
    this.hasRightIconSlot = !!this.hostElement.querySelector('[slot="right-icon"]')
  }