feat(dropdown): add icon variations property in dropdown component

innovaccer · Sep 16, 2023 · bfcae4b · bfcae4b
1 parent a89af39
commit bfcae4b
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 6 deletions.
diff --git a/core/components/atoms/dropdown/Dropdown.tsx b/core/components/atoms/dropdown/Dropdown.tsx
@@ -67,6 +67,12 @@ interface SyncProps {
    *   selected?: boolean;
    *   disabled?: boolean;
    *   group?: string;
+   *   iconVariations?: {
+   *      fill?: number;
+   *      weight?: number; Range: [100, 700]
+   *      grade?: number; Range: [-25, 200]
+   *      opticalSize?: number; Range: [20px, 48px]
+   *   }
    * }
    * </pre>
    *
@@ -80,6 +86,7 @@ interface SyncProps {
    * | selected | Denotes default selection of option <br/>(works in case of uncontrolled component) | |
    * | disabled | Disables the option, making it unable to be pressed | |
    * | group | Defines group to which the option belongs | |
+   * | iconVariations | Set font-variation-settings CSS property for Icons | |
    */
   options: OptionSchema[];
   /**

diff --git a/core/components/atoms/dropdown/DropdownButton.tsx b/core/components/atoms/dropdown/DropdownButton.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Icon, Text } from '@/index';
+import { FontVariationType } from '@/common.type';
 
 export type DropDownButtonSize = 'tiny' | 'regular';
 
@@ -14,6 +15,19 @@ export interface TriggerProps {
    * Material icon name
    */
   icon?: string;
+  /**
+   * Set font-variation-settings CSS property for Icons
+   *
+   * <pre className="DocPage-codeBlock">
+   *  FontVariationType: {
+   *    fill?: number;
+   *    weight?: number; Range: [100, 700]
+   *    grade?: number; Range: [-25, 200]
+   *    opticalSize?: number; Range: [20px, 48px]
+   *  }
+   * </pre>
+   */
+  iconVariations?: FontVariationType;
   /**
    * String to show inside `Dropdown trigger` when no options are selected
    * @default "Select"
@@ -54,6 +68,7 @@ const DropdownButton = React.forwardRef<HTMLButtonElement, DropdownButtonProps>(
     open,
     inlineLabel,
     error,
+    iconVariations,
     ...rest
   } = props;
 
@@ -98,12 +113,17 @@ const DropdownButton = React.forwardRef<HTMLButtonElement, DropdownButtonProps>(
             </Text>
           )}
           {icon && !inlineLabel && (
-            <Icon appearance={buttonDisabled} className="d-flex align-items-center mr-4" name={icon} />
+            <Icon
+              appearance={buttonDisabled}
+              className="d-flex align-items-center mr-4"
+              name={icon}
+              variations={iconVariations}
+            />
           )}
           {value && <span className={textClass}>{value}</span>}
         </div>
       )}
-      <Icon appearance={buttonDisabled} name={iconName} />
+      <Icon appearance={buttonDisabled} name={iconName} variations={iconVariations} />
     </button>
   );
 });

diff --git a/core/components/atoms/dropdown/DropdownList.tsx b/core/components/atoms/dropdown/DropdownList.tsx
@@ -278,7 +278,16 @@ const DropdownList = (props: OptionsProps) => {
     if (firstEnabledOption !== cursor) setCursor(firstEnabledOption);
   }, [firstEnabledOption]);
 
-  const { triggerSize = 'regular', placeholder = 'Select', icon, error, disabled, inlineLabel, triggerLabel } = props;
+  const {
+    triggerSize = 'regular',
+    placeholder = 'Select',
+    icon,
+    error,
+    disabled,
+    inlineLabel,
+    triggerLabel,
+    iconVariations,
+  } = props;
 
   const CustomTrigger = customTrigger ? customTrigger(triggerLabel ? triggerLabel : placeholder) : <></>;
   const NewCustomTrigger = React.cloneElement(CustomTrigger, { tabIndex: 0, ref: dropdownTriggerRef });
@@ -296,6 +305,7 @@ const DropdownList = (props: OptionsProps) => {
       menu={menu}
       error={error}
       ref={dropdownTriggerRef}
+      iconVariations={iconVariations}
     >
       {triggerLabel}
     </DropdownButton>

diff --git a/core/components/atoms/dropdown/option/IconOption.tsx b/core/components/atoms/dropdown/option/IconOption.tsx
@@ -6,7 +6,7 @@ import classNames from 'classnames';
 const IconOption = (props: OptionTypeProps) => {
   const { className, textClassName, onClickHandler, optionData, onUpdateActiveOption, color, dataTest } = props;
 
-  const { label, icon, disabled } = optionData;
+  const { label, icon, disabled, iconVariations } = optionData;
 
   const OptionClass = classNames({
     [`${className}`]: true,
@@ -24,7 +24,9 @@ const IconOption = (props: OptionTypeProps) => {
       data-disabled={disabled}
     >
       {/* eslint-enable  */}
-      {icon && <Icon className="Option-icon mr-4" data-test={`${dataTest}--Icon`} name={icon} />}
+      {icon && (
+        <Icon className="Option-icon mr-4" data-test={`${dataTest}--Icon`} name={icon} variations={iconVariations} />
+      )}
       <div className={'Option-label'}>
         <Text className={textClassName} color={color}>
           {label}

diff --git a/core/components/atoms/dropdown/option/index.tsx b/core/components/atoms/dropdown/option/index.tsx
@@ -8,7 +8,7 @@ import IconWithMetaOption from './IconWithMetaOption';
 import { MetaList, Text } from '@/index';
 import { MetaListProps, IconProps, TextProps } from '@/index.type';
 import { OptionType } from '../DropdownList';
-import { ChangeEvent } from '@/common.type';
+import { ChangeEvent, FontVariationType } from '@/common.type';
 
 export type ClickEvent = React.MouseEvent<HTMLDivElement>;
 
@@ -42,6 +42,7 @@ export interface OptionSchema extends Record<string, any> {
   selected?: boolean;
   disabled?: boolean;
   group?: string;
+  iconVariations?: FontVariationType;
 }
 
 export interface OptionTypeProps {