feat(progress-bar): add success color example (#5072)

* feat(progress-bar): add success color example

* feat(progress-bar): additional changes to success example

* feat(progressbar): typo

* feat(progressbar): move ex to states category and update release note

* fix location of example in docs

* feat(progress-bar): move ex to base

Co-authored-by: andrewvasilchuk <[email protected]>
Co-authored-by: Lauren Suh <[email protected]>
Co-authored-by: DouG Molidor <[email protected]>

Author: 4 people

RELEASENOTES.md

@@ -69,6 +69,10 @@
 #### Changed
 - Added tabindex to Footless example for programmatic focus use case.
 
+### [Progress Bar](https://www.lightningdesignsystem.com/components/progress-bar)
+#### Added
+- Added example for Success under States
+
 ### [Tabs](https://www.lightningdesignsystem.com/components/tabs)
 #### Added
 - Added `role="img"` to unread indicator dot to comply with accessibility usage rules for `aria-label`

ui/components/progress-bar/RELEASENOTES.md

@@ -3,13 +3,18 @@
 # Progress Bar Release Notes
 
 <!-- ## [Unreleased] -->
+## 2.19.0
+
+### Added
+
+- Added example for Success under States
+
 ## 2.16.0
 
 ### Added
 
 - Added `aria-label` attribute to the div with role of `progressbar` to meet accessibility requirements.
 
-
 ## 2.7.0
 
 ### Added

ui/components/progress-bar/base/example.jsx

@@ -65,6 +65,11 @@ export let states = [
     id: '100',
     label: '100% complete',
     element: <ProgressBar value="100" />
+  },
+  {
+    id: 'success',
+    label: 'Success Color',
+    element: <ProgressBar isSuccess value="100" />
   }
 ];
 
@@ -76,11 +81,6 @@ export let examples = [
       <ProgressBarDescriptive label="Einstein Setup Assistant" value="25" />
     )
   },
-  {
-    id: 'success',
-    label: 'Success',
-    element: <ProgressBar isSuccess value="75" />
-  },
   {
     id: 'circular',
     label: 'Circular',

ui/components/progress-bar/docs.mdx

@@ -54,6 +54,12 @@ import * as Vertical from './vertical/example';
   {getDisplayElementById(Base.states, '100')}
 </CodeView>
 
+### Success Color
+
+<CodeView>
+  {getDisplayElementById(Base.states, 'success')}
+</CodeView>
+
 ## Examples
 ### Descriptive Progress Bar