diff --git a/CHANGELOG.md b/CHANGELOG.md index 98ff19e..85b4824 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,150 +1,94 @@ ## 1.2.1 -* Use Rollup to build package [#83] -* Extract Path component into separate file [#84] - +- Use Rollup to build package [#83] +- Extract Path component into separate file [#84] ## 1.2.0 -* Add props.circleRatio to enable partial diameter "car speedometer" style [#80] - +- Add props.circleRatio to enable partial diameter "car speedometer" style [#80] ## 1.1.0 -* Convert project to Typescript and improve demo setup [#77] -* Remove prop-types dependency [#78] +- Convert project to Typescript and improve demo setup [#77] +- Remove prop-types dependency [#78] -1.1.0 now uses Typescript! + 1.1.0 now uses Typescript! There should not be any breaking changes to the public JS interface. However, the slight discrepancy in typing may cause type errors when switching from 1.0 using DefinitelyTyped. Runtime prop-types checking is also now removed in [#78]. - ## 1.0.0 -We're at 1.0.0! 🎉 Thank you to all the contributors and issue creators. +We're at 1.0.0! 🎉 Thank you to all the contributors and issue creators. -The main breaking change is the replacement of the `classForPercentage` prop with `className`, and the `textForPercentage` prop with `text` [#61]. - -**How to migrate**: - -Previously, the text would by default display as "{yourPercentage}%". With 1.0, if you want to display that text, you need to supply the `text` prop explicitly: - -```jsx -const percentage = 60; - - -``` - -If you had customized either `classForPercentage` or `textForPercentage` functions before 1.0, you can reuse the same function for `className` and `text`. But instead of passing the function as a prop, you now need to pass the called function's value. - -So if your pre-1.0 usage looked like this: - -```jsx -function customClassForPercentage(percentage) { - if (percentage < 50) { - return 'red'; - } else { - return 'blue'; - } -} - -function customTextForPercentage(percentage) { - if (percentage === 100) { - return `${percentage}!!!`; - } else { - return `${percentage}%`; - } -} - -const percentage = 60; - - -``` - -...you can make a small change to make it work in 1.0 by using the new props and calling the functions instead: - -```jsx - -``` +- Add text prop and remove textForPercentage and classForPercentage props [#61] ## 0.8.1 -* Use styles.root style hook properly [#60] +- Use styles.root style hook properly [#60] ## 0.8.0 -* Check in build files to `/dist` and enable importing styles from `dist/styles.css` [#40] [#45] +- Check in build files to `/dist` and enable importing styles from `dist/styles.css` [#40][#45] ## 0.7.0 -* Add `styles` prop for customizing inline styles [#42] +- Add `styles` prop for customizing inline styles [#42] ## 0.6.0 -* Add `counterClockwise` prop for having progressbar go in opposite direction [#39] +- Add `counterClockwise` prop for having progressbar go in opposite direction [#39] ## 0.5.0 -* Add `classes` prop for customizing svg element classNames [#25] +- Add `classes` prop for customizing svg element classNames [#25] ## 0.4.1 -* Don't render when textForPercentage is falsy +- Don't render when textForPercentage is falsy ## 0.4.0 -* Add `background` prop, fix black circle issue for upgrading without new CSS +- Add `background` prop, fix black circle issue for upgrading without new CSS ## 0.3.0 -* Support custom background colors and added `backgroundPadding` prop [#23] +- Support custom background colors and added `backgroundPadding` prop [#23] ## 0.2.2 -* Allow react 16 as a peerDependency +- Allow react 16 as a peerDependency ## 0.2.1 -* Restrict percentages to be between 0 and 100 -* Fix "undefined" className when it's unset +- Restrict percentages to be between 0 and 100 +- Fix "undefined" className when it's unset ## 0.2.0 -* Adds `className` prop to customize component styles +- Adds `className` prop to customize component styles ## 0.1.5 -* Fixes 'calling PropTypes validators directly' issue caused by prop-types package by upgrading to 15.5.10+ +- Fixes 'calling PropTypes validators directly' issue caused by prop-types package by upgrading to 15.5.10+ ## 0.1.4 -* Fixes React PropTypes import warning by using prop-types package -* Upgrades devDependencies +- Fixes React PropTypes import warning by using prop-types package +- Upgrades devDependencies ## 0.1.3 -* Fix errors when component is unmounted immediately [#1] +- Fix errors when component is unmounted immediately [#1] ## 0.1.2 -* Tweak initialAnimation behavior -* Fix package.json repo URL +- Tweak initialAnimation behavior +- Fix package.json repo URL ## 0.1.1 -* Remove unused dependencies +- Remove unused dependencies ## 0.1.0 -* Initial working version +- Initial working version diff --git a/README.md b/README.md index 6b87d8b..68efe70 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,8 @@ A circular progressbar component, built with SVG and extensively customizable. [**Try it out on CodeSandbox**](https://codesandbox.io/s/vymm4oln6y). +🙌 **v2.0.0 is out** and has a bunch of new features to make it easier to use the component! There are a few breaking changes though - take a look at [UPGRADING.md](/UPGRADING.md) for instructions on how to migrate. + animated progressbar progressbar examples ## Installation @@ -53,6 +55,8 @@ const value = 0.66; [**Take a look at the CodeSandbox**](https://codesandbox.io/s/vymm4oln6y) for interactive examples on how to use these props. +ℹī¸ Version 1.0.0 removed the `classForPercentage` and `textForPercentage` props in favor of `className` and `text` props. Version 2.0.0 replaces `percentage` with `value` and removes the `initialAnimation` prop. Take a look at [UPGRADING.md](/UPGRADING.md) for instructions on how to migrate. + | Name | Description | | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `value` | Completion value of the progressbar, from `minValue` to `maxValue`. Required. | @@ -68,8 +72,6 @@ const value = 0.66; | `classes` | Object allowing overrides of classNames of each svg subcomponent (root, trail, path, text, background). Enables styling with react-jss. See [this PR](https://github.com/kevinsqi/react-circular-progressbar/pull/25) for more detail. | | `styles` | Object allowing customization of styles of each svg subcomponent (root, trail, path, text, background). | -Version 1.0.0 removed the `classForPercentage` and `textForPercentage` props in favor of the newer `className` and `text` props. Take a look at the [migration guide](/CHANGELOG.md) for instructions on how to migrate. - ## Theming (customizing styles) Use CSS or inline styles to customize the styling - the default CSS is a good starting point, but you can override it as needed. diff --git a/UPGRADING.md b/UPGRADING.md new file mode 100644 index 0000000..26a5486 --- /dev/null +++ b/UPGRADING.md @@ -0,0 +1,53 @@ +## 0.x.x to 1.0.0 + +The main breaking change is the replacement of the `classForPercentage` prop with `className`, and the `textForPercentage` prop with `text` [#61]. + +**How to migrate**: + +Previously, the text would by default display as "{yourPercentage}%". With 1.0, if you want to display that text, you need to supply the `text` prop explicitly: + +```jsx +const percentage = 60; + +; +``` + +If you had customized either `classForPercentage` or `textForPercentage` functions before 1.0, you can reuse the same function for `className` and `text`. But instead of passing the function as a prop, you now need to pass the called function's value. + +So if your pre-1.0 usage looked like this: + +```jsx +function customClassForPercentage(percentage) { + if (percentage < 50) { + return 'red'; + } else { + return 'blue'; + } +} + +function customTextForPercentage(percentage) { + if (percentage === 100) { + return `${percentage}!!!`; + } else { + return `${percentage}%`; + } +} + +const percentage = 60; + +; +``` + +...you can make a small change to make it work in 1.0 by using the new props and calling the functions instead: + +```jsx + +```