fix(dropdownitem): convert before to pds-icon (#1924)

Kajabi · Aug 2, 2024 · b869368 · b869368
1 parent bb39589
commit b869368
Showing 1 changed file with 19 additions and 10 deletions.
diff --git a/packages/sage-react/lib/Dropdown/DropdownItem.jsx b/packages/sage-react/lib/Dropdown/DropdownItem.jsx
@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import { Checkbox } from '../Toggle';
 import { Link } from '../Link';
 import { Tooltip } from '../Tooltip';
-import { SageTokens } from '../configs';
+import { SageTokens, SageClassnames } from '../configs';
 import { OptionsDropdown } from './OptionsDropdown';
 import { DROPDOWN_ITEM_COLORS } from './configs';
 
@@ -117,9 +117,12 @@ export const DropdownItem = ({
             value={label}
             {...rest}
           />
-          <span className="sage-dropdown__item-label" title={label}>
-            {label}
-          </span>
+          <>
+            {icon && (<pds-icon class={`sage-dropdown__item-icon ${SageClassnames.SPACERS.XS_RIGHT}`} name={icon} />)}
+            <span className="sage-dropdown__item-label" title={label}>
+              {label}
+            </span>
+          </>
         </label>
       );
     }
@@ -138,9 +141,12 @@ export const DropdownItem = ({
           {...rest}
         >
           {(!customComponent && isLabelVisible) && (
-            <span className="sage-dropdown__item-label" title={label}>
-              {label}
-            </span>
+            <>
+              {icon && (<pds-icon class={`sage-dropdown__item-icon ${SageClassnames.SPACERS.XS_RIGHT}`} name={icon} />)}
+              <span className="sage-dropdown__item-label" title={label}>
+                {label}
+              </span>
+            </>
           )}
           {customComponent && <CustomComponent {...payload} />}
         </Link>
@@ -157,9 +163,12 @@ export const DropdownItem = ({
         {...rest}
       >
         {(!customComponent && isLabelVisible) && (
-          <span className="sage-dropdown__item-label" title={label}>
-            {label}
-          </span>
+          <>
+            {icon && (<pds-icon class={`sage-dropdown__item-icon ${SageClassnames.SPACERS.XS_RIGHT}`} name={icon} />)}
+            <span className="sage-dropdown__item-label" title={label}>
+              {label}
+            </span>
+          </>
         )}
         {customComponent && <CustomComponent {...payload} />}
       </button>