From 1fa16896aadf14c7b2eeac08c18a314028ef8ab5 Mon Sep 17 00:00:00 2001
From: Kevin Qi <iqnivek@gmail.com>
Date: Sun, 24 Jun 2018 14:22:42 -0700
Subject: [PATCH] update changelog/readme with migration guide

---
 CHANGELOG.md | 59 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 README.md    |  1 +
 2 files changed, 60 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 72e1907..73d39e3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,62 @@
+## 1.0.0
+
+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;
+
+<CircularProgressbar
+  percentage={percentage}
+  text={`${percentage}%`}
+/>
+```
+
+If you had customized either `classForPercentage` or `textForPercentage` functions before 1.0, you can reuse the same function for `className` and `text`.
+
+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;
+
+<CircularProgressbar
+  percentage={percentage}
+  classForPercentage={customClassForPercentage}
+  textForPercentage={customTextForPercentage}
+/>
+```
+
+...you can make a small change to make it work in 1.0:
+
+```jsx
+<CircularProgressbar
+  percentage={percentage}
+  className={customClassForPercentage()}
+  text={customTextForPercentage()}
+/>
+```
+
 ## 0.8.1
 
 * Use styles.root style hook properly [#60]
diff --git a/README.md b/README.md
index 4d9f4ad..af23b61 100644
--- a/README.md
+++ b/README.md
@@ -68,6 +68,7 @@ const percentage = 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/iqnivek/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.
 
 ## Customizing styles