fix(progress-indicator): fix spacing for skeleton progress label (#12332)

* fix(progress-indicator): fix spacing for skeleton progress label

* chore(contributors): adds to the contributors list

* feat(progress-indicator): add vertical prop to ProgressIndicatorSkeleton

* test(progress-indicator): update test snapshot with props

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: torresga

.all-contributorsrc

@@ -904,6 +904,33 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "torresga",
+      "name": "G. Torres",
+      "avatar_url": "https://avatars.githubusercontent.com/u/6892410?v=4",
+      "profile": "http://torresga.github.io/",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "FionaDL",
+      "name": "Fiona",
+      "avatar_url": "https://avatars.githubusercontent.com/u/28625558?v=4",
+      "profile": "https://github.com/FionaDL",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "kindoflew",
+      "name": "kindoflew",
+      "avatar_url": "https://avatars.githubusercontent.com/u/70274722?v=4",
+      "profile": "https://lewisdavanzo.com/",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

README.md

@@ -202,6 +202,9 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
   </tr>
   <tr>
     <td align="center"><a href="https://github.com/hannelevaltanen"><img src="https://avatars.githubusercontent.com/u/26527460?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Hannele Valtanen</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=hannelevaltanen" title="Code">💻</a></td>
+    <td align="center"><a href="http://torresga.github.io/"><img src="https://avatars.githubusercontent.com/u/6892410?v=4?s=100" width="100px;" alt=""/><br /><sub><b>G. Torres</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=torresga" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/FionaDL"><img src="https://avatars.githubusercontent.com/u/28625558?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Fiona</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=FionaDL" title="Code">💻</a></td>
+    <td align="center"><a href="https://lewisdavanzo.com/"><img src="https://avatars.githubusercontent.com/u/70274722?v=4?s=100" width="100px;" alt=""/><br /><sub><b>kindoflew</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=kindoflew" title="Code">💻</a></td>
   </tr>
 </table>
 

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -5594,6 +5594,9 @@ Map {
       "className": Object {
         "type": "string",
       },
+      "vertical": Object {
+        "type": "bool",
+      },
     },
   },
   "ProgressStep" => Object {

packages/react/src/components/ProgressIndicator/ProgressIndicator.Skeleton.js

@@ -26,11 +26,16 @@ function Step() {
   );
 }
 
-function ProgressIndicatorSkeleton({ className, ...rest }) {
+function ProgressIndicatorSkeleton({ className, vertical, ...rest }) {
   const prefix = usePrefix();
   return (
     <ul
-      className={cx(`${prefix}--progress`, `${prefix}--skeleton`, className)}
+      className={cx(
+        `${prefix}--progress`,
+        `${prefix}--skeleton`,
+        { [`${prefix}--progress--vertical`]: vertical },
+        className
+      )}
       {...rest}>
       <Step />
       <Step />
@@ -45,6 +50,10 @@ ProgressIndicatorSkeleton.propTypes = {
    * Specify an optional className to add.
    */
   className: PropTypes.string,
+  /**
+   * Determines whether or not the ProgressIndicator should be rendered vertically.
+   */
+  vertical: PropTypes.bool,
 };
 
 export default ProgressIndicatorSkeleton;

packages/styles/scss/components/progress-indicator/_progress-indicator.scss

@@ -273,6 +273,11 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     margin-top: 0.625rem;
   }
 
+  .#{$prefix}--progress.#{$prefix}--progress--vertical.#{$prefix}--skeleton
+    .#{$prefix}--progress-label {
+    margin-top: 0.0625rem;
+  }
+
   // Vertical Variant
 
   .#{$prefix}--progress--vertical {