Goals Capture: Add SelectCard component #64042
Conversation
|
Here is how your PR affects size of JS and CSS bundles shipped to the user's browser: App Entrypoints (~176 bytes added 📈 [gzipped]) Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used. Legend What is parsed and gzip size?Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory. Generated by performance advisor bot at iscalypsofastyet.com. |
phcp
force-pushed
the
add/select-card-component
branch
from
9f178e0
to
577f329
Compare
phcp
force-pushed
the
add/select-card-component
branch
from
577f329
to
bdf0521
Compare
matticbot
added
the
[Status] Needs Review
| type SelectCardProps = { | ||
| children: React.ReactNode; | ||
| className?: string; | ||
| onChange: ( checked: boolean, value: string ) => void; | ||
| selected: boolean; | ||
| value: string; | ||
| }; |
There was a problem hiding this comment.
Maybe we could consider moving the SelectCardProps type definition out to client/landing/stepper/declarative-flow/internals/steps-repository/goals/types.ts.
There was a problem hiding this comment.
Good question, this is a decision we would have to apply for all the next components. We could let only the data-related types or keep both UI and data types in the types.ts. I tend to prefer the first approach, keeping the UI types close to the components since they are not used by other files. What do you think?
There was a problem hiding this comment.
Yeah, I think that makes sense to leave the types definition as it is now. 👍🏼
|
|
mashikag
added
[Status] Needs Author Reply
and removed
[Status] Needs Review
|
This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/7333479 Thank you @phcp for including a screenshot in the description! This is really helpful for our translators. |
|
Translation for this Pull Request has now been finished. |
yansern
added
the
[Feature] Site Goals & Onboarding Paths
yansern
changed the title
Changes proposed in this Pull Request
This PR adds the SelectCard component. It uses the
CheckboxControlfrom@wordpress/components, overriding the checkboxIDto make it accessible with the children's text. The outer container is clickable, so the user can select a goal either by clicking on the check field or in any other area of theSelectCard. TheSelectCarddoesn't have a width definition, so it fills the available width and the containers can define the width later.At first, I tried to use only the
CheckboxControlchanging the style in the outer container, but it has limitations on capturing click events. So I moved to the approach of handling the click actions directly in theSelectCardcomponent, that's why have to pass an empty function to the checkbox (it doesn't have an uncontrolled option). In summary, I'm using theCheckboxControlonly to display the checkbox layout, the same as in Figma Design System.This PR also updates the
stepContentin the goals stepper for testing purposes.Testing instructions
3. Click in any area of the component to see if the selected state changesRelated to #63916