Skip to content

Conversation

@ChristopherChudzicki
Copy link
Contributor

@ChristopherChudzicki ChristopherChudzicki commented Jul 1, 2024

What are the relevant tickets?

Closes https://github.com/mitodl/hq/issues/4700

Description (What does it do?)

Makes primary buttons (and only primary buttons) have a shadow to match figma.

Screenshots (if appropriate):

App There aren't too many primary buttons in the app so far.
Screenshot 2024-07-01 at 4 26 42 PM

Storybook:
Screenshot 2024-07-01 at 4 26 35 PM

How can this be tested?

  1. Run storybook (should be on 6006, if not, yarn storybook) and check:

Buttons should be unchanged, except primary buttons should have a shadow AND only in their default state (no shadow on hover).

},
edge: {
options: ["circular", "rounded", "none"],
options: ["circular", "rounded"],
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

edge="none" is not in figma; it was added for resource cards, but that is handled a little differently now (changed in #1180 )

hasBorder && {
backgroundColor: "transparent",
borderColor: "currentcolor",
borderStyle: variant === "secondary" ? "solid" : "none",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Previously, const hasBorder = variant === "secondary" || variant === "text". But that was weird because text variant doesn't actually have a border. It was just set that way to pick up backgroundColor: transparent.

Applying backgroundColor: transparent to the text variant separately is simpler / more understandable, imo.

"Without Image": makeResource({
"Without Image": {
...makeResource(),
image: null,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change is unrelated, but was something I did while opening

Decided to keep it.

@ChristopherChudzicki ChristopherChudzicki added the Needs Review An open Pull Request that is ready for review label Jul 1, 2024
@ChristopherChudzicki ChristopherChudzicki marked this pull request as ready for review July 1, 2024 20:33
@abeglova abeglova self-assigned this Jul 2, 2024
Copy link
Contributor

@abeglova abeglova left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@ChristopherChudzicki ChristopherChudzicki merged commit 4231211 into main Jul 2, 2024
This was referenced Jul 8, 2024
@rhysyngsun rhysyngsun deleted the cc/shadowy-buttons branch February 7, 2025 20:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Needs Review An open Pull Request that is ready for review

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants