ethereum-org-website icon indicating copy to clipboard operation
ethereum-org-website copied to clipboard

Published 20 hours ago • verified publisher icon ethereum

feat: build custom react-select component with Chakra [updated]

Open TylerAPfledderer opened this issue 1 year ago • 7 comments

Replaces #10542

Part of Implementation of new DS v1 #9548

Description

This PR update the usage of the react-select package.

  • Bumps the react-select dep to latest which includes TypeScript support
  • Creates a custom select component, including custom internal parts using Chakra components.
  • Create a custom theming config ReactSelect to be sent to the internal parts
  • Update implementation with related page components.
  • Update onChange handler functions to match new TypeScript support.

TylerAPfledderer avatar Jan 30 '24 15:01 TylerAPfledderer

Deploy Preview for ethereumorg ready!

Name Link
Latest commit dcd83959f79c039c1ab6150464ac765821142116
Latest deploy log https://app.netlify.com/sites/ethereumorg/deploys/65de05a3be166f00078fefed
Deploy Preview https://deploy-preview-12065--ethereumorg.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] avatar Jan 30 '24 15:01 netlify[bot]

@TylerAPfledderer, great work, thank you!!! While testing on the browser, I realized that the color scheme was too strong and relied heavily on the primary color... Can you change it?

Sorry about this, but sometimes, when on the browser and in the mix of the styles, we can find "design bugs". Screen Shot 2024-02-14 11 49 49 AM

Link to the Figma file (I added a comment, too) https://www.figma.com/file/NrNxGjBL0Yl1PrNrOT8G2B/ethereum.org-Design-System?type=design&node-id=5303%3A58208&mode=design&t=gfwqptwT1wv8ZJCx-1

Thank you!

nloureiro avatar Feb 14 '24 11:02 nloureiro

@pettinarip @nloureiro all above suggestions should be resolved, and have updated the storybook file.

TylerAPfledderer avatar Feb 14 '24 22:02 TylerAPfledderer

I'm afk at the time of this comment, but I noticed a styling error for the flush variant when checking the story book preview. Will get that addressed asap.

TylerAPfledderer avatar Feb 15 '24 05:02 TylerAPfledderer

I'm afk at the time of this comment, but I noticed a styling error for the flush variant when checking the story book preview. Will get that addressed asap.

not sure what you mean by "flush variant".... do you mean the active color?

I was checking and still found this difference, not sure if this is what you mean Screen Shot 2024-02-15 09 38 11 AM

nloureiro avatar Feb 15 '24 09:02 nloureiro

I'm afk at the time of this comment, but I noticed a styling error for the flush variant when checking the story book preview. Will get that addressed asap.

not sure what you mean by "flush variant".... do you mean the active color?

I was checking and still found this difference, not sure if this is what you mean Screen Shot 2024-02-15 09 38 11 AM

I'm referring to the flushed versus outline variant you have labelled in the DS. I made an update to the border styling which caused the variants to look the same.

This should now be resolved for a proper review.

TylerAPfledderer avatar Feb 15 '24 17:02 TylerAPfledderer

@nloureiro you can immediately view this component through this published storybook preview

TylerAPfledderer avatar Feb 15 '24 17:02 TylerAPfledderer

@TylerAPfledderer @pettinarip is this ready to be merged? I need to use a Select component and would be very handy, thanks!

nhsz avatar Mar 06 '24 04:03 nhsz

@TylerAPfledderer @pettinarip is this ready to be merged? I need to use a Select component and would be very handy, thanks!

@nhsz I think this is good to go for the most part. What's left is removing the original select and it's story

TylerAPfledderer avatar Mar 06 '24 04:03 TylerAPfledderer