feat: add color vars to pfe-progress-indicator for styling (#1746)

* Add color vars to pfe-progress-indicator for styling

* Updating PFE Progress Indicator README with variable hooks

* Adding width and height variable hooks to README.

* updating documentation

* update changelog

Co-authored-by: Mark Caron <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: heyMP <[email protected]>

Author: 4 people

CHANGELOG-1.x.md

@@ -7,7 +7,8 @@
 - [43a904e](https://github.com/patternfly/patternfly-elements/commit/43a904e2ce4f2ef7182f803bf35ade463e7c2f1d) fix: container sass placeholder using incorrect variable for spacing (#1522)
 - [3d3c4f1](https://github.com/patternfly/patternfly-elements/commit/3d3c4f109a7e09adae3f3f01122846354a278787) fix: accordion rendering slotted content in the header
 - [519d16a](https://github.com/patternfly/patternfly-elements/commit/519d16af4c714efdc5246f9c0925ca30447b87ea) feat: vertically center pfe-tab content
-- [](https://github.com/patternfly/patternfly-elements/commit/) feat: modal width attribute
+- [877a1ed](https://github.com/patternfly/patternfly-elements/commit/877a1ed5c6a02cdc5899f8e73007572e831b18a0) feat: modal width attribute
+- [](https://github.com/patternfly/patternfly-elements/commit/) feat: add color vars to pfe-progress-indicator for styling
 
 
 # 1.10.1 (2021-07-12)

elements/pfe-progress-indicator/README.md

@@ -44,7 +44,14 @@ Possible values: `sm`, `md`, `xl`
 
 ## Styling
 
-As of writing, the progress indicator element has only one style, but in the future it could be expanded to include many different types of progress indicators.
+### Variable hooks
+
+| Variable name                          | Default value                                                                                          | Use        |
+| -------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------- |
+| `--pfe-progress-indicator--background-color`                   | rgba(0, 0, 0, .25)                                                                                                | Color of the circle |
+| `--pfe-progress-indicator--foreground-color`                   | rgba(0, 0, 0, .75)                                                                                                | Color of the spinner |
+| `--pfe-progress-indicator--Width`                   | 2rem                                                                                                | Width of the circle |
+| `--pfe-progress-indicator--Height`                   | 2rem                                                                                                | Height of the circle |
 
 ## Test
 

elements/pfe-progress-indicator/demo/index.html

@@ -22,6 +22,13 @@
   <link rel="stylesheet" href="../../pfe-styles/dist/pfe-context.css" />
   <link rel="stylesheet" href="../../pfe-styles/dist/pfe-layouts.css" />
 
+  <style>
+    :root {
+      --pfe-progress-indicator--background-color: rgba(0,102,204,.25);
+      --pfe-progress-indicator--foreground-color: #06c;
+    }
+  </style>
+
   <!-- uncomment the es5-adapter if you're using the umd version -->
   <script src="https://unpkg.com/@webcomponents/[email protected]/custom-elements-es5-adapter.js"></script>
   <script src="https://unpkg.com/@webcomponents/[email protected]/webcomponents-bundle.js"></script>

elements/pfe-progress-indicator/docs/index.md

@@ -98,5 +98,11 @@ None
 
 ::: section
 ## Styling hooks
-None
+
+| Variable name                          | Default value                                                                                          | Use        |
+| -------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------- |
+| `--pfe-progress-indicator--background-color`                   | rgba(0, 0, 0, .25)                                                                                                | Color of the circle |
+| `--pfe-progress-indicator--foreground-color`                   | rgba(0, 0, 0, .75)                                                                                                | Color of the spinner |
+| `--pfe-progress-indicator--Width`                   | 2rem                                                                                                | Width of the circle |
+| `--pfe-progress-indicator--Height`                   | 2rem                                                                                                | Height of the circle |
 :::

elements/pfe-progress-indicator/src/pfe-progress-indicator.scss

@@ -1,7 +1,7 @@
 @import "../../pfe-sass/pfe-sass";
 
-$pfe-progress-indicator--border-light: #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} rgba(0, 0, 0, .25);
-$pfe-progress-indicator--border-dark: #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} rgba(0, 0, 0, .75);
+$pfe-progress-indicator--style: #{pfe-var(surface--border-style)};
+$pfe-progress-indicator--width: #{pfe-var(surface--border-width--heavy)};
 
 :host([hidden]) {
   display: none;
@@ -15,12 +15,14 @@ $pfe-progress-indicator--border-dark: #{pfe-var(surface--border-width--heavy)} #
     -webkit-animation:spin 1s linear infinite;
     -moz-animation:spin 1s linear infinite;
 
-    border-bottom: $pfe-progress-indicator--border-light;
-    border-left: $pfe-progress-indicator--border-light;
-    border-right: $pfe-progress-indicator--border-light;
-    border-top: $pfe-progress-indicator--border-dark;
+    border-style: $pfe-progress-indicator--style;
+    border-width: $pfe-progress-indicator--width;
+    // @todo 2.0: potentially make default color align with PatternFly, which is #06c
+    border-color: var(--pfe-progress-indicator--background-color, rgba(0, 0, 0, .25));
+    border-top-color: var(--pfe-progress-indicator--foreground-color, rgba(0, 0, 0, .75));
+
     border-radius: 100%;
-    
+
     display: inline-block;
     height: var(--pfe-progress-indicator--Height, 2rem);
     margin: 0 auto;
@@ -33,7 +35,7 @@ $pfe-progress-indicator--border-dark: #{pfe-var(surface--border-width--heavy)} #
 :host([size="sm"]) {
     height: 1rem;
     width: 1rem;
-   border-width: calc(#{pfe-var(surface--border-width--heavy)} * .75);
+    border-width: calc(#{pfe-var(surface--border-width--heavy)} * .75);
 }
 
 :host([size="md"]) {
@@ -55,4 +57,4 @@ $pfe-progress-indicator--border-dark: #{pfe-var(surface--border-width--heavy)} #
     } to {
         transform: rotate(360deg);
     }
-}
+}