fix(chipinput): update horizontal-vertical spacing and custom icon state

innovaccer · Aug 2, 2023 · 8d1d37e · 8d1d37e
1 parent e054ef5
commit 8d1d37e
Show file tree

Hide file tree

Showing 5 changed files with 206 additions and 163 deletions.
diff --git a/core/accessibility/utils/useAccessibilityProps.ts b/core/accessibility/utils/useAccessibilityProps.ts
@@ -7,6 +7,7 @@ interface IProps {
   onClick?: (event: React.MouseEvent<HTMLElement>) => void;
   onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
   role?: AriaRoleType;
+  tabIndex?: number;
   'aria-label'?: React.AriaAttributes['aria-label'];
 }
 
@@ -28,13 +29,13 @@ const isKeyboardInteractionAllowed = (role: AriaRoleType, key: KeyboardEventKeyT
   return allowedKeys.has(key);
 };
 
-const useAccessibilityProps = ({ onClick, onKeyDown, role = 'button', ...rest }: IProps) => {
+const useAccessibilityProps = ({ onClick, onKeyDown, role = 'button', tabIndex, ...rest }: IProps) => {
   return {
     ...(onClick
       ? {
           onClick: onClick,
           role: role,
-          tabIndex: 0,
+          tabIndex: tabIndex || 0,
           'aria-label': rest['aria-label'],
           onKeyDown: (e: React.SyntheticEvent<HTMLElement>) => {
             if (onKeyDown) {
@@ -50,7 +51,7 @@ const useAccessibilityProps = ({ onClick, onKeyDown, role = 'button', ...rest }:
             }
           },
         }
-      : { role, 'aria-label': rest['aria-label'] }),
+      : { role, tabIndex, 'aria-label': rest['aria-label'] }),
   };
 };
 

diff --git a/core/components/molecules/chipInput/ChipInput.tsx b/core/components/molecules/chipInput/ChipInput.tsx
@@ -98,7 +98,7 @@ export const ChipInput = (props: ChipInputProps) => {
     {
       ChipInput: true,
       ['ChipInput--disabled']: disabled,
-      ['ChipInput--withChips']: chips.length > 0,
+      ['ChipInput--withChips']: chips && chips.length > 0,
     },
     className
   );
@@ -181,7 +181,7 @@ export const ChipInput = (props: ChipInputProps) => {
         type={type}
         disabled={disabled}
         key={index}
-        className="my-2 mx-2"
+        className="my-3 mx-2"
         onClick={() => onClick && onClick(chip, index)}
         onClose={() => onChipDeleteHandler(index)}
         {...rest}
@@ -192,33 +192,42 @@ export const ChipInput = (props: ChipInputProps) => {
   return (
     /* TODO(a11y): fix accessibility  */
     /* eslint-disable  */
-    <div data-test="DesignSystem-ChipInput" {...baseProps} className={ChipInputClass} onClick={onClickHandler}>
-      <div className="ChipInput-wrapper">
-        {chips && chips.length > 0 && chipComponents}
-        <input
-          data-test="DesignSystem-ChipInput--Input"
-          ref={inputRef}
-          className="ChipInput-input"
-          autoFocus={autoFocus}
-          placeholder={placeholder}
-          disabled={disabled}
-          value={inputValue}
-          onBlur={onBlur}
-          onFocus={onFocus}
-          onChange={onInputChangeHandler}
-          onKeyDown={onKeyDownHandler}
-        />
-        {/* eslint-enable */}
+    <div data-test="DesignSystem-ChipInput--Border" className="ChipInput-border">
+      <div
+        data-test="DesignSystem-ChipInput"
+        {...baseProps}
+        className={ChipInputClass}
+        onClick={onClickHandler}
+        tabIndex={disabled ? -1 : 0}
+      >
+        <div className="ChipInput-wrapper">
+          {chips && chips.length > 0 && chipComponents}
+          <input
+            data-test="DesignSystem-ChipInput--Input"
+            ref={inputRef}
+            className="ChipInput-input"
+            autoFocus={autoFocus}
+            placeholder={chips && chips.length > 0 ? '' : placeholder}
+            disabled={disabled}
+            value={inputValue}
+            onBlur={onBlur}
+            onFocus={onFocus}
+            onChange={onInputChangeHandler}
+            onKeyDown={onKeyDownHandler}
+          />
+          {/* eslint-enable */}
+        </div>
+        {chips.length > 0 && (
+          <Icon
+            data-test="DesignSystem-ChipInput--Icon"
+            name="close"
+            appearance={disabled ? 'disabled' : 'subtle'}
+            className="ChipInput-icon"
+            onClick={onDeleteAllHandler}
+            tabIndex={disabled ? -1 : 0}
+          />
+        )}
       </div>
-      {chips.length > 0 && (
-        <Icon
-          data-test="DesignSystem-ChipInput--Icon"
-          name="close"
-          appearance="subtle"
-          className="ChipInput-icon"
-          onClick={onDeleteAllHandler}
-        />
-      )}
     </div>
   );
 };