pixel-react 1.4.6 → 1.4.8

package/src/components/EditTextField/EditTextField.tsx

@@ -5,6 +5,7 @@ import Typography from '../Typography';
 import HighlightText from '../HighlightText';
 import Icon from '../Icon';
 import Tooltip from '../Tooltip';
+import { capitalize } from '../../utils/capitalize/capitalize';
 
 const getErrorMessage = (
   inputValue: string,
@@ -91,10 +92,7 @@ const EditTextField: FC<LabelEditTextFieldTypes> = ({
   };
 
   return (
-    <div
-      className="ff-label-edit-text-field"
-      ref={containerRef}
-    >
+    <div className="ff-label-edit-text-field" ref={containerRef}>
       {isEditing ? (
         <div className="ff-label-text-field">
           <div className="ff-label-text-field-without-dropdown">
@@ -159,7 +157,7 @@ const EditTextField: FC<LabelEditTextFieldTypes> = ({
               <HighlightText text={inputValue} highlight={highlightText} />
             </span>
           )}
-          <Tooltip title={editIcon?.name ?? 'edit'}>
+          <Tooltip title={capitalize(editIcon?.name || '') ?? 'Edit'}>
             <Icon
               color={editIcon?.color ?? 'var(--label-edit-cancel-icon)'}
               height={editIcon?.height ?? 20}

package/src/components/Form/Form.stories.tsx

@@ -95,7 +95,7 @@ export const WithDefaultValues: Story = {
                   <div>
                     <Input
                       type="text"
-                      label='Username'
+                      label="Username"
                       disabled={false}
                       {...register('username', {
                         required: {
@@ -354,10 +354,10 @@ export const WithSubmissionOutside: Story = {
       formRef.current.clearErrors();
     };
 
-    const handleReset = () => { 
+    const handleReset = () => {
       formRef.current.reset();
       formRef.current.clearErrors();
-    }
+    };
 
     const footerContent = (
       <>
@@ -382,11 +382,7 @@ export const WithSubmissionOutside: Story = {
           onClick={() => setIsDrawerOpen(false)}
           label="Cancel"
         />
-        <Button
-          variant="secondary"
-          onClick={handleReset}
-          label="Reset"
-        />
+        <Button variant="secondary" onClick={handleReset} label="Reset" />
         <Button
           variant="secondary"
           onClick={handleCreateAndContinue}

package/src/components/Form/Forms.tsx

@@ -4,7 +4,11 @@ import Form from './Form';
 interface FormProps<T extends Form.FieldValues> extends Form.UseFormProps<T> {
   id?: string;
   onSubmit: Form.SubmitHandler<T>;
-  children: (methods: ReturnType<typeof Form.useForm<T>>) => React.ReactNode;
+  children: (
+    methods: ReturnType<typeof Form.useForm<T>> & {
+      Form: typeof Form;
+    }
+  ) => React.ReactNode;
 }
 
 const Forms = <T extends Form.FieldValues>(
@@ -14,15 +18,18 @@ const Forms = <T extends Form.FieldValues>(
   const methods = Form.useForm<T>(rest);
 
   const { handleSubmit } = methods;
-
+  const extendedMethods = {
+    ...methods,
+    Form,
+  };
   useImperativeHandle(ref, () => ({
     submit: handleSubmit(onSubmit),
-    ...methods,
+    ...extendedMethods,
   }));
 
   return (
     <form id={id} onSubmit={handleSubmit(onSubmit)}>
-      {children(methods)}
+      {children(extendedMethods)}
     </form>
   );
 };

package/src/components/Icon/iconList.ts

@@ -30,6 +30,7 @@ import FireflinkIcon from '../../assets/Icons/fireflink_icon.svg?react';
 import Tick from '../../assets/Icons/tick_icon.svg?react';
 import Search from '../../assets/icons/search.svg?react';
 import Filter from '../../assets/icons/filter.svg?react';
+
 import RightArrow from '../../assets/icons/right_arrow_icon.svg?react';
 import LeftArrow from '../../assets/icons/left_arrow_icon.svg?react';
 import ClockIcon from '../../assets/icons/clock_icon.svg?react';
@@ -111,6 +112,7 @@ import AndroidIcon from '../../assets/icons/android_icon.svg?react';
 import NoAccessIcon from '../../assets/icons/no_access_icon.svg?react';
 import FullAccessIcon from '../../assets/icons/full_access_icon.svg?react';
 import ViewAccessIcon from '../../assets/icons/view_access_icon.svg?react';
+import HideAccessIcon from '../../assets/icons/hide_access_icon.svg?react';
 import AddLocator from '../../assets/icons/add_locator.svg?react';
 import PlusUserIcon from '../../assets/icons/plus_user_icon.svg?react';
 
@@ -203,9 +205,12 @@ import QuickRunSettingIcon from '../../assets/icons/quick_run_setting_icon.svg?r
 import RunManualTestcaseIcon from '../../assets/icons/run_manual_testcase_icon.svg?react';
 import RunAutomationScriptsIcon from '../../assets/icons/run_automation_scripts_icon.svg?react';
 import EyeOpenIcon from '../../assets/icons/eye_open_icon.svg?react';
+import ReplaceIcon from '../../assets/icons/replace_icon.svg?react';
+import HeaderPreset from '../../assets/icons/Header_preset.svg?react';
+
 
-Components['delete_info'] = DeleteInfoIcon;
 Components['success'] = ToastSuccessIcon;
+Components['delete_info'] = DeleteInfoIcon;
 Components['warning'] = WarningIcon;
 Components['toast_info'] = ToastInfoIcon;
 Components['error'] = ToastErrorIcon;
@@ -248,7 +253,6 @@ Components['impactList'] = ImpactListIcon;
 Components['beautify_icon'] = BeautifyIcon;
 Components['add_variable'] = AddVariable;
 
-
 Components['formate_painter'] = FormatePainter;
 Components['bold'] = Bold;
 Components['italic'] = Italic;
@@ -345,6 +349,7 @@ Components['linked_defects'] = LinkedDefects;
 Components['no_access_icon'] = NoAccessIcon;
 Components['full_access_icon'] = FullAccessIcon;
 Components['view_access_icon'] = ViewAccessIcon;
+Components['hide_access_icon'] = HideAccessIcon;
 Components['eye_closed'] = EyeClosed;
 Components['attachment_icon'] = AttachmentIcon;
 Components['authorization_icon'] = AuthorizationIcon;
@@ -404,6 +409,7 @@ Components['quick_run_setting'] = QuickRunSettingIcon;
 Components['run_manual_testcase'] = RunManualTestcaseIcon;
 Components['run_automation_scripts'] = RunAutomationScriptsIcon;
 Components['eye_open_icon'] = EyeOpenIcon;
-
+Components['replace_icon']=ReplaceIcon;
+Components['header_preset'] = HeaderPreset;
 
 export default Components;

package/src/components/Input/Input.scss

@@ -36,6 +36,11 @@
     &--no-border {
       border: none;
     }
+    &--placeholder {
+      &::placeholder {
+        opacity: 1;
+      }
+    }
   }
 
   .ff-input-label-container {

package/src/components/Input/Input.stories.tsx

@@ -51,6 +51,50 @@ export const DisabledWithValue: Story = {
   },
 };
 
+export const WithoutLabel: Story = {
+  render: () => {
+    const [value, setValue] = useState('');
+    const [error, setError] = useState<boolean>(false);
+    const [helperText, setHelperText] = useState<string>();
+
+    const onChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
+      const value = event.target.value;
+      if (event.target) {
+        if (value.length <= 0) {
+          setError(true);
+          setHelperText(`${event?.target?.name} is required`);
+        } else if (value.length >= 10) {
+          setError(true);
+          setHelperText(`Name should be within 10 characters`);
+        } else {
+          setError(false);
+          setHelperText('');
+        }
+      }
+      setValue(value);
+    };
+    return (
+      <>
+        <Input
+          {...defaultArgs}
+          type="text"
+          onChange={onChangeHandler}
+          disabled={false}
+          value={value}
+          name="Name"
+          label="Name"
+          placeholder="Enter name here"
+          variant="primary"
+          required={true}
+          error={error}
+          helperText={helperText}
+          isLabelRequired={false}
+        />
+      </>
+    );
+  },
+};
+
 export const Controlled: Story = {
   render: () => {
     const [value, setValue] = useState('');

package/src/components/Input/Input.tsx

@@ -24,6 +24,7 @@ const Input = ({
   maxValue = Infinity,
   transparentBackground = false,
   size = 'small',
+  isLabelRequired = true,
   ...props
 }: InputProps) => {
   const isValueFilled = !checkEmpty(value);
@@ -34,26 +35,29 @@ const Input = ({
         'ff-input-container--disabled': !!disabled,
       })}
     >
-      <label
-        htmlFor={name}
-        className={classNames(
-          `ff-input-label-container ff-input-label-container--${size}`,
-          {
-            'ff-input-label-container--danger': !!error,
-          }
-        )}
-      >
-        {required && <span className="required-asterisk">*</span>}
-        <span
-          className={classNames(`ff-input-label ff-input-label--${variant}`, {
-            'ff-input-label--no-hover': !!value,
-            'ff-input-label--disabled': !!disabled,
-            'ff-input-label--danger': !!error,
-          })}
+      {isLabelRequired && (
+        <label
+          htmlFor={name}
+          className={classNames(
+            `ff-input-label-container ff-input-label-container--${size}`,
+            {
+              'ff-input-label-container--danger': !!error,
+            }
+          )}
         >
-          {label}
-        </span>
-      </label>
+          {required && <span className="required-asterisk">*</span>}
+          <span
+            className={classNames(`ff-input-label ff-input-label--${variant}`, {
+              'ff-input-label--no-hover': !!value,
+              'ff-input-label--disabled': !!disabled,
+              'ff-input-label--danger': !!error,
+            })}
+          >
+            {label}
+          </span>
+        </label>
+      )}
+
       <input
         name={name}
         value={value}
@@ -68,6 +72,7 @@ const Input = ({
             'ff-input--disabled': !!disabled,
             'ff-input--danger': !!error,
             'ff-input--no-border': !!noBorder,
+            'ff-input--placeholder': !isLabelRequired,
           },
           `${className}`
         )}

package/src/components/Input/types.ts

@@ -78,4 +78,8 @@ export interface InputProps {
    * size for the input field
    */
   size?: 'small' | 'medium';
+  /**
+   * isLabelRequired for the input field without label,showing placeholder
+   */
+  isLabelRequired?: boolean;
 }

package/src/components/MenuOption/MenuOption.scss

@@ -47,37 +47,34 @@
 .ff-option-card {
   position: fixed;
   margin: 4px;
-
-  .ff-option-wrapper {
-    border: 1px solid var(--option-card-border-color);
-    background: var(--option-card-bg-color);
-    overflow: hidden;
-    min-height: 32px;
-    min-width: 112px;
-    width: max-content;
-    border-radius: 4px;
-    .ff-options {
-      @extend .fontSm;
+  border: 1px solid var(--option-card-border-color);
+  background: var(--option-card-bg-color);
+  overflow: hidden;
+  min-height: 32px;
+  min-width: 112px;
+  width: max-content;
+  border-radius: 4px;
+  .ff-options {
+    @extend .fontSm;
+    cursor: pointer;
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    padding: 8px;
+    gap: 8px;
+    &:hover {
+      background-color: var(--hover-color);
+    }
+    label {
       cursor: pointer;
-      border-radius: 3px;
-      display: flex;
-      align-items: center;
-      padding: 8px;
-      gap: 8px;
-      &:hover {
-        background-color: var(--hover-color);
-      }
-      label {
-        cursor: pointer;
-      }
     }
+  }
 
-    .ff-disable-option {
-      opacity: 0.5;
+  .ff-disable-option {
+    opacity: 0.5;
+    cursor: no-drop;
+    label {
       cursor: no-drop;
-      label {
-        cursor: no-drop;
-      }
     }
   }
 }

package/src/components/MenuOption/MenuOption.stories.tsx

@@ -13,28 +13,33 @@ const meta: Meta<typeof MenuOption> = {
   argTypes: {
     iconName: {
       control: 'text',
+      description: 'Name of the icon to display in the button.',
       defaultValue: 'more',
     },
     labelName: {
       control: 'text',
-      defaultValue: 'Controlled Menu',
+      description: 'Label text displayed beside the icon.',
+      defaultValue: 'Menu',
     },
     tooltipTitle: {
       control: 'text',
+      description: 'Tooltip text displayed on hover.',
       defaultValue: 'Select an option',
     },
     tooltipPlacement: {
       control: {
-        type: 'select',
-        options: ['top', 'down', 'left', 'right'],
+        type: 'text',
+        options: ['top', 'down', 'left', 'right'],  
       },
+      description: 'Placement of the tooltip relative to the button.',
       defaultValue: 'top',
     },
     dropdownPlacement: {
       control: {
-        type: 'select',
-        options: ['top', 'down', 'left', 'right'],
+        type: 'text',
+        options: ['top', 'down', 'left', 'right'],  
       },
+      description: 'Placement of the dropdown menu relative to the button.',
       defaultValue: 'down',
     },
   },
@@ -57,46 +62,96 @@ const handleOptionClick = (option: { label: string }) => {
   alert(`Option clicked: ${option.label}`);
 };
 
-export const ControlledMenuOptionTop: Story = {
+
+export const ControlledMenuOption: Story = {
+  args: {
+    iconName: 'more',
+    labelName: 'Controlled Menu',
+    tooltipTitle: 'Select an option',
+    dropdownPlacement: "top",  
+  },
   render: (args) => (
-    <MenuOption
-      iconName="more"
-      labelName={args.labelName}
-      options={options}
-      tooltipTitle={args.tooltipTitle}
-      tooltipPlacement={args.tooltipPlacement}
-      dropdownPlacement="top" // Override dropdown position to top
-      onOptionClick={handleOptionClick}
-    />
+    <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
   ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A controlled `MenuOption` with customizable tooltip and dropdown placement.',
+      },
+    },
+  },
 };
 
-export const ControlledMenuOptionBottom: Story = {
+
+export const MenuOptionTop: Story = {
+  args: {
+    ...ControlledMenuOption.args,
+    dropdownPlacement: 'top',
+  },
   render: (args) => (
-    <MenuOption
-      iconName="more"
-      labelName={args.labelName}
-      options={options}
-      tooltipTitle={args.tooltipTitle}
-      tooltipPlacement={args.tooltipPlacement}
-      dropdownPlacement="down"
-      onOptionClick={handleOptionClick}
-    />
+    <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
   ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Dropdown menu positioned above the button.',
+      },
+    },
+  },
 };
 
-export const ControlledMenuOptionRight: Story = {
+
+export const MenuOptionBottom: Story = {
+  args: {
+    ...ControlledMenuOption.args,
+    dropdownPlacement: 'down',
+  },
   render: (args) => (
-    <MenuOption
-      iconName="more"
-      labelName={args.labelName}
-      options={options}
-      tooltipTitle={args.tooltipTitle}
-      tooltipPlacement={args.tooltipPlacement}
-      dropdownPlacement="right"
-      onOptionClick={handleOptionClick}
-    />
+    <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
   ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Dropdown menu positioned below the button.',
+      },
+    },
+  },
+};
+
+
+export const MenuOptionLeft: Story = {
+  args: {
+    ...ControlledMenuOption.args,
+    dropdownPlacement: 'left',
+  },
+  render: (args) => (
+    <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Dropdown menu positioned to the left of the button.',
+      },
+    },
+  },
+};
+
+export const MenuOptionRight: Story = {
+  args: {
+    ...ControlledMenuOption.args,
+    dropdownPlacement: 'right',
+  },
+  render: (args) => (
+    <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Dropdown menu positioned to the right of the button.',
+      },
+    },
+  },
 };
 
 export default meta;

package/src/components/MenuOption/MenuOption.tsx

@@ -45,43 +45,45 @@ const OptionCard = ({
   menuRef,
   closeDropdown,
   zIndex,
-  dropdownPosition,
+  dropdownPlacement,
 }: OptionCardProps) => {
   const themeContext = useContext(ThemeContext);
   const currentTheme = themeContext?.currentTheme;
   const [optionsHeight, setOptionsHeight] = useState(0);
+  const [optionsWidth, setOptionsWidth] = useState(0);
   const optionCardRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (optionCardRef?.current) {
       const rect = optionCardRef?.current?.getBoundingClientRect();
       setOptionsHeight(rect?.height);
+      setOptionsWidth(rect?.width);
     }
   }, []);
 
   useClickOutside(menuRef, closeDropdown, [optionCardRef]);
 
   const style = (() => {
-    switch (dropdownPosition) {
+    switch (dropdownPlacement) {
       case 'top':
         return {
           top: menuPosition.top - optionsHeight - 7,
-          left: menuPosition.rightSpaceAvailable + 12,
+          left: menuPosition.left - 4,
         };
       case 'down':
         return {
-          top: menuPosition.bottom - 5,
-          left: menuPosition.rightSpaceAvailable + 12,
+          top: menuPosition.top + 18,
+          left: menuPosition.left - 4,
         };
       case 'left':
         return {
-          top: menuPosition.top,
-          right: menuPosition.rightSpaceAvailable + 35,
+          top: menuPosition.top - 4,
+          left: menuPosition.left - optionsWidth - 7,
         };
       case 'right':
         return {
-          top: menuPosition.top,
-          left: menuPosition.rightSpaceAvailable + 35,
+          top: menuPosition.top - 4,
+          left: menuPosition.left + 20,
         };
       default:
         return {
@@ -94,14 +96,12 @@ const OptionCard = ({
   return createPortal(
     <div
       className={classNames('ff-option-card', currentTheme)}
-      ref={optionCardRef}
       style={{ ...style, zIndex }}
+      ref={optionCardRef}
     >
-      <div className="ff-option-wrapper">
-        {options.map((opt) => (
-          <Option key={opt.label} option={opt} onClick={onClick} />
-        ))}
-      </div>
+      {options.map((opt) => (
+        <Option key={opt.label} option={opt} onClick={onClick} />
+      ))}
     </div>,
     document.body
   );
@@ -126,10 +126,11 @@ const MenuOption = ({
   const menuRef = useRef<HTMLDivElement>(null);
   const [menuPosition, setMenuPosition] = useState({
     top: 0,
-    bottom: 0,
+    left: 0,
     height: 0,
-    fromBottom: 0,
+    right: 0,
     rightSpaceAvailable: 0,
+    bottomSpaceAvailable: 0,
   });
 
   const closeDropDown = () => setIsClicked(false);
@@ -151,10 +152,11 @@ const MenuOption = ({
 
       setMenuPosition({
         top: rect.top,
+        left: rect.left,
         height: rect.height,
+        right: rect.right,
         rightSpaceAvailable: document.body.clientWidth - rect.right,
-        bottom: rect.bottom,
-        fromBottom: window.innerHeight - rect.bottom,
+        bottomSpaceAvailable: window.innerHeight - menuRef.current.offsetTop,
       });
     }
   };
@@ -199,7 +201,7 @@ const MenuOption = ({
           menuRef={menuRef}
           closeDropdown={closeDropDown}
           zIndex={zIndex}
-          dropdownPosition={dropdownPlacement}
+          dropdownPlacement={dropdownPlacement}
         />
       )}
     </div>

package/src/components/MenuOption/types.ts

@@ -90,7 +90,7 @@ interface OptionCardProps {
    * @type {dropdownPosition}
    * @optional
    */
-  dropdownPosition?: 'top' | 'down' | 'left' | 'right';
+  dropdownPlacement?: 'top' | 'down' | 'left' | 'right';
 }
 
 interface MenuOptionProps {

package/src/components/Modal/Modal.stories.tsx

@@ -26,7 +26,7 @@ export const DefaultModalStory: Story = {
     footerContent: <Button variant="primary" label="continue" />,
     customWidth: '660px',
     customHeight: 'auto',
-    boxShadow:'0px 1px 4px 0px #FFC600'
+    border: '1px solid #E79B0866',
   },
 };
 
@@ -58,7 +58,7 @@ export const Controlled: Story = {
             footerContent={<Button variant="primary" label="continue" />}
             customWidth="660px"
             customHeight="auto"
-            boxShadow='0px 1px 4px 0px #FFC600'
+            border="1px solid #E79B0866"
           />
         )}
       </>

package/src/components/Modal/Modal.tsx

@@ -22,7 +22,9 @@ const Modal: React.FC<ModalProps> = ({
   customHeight = 'auto',
   children,
   zIndex = 999,
-  boxShadow = '0px 1px 4px 0px #FFC600',
+  boxShadow = '',
+  border = '',
+  background='',
 }) => {
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -58,7 +60,9 @@ const Modal: React.FC<ModalProps> = ({
       <div
         style={{
           boxShadow: boxShadow,
-          borderRadius:  '12px' ,
+          border: border,
+          borderRadius: '12px',
+          background: background,
         }}
         className="ff-modal-container"
       >