Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reuse grapher checkboxes in site #2888

Merged
merged 5 commits into from
Nov 9, 2023
Merged

Reuse grapher checkboxes in site #2888

merged 5 commits into from
Nov 9, 2023

Conversation

mlbrgl
Copy link
Member

@mlbrgl mlbrgl commented Nov 2, 2023

Screenshot 2023-11-02 at 19 15 43

For #2890, we need a redesigned checkbox.

  • this PR makes the recently redesigned checkbox available to the site context.

  • I'm adding the capability to render nodes in addition to strings in the label. This is to cater for links in the label ("list of donors")

  • there is a global grapher style which takes care of the checkbox hover state. This style is not available in the site context. I chose to add it to the component itself to make it self-contained. There are other places which rely on the global style, and would require a deeper refactor if we wanted to get rid of it. Here is a demo of the problem this fixes:

Screen.Recording.2023-11-02.at.14.08.57.mov

@mlbrgl
Copy link
Member Author

mlbrgl commented Nov 2, 2023

@mlbrgl mlbrgl mentioned this pull request Nov 2, 2023
1 task
@mlbrgl
Copy link
Member Author

mlbrgl commented Nov 2, 2023

@danyx23 you recently created a components package. Should the checkbox tsx and scss be moved there?

@mlbrgl mlbrgl marked this pull request as ready for review November 2, 2023 18:21
Copy link
Member

@sophiamersmann sophiamersmann left a comment

Choose a reason for hiding this comment

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

Looks good to me!

I think it would make sense to move the checkbox into the components package

Agreed that grapher.scss should be cleaned up :)

onChange: () => any
label: string | (() => React.ReactNode)
Copy link
Member

Choose a reason for hiding this comment

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

out of interest, why is the label a function and not a plain react node?

Copy link
Member Author

Choose a reason for hiding this comment

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

thanks @sophiamersmann!

Yes you're right, we don't need the render prop here 👍

@mlbrgl mlbrgl force-pushed the checkbox-site branch 2 times, most recently from c9c9dd5 to 895577e Compare November 7, 2023 16:38
@mlbrgl mlbrgl mentioned this pull request Nov 7, 2023
@mlbrgl
Copy link
Member Author

mlbrgl commented Nov 9, 2023

Merge activity

  • Nov 9, 3:32 AM: @mlbrgl started a stack merge that includes this pull request via Graphite.
  • Nov 9, 3:32 AM: @mlbrgl merged this pull request with Graphite.

@mlbrgl mlbrgl merged commit 789b18f into master Nov 9, 2023
13 checks passed
@mlbrgl mlbrgl deleted the checkbox-site branch November 9, 2023 08:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants