[Bug] Fix text alignment and enable href in Button

[huong-li-nguyen]

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

After

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: 2024-11-19 12:25:19 UTC
Commit: 138b647

Link: vizro-core/examples/dev/

Link: vizro-core/examples/scratch_dev

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

Link: vizro-ai/examples/dashboard_ui/

[antonymilne]

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?

The Button.href is probably worth a brief mention explicitly in the docs and crosslink/mention between that Card.href.

[huong-li-nguyen]

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]

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.

[petar-qb]

This really looks good.

Thanks for the https://py.cafe/huong-li-nguyen/vizro-button-link-examples that shows how relative and absolute href paths work properly!

[huong-li-nguyen]

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

[huong-li-nguyen]

For review for @stichbury

[huong-li-nguyen]

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

[stichbury]

LGTM 🌟 with just a few minor suggestions for clarity.