From 1d9652c62360cbf810608f890634fb80d72ade97 Mon Sep 17 00:00:00 2001
From: Satyam Chatterjee <satyam.chatterjee@innovaccer.com>
Date: Thu, 15 Jun 2023 15:04:31 +0530
Subject: [PATCH] fix(editablechipinput): update default state, icon buttons
 and close icon

    Current PR fixes following:
    - Update default state spacing and borders
    - Remove right close icon
    - Update icon buttons to have largeIcons
---
 core/components/atoms/editable/Editable.tsx   |   3 +-
 .../molecules/chipInput/ChipInput.tsx         |  60 ++---
 .../__snapshots__/ChipInput.test.tsx.snap     | 232 +++++++++---------
 .../editableChipInput/EditableChipInput.tsx   |   4 +-
 .../__tests__/EditableChipInput.test.tsx      |   8 +
 .../EditableChipInput.test.tsx.snap           |   8 +-
 core/utils/EditableContext.ts                 |  12 +
 css/src/components/chipInput.css              |  34 ++-
 css/src/components/editableChipInput.css      |  13 +-
 9 files changed, 210 insertions(+), 164 deletions(-)
 create mode 100644 core/utils/EditableContext.ts

diff --git a/core/components/atoms/editable/Editable.tsx b/core/components/atoms/editable/Editable.tsx
index b89953daab..1db512c9f7 100644
--- a/core/components/atoms/editable/Editable.tsx
+++ b/core/components/atoms/editable/Editable.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
+import { EditableProvider } from '@/utils/EditableContext';
 
 export interface EditableProps extends BaseProps {
   editing?: boolean;
@@ -31,7 +32,7 @@ export const Editable = (props: EditableProps) => {
         onMouseLeave={() => !editing && onChange('default')}
       >
         {/* eslint-enable  */}
-        {children}
+        <EditableProvider value={{ editable: true }}>{children}</EditableProvider>
       </div>
     </div>
   );
diff --git a/core/components/molecules/chipInput/ChipInput.tsx b/core/components/molecules/chipInput/ChipInput.tsx
index 090ff29c56..b6dc36ff43 100644
--- a/core/components/molecules/chipInput/ChipInput.tsx
+++ b/core/components/molecules/chipInput/ChipInput.tsx
@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { Chip, Icon } from '@/index';
 import { ChipProps } from '@/index.type';
 import { BaseProps, extractBaseProps } from '@/utils/types';
+import editableContext from '@/utils/EditableContext';
 
 const keyCodes = {
   BACKSPACE: 'Backspace',
@@ -85,6 +86,7 @@ export const ChipInput = (props: ChipInputProps) => {
   const inputRef = React.createRef<HTMLInputElement>();
   const [chips, setChips] = React.useState(value || defaultValue);
   const [inputValue, setInputValue] = React.useState('');
+  const { editable } = React.useContext(editableContext);
 
   const baseProps = extractBaseProps(props);
 
@@ -98,7 +100,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 +183,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 +194,35 @@ 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}>
+        <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 && !editable && (
+          <Icon
+            data-test="DesignSystem-ChipInput--Icon"
+            name="close"
+            appearance="subtle"
+            className="ChipInput-icon"
+            onClick={onDeleteAllHandler}
+          />
+        )}
       </div>
-      {chips.length > 0 && (
-        <Icon
-          data-test="DesignSystem-ChipInput--Icon"
-          name="close"
-          appearance="subtle"
-          className="ChipInput-icon"
-          onClick={onDeleteAllHandler}
-        />
-      )}
     </div>
   );
 };
diff --git a/core/components/molecules/chipInput/__tests__/__snapshots__/ChipInput.test.tsx.snap b/core/components/molecules/chipInput/__tests__/__snapshots__/ChipInput.test.tsx.snap
index 24768843db..80952aaa7a 100644
--- a/core/components/molecules/chipInput/__tests__/__snapshots__/ChipInput.test.tsx.snap
+++ b/core/components/molecules/chipInput/__tests__/__snapshots__/ChipInput.test.tsx.snap
@@ -6,80 +6,85 @@ exports[`ChipInput component
 <body>
   <div>
     <div
-      class="ChipInput ChipInput--withChips"
-      data-test="DesignSystem-ChipInput"
+      class="ChipInput-border"
+      data-test="DesignSystem-ChipInput--Border"
     >
       <div
-        class="ChipInput-wrapper"
+        class="ChipInput ChipInput--withChips"
+        data-test="DesignSystem-ChipInput"
       >
         <div
-          class="Chip-wrapper Chip Chip--input Chip-icon--clear my-2 mx-2"
-          data-test="DesignSystem-ChipInput--Chip"
-          tabindex="0"
+          class="ChipInput-wrapper"
         >
-          <span
-            class="Text Text--regular color-inverse Chip-text"
-            data-test="DesignSystem-GenericChip--Text"
-          >
-            1020
-          </span>
           <div
-            class="Chip-icon Chip-icon--right cursor-pointer"
-            data-test="DesignSystem-GenericChip--clearButton"
-            role="button"
+            class="Chip-wrapper Chip Chip--input Chip-icon--clear my-3 mx-2"
+            data-test="DesignSystem-ChipInput--Chip"
             tabindex="0"
           >
-            <i
-              class="material-icons material-icons-round Icon Icon--subtle p-2"
+            <span
+              class="Text Text--regular color-inverse Chip-text"
+              data-test="DesignSystem-GenericChip--Text"
+            >
+              1020
+            </span>
+            <div
+              class="Chip-icon Chip-icon--right cursor-pointer"
+              data-test="DesignSystem-GenericChip--clearButton"
               role="button"
-              style="font-size: 16px; width: 16px;"
+              tabindex="0"
             >
-              clear_round
-            </i>
+              <i
+                class="material-icons material-icons-round Icon Icon--subtle p-2"
+                role="button"
+                style="font-size: 16px; width: 16px;"
+              >
+                clear_round
+              </i>
+            </div>
           </div>
-        </div>
-        <div
-          class="Chip-wrapper Chip Chip--input Chip-icon--clear my-2 mx-2"
-          data-test="DesignSystem-ChipInput--Chip"
-          tabindex="0"
-        >
-          <span
-            class="Text Text--regular color-inverse Chip-text"
-            data-test="DesignSystem-GenericChip--Text"
-          >
-            80
-          </span>
           <div
-            class="Chip-icon Chip-icon--right cursor-pointer"
-            data-test="DesignSystem-GenericChip--clearButton"
-            role="button"
+            class="Chip-wrapper Chip Chip--input Chip-icon--clear my-3 mx-2"
+            data-test="DesignSystem-ChipInput--Chip"
             tabindex="0"
           >
-            <i
-              class="material-icons material-icons-round Icon Icon--subtle p-2"
+            <span
+              class="Text Text--regular color-inverse Chip-text"
+              data-test="DesignSystem-GenericChip--Text"
+            >
+              80
+            </span>
+            <div
+              class="Chip-icon Chip-icon--right cursor-pointer"
+              data-test="DesignSystem-GenericChip--clearButton"
               role="button"
-              style="font-size: 16px; width: 16px;"
+              tabindex="0"
             >
-              clear_round
-            </i>
+              <i
+                class="material-icons material-icons-round Icon Icon--subtle p-2"
+                role="button"
+                style="font-size: 16px; width: 16px;"
+              >
+                clear_round
+              </i>
+            </div>
           </div>
+          <input
+            class="ChipInput-input"
+            data-test="DesignSystem-ChipInput--Input"
+            placeholder=""
+            value=""
+          />
         </div>
-        <input
-          class="ChipInput-input"
-          data-test="DesignSystem-ChipInput--Input"
-          placeholder="Add value"
-          value=""
-        />
+        <i
+          class="material-icons material-icons-round Icon Icon--subtle ChipInput-icon"
+          data-test="DesignSystem-ChipInput--Icon"
+          role="button"
+          style="font-size: 16px; width: 16px;"
+          tabindex="0"
+        >
+          close_round
+        </i>
       </div>
-      <i
-        class="material-icons material-icons-round Icon Icon--subtle ChipInput-icon"
-        data-test="DesignSystem-ChipInput--Icon"
-        role="button"
-        style="font-size: 16px; width: 16px;"
-        tabindex="0"
-      >
-        close_round
-      </i>
     </div>
   </div>
 </body>
@@ -91,81 +96,86 @@ exports[`ChipInput component
 <body>
   <div>
     <div
-      class="ChipInput ChipInput--disabled ChipInput--withChips"
-      data-test="DesignSystem-ChipInput"
+      class="ChipInput-border"
+      data-test="DesignSystem-ChipInput--Border"
     >
       <div
-        class="ChipInput-wrapper"
+        class="ChipInput ChipInput--disabled ChipInput--withChips"
+        data-test="DesignSystem-ChipInput"
       >
         <div
-          class="Chip-wrapper Chip Chip-input--disabled Chip-icon--clear my-2 mx-2"
-          data-test="DesignSystem-ChipInput--Chip"
-          tabindex="-1"
+          class="ChipInput-wrapper"
         >
-          <span
-            class="Text Text--regular color-inverse-lightest Chip-text"
-            data-test="DesignSystem-GenericChip--Text"
-          >
-            1020
-          </span>
           <div
-            class="Chip-icon Chip-icon--right Chip-icon-disabled--right"
-            data-test="DesignSystem-GenericChip--clearButton"
-            role="button"
+            class="Chip-wrapper Chip Chip-input--disabled Chip-icon--clear my-3 mx-2"
+            data-test="DesignSystem-ChipInput--Chip"
             tabindex="-1"
           >
-            <i
-              class="material-icons material-icons-round Icon Icon--disabled p-2"
+            <span
+              class="Text Text--regular color-inverse-lightest Chip-text"
+              data-test="DesignSystem-GenericChip--Text"
+            >
+              1020
+            </span>
+            <div
+              class="Chip-icon Chip-icon--right Chip-icon-disabled--right"
+              data-test="DesignSystem-GenericChip--clearButton"
               role="button"
-              style="font-size: 16px; width: 16px;"
+              tabindex="-1"
             >
-              clear_round
-            </i>
+              <i
+                class="material-icons material-icons-round Icon Icon--disabled p-2"
+                role="button"
+                style="font-size: 16px; width: 16px;"
+              >
+                clear_round
+              </i>
+            </div>
           </div>
-        </div>
-        <div
-          class="Chip-wrapper Chip Chip-input--disabled Chip-icon--clear my-2 mx-2"
-          data-test="DesignSystem-ChipInput--Chip"
-          tabindex="-1"
-        >
-          <span
-            class="Text Text--regular color-inverse-lightest Chip-text"
-            data-test="DesignSystem-GenericChip--Text"
-          >
-            80
-          </span>
           <div
-            class="Chip-icon Chip-icon--right Chip-icon-disabled--right"
-            data-test="DesignSystem-GenericChip--clearButton"
-            role="button"
+            class="Chip-wrapper Chip Chip-input--disabled Chip-icon--clear my-3 mx-2"
+            data-test="DesignSystem-ChipInput--Chip"
             tabindex="-1"
           >
-            <i
-              class="material-icons material-icons-round Icon Icon--disabled p-2"
+            <span
+              class="Text Text--regular color-inverse-lightest Chip-text"
+              data-test="DesignSystem-GenericChip--Text"
+            >
+              80
+            </span>
+            <div
+              class="Chip-icon Chip-icon--right Chip-icon-disabled--right"
+              data-test="DesignSystem-GenericChip--clearButton"
               role="button"
-              style="font-size: 16px; width: 16px;"
+              tabindex="-1"
             >
-              clear_round
-            </i>
+              <i
+                class="material-icons material-icons-round Icon Icon--disabled p-2"
+                role="button"
+                style="font-size: 16px; width: 16px;"
+              >
+                clear_round
+              </i>
+            </div>
           </div>
+          <input
+            class="ChipInput-input"
+            data-test="DesignSystem-ChipInput--Input"
+            disabled=""
+            placeholder=""
+            value=""
+          />
         </div>
-        <input
-          class="ChipInput-input"
-          data-test="DesignSystem-ChipInput--Input"
-          disabled=""
-          placeholder="Add value"
-          value=""
-        />
+        <i
+          class="material-icons material-icons-round Icon Icon--subtle ChipInput-icon"
+          data-test="DesignSystem-ChipInput--Icon"
+          role="button"
+          style="font-size: 16px; width: 16px;"
+          tabindex="0"
+        >
+          close_round
+        </i>
       </div>
-      <i
-        class="material-icons material-icons-round Icon Icon--subtle ChipInput-icon"
-        data-test="DesignSystem-ChipInput--Icon"
-        role="button"
-        style="font-size: 16px; width: 16px;"
-        tabindex="0"
-      >
-        close_round
-      </i>
     </div>
   </div>
 </body>
diff --git a/core/components/molecules/editableChipInput/EditableChipInput.tsx b/core/components/molecules/editableChipInput/EditableChipInput.tsx
index 05fcb3237c..ae97ba9553 100644
--- a/core/components/molecules/editableChipInput/EditableChipInput.tsx
+++ b/core/components/molecules/editableChipInput/EditableChipInput.tsx
@@ -123,7 +123,7 @@ export const EditableChipInput = (props: EditableChipInputProps) => {
             key={index}
             name={val}
             label={val}
-            className="my-2 mx-2"
+            className="my-3 mx-2"
             {...chipObject}
             onClose={() => onChipDelete(index)}
             onClick={() => onClick && onClick(val, index)}
@@ -169,6 +169,7 @@ export const EditableChipInput = (props: EditableChipInputProps) => {
             icon="clear"
             className="mr-3"
             size="tiny"
+            largeIcon={true}
             onClick={() => {
               setDefaultComponent(value);
             }}
@@ -177,6 +178,7 @@ export const EditableChipInput = (props: EditableChipInputProps) => {
             data-test="DesignSystem-EditableChipInput--SaveButton"
             icon="check"
             appearance="primary"
+            largeIcon={true}
             size="tiny"
             disabled={disableSaveAction}
             onClick={onSaveChanges}
diff --git a/core/components/molecules/editableChipInput/__tests__/EditableChipInput.test.tsx b/core/components/molecules/editableChipInput/__tests__/EditableChipInput.test.tsx
index 1257f14886..36a82ab254 100644
--- a/core/components/molecules/editableChipInput/__tests__/EditableChipInput.test.tsx
+++ b/core/components/molecules/editableChipInput/__tests__/EditableChipInput.test.tsx
@@ -137,4 +137,12 @@ describe('EditableChipInput component with action buttons and props: value and c
     expect(getAllByTestId('DesignSystem-EditableChipInput--Chip')[0].textContent).toMatch('Chip3clear_round');
     expect(getAllByTestId('DesignSystem-EditableChipInput--Chip')[1].textContent).toMatch('Chip4clear_round');
   });
+
+  it('does not render close icon', () => {
+    const { queryByTestId } = render(
+      <EditableChipInput value={value} onChange={onChange} chipInputOptions={chipInputOptions} />
+    );
+
+    expect(queryByTestId('DesignSystem-ChipInput--Icon')).not.toBeInTheDocument();
+  });
 });
diff --git a/core/components/molecules/editableChipInput/__tests__/__snapshots__/EditableChipInput.test.tsx.snap b/core/components/molecules/editableChipInput/__tests__/__snapshots__/EditableChipInput.test.tsx.snap
index 6f0fd10e47..9fc1f3601e 100644
--- a/core/components/molecules/editableChipInput/__tests__/__snapshots__/EditableChipInput.test.tsx.snap
+++ b/core/components/molecules/editableChipInput/__tests__/__snapshots__/EditableChipInput.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`EditableChipInput component
           data-test="DesignSystem-EditableChipInput--Default"
         >
           <div
-            class="Chip-wrapper Chip Chip--input Chip-icon--clear my-2 mx-2"
+            class="Chip-wrapper Chip Chip--input Chip-icon--clear my-3 mx-2"
             data-test="DesignSystem-EditableChipInput--Chip"
             tabindex="0"
           >
@@ -46,7 +46,7 @@ exports[`EditableChipInput component
             </div>
           </div>
           <div
-            class="Chip-wrapper Chip Chip--input Chip-icon--clear my-2 mx-2"
+            class="Chip-wrapper Chip Chip--input Chip-icon--clear my-3 mx-2"
             data-test="DesignSystem-EditableChipInput--Chip"
             tabindex="0"
           >
@@ -98,7 +98,7 @@ exports[`EditableChipInput component
           data-test="DesignSystem-EditableChipInput--Default"
         >
           <div
-            class="Chip-wrapper Chip Chip--input Chip-icon--clear my-2 mx-2"
+            class="Chip-wrapper Chip Chip--input Chip-icon--clear my-3 mx-2"
             data-test="DesignSystem-EditableChipInput--Chip"
             tabindex="0"
           >
@@ -124,7 +124,7 @@ exports[`EditableChipInput component
             </div>
           </div>
           <div
-            class="Chip-wrapper Chip Chip--input Chip-icon--clear my-2 mx-2"
+            class="Chip-wrapper Chip Chip--input Chip-icon--clear my-3 mx-2"
             data-test="DesignSystem-EditableChipInput--Chip"
             tabindex="0"
           >
diff --git a/core/utils/EditableContext.ts b/core/utils/EditableContext.ts
new file mode 100644
index 0000000000..5f4ccb1327
--- /dev/null
+++ b/core/utils/EditableContext.ts
@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+type EditableContext = {
+  editable: boolean;
+};
+
+const editableContext = React.createContext<EditableContext>({
+  editable: false,
+});
+
+export const EditableProvider = editableContext.Provider;
+export default editableContext;
diff --git a/css/src/components/chipInput.css b/css/src/components/chipInput.css
index 1dff068beb..3b3f1324d7 100644
--- a/css/src/components/chipInput.css
+++ b/css/src/components/chipInput.css
@@ -1,11 +1,9 @@
 .ChipInput {
-  box-sizing: border-box;
   display: flex;
   border-radius: var(--spacing-m);
-  border: var(--border);
-  padding-left: var(--spacing-s);
-  padding-top: var(--spacing-xs);
-  padding-bottom: var(--spacing-xs);
+  box-shadow: inset 0 0 0 var(--spacing-xs) var(--secondary);
+  padding-left: 10px;
+  padding-right: 10px;
   background: var(--white);
   cursor: text;
   flex: 100%;
@@ -18,17 +16,25 @@
   flex-wrap: wrap;
 }
 
-.ChipInput:focus-within {
-  border-color: var(--primary);
+.ChipInput-border:focus-within {
+  border-radius: var(--spacing-m);
   box-shadow: var(--shadow-spread) var(--primary-shadow);
 }
 
+.ChipInput:focus-within {
+  box-shadow: inset 0 0 0 var(--spacing-xs) var(--primary);
+}
+
 .ChipInput--disabled {
   background: var(--secondary-lightest);
   border-color: var(--secondary-light);
   pointer-events: none;
 }
 
+.ChipInput--withChips {
+  padding-right: var(--spacing);
+}
+
 .ChipInput-input {
   border: none;
   outline: none;
@@ -38,17 +44,21 @@
   flex: 0px;
   box-sizing: border-box;
   height: var(--spacing-xl);
-  margin-top: var(--spacing-s);
-  margin-bottom: var(--spacing-s);
-  padding-left: var(--spacing-m);
+  margin-top: var(--spacing-m);
+  margin-bottom: var(--spacing-m);
   font-family: var(--font-family);
   font-size: var(--font-size);
 }
 
 .ChipInput-icon {
   height: var(--spacing-2);
+  padding: var(--spacing-s);
+  margin-left: var(--spacing);
   margin-top: var(--spacing-m);
-  padding-top: var(--spacing-s);
-  margin-right: var(--spacing-l);
   cursor: pointer;
+  border-radius: 50%;
+}
+
+.ChipInput-icon:hover {
+  background-color: var(--secondary);
 }
diff --git a/css/src/components/editableChipInput.css b/css/src/components/editableChipInput.css
index b6c6afe2c0..92a62305aa 100644
--- a/css/src/components/editableChipInput.css
+++ b/css/src/components/editableChipInput.css
@@ -2,11 +2,12 @@
   position: relative;
   width: 100%;
 }
+
 .EditableChipInput-default {
   display: flex;
   align-items: center;
   padding-left: var(--spacing-l);
-  border-left: var(--spacing-xs) solid transparent;
+  padding-right: var(--spacing-l);
   min-height: var(--spacing-3);
   flex-wrap: wrap;
 }
@@ -14,21 +15,19 @@
 .EditableChipInput-defaultWithChips {
   display: flex;
   align-items: center;
-  padding-left: var(--spacing);
-  border: var(--spacing-xs) solid transparent;
-  padding-top: var(--spacing-xs);
-  padding-bottom: var(--spacing-xs);
-  max-width: calc(100% - 28px);
+  padding-left: 10px;
   flex-wrap: wrap;
 }
 
 .EditableChipInput-defaultWithChips:hover,
 .EditableChipInput-default:hover {
   background-color: var(--secondary-lightest);
+  border-radius: var(--spacing-m);
+  box-shadow: inset 0 0 0 var(--spacing-xs) var(--secondary-dark);
 }
 
 .EditableChipInput-chipInput {
-  padding-left: var(--spacing);
+  padding-right: 10px;
 }
 
 .EditableChipInput-actions {