Tony.busa/stepper convert to tsx#4137
Conversation
openedx-webhooks
added
the
open-source-contribution
|
Thanks for the pull request, @tonybusa! This repository is currently maintained by Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review. 🔘 Get product approvalIf you haven't already, check this list to see if your contribution needs to go through the product review process.
🔘 Provide contextTo help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:
🔘 Get a green buildIf one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green. DetailsWhere can I find more information?If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources: When can I expect my changes to be merged?Our goal is to get community contributions seen and reviewed as efficiently as possible. However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:
💡 As a result it may take up to several weeks or months to complete a review and merge your PR. |
✅ Deploy Preview for paragon-openedx-v23 ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
tonybusa
requested review from
brian-smith-tcril,
diana-villalvazo-wgu and
holaontiveros
mphilbrick211
added
the
mao-onboarding
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## release-23.x #4137 +/- ##
================================================
- Coverage 94.39% 94.29% -0.10%
================================================
Files 242 243 +1
Lines 4296 4329 +33
Branches 1020 990 -30
================================================
+ Hits 4055 4082 +27
- Misses 237 243 +6
Partials 4 4 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
Hi @tonybusa! Is this still in progress? |
brian-smith-tcril
left a comment
brian-smith-tcril
left a comment
There was a problem hiding this comment.
Overall this is looking great! I found a few spots we should clean up before landing this, but it's very close to ready!
| <div className={classNames('pgn__stepper-header', className)}> | ||
| <StepperHeaderStep | ||
| {...activeStep} | ||
| title={activeStep.title} |
There was a problem hiding this comment.
It's not clear to me why we need to specify this here. We're spreading the activeStep props which include title, and index={activeStepIndex} ensures we override the index from the spread with the index in our steps array (as opposed to the index prop on the step itself), but setting title here seems to just be redundant as the title from spread will be the same as activeStep.title
| "allowJs": false, | ||
| "outDir": "dist" | ||
| "outDir": "dist", | ||
| "jsx": "react-jsx" |
There was a problem hiding this comment.
I don't think we need this, we inherit from https://github.com/openedx/typescript-config which already has that https://github.com/openedx/typescript-config/blob/ee830548f61e8b8c96da2c6c7aa66a89904a2368/tsconfig.json#L8
There was a problem hiding this comment.
I assume we can just revert these changes and things will still work, I know the package lock has been updated quite a bit since this PR was opened.
| }; | ||
|
|
||
| StepperHeader.Step = StepperHeaderStep; | ||
| (StepperHeader as StepperHeaderComponent).Step = StepperHeaderStep; |
There was a problem hiding this comment.
This cast feels like it could cause some problems. In this PR's Stepper.tsx this is handled properly with
const Stepper: StepperComponent = function Stepper({ children, activeKey }: StepperProps) {it'd be great to follow that pattern here too.
| const size = Size[compactWidth] || 'small'; | ||
| const breakpointWidth = breakpoints[size].maxWidth || Infinity; | ||
| const isCompactView = windowDimensions.width < breakpointWidth; | ||
| const isCompactView = (windowDimensions.width ?? 0) < breakpointWidth; |
There was a problem hiding this comment.
This is changing the behavior slightly. When windowDimensions.width is undefined, windowDimensions.width < breakpointWidth is false, but (windowDimensions.width ?? 0) < breakpointWidth is true.
We can replicate the original behavior with
| const isCompactView = (windowDimensions.width ?? 0) < breakpointWidth; | |
| const isCompactView = windowDimensions.width !== undefined && windowDimensions.width < breakpointWidth; |
| function StepList({ steps, activeKey }: StepListProps) { | ||
| return ( | ||
| <ul className="pgn__stepper-header-step-list"> | ||
| {steps.map(({ label, ...stepProps }, index) => ( | ||
| {steps.map(({ title: label, ...stepProps }, index) => ( | ||
| <React.Fragment key={stepProps.eventKey}> | ||
| {index !== 0 && <StepListSeparator />} | ||
| <StepperHeaderStep | ||
| {...stepProps} | ||
| title={label} | ||
| index={index} | ||
| isActive={activeKey === stepProps.eventKey} | ||
| > | ||
| {label} | ||
| </StepperHeaderStep> | ||
| /> | ||
| </React.Fragment> | ||
| ))} | ||
| </ul> | ||
| ); | ||
| } |
There was a problem hiding this comment.
It looks like label has never been used and has always been undefined here (going all the way back to when the component was first added in #690)
With that in mind, we can simplify this to
| function StepList({ steps, activeKey }: StepListProps) { | |
| return ( | |
| <ul className="pgn__stepper-header-step-list"> | |
| {steps.map(({ label, ...stepProps }, index) => ( | |
| {steps.map(({ title: label, ...stepProps }, index) => ( | |
| <React.Fragment key={stepProps.eventKey}> | |
| {index !== 0 && <StepListSeparator />} | |
| <StepperHeaderStep | |
| {...stepProps} | |
| title={label} | |
| index={index} | |
| isActive={activeKey === stepProps.eventKey} | |
| > | |
| {label} | |
| </StepperHeaderStep> | |
| /> | |
| </React.Fragment> | |
| ))} | |
| </ul> | |
| ); | |
| } | |
| function StepList({ steps, activeKey }: StepListProps) { | |
| return ( | |
| <ul className="pgn__stepper-header-step-list"> | |
| {steps.map((step, index) => ( | |
| <React.Fragment key={step.eventKey}> | |
| {index !== 0 && <StepListSeparator />} | |
| <StepperHeaderStep | |
| {...step} | |
| index={index} | |
| isActive={activeKey === step.eventKey} | |
| /> | |
| </React.Fragment> | |
| ))} | |
| </ul> | |
| ); | |
| } |
| case 'remove': | ||
| return stepsState.filter(step => step.eventKey !== action.eventKey); | ||
| case 'register': | ||
| default: |
There was a problem hiding this comment.
With the StepsAction type we'll never hit default here, so we can remove this line.
| }; | ||
|
|
||
| StepperActionRow.Spacer = ActionRow.Spacer; | ||
| (StepperActionRow as StepperActionRowComponent).Spacer = ActionRow.Spacer; |
There was a problem hiding this comment.
Same thing here as https://github.com/openedx/paragon/pull/4137/changes#r3174512641, following the pattern from Stepper would be better
const Stepper: StepperComponent = function Stepper({ children, activeKey }: StepperProps) {| as?: React.ElementType; | ||
| [key: string]: any; // For additional props passed through |
There was a problem hiding this comment.
This came up in the ModalCloseButton PR, using ComponentWithAsProp here instead of just allowing all additional props through unchecked would be better. See #4134 (comment)
5 participants
Description
Per: #3739 - converted Stepper component from jsx to tsx.
Deploy Preview
https://deploy-preview-4137--paragon-openedx-v23.netlify.app/components/stepper/
Merge Checklist
Post-merge Checklist