Add tags to card header

[obsidienne]

Hi,

Following ticket #95

[mplatts]

Thanks, can you remove the version change? We will update this when we push to hex.pm

[mplatts]

Also maybe add a new test on the end of card_test.exs

[obsidienne]

Done

[mplatts]

Thanks for that. I just had a look.

Design-wise I think it might get a bit busy up the top once you have tags - they probably should be gray too so they don't look so prominent.

eg. I've been playing around with them too and putting them down on the bottom

This means you can just put them in the card's inner block and customise them exactly how you want (eg, you might want them to be clickable).

[mplatts]

Maybe we just make the top right an optional slot?

    <.card>
        <:top_right>
          <.tag content="Tag 1" />
          <.tag content="Tag 2" />
        </:top_right>

        <.card_content category="Article" heading="Enhance your Phoenix development">
          <div class="mt-4 font-light text-gray-500 text-md">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget leo interdum, feugiat ligula eu, facilisis massa. Nunc sollicitudin massa a elit laoreet.
          </div>
        </.card_content>
      </.card>

[mplatts]

Though if we do that, we should probably convert all inner card stuff to slots:

• <.card_media src=""> => <:card_media />
• <.card_content> => <:card_content>
• <.card_footer> => <:card_footer>

[mplatts]

Thoughts @obsidienne or anyone?

[obsidienne]

Hi,

I love the idea of using slots for the tags because maybe some tags need to be inverted or outlined according to the webapp design... and IMHO using slots creates less clutered HEEX.

Adding them in each part of a card is interesting too.

[obsidienne]

Regarding creating a slot for each part of card, is it ok to have slots inside of slots ?

[obsidienne]

Hi, do you need some help for this pull request ? Do I need to change the code ?

[mplatts]

Sorry @obsidienne I've been off work due to health issues. Let me discuss with Nic. I think ultimately we need something that is quite customisable and so the slot approach might be better for the top right area than tags. A problem with tags is if there is a long category and more than say 3 tags then what will happen with the wrapping? It has the potential to get messy

[nhobes]

@obsidienne I agree with @mplatts's sentiments about placing the tags in the top right and that while it looks great for 2 or 3, you start to experience issues when you have more (see img). It might be be better as @mplatts suggested to place them down the bottom and defaulting to a more muted gray color.

[obsidienne]

Sure, do you want an updated PR or are you doing the work on your side ?

[nhobes]

Sure, do you want an updated PR or are you doing the work on your side ?

If you could submit an updated PR that'd be great!

[mplatts]

Closing for now. Just submit a new PR if you make progress. Cheers