pixel-react 1.2.6 → 1.2.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

package/src/components/Drawer/Drawer.stories.tsx

@@ -101,15 +101,13 @@ export const WithCustomFooter: Story = {
 export const WithTertiaryButtons: Story = {
   args: {
     ...defaultArgs,
-    tertiaryButtonProps: {
-      left: {
-        label: 'Help',
-        onClick: () => {},
-      },
-      right: {
-        label: 'More Info',
-        onClick: () => {},
-      },
+    leftTertiaryButtonProps: {
+      label: 'Help',
+      onClick: () => {},
+    },
+    rightTertiaryButtonProps: {
+      label: 'More Info',
+      onClick: () => {},
     },
   },
   parameters: {
@@ -117,6 +115,7 @@ export const WithTertiaryButtons: Story = {
   },
 };
 
+
 export const WithCustomZIndex: Story = {
   args: {
     ...defaultArgs,

package/src/components/Drawer/Drawer.tsx

@@ -30,7 +30,8 @@ const Drawer: FC<DrawerProps> = ({
   onCloseIconClick,
   customHeader,
   customFooter,
-  tertiaryButtonProps = { left: {}, right: {} },
+  leftTertiaryButtonProps = {},
+  rightTertiaryButtonProps = {},
   zIndex = 999,
 }: DrawerProps) => {
   const [isExpanded, setIsExpanded] = useState(_isExpanded);
@@ -175,18 +176,20 @@ const Drawer: FC<DrawerProps> = ({
                       transparentBackground={true}
                     />
                   )}
-                  {tertiaryButtonProps.left?.label && (
+                  {leftTertiaryButtonProps?.label && (
                     <Button
-                      {...tertiaryButtonProps.left}
+                      {...leftTertiaryButtonProps}
+                      onClick={leftTertiaryButtonProps.onClick}
                       variant="tertiary"
                       transparentBackground={true}
                     />
                   )}
                 </div>
                 <div className="button-container">
-                  {tertiaryButtonProps.right?.label && (
+                  {rightTertiaryButtonProps?.label && (
                     <Button
-                      {...tertiaryButtonProps.right}
+                      {...rightTertiaryButtonProps}
+                      onClick={rightTertiaryButtonProps.onClick}
                       variant="tertiary"
                       transparentBackground={true}
                     />

package/src/components/Drawer/Types.ts

@@ -69,6 +69,15 @@ export interface DrawerProps {
    * Left side Secondary | Cancel button props
    */
   leftSecondaryButtonProps?: BtnPropsCommon;
+   /**
+   * Left side Tertiary Button | Help button props
+   */
+   leftTertiaryButtonProps?: BtnPropsCommon;
+
+   /**
+    * Right side Tertiary Button | More Info button props
+    */
+   rightTertiaryButtonProps?: BtnPropsCommon;
   /**
    * Onclick function for edit button
    */
@@ -109,13 +118,6 @@ export interface DrawerProps {
    * If provided, this will render in place of the default footer.
    */
   customFooter?: ReactNode;
-  /**
-   * Tertiary button properties (optional)
-   */
-  tertiaryButtonProps?: {
-    left?: BtnPropsCommon;   
-    right?: BtnPropsCommon;
-  };
   /**
    * Custom z-index for the drawer
    */

package/src/components/Form/Forms.tsx

@@ -17,7 +17,11 @@ const Forms = <T extends Form.FieldValues>({
 
   const { handleSubmit } = methods;
 
-  return <form onSubmit={handleSubmit(onSubmit)}>{children(methods)}</form>;
+  return (
+    <form id={id} onSubmit={handleSubmit(onSubmit)}>
+      {children(methods)}
+    </form>
+  );
 };
 
 export default Forms;

package/src/components/ModulesChip/ModuleChip.scss

@@ -1,7 +1,7 @@
 @use '../../assets/styles/fonts';
 @use '../../assets/styles/mixins';
 
-.ff-expandable-chip-menu {
+.ff-Module-chip {
   width: 75px;
   height: 32px;
   border: 0.5px solid;
@@ -9,7 +9,7 @@
   color: var(--brand-color);
   cursor: pointer;
   @include mixins.center-content();
-  .ff-label-chip {
+  .ff-Module-label-chip {
     &--active {
       color: var(--ff-header-text-color);
     }

package/src/components/ModulesChip/ModuleChip.tsx

@@ -10,14 +10,14 @@ const ModuleChip: React.FC<ModuleChipProps> = ({
 }) => {
   return (
     <div
-      className={classNames('ff-expandable-chip-menu', {
-        'ff-expandable-chip-menu--active': isActive,
+      className={classNames('ff-Module-chip', {
+        'ff-Module-chip--active': isActive,
       })}
       onClick={onClick}
     >
       <div
-        className={classNames(`ff-label-chip `, {
-          'ff-label-chip--active': isActive,
+        className={classNames(`ff-Module-label-chip `, {
+          'ff-Module-label-chip--active': isActive,
         })}
       >
         <Typography fontSize={'14px'} fontWeight="regular" lineHeight="21px">

package/src/components/MultiSelect/Dropdown.tsx

@@ -6,6 +6,7 @@ import { ThemeContext } from '../ThemeProvider/ThemeProvider';
 import classNames from 'classnames';
 import Button from '../Button';
 import Typography from '../Typography';
+import Checkbox from '../Checkbox';
 
 const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
   (
@@ -80,9 +81,11 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
                 role="option"
                 className={`dropdown-option-container`}
                 key={info.label}
-                onClick={() => handleOptionChange(info, !info.isChecked)}
+                onClick={() =>
+                  !info?.isDisabled && handleOptionChange(info, !info.isChecked)
+                }
               >
-                <input type="checkbox" checked={info.isChecked} readOnly />
+                <Checkbox checked={info.isChecked}  disabled={info?.isDisabled}/>
                 <Typography
                   as="span"
                   className="dropdown-option-label"

package/src/components/MultiSelect/MultiSelect.scss

@@ -89,11 +89,12 @@
             @extend .fontXs;
             line-height: 14px;
             color: var(--tooltip-bg-color);
-            &.pr-2 {
+            &.label-padding {
               padding: 5px 2px;
             }
           }
           .ff-multiselect-chip-close-icon {
+            color: var(--brand-color);
             cursor: pointer;
           }
         }
@@ -114,15 +115,15 @@
           }
         }
       }
-      .ff-multiselect-more-chip {
-        display: flex;
-        align-items: center;
-        width: 1.2rem;
-        @extend .fontSm;
-        font-weight: 600;
-        line-height: 16px;
-        color: var(--brand-color);
-      }
+    }
+    .ff-multiselect-more-chip {
+      display: flex;
+      align-items: center;
+      width: 1rem;
+      @extend .fontSm;
+      font-weight: 600;
+      line-height: 16px;
+      color: var(--brand-color);
     }
     &__toggle {
       display: flex;

package/src/components/MultiSelect/MultiSelect.tsx

@@ -6,26 +6,36 @@ import Dropdown from './Dropdown';
 import Icon from '../Icon';
 import { MultiSelectProps, Option } from './MultiSelectTypes';
 import Typography from '../Typography';
+import Tooltip from '../Tooltip';
 
 const ChipElement = ({
   label,
   onChipCloseClick,
+  disableChip,
 }: {
   label: string;
   onChipCloseClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+  disableChip: boolean;
 }) => {
   if (label) {
     return (
       <div className="ff-multiselect-chip">
-        <span className="ff-multiselect-chip-label"> {label}</span>
-        <Icon
-          color="#71347b"
-          className="ff-multiselect-chip-close-icon"
-          onClick={onChipCloseClick}
-          name="close_pill"
-          height={13} //as per the latest chnages in icon container we have to give this
-          width={13}
-        />
+        <span className={`ff-multiselect-chip-label ${disableChip && 'label-padding'}`}>
+          <Tooltip
+            placement="bottom"
+            title={label?.length > 25 ? label : ''}
+            zIndex={101}
+          >
+            {label?.length > 25 ? label?.slice(0, 25) + '...' : label}
+          </Tooltip>
+        </span>
+        {!disableChip && (
+          <Icon
+            className="ff-multiselect-chip-close-icon"
+            onClick={onChipCloseClick}
+            name="close_pill"
+          />
+        )}
       </div>
     );
   }
@@ -46,6 +56,7 @@ const MultiSelect = ({
   withSelectButton = false,
   onSelect = () => {},
   displayCount = false,
+  placeholderForSearching = 'Search',
 }: MultiSelectProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [allOptions, setAllOptions] = useState(options);
@@ -262,6 +273,7 @@ const MultiSelect = ({
                     key={option?.label}
                     label={option?.label || ''}
                     onChipCloseClick={(e) => handleChipCloseClick(option, e)}
+                    disableChip={option?.isDisabled || false}
                   />
                 ))}
               </>
@@ -271,6 +283,7 @@ const MultiSelect = ({
                   key={option?.label}
                   label={option?.label || ''}
                   onChipCloseClick={(e) => handleChipCloseClick(option, e)}
+                  disableChip={option?.isDisabled || false}
                 />
               ))
             )}
@@ -279,7 +292,7 @@ const MultiSelect = ({
                 value={searchedKeyword}
                 type={type}
                 autoComplete="off"
-                placeholder="search..."
+                placeholder={placeholderForSearching}
                 ref={inputRef}
                 onChange={handleSearch}
                 onKeyDown={handleKeyEnter}
@@ -291,16 +304,13 @@ const MultiSelect = ({
                 }}
               />
             </div>
-            {hiddenCount > 0 && (
-              <div
-                className="ff-multiselect-more-chip"
-                onClick={toggleDropdown}
-              >
-                +{hiddenCount}
-              </div>
-            )}
           </div>
         </div>
+          {hiddenCount > 0 && displayCount && (
+            <div className="ff-multiselect-more-chip" onClick={toggleDropdown}>
+              +{hiddenCount}
+            </div>
+          )}
         <div onClick={toggleDropdown} className="ff-multiselect__toggle">
           <Icon
             name="arrow_down"

package/src/components/MultiSelect/MultiSelectTypes.ts

@@ -20,6 +20,7 @@ interface MultiSelectProps {
   withSelectButton?: boolean;
   onSelect?: () => void;
   displayCount?: boolean;
+  placeholderForSearching?: string;
 }
 
-export { Option, MultiSelectProps };
+export { Option, MultiSelectProps };

package/src/components/Tooltip/Tooltip.scss

@@ -1,7 +1,7 @@
 @use '../../assets/styles/fonts';
 
 .ff-tooltip-container {
-  cursor: auto;
+  cursor: pointer;
   display: inline-block;
 }