[Tidy] Replace html.Div with dbc.Card

[huong-li-nguyen]

Description

• Replace html.Div with dbc.Card
• Refactor CSS for the jumping effect on hover for navigation cards
• Rename CSS classNames for outer card containers

Screenshot

Jumping effect previously disappeared and is now fixed again:

Notice

• I acknowledge and agree that, by checking this box and clicking "Submit Pull Request":

  • I submit this contribution under the Apache 2.0 license and represent that I am entitled to do so on behalf of myself, my employer, or relevant third parties, as applicable.
  • I certify that (a) this contribution is my original creation and / or (b) to the extent it is not my original creation, I am authorized to submit this contribution on behalf of the original creator(s) or their licensees.
  • I certify that the use of this contribution as authorized by the Apache 2.0 license does not violate the intellectual property rights of anyone else.
  • I have not referenced individuals, products or companies in any commits, directly or indirectly.
  • I have not added data or restricted code in any commits, directly or indirectly.

[petar-qb]

This looks good. The only thing I'm not quite sure about is whether we want to add this to changelog.md

[huong-li-nguyen]

This looks good. The only thing I'm not quite sure about is whether we want to add this to changelog.md

Yeah, good question. I am not sure either, we could also just not mention it.
What do you guys think? @antonymilne @maxschulz-COL @petar-qb

• Shall we mention the replacement of the underlying library in the components inside the changelog? (No strong opinion here)
• Shall we mention CSS className changes in the changelog? (This could affect the user, but we already said that we don't consider it as breaking change, so I didn't mention it)

[maxschulz-COL]

This looks good. The only thing I'm not quite sure about is whether we want to add this to changelog.md

Yeah, good question. I am not sure either, we could also just not mention it. What do you guys think? @antonymilne @maxschulz-COL @petar-qb

• Shall we mention the replacement of the underlying library in the components inside the changelog? (No strong opinion here)
• Shall we mention CSS className changes in the changelog? (This could affect the user, but we already said that we don't consider it as breaking change, so I didn't mention it)

Good question, and I am not sure my thoughts on this are always consistent. I would maybe propose this guideline:

• directly affects user / would influence his decision to upgrade the package --> in changelog 100%
• affects the user in more indirect ways (e.g. changing CSS class names), visuals change --> in changelog with a more generic mention (like "CSS property changes to X,Y,Z models/components" --> there are 2 reasons: users may use CSS properties, and visuals may change, both are nice if they are spottable whole looking at release notes)
• anything else --> not in changelog

Now do I care about the returned components library type as a user? --> Generally no, but it could be a little bit like the CSS entry, some users may care if they use properties of the component?? Would maybe leave out.

In general we do not want to too lengthy changelogs, as they dilute focus.

Wdyt?

[maxschulz-COL]

LGTM!

[huong-li-nguyen]

Wdyt?

Changing the underlying component library shouldn't have an effect on the user, as our model field arguments do not change. Visually they look the same more or less (not pixel perfect). So let me remove the changelog entry of that 👍

I could add an entry on the renaming of CSS classNames (this will happen more frequently though, but if we are fine with that - ok 👍 ). At some point this will all switch to the classNames that Bootstrap uses.