From 35d35d5bc2403d2df73311c482fc78a99c68ad44 Mon Sep 17 00:00:00 2001
From: Phillip Lovelace <phillip.lovelace@kajabi.com>
Date: Mon, 1 Jul 2024 08:32:19 -0700
Subject: [PATCH] fix(label): adds missing icon and corrects class typo (#1902)

* fix(label): adds missing icon and corrects class type

* fix: hello linter my old friend
---
 packages/sage-react/lib/Label/Label.jsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/sage-react/lib/Label/Label.jsx b/packages/sage-react/lib/Label/Label.jsx
index 81244a9fd7..2c75b68f94 100644
--- a/packages/sage-react/lib/Label/Label.jsx
+++ b/packages/sage-react/lib/Label/Label.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { SageTokens } from '../configs';
+import { SageTokens, SageClassnames } from '../configs';
 import {
   LABEL_COLORS,
   LABEL_STYLES,
@@ -61,13 +61,19 @@ export const Label = React.forwardRef(({
         type={interactiveType ? 'button' : null}
         {...rest}
       >
+        {icon && (
+          <pds-icon
+            name={icon}
+            class={`${SageClassnames.SPACERS.XS_RIGHT} ${icon && customIconColor ? 'sage-label--icon--custom-color' : ''}`}
+          />
+        )}
         <span className="sage-label__value-text">
           {value}
         </span>
       </TagName>
       {interactiveType === LABEL_INTERACTIVE_TYPES.SECONDARY_BUTTON && secondaryButton}
       {(interactiveType === LABEL_INTERACTIVE_TYPES.DROPDOWN) && (
-        <pds-icon className="sage-label__decor-icon" name="down-small" />
+        <pds-icon class="sage-label__decor-icon" name="down-small" />
       )}
     </span>
   );