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

Migrate ProgressBar to TypeScript #987

Merged
merged 5 commits into from
Feb 4, 2021
Merged

Migrate ProgressBar to TypeScript #987

merged 5 commits into from
Feb 4, 2021

Conversation

colebemis
Copy link
Contributor

This PR migrates the ProgressBar component to TypeScript as part of the TypeScript refactor.

@changeset-bot
Copy link

changeset-bot bot commented Jan 27, 2021

🦋 Changeset detected

Latest commit: d41d361

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/components Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel
Copy link

vercel bot commented Jan 27, 2021

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/primer/primer-components/mjey7llq5
✅ Preview: https://primer-components-git-cb-ts-progress-bar.primer.now.sh

@vercel vercel bot temporarily deployed to Preview January 27, 2021 00:06 Inactive
@colebemis colebemis mentioned this pull request Jan 27, 2021
53 tasks
Copy link

@emplums emplums 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! Just left a couple of code style comments

} & WidthProps &
SystemCommonProps &
SxProp
>`
Copy link

Choose a reason for hiding this comment

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

What do you think about creating an interface at the top of the file for situations like this where it includes multiple lines? My hunch is that for more complex components like this one it can get a little tricky to visually parse. That seems to be what other applications at GH do, might make it easier to read when jumping between codebases. Curious what @smockle or @T-Hugs thinks

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah, I agree. I'd love to come up with a naming convention for this kind of props type that's passed to styled-components but not exported and doesn't contain all the props accepted by the returned component. Maybe Styled[component-name]Props (e.g. StyledProgressContainerProps)?

Copy link
Member

Choose a reason for hiding this comment

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

What do you think about creating an interface at the top of the file for situations like this where it includes multiple lines? My hunch is that for more complex components like this one it can get a little tricky to visually parse.

Great idea! Incidentally, organizing prop types this way helped with the namespace components issue described in #999 (comment)

display: ${props => (props.inline ? 'inline-flex' : 'flex')};
overflow: hidden;
background-color: ${get('colors.gray.2')};
border-radius: ${get('radii.1')};
height: ${props => sizeMap[props.barSize]};
height: ${props => sizeMap[props.barSize || 'default']};
Copy link

Choose a reason for hiding this comment

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

Is this necessary if we're setting the default value in defaultProps?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It shouldn't be necessary. But defaultProps + styled-components + TypeScript don't play well together in this case. TypeScript was complaining about props.barSize possibly being undefined. I'm open to other solutions :)

@vercel vercel bot temporarily deployed to Preview January 27, 2021 22:20 Inactive
@vercel vercel bot temporarily deployed to Preview January 27, 2021 23:36 Inactive
@colebemis colebemis merged commit b408de4 into main Feb 4, 2021
@colebemis colebemis deleted the cb/ts-progress-bar branch February 4, 2021 20:01
@github-actions github-actions bot mentioned this pull request Feb 4, 2021
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.

3 participants