pixel-react 1.6.8 → 1.7.0

package/src/components/InputWithDropdown/InputWithDropdown.tsx

@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import classNames from 'classnames';
 import './InputWithDropdown.scss';
 import { InputWithDropdownProps } from './types';
@@ -5,44 +6,101 @@ import Select from '../Select/Select';
 import Typography from '../Typography';
 import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
 
-const InputWithDropdown = ({
-  name = '',
-  label,
-  value,
-  disabled = false,
-  required = false,
-  placeholder,
-  error,
-  helperText,
-  optionsList,
-  selectedOption,
-  autoComplete = 'off',
-  onDropdownChangeHandler = () => {},
-  onInputChangeHandler,
-  onInputBlurHandler,
-  optionsRequired = true,
-  dropdownPosition = 'right',
-  type = 'text',
-}: InputWithDropdownProps) => {
-  const isValueFilled = !checkEmpty(value) || dropdownPosition === 'left';
+const InputWithDropdown = forwardRef<HTMLInputElement, InputWithDropdownProps>(
+  (
+    {
+      name = '',
+      label,
+      value,
+      disabled = false,
+      required = false,
+      placeholder,
+      error,
+      helperText,
+      optionsList,
+      selectedOption,
+      autoComplete = 'off',
+      onDropdownChangeHandler = () => {},
+      onInputChangeHandler,
+      onInputBlurHandler,
+      optionsRequired = true,
+      dropdownPosition = 'right',
+      type = 'text',
+    },
+    ref
+  ) => {
+    const isValueFilled = !checkEmpty(value) || dropdownPosition === 'left';
 
-  return (
-    <div
-      className={classNames('ff-input-with-dropdown-container', {
-        'ff-input-with-dropdown-container--filled': isValueFilled,
-      })}
-    >
-      <fieldset
-        className={classNames('ff-input-with-dropdown', {
-          'ff-input-with-dropdown--filled': isValueFilled,
-          'ff-input-with-dropdown--no-hover': isValueFilled,
-          'ff-input-with-dropdown--disabled': !!disabled,
-          'ff-input-with-dropdown--error': !!error,
-          [`ff-input-with-dropdown--${dropdownPosition}`]: dropdownPosition,
+    return (
+      <div
+        className={classNames('ff-input-with-dropdown-container', {
+          'ff-input-with-dropdown-container--filled': isValueFilled,
         })}
       >
-        {dropdownPosition === 'left' && (
-          <>
+        <fieldset
+          className={classNames('ff-input-with-dropdown', {
+            'ff-input-with-dropdown--filled': isValueFilled,
+            'ff-input-with-dropdown--no-hover': isValueFilled,
+            'ff-input-with-dropdown--disabled': !!disabled,
+            'ff-input-with-dropdown--error': !!error,
+            [`ff-input-with-dropdown--${dropdownPosition}`]: dropdownPosition,
+          })}
+        >
+          {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}
+                height={30}
+              />
+              <div className="seperatorline" />
+            </>
+          )}
+          <div className={classNames('ff-floating-label-input-container')}>
+            <Typography
+              as="label"
+              htmlFor={name}
+              className={classNames('ff-floating-label', {
+                'ff-floating-label--filled': isValueFilled,
+                'ff-floating-label--no-hover': isValueFilled,
+                'ff-floating-label--error': !!error,
+              })}
+              required={required}
+            >
+              {label}
+            </Typography>
+            <input
+              ref={ref}
+              name={name}
+              type={type}
+              id={name}
+              value={value}
+              onChange={onInputChangeHandler}
+              onBlur={onInputBlurHandler}
+              placeholder={placeholder}
+              autoComplete={autoComplete}
+              required={required}
+              disabled={disabled}
+              className={classNames('ff-floating-input', {
+                'ff-floating-input--filled': isValueFilled,
+                'ff-floating-input--disabled': !!disabled,
+                'ff-floating-input--error': !!error,
+                'ff-floating-input--left-dropdown': dropdownPosition === 'left',
+              })}
+            />
+          </div>
+          {dropdownPosition === 'right' && (
             <Select
               optionsList={optionsList}
               selectedOption={selectedOption}
@@ -54,69 +112,18 @@ const InputWithDropdown = ({
               className={classNames('ff-floating-dropdown', {
                 'ff-floating-dropdown--disabled': !!disabled,
                 'ff-floating-dropdown--error': !!error,
-                'ff-floating-dropdown--left': dropdownPosition === 'left',
               })}
-              width={94}
+              width={120}
               height={30}
             />
-            <div className="seperatorline" />
-          </>
-        )}
-        <div className={classNames('ff-floating-label-input-container')}>
-          <Typography
-            as="label"
-            htmlFor={name}
-            className={classNames('ff-floating-label', {
-              'ff-floating-label--filled': isValueFilled,
-              'ff-floating-label--no-hover': isValueFilled,
-              'ff-floating-label--error': !!error,
-            })}
-            required={required}
-          >
-            {label}
-          </Typography>
-          <input
-            name={name}
-            type={type}
-            id={name}
-            value={value}
-            onChange={onInputChangeHandler}
-            onBlur={onInputBlurHandler}
-            placeholder={placeholder}
-            autoComplete={autoComplete}
-            required={required}
-            disabled={disabled}
-            className={classNames('ff-floating-input', {
-              'ff-floating-input--filled': isValueFilled,
-              'ff-floating-input--disabled': !!disabled,
-              'ff-floating-input--error': !!error,
-              'ff-floating-input--left-dropdown': dropdownPosition === 'left',
-            })}
-          />
-        </div>
-        {dropdownPosition === 'right' && (
-          <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,
-            })}
-            width={120}
-            height={30}
-          />
+          )}
+        </fieldset>
+        {error && helperText && (
+          <span className="ff-helper-text">{helperText}</span>
         )}
-      </fieldset>
-      {error && helperText && (
-        <span className="ff-helper-text">{helperText}</span>
-      )}
-    </div>
-  );
-};
+      </div>
+    );
+  }
+);
 
 export default InputWithDropdown;

package/src/components/LabelEditTextField/LabelEditTextField.scss

@@ -7,7 +7,7 @@
   width: 100%;
   .ff-label-text-field {
     display: flex;
-    gap: 10px;
+    gap: 5px;
   }
   .ff-label-text-field-with-dropdown,
   .ff-label-text-field-without-dropdown {

package/src/components/LabelEditTextField/LabelEditTextField.tsx

@@ -5,6 +5,8 @@ import Typography from '../Typography';
 import HighlightText from '../HighlightText';
 import Icon from '../Icon';
 import Tooltip from '../Tooltip';
+import Input from '../Input/Input';
+import Select from '../Select/Select';
 
 const getErrorMessage = (
   inputValue: string,
@@ -25,6 +27,7 @@ const getErrorMessage = (
 };
 const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
   label,
+  placeholder,
   text,
   highlightText,
   customError,
@@ -33,7 +36,7 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
   cancelIcon,
   variant = 'textField',
   dropdownData = [],
-  width,
+  // width,
   height,
   isOpen = false,
   confirmAction,
@@ -47,7 +50,8 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
   );
   const [showError, setShowError] = useState('');
   const [isTextFieldModified, setIsTextFieldModified] = useState(false);
-  const [isDropdownModified, setIsDropdownModified] = useState(false);
+  const isThrowingError = showError && isEditing ? true : false;
+
   const containerRef = useRef<HTMLDivElement | null>(null);
   const cancelRef = useRef<HTMLDivElement | null>(null); // New ref for cancel icon
   const [clickTimeout, setClickTimeout] = useState<number | null>(null);
@@ -105,7 +109,6 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
     setIsEditing(false);
     setShowError('');
     setIsTextFieldModified(false);
-    setIsDropdownModified(false);
   };
 
   const handleTextFieldChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -114,12 +117,6 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
     setShowError('');
   };
 
-  const handleDropdownChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setDropdownValue(e.target.value);
-    setIsDropdownModified(true);
-    setShowError('');
-  };
-
   const handleBlur = (e: MouseEvent) => {
     if (
       containerRef.current &&
@@ -155,44 +152,40 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
               }`}
               style={{ height }}
             >
-              <input
+              <Input
+                name="input"
                 type="text"
+                label={label ? label : ''}
+                disabled={false}
+                error={isThrowingError}
+                placeholder={placeholder ? placeholder : ''}
                 value={inputValue}
                 onChange={handleTextFieldChange}
-                className={`ff-text-dropdown-field ${
-                  isTextFieldModified ? 'modified' : ''
-                }`}
-                placeholder=" "
-                style={{
-                  width,
-                }}
+                className={`
+                
+               ${isTextFieldModified ? 'modified' : ''}`}
+              />
+              <Select
+                label={''}
+                optionsList={dropdownData}
+                selectedOption={{ value: dropdownValue, label: dropdownValue }}
+                onChange={(option) => setDropdownValue(option.value)}
               />
-              {label && <label className="ff-label">{label}</label>}
-              <select
-                value={dropdownValue}
-                onChange={handleDropdownChange}
-                className={`dropdown ${isDropdownModified ? 'modified' : ''}`}
-              >
-                {dropdownData.map((item) => (
-                  <option key={item.id} value={item.value}>
-                    {item.label}
-                  </option>
-                ))}
-              </select>
             </div>
           ) : (
             <div className="ff-label-text-field-without-dropdown">
-              <input
+              <Input
+                name="input"
                 type="text"
+                label={label ? label : ''}
+                disabled={false}
+                placeholder={placeholder ? placeholder : ''}
                 value={inputValue}
                 onChange={handleTextFieldChange}
-                className={`ff-text-field ${
-                  isTextFieldModified ? 'modified' : ''
-                }`}
-                placeholder=" "
-                style={{ width, height }}
+                className={`
+               
+               ${isTextFieldModified ? 'modified' : ''}`}
               />
-              <label className="ff-textfield-label">{label}</label>
             </div>
           )}
           <div className="ff-icon-container">

package/src/components/LabelEditTextField/types.ts

@@ -38,6 +38,7 @@ export interface LabelEditTextFieldTypes {
   isOpen?: boolean;
   /**for conditionally handle custom error */
   customErrorCondition?: boolean;
+  placeholder?: string;
   onClick?: () => void;
   tooltip?: {
     tooltipTitle?: string;

package/src/components/MachineInputField/MachineInputField.scss

@@ -26,11 +26,7 @@
 
       .ff-machine-text-reverse,
       .ff-machine-text {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        min-width: 30px;
-        max-width: 70px;
+        max-width: fit-content;
       }
 
       .ff-machine-text-reverse {

package/src/components/MachineInputField/MachineInputField.stories.tsx

@@ -15,15 +15,16 @@ type Story = StoryObj<typeof MachineInputField>;
 
 // Sample data for the MachineInputField
 const sampleOptions: MachineType[] = [
-  { label: 'Local', type: 'Local' },
-  { label: '121.25.36', type: 'Google Chrome' },
-  { label: '17, iPhone 15', type: 'mac' },
-  { label: 'Samsung Galaxy S23', type: 'android' },
+  { label: 'Local Environment', type: 'local' },
+  { label: '10.100.233.23', type: 'windows' },
+  { label: '121.25.333.344.2', type: 'Browserstack' },
+  { label: 'iphone 17 pro max', type: 'mac' },
+  { label: 'samsung galaxy s23', type: 'android' },
 ];
 
 export const Primary: Story = {
   args: {
-    width: '410px', // Example width
+    width: '530px', // Example width
     options: sampleOptions,
     runCount: 1,
   },

package/src/components/MachineInputField/MachineInputField.tsx

@@ -4,19 +4,18 @@ import Typography from '../Typography';
 import Icon from '../Icon';
 import { MachineInputFieldProps, MachineType } from './types';
 import classNames from 'classnames';
+import { truncateText } from '../../utils/truncateText/truncateText';
 
 const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
-  (
-    {
-      width = '',
-      options = [],
-      runCount = 0,
-      className = '',
-      contentReverse = false,
-      onClick = () => {},
-    },
-    ref
-  ) => {
+  ({
+    width = '',
+    options = [],
+    runCount = 0,
+    className = '',
+    contentReverse = false,
+    onClick = () => {},
+    modalId = '',
+  }) => {
     const getIcon: Record<MachineType['type'], string> = {
       Local: 'local',
       Browserstack: 'browserstack_icon',
@@ -31,14 +30,15 @@ const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
       'Internet Explorer': 'internet_explorer',
       Safari: 'safari_icon',
       Opera: 'opera',
+      windows: 'windows',
     };
 
     return (
       <div
-        ref={ref}
+        ref={modalId}
         style={{ width: width }}
         className={classNames('ff-machine-input-field-wrapper', className)}
-        onClick={onClick}
+        onClick={() => onClick()}
       >
         <Typography
           as="span"
@@ -72,7 +72,7 @@ const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
                 })}
                 color="var(--ff-machine-input-field-text-color)"
               >
-                {label}
+                {truncateText(label, 15)}
               </Typography>
             </div>
           ))}

package/src/components/MachineInputField/types.ts

@@ -1,3 +1,4 @@
+
 export interface MachineType {
   type: string;
   label: string;
@@ -10,4 +11,5 @@ export interface MachineInputFieldProps {
   className?: string;
   contentReverse?: boolean;
   onClick?: () => void;
+  modalId?: string;
 }

package/src/components/MenuOption/MenuOption.scss

@@ -45,7 +45,7 @@
 }
 
 .ff-option-card {
-  position: fixed;
+  position: absolute;
   margin: 4px;
   border: 1px solid var(--option-card-border-color);
   background: var(--option-card-bg-color);
@@ -54,7 +54,7 @@
   min-width: 110px;
   width: max-content;
   border-radius: 4px;
-  &--primary{
+  &--primary {
     background: var(--brand-color);
     color: var(--primary-button-text-color);
     svg {
@@ -62,14 +62,14 @@
         fill: var(--primary-icon-color);
       }
     }
-    :hover{
+    :hover {
       color: var(--brand-color);
-    svg {
-      path {
-        fill: var(--brand-color);
+      svg {
+        path {
+          fill: var(--brand-color);
+        }
       }
     }
-    }
   }
   .ff-options {
     @extend .fontSm;