[Tidy] Add new style for dropdown checklist components

[nadijagraca]

Description

Adding new styles for checklist and dropdown components.
New functionality will be implemented in the next PR.

Screenshot

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.

[github-actions]

View the example dashboards of the current commit live on PyCafe ☕ 🚀

Updated on: 2025-01-20 16:55:21 UTC
Commit: 2bc2437

Link: vizro-core/examples/dev/

Link: vizro-core/examples/scratch_dev

Link: vizro-core/examples/visual-vocabulary/

Link: vizro-ai/examples/dashboard_ui/

[antonymilne]

Not sure if this is ready to review yet but I was excited to took a quick peek already at the example app (didn't look at any code yet)...

This looks awesome, I'm actually super excited by this change even though it seems kind of minor 😀

The dropdown looks perfect to me. The checklist looks perfect by itself but not sure how well the horizontal line works if you have several controls and navigation there since it's the same separator used to separate the navigation panel out of the controls and used at the bottom of the controls. So it feels like it's breaking up the controls into sections, which it shouldn't. Somehow we maybe need it to be a weaker separator. Maybe a lighter colour or not full width? Or a smaller gap above and below the horizontal line? Or maybe the horizontal line just doesn't work well here and we need some alternative. Would it look weird to put it next to the label "Continent"?

I'm not sure what the best way to do it is, happy to defer to you guys and anyone else who has a better idea than me here. Great work anyway!