mckinsey / vizro

Vizro is a toolkit for creating modular data visualization applications.
https://vizro.readthedocs.io/en/stable/
Apache License 2.0
2.72k stars 142 forks source link

[Bug] Fix text alignment and enable href in Button #881

Closed huong-li-nguyen closed 3 days ago

huong-li-nguyen commented 4 days ago

Description

I noticed that the text inside the button was misaligned in some of our demos and our 404 page. This was the case for all buttons that were used as anchor tags, so where href was used.

This has been fixed in the vizro-bootstrap repository here: https://github.com/McK-Private/vizro-bootstrap/pull/36

While fixing this I was actually wondering why we did not enable the href argument for the Button. For me, it functions similarly as our Card, where we have also enabled text and href. This also seems to be a common use-case, so in this PR I would like to add the argument in unless we had good reasons to not do so?

Screenshot

Before

Screenshot 2024-11-19 at 09 37 12

After

Screenshot 2024-11-19 at 09 37 19

Notice

github-actions[bot] commented 4 days ago

View the example dashboards of the current commit live on PyCafe :coffee: :rocket:

Updated on: 2024-11-19 12:25:19 UTC Commit: 138b647d2b12e62e7508c81c3773f08eecb43cdd

Link: vizro-core/examples/dev/

Link: vizro-core/examples/scratch_dev

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

Link: vizro-ai/examples/dashboard_ui/

huong-li-nguyen commented 3 days ago

Looks good! I had noticed the bad link alignment on buttons when I added one to ViViVo. ~What is the unminified change to CSS to fix it?~ Oh, I see you linked to it ๐Ÿ‘ ~Can my custom CSS on lines 31-35 here be removed now?~ https://github.com/mckinsey/vizro/pull/824/files/a304db5e8797bdb53e6fcb53f9cd78fa3d94e3fb#r1815769534 Judging by the pycafe preview I think the line-height: unset can be removed but the margin-bottom: 12px is still needed?

Ahh, I didn't realise you had added custom CSS. All of this can be removed now - I'll quickly push that change ๐Ÿ‘

antonymilne commented 3 days ago

Ahh, I didn't realise you had added custom CSS. All of this can be removed now - I'll quickly push that change ๐Ÿ‘

I think the margin-bottom: 12px will still be needed or the button gets too squashed onto the code snippet. But yeah, anything to do with positioning of text in the button can hopefully go.

huong-li-nguyen commented 3 days ago

Will wait for @stichbury approval on the docs changes before merge

huong-li-nguyen commented 3 days ago

Ahh, I didn't realise you had added custom CSS. All of this can be removed now - I'll quickly push that change ๐Ÿ‘

I think the margin-bottom: 12px will still be needed or the button gets too squashed onto the code snippet. But yeah, anything to do with positioning of text in the button can hopefully go.

Ahh, i see - it's not related to the the button text