Transform <Badge>, <Breadcrumb>, <BreadcrumbLink>, <CardCarouselTitle> and <CardCarouselSubtitle> to typescript - #3807
Conversation
openedx-webhooks
added
open-source-contribution
|
Thanks for the pull request, @diana-villalvazo-wgu! 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. |
diana-villalvazo-wgu
added
the
mao-onboarding
e00f6ef to
e180861
Compare
diana-villalvazo-wgu
changed the title
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## release-23.x #3807 +/- ##
================================================
+ Coverage 94.37% 94.39% +0.01%
================================================
Files 242 242
Lines 4287 4296 +9
Branches 1010 981 -29
================================================
+ Hits 4046 4055 +9
- Misses 233 237 +4
+ Partials 8 4 -4 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
e180861 to
7c2ab5b
Compare
c523849 to
f865dc0
Compare
f865dc0 to
27283fe
Compare
bradenmacdonald
left a comment
bradenmacdonald
left a comment
There was a problem hiding this comment.
Looks great, just want to get the typing of as right on Badge - see below.
(I know that Badge is probably rarely using custom elements anyways, but we should try to get the typing right in general so it's easy to apply the same patterns across the board.)
| bsPrefix?: string; | ||
| } | ||
|
|
||
| const Badge = React.forwardRef(({ |
There was a problem hiding this comment.
If you temporarily put this code in the Badge file (or any typescript file), you'll see that this doesn't quite have the right types:
// @ts-expect-error implicit <span> does not support 'checked'
export const testOne = <Badge checked />;
// @ts-expect-error explicit <span> does not support 'checked'
export const testTwo = <Badge as="span" checked />;
// Should be no error - input does support 'checked':
export const testThree = <Badge as="input" checked />;
The change in 87a0537 should fix it though.
There was a problem hiding this comment.
this change breaks some tests 😅 checking if i can fix them 👀
There was a problem hiding this comment.
Oops, guess I didn't check it thoroughly enough. You can just copy what's in Badge without the other change I suggested to bootstrap.ts and it should pass the type checks. But I was seeing an error in VS Code that I'd like to figure out how to solve.
| className?: string; | ||
| } | ||
|
|
||
| function CardCarouselSubtitle({ children, as, className }: CardCarouselSubtitleProps) { |
There was a problem hiding this comment.
Note: this looks good. We don't need any complicated handling of as here because this doesn't pass ...props to the child component.
| /** Specifies contents of the component. */ | ||
| children: React.ReactNode; | ||
| /** Specifies the base element */ | ||
| as?: string | React.ElementType; |
There was a problem hiding this comment.
| as?: string | React.ElementType; | |
| as?: React.ElementType; |
React.ElementType already allows strings like div, span, etc. - or is there some other non-valid-element string we need to allow?
|
|
||
| interface CardCarouselTitleProps { | ||
| children: React.ReactNode; | ||
| as?: React.ElementType | string; |
There was a problem hiding this comment.
| as?: React.ElementType | string; | |
| as?: React.ElementType; |
27283fe to
999d72f
Compare
519e3c4 to
8c9a15f
Compare
8c9a15f to
0babc55
Compare
|
@diana-villalvazo-wgu Is this PR ready for review again? Sorry if I dropped the ball here. Would you mind rebasing it as well? |
0babc55 to
55b5d33
Compare
yes, i addressed the feedback, and just did rebase 👍 thanks Braden |
|
🎉 This PR is included in version 23.18.2 🎉 The release is available on: Your semantic-release bot 📦🚀 |
7 participants
Description
As part of the effort to "Convert components to TypeScript" #3739
Components converted to typescript
<Badge><Breadcrumb><BreadcrumbLink><CardCarouselTitle><CardCarouselSubtitle>Deploy Preview
<Badge>- https://deploy-preview-3807--paragon-openedx-v23.netlify.app/components/badge<Breadcrumb>- https://deploy-preview-3807--paragon-openedx-v23.netlify.app/components/breadcrumb<BreadcrumbLink><CardCarouselTitle><CardCarouselSubtitle>Merge Checklist
exampleapp?Post-merge Checklist