pixel-react 1.4.2 → 1.4.4

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import Input from './Input';
 import { ChangeEvent, useState } from 'react';
@@ -58,7 +59,7 @@ export const Controlled: Story = {
 
     const onChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
       const value = event.target.value;
-      if (event.target.required) {
+      if (event.target) {
         if (value.length <= 0) {
           setError(true);
           setHelperText(`${event?.target?.name} is required`);

package/src/components/InputWithDropdown/InputWithDropdown.scss

@@ -19,7 +19,7 @@
       display: flex;
       flex-direction: row;
     }
-    .ff-floating-input--left-dropdown{
+    .ff-floating-input--left-dropdown {
       width: 698px;
     }
 
@@ -28,7 +28,7 @@
         position: absolute;
         z-index: 9;
         color: var(--input-default-border-color);
-        top: 7px;
+        top: 6px;
         left: 7px;
         @extend .fontSm;
         transition: all 0.3s ease-in-out;
@@ -56,7 +56,6 @@
         border-right: 1px solid var(--input-default-border-color);
         border-radius: 4px 0 0 4px;
         @extend .fontSm;
-        top: 1px;
 
         &::-webkit-outer-spin-button,
         &::-webkit-inner-spin-button {
@@ -104,7 +103,7 @@
     }
 
     .ff-floating-dropdown--left {
-      min-width: 94px; 
+      min-width: 94px;
     }
     .seperatorline {
       height: 26px;
@@ -116,7 +115,7 @@
   }
   &:hover {
     .ff-input-with-dropdown {
-      border-color: var(--input-hover-border-color);
+      border-color: var(--brand-color);
 
       &--filled {
         border-color: var(--input-default-border-color);
@@ -140,7 +139,7 @@
         }
       }
       .ff-floating-input {
-        border-color: var(--input-hover-border-color);
+        border-color: var(--brand-color);
         &--filled {
           border-color: var(--input-default-border-color);
         }
@@ -162,12 +161,12 @@
       }
 
       .ff-floating-label {
-        top: -6px;
+        top: -9px;
         background-color: var(--input-label-bg-color);
         padding: 0px 2px;
         color: var(--input-active-text-color);
-        line-height: 12px;
-        font-size: 8px !important;
+        line-height: 15px;
+        font-size: 10px !important;
 
         &--error {
           color: var(--input-error-text-color);
@@ -190,11 +189,11 @@
         border-color: var(--input-active-text-color);
         .ff-floating-label {
           //re-written label container code to place it at on border
-          top: -6px;
+          top: -9px;
           background-color: var(--input-label-bg-color);
           padding: 0px 2px;
-          line-height: 12px;
-          font-size: 8px !important;
+          line-height: 15px;
+          font-size: 10px !important;
         }
       }
     }
@@ -208,7 +207,7 @@
 
   .ff-helper-text {
     color: var(--input-error-text-color);
-    @extend .font-size-8;
+    @extend .fontXs;
     padding: 0 11px;
   }
 }

package/src/components/InputWithDropdown/InputWithDropdown.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import InputWithDropdown from './InputWithDropdown';
 import { ChangeEvent, useState } from 'react';
@@ -51,7 +52,7 @@ export const DisabledWithValue: Story = {
 
 export const Controlled: Story = {
   render: () => {
-    const [value, setValue] = useState<number>(0);
+    const [value, setValue] = useState<number | string>(0);
     const [error, setError] = useState<boolean>(false);
     const [helperText, setHelperText] = useState<string>('');
 
@@ -74,7 +75,7 @@ export const Controlled: Story = {
 
     const onInputChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
       const inputValue = parseInt(event.target.value);
-      setValue(inputValue);
+      setValue(event.target.value);
 
       if (event.target) {
         if (inputValue < 0 || checkEmpty(value)) {

package/src/components/InputWithDropdown/InputWithDropdown.tsx

@@ -16,14 +16,15 @@ const InputWithDropdown = ({
   helperText,
   optionsList,
   selectedOption,
+  autoComplete = 'off',
   onDropdownChangeHandler = () => {},
   onInputChangeHandler,
   onInputBlurHandler,
   optionsRequired = true,
-  dropdownPosition = 'right', 
+  dropdownPosition = 'right',
   type = 'text',
 }: InputWithDropdownProps) => {
-  const isValueFilled = !checkEmpty(value) || dropdownPosition==='left';
+  const isValueFilled = !checkEmpty(value) || dropdownPosition === 'left';
 
   return (
     <div
@@ -42,22 +43,23 @@ const InputWithDropdown = ({
       >
         {dropdownPosition === 'left' && (
           <>
-          <Select
-            optionsList={optionsList}
-            selectedOption={selectedOption}
-            showLabel={false}
-            showBorder={false}
-            onChange={onDropdownChangeHandler}
-            disabled={disabled || !optionsRequired}
-            optionsRequired={optionsRequired}
-            className={classNames('ff-floating-dropdown', {
-              'ff-floating-dropdown--disabled': !!disabled,
-              'ff-floating-dropdown--error': !!error,
-              'ff-floating-dropdown--left': dropdownPosition === 'left'
-            })}
-            width={94}
-          />
-          <div className='seperatorline'/>
+            <Select
+              optionsList={optionsList}
+              selectedOption={selectedOption}
+              showLabel={false}
+              showBorder={false}
+              onChange={onDropdownChangeHandler}
+              disabled={disabled || !optionsRequired}
+              optionsRequired={optionsRequired}
+              className={classNames('ff-floating-dropdown', {
+                'ff-floating-dropdown--disabled': !!disabled,
+                'ff-floating-dropdown--error': !!error,
+                'ff-floating-dropdown--left': dropdownPosition === 'left',
+              })}
+              width={94}
+              height={30}
+            />
+            <div className="seperatorline" />
           </>
         )}
         <div className={classNames('ff-floating-label-input-container')}>
@@ -81,6 +83,7 @@ const InputWithDropdown = ({
             onChange={onInputChangeHandler}
             onBlur={onInputBlurHandler}
             placeholder={placeholder}
+            autoComplete={autoComplete}
             required={required}
             disabled={disabled}
             className={classNames('ff-floating-input', {
@@ -105,6 +108,7 @@ const InputWithDropdown = ({
               'ff-floating-dropdown--error': !!error,
             })}
             width={120}
+            height={30}
           />
         )}
       </fieldset>
@@ -115,5 +119,4 @@ const InputWithDropdown = ({
   );
 };
 
-
 export default InputWithDropdown;

package/src/components/MenuOption/MenuOption.scss

@@ -3,7 +3,6 @@
 .ff-menu-option-container {
   cursor: pointer;
   position: relative;
-
   .ff-icon-label {
     display: flex;
     align-items: center;
@@ -43,25 +42,27 @@
       }
     }
   }
+}
+
+.ff-option-card {
+  position: fixed;
+  margin: 4px;
 
-  .ff-option-card {
-    position: absolute;
+  .ff-option-wrapper {
     border: 1px solid var(--option-card-border-color);
     background: var(--option-card-bg-color);
-    border-radius: 4px;
-    margin: 2px;
+    overflow: hidden;
     min-height: 32px;
-    min-width: 111px;
-    white-space: nowrap;
-
+    min-width: 112px;
+    width: max-content;
+    border-radius: 4px;
     .ff-options {
       @extend .fontSm;
       cursor: pointer;
-      border-radius: 4px;
+      border-radius: 3px;
       display: flex;
       align-items: center;
       padding: 8px;
-      line-height: 16px;
       gap: 8px;
       &:hover {
         background-color: var(--hover-color);

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

@@ -1,36 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import MenuOption from './MenuOption';
 import './MenuOption.scss';
-
-export const DefaultMenuOption: Story = {
-  args: {
-    iconName: 'more',
-    options: [
-      {
-        label: 'StepGroup',
-        icon: 'success',
-        value: [],
-        disable: true,
-      },
-      {
-        label: 'Script',
-        value: ['SCR101', 'SCR102'],
-        icon: 'success',
-      },
-      {
-        label: 'Script',
-        value: ['SCR101', 'SCR102'],
-        icon: 'success',
-      },
-      {
-        label: 'Script',
-        value: ['SCR101', 'SCR102'],
-        icon: 'success',
-      },
-    ],
-    zIndex:1000000,
-  },
-};
+import React from 'react';
 
 const meta: Meta<typeof MenuOption> = {
   title: 'Components/MenuOption',
@@ -55,229 +26,77 @@ const meta: Meta<typeof MenuOption> = {
     tooltipPlacement: {
       control: {
         type: 'select',
-        options: ['top', 'bottom', 'left', 'right'],
+        options: ['top', 'down', 'left', 'right'],
       },
       defaultValue: 'top',
     },
     dropdownPlacement: {
       control: {
         type: 'select',
-        options: ['top', 'bottom', 'left', 'right'],
+        options: ['top', 'down', 'left', 'right'],
       },
-      defaultValue: 'bottom',
+      defaultValue: 'down',
     },
   },
 };
 
 type Story = StoryObj<typeof MenuOption>;
 
-export const ControlledMenuOption: Story = {
-  render: (args) => {
-    const options = [
-      {
-        label: 'Option1',
-        value: 'opt1',
-        icon: 'success',
-      },
-      {
-        label: 'Option2',
-        value: 'opt2',
-        icon: 'success',
-      },
-      {
-        label: 'Delete option',
-        value: 'deleteOpt',
-        icon: 'delete',
-      },
-    ];
-
-    return (
-      <MenuOption
-        iconName={args.iconName}
-        labelName={args.labelName}
-        options={options}
-        tooltipTitle={args.tooltipTitle}
-        tooltipPlacement={args.tooltipPlacement}
-        dropdownPlacement={args.dropdownPlacement}
-      />
-    );
+const options = [
+  { label: 'Option 1', value: 'opt1', icon: 'success' },
+  { label: 'Option 2', value: 'opt2', icon: 'success' },
+  {
+    label: 'Delete',
+    value: 'deleteOpt',
+    icon: 'delete',
+    iconColor: 'var(--delete-text-color)',
   },
-};
+];
 
-// Story for MenuOption with label
-export const MenuOptionWithLabel: Story = {
-  args: {
-    labelName: 'more',
-    iconName: 'more',
-    options: [
-      {
-        label: 'Option1',
-        value: 'opt1',
-        icon: 'success',
-      },
-      {
-        label: 'Option2',
-        value: 'opt2',
-        icon: 'success',
-      },
-    ],
-  },
+const handleOptionClick = (option: { label: string }) => {
+  alert(`Option clicked: ${option.label}`);
 };
 
-// Story for MenuOption with disabled hover effect
-export const MenuOptionWithDisabledHoverEffect: Story = {
-  render: () => {
-    const options = [
-      {
-        label: 'StepGroup',
-        icon: 'success',
-        value: [],
-        disable: true,
-      },
-      {
-        label: 'Script',
-        value: ['SCR101', 'SCR102'],
-        icon: 'success',
-      },
-    ];
-    const zIndex=1000000;
-    return (
-      <MenuOption
-        iconName="more"
-        tooltipTitle="more options"
-        tooltipPlacement="top"
-        dropdownPlacement="right"
-        options={options}
-        zIndex={zIndex}
-      />
-    );
-  },
+export const ControlledMenuOptionTop: Story = {
+  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}
+    />
+  ),
 };
 
-// Story for MenuOption with tooltip
-export const MenuOptionWithToolTip: Story = {
-  args: {
-    labelName: 'ImpactList',
-    iconName: 'success',
-    tooltipTitle: 'More Info',
-    tooltipPlacement: 'bottom',
-    options: [
-      {
-        label: 'Option1',
-        value: 'opt1',
-        icon: 'success',
-      },
-      {
-        label: 'Option2',
-        value: 'opt2',
-        icon: 'success',
-      },
-    ],
-  },
+export const ControlledMenuOptionBottom: Story = {
+  render: (args) => (
+    <MenuOption
+      iconName="more"
+      labelName={args.labelName}
+      options={options}
+      tooltipTitle={args.tooltipTitle}
+      tooltipPlacement={args.tooltipPlacement}
+      dropdownPlacement="down"
+      onOptionClick={handleOptionClick}
+    />
+  ),
 };
 
-// Story for MenuOption with 'top' placement
-export const MenuOptionPlacementTop: Story = {
-  args: {
-    iconName: 'more',
-    labelName: 'Top Placement',
-    dropdownPlacement: 'top',
-    options: [
-      {
-        label: 'Option1',
-        value: 'opt1',
-        icon: 'success',
-      },
-      {
-        label: 'Option2',
-        value: 'opt2',
-        icon: 'success',
-      },
-    ],
-  },
-};
-
-// Story for MenuOption with 'down' placement
-export const MenuOptionPlacementDown: Story = {
-  args: {
-    iconName: 'more',
-    labelName: ' Placement',
-    dropdownPlacement: 'down',
-    options: [
-      {
-        label: 'Option1',
-        value: 'opt1',
-        icon: 'success',
-      },
-      {
-        label: 'Option2',
-        value: 'opt2',
-        icon: 'success',
-      },
-    ],
-  },
-};
-
-// Story for MenuOption with 'left' placement
-export const MenuOptionPlacementLeft: Story = {
-  args: {
-    iconName: 'more',
-    labelName: 'Left Placement',
-    dropdownPlacement: 'left',
-    options: [
-      {
-        label: 'Option1',
-        value: 'opt1',
-        icon: 'delete',
-      },
-      {
-        label: 'Option2',
-        value: 'opt2',
-        icon: 'success',
-      },
-    ],
-  },
-};
-
-// Story for MenuOption with 'right' placement
-export const MenuOptionPlacementRight: Story = {
-  args: {
-    iconName: 'more',
-    dropdownPlacement: 'right',
-    options: [
-      {
-        label: 'Option1',
-        value: 'opt1',
-        icon: 'success',
-      },
-      {
-        label: 'Option2',
-        value: 'opt2',
-        icon: 'success',
-      },
-    ],
-  },
-};
-
-
-export const MenuOptionCustom: Story = {
-  args: {
-    iconName: 'more',
-    dropdownPlacement: 'bottom',
-    variant:'dark',
-    options: [
-      {
-        label: 'Option1',
-        value: 'opt1',
-        icon: 'success',
-      },
-      {
-        label: 'Option2',
-        value: 'opt2',
-        icon: 'success',
-      },
-    ],
-  },
+export const ControlledMenuOptionRight: Story = {
+  render: (args) => (
+    <MenuOption
+      iconName="more"
+      labelName={args.labelName}
+      options={options}
+      tooltipTitle={args.tooltipTitle}
+      tooltipPlacement={args.tooltipPlacement}
+      dropdownPlacement="right"
+      onOptionClick={handleOptionClick}
+    />
+  ),
 };
 
 export default meta;