Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Convert ProgressBar, ProgressiveImage to styled-components

See original GitHub issue

Task Description

Convert ProgressBar, ProgressiveImage component from scss to styled-components.

To Note

Styled-component migration guidelines:

Styled-components should be a separate file called Styles.ts
When importing styled-components to component file, should use `import * as S from ‘./Styles’.
Use semantic naming for styled-components
Try to maintain alphabetical order for css properties
Avoid creating styled-components for HTML elements that do not require styling
Can refer to src/components/Avatar/Styles.ts for examples
Please ensure that the existing UI is not affected, then only seek for reviews

Please only work on the issues that you are assigned to, PRs will be ignored if you are not assigned to the task. If the assigned issues have not been worked on for more than 3 days, we will remove the assignment.

Issue Analytics

State:
Created 2 years ago
Comments:11 (8 by maintainers)

Top GitHub Comments

1reaction

BISTArkcommented, Oct 14, 2021

I already made a PR please check it out

Hey I was working full day on this. And sadly I was only able to convert ProgressBar component and I am still working on ProgressImage component , I have just started doing open source. And thought I can learn something with this. I don’t know how to act in such situations but What is the general advicce you can give to me in the scenario? I will raise the PR anyway for reviews and learning. Thank you

Hey bro I looked into your github u got some great and inspiring projects. Even I’m new to open source. I’d love to chat with and get to learn things, if u dont mind can u drop your linked in?(or connect to mine username- akshay bistagond)

1reaction

thesanjeevsharmacommented, Oct 13, 2021

@JPRMohnish You can check this PR #2096. You’ll have some idea what was supposed to be done and maybe you can pick up some other issue.

Top Results From Across the Web

React: How to create a custom progress bar component in 5 ...

1. Create a progress-bar.component.js file ... import React from "react"; const ProgressBar = (props) => { const { bgcolor, completed } = props; ......

Building Two Different Types of Progress Bars

Let's create a small component that takes the current progress as property and displays the number. export function ProgressBar({ progress, ...

How to create a custom progress bar component in React.js

Inline styling in React. The <Progressbar /> component should do the following: Indicates the progress visually to the user via the colored bar....

Have bootstraps progress bar converted to circle and image ...

Question: How am I able to use bootstrap progress bar to be wrapped around my image where would still be able to set...

Build a React Native progress bar - LogRocket Blog

Learn how to build a progress bar in React Native to provide users with a visual representation of processes running and progressing.