From 7e8feed5dbe32ef3920249137f71ad0c769c82bd Mon Sep 17 00:00:00 2001
From: Kiarokh Moattar <kiarokh@icloud.com>
Date: Thu, 4 Jan 2024 11:55:05 +0100
Subject: [PATCH] refactor(chip-set): correctly use MDC's HTML & classes

We're inheriting styles from MDC, but since our HTML
structure was not exactly similar to the one from
MDC's input-field, and some classes were missing,
then we had to make special styles to override what
was coming from MDC, or to compensate for
what was missing, due to missing classes.
---
 src/components/chip-set/chip-set.scss | 54 ++++++++++-----------------
 src/components/chip-set/chip-set.tsx  | 38 ++++++++++---------
 2 files changed, 39 insertions(+), 53 deletions(-)

diff --git a/src/components/chip-set/chip-set.scss b/src/components/chip-set/chip-set.scss
index e5bac35e38..8848018141 100644
--- a/src/components/chip-set/chip-set.scss
+++ b/src/components/chip-set/chip-set.scss
@@ -137,17 +137,11 @@ limel-icon.mdc-chip__icon.mdc-chip__icon--leading {
     align-items: center;
     min-height: shared_input-select-picker.$height-of-mdc-text-field;
     position: relative;
-
-    &.chip-set--with-label {
-        .lime-floating-label--float-above {
-            padding-left: functions.pxToRem(4);
-        }
-    }
+    width: 100%;
 
     &.mdc-chip-set--input {
-        padding: functions.pxToRem(8);
-
-        width: 100%;
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
 
         .mdc-chip--selected {
             // When chip is selected with keyboard (backspace / arrow-keys) to be deleted
@@ -216,7 +210,6 @@ limel-icon.mdc-chip__icon.mdc-chip__icon--leading {
         width: auto;
         height: $height-of-chip-set-input;
         line-height: $height-of-chip-set-input;
-        padding: 0 functions.pxToRem(12);
 
         flex-grow: 1;
         flex-shrink: 0;
@@ -241,6 +234,12 @@ limel-icon.mdc-chip__icon.mdc-chip__icon--leading {
     }
 }
 
+.has-chips {
+    .mdc-text-field__input {
+        padding-left: 0.75rem;
+    }
+}
+
 .mdc-text-field--disabled .mdc-chip {
     pointer-events: all;
 
@@ -274,6 +273,10 @@ limel-icon.mdc-chip__icon.mdc-chip__icon--leading {
 
             transform: translateY(-34.75px) scale(0.75);
             font-size: shared_input-select-picker.$cropped-label-hack--font-size;
+
+            .mdc-text-field--with-leading-icon & {
+                transform: translateY(-34.75px) translateX(-32px) scale(0.75);
+            }
         }
     }
 }
@@ -305,38 +308,19 @@ limel-icon.mdc-chip__icon.mdc-chip__icon--leading {
     }
 }
 
-.has-leading-icon {
-    &:not(.has-chips) {
-        .mdc-text-field__input {
-            padding-left: $leading-icon-space;
-        }
+.mdc-text-field--with-leading-icon {
+    padding-left: 1rem !important;
+    .mdc-text-field__icon--leading {
+        margin-left: 0;
+    }
 
+    &:not(.has-chips) {
         .mdc-floating-label {
             &:not(.lime-floating-label--float-above) {
                 left: $leading-icon-space;
             }
-            &.mdc-floating-label--float-above {
-                left: functions.pxToRem(4);
-            }
-        }
-    }
-
-    .mdc-chip {
-        &:first-of-type {
-            margin-left: 40px;
         }
     }
-
-    .search-icon {
-        transition: transform 0.2s ease;
-        position: absolute;
-        top: functions.pxToRem(16);
-        left: functions.pxToRem(16);
-    }
-
-    limel-icon {
-        background-color: transparent;
-    }
 }
 
 .delimiter {
diff --git a/src/components/chip-set/chip-set.tsx b/src/components/chip-set/chip-set.tsx
index a3226d5dd8..25291df613 100644
--- a/src/components/chip-set/chip-set.tsx
+++ b/src/components/chip-set/chip-set.tsx
@@ -386,13 +386,29 @@ export class ChipSet {
                     'force-invalid': this.isInvalid(),
                     'mdc-text-field--disabled': this.readonly || this.disabled,
                     'lime-text-field--readonly': this.readonly,
-                    'has-chips mdc-text-field--label-floating':
-                        this.value.length !== 0,
-                    'has-leading-icon': this.leadingIcon !== null,
+                    'has-chips': this.value.length !== 0,
+                    'mdc-text-field--label-floating':
+                        this.value.length !== 0 || this.editMode,
+                    'mdc-text-field--with-leading-icon':
+                        this.leadingIcon !== null,
                     'has-clear-all-button': this.clearAllButton,
                 }}
                 onClick={this.handleTextFieldFocus}
             >
+                <div
+                    class={{
+                        'mdc-notched-outline': true,
+                        'mdc-notched-outline--upgraded': true,
+                        'mdc-text-field--required': this.required,
+                        'lime-notched-outline--notched': this.floatLabelAbove(),
+                    }}
+                    dropzone-tip={this.dropZoneTip()}
+                >
+                    <div class="mdc-notched-outline__leading" />
+                    {this.renderLabel()}
+                    <div class="mdc-notched-outline__trailing" />
+                </div>
+                {this.renderLeadingIcon()}
                 {this.value.map(this.renderInputChip)}
                 <input
                     tabIndex={INPUT_FIELD_TABINDEX}
@@ -414,20 +430,6 @@ export class ChipSet {
                     placeholder={this.isFull() ? '' : this.searchLabel}
                     readonly={this.isFull()}
                 />
-                <div
-                    class={{
-                        'mdc-notched-outline': true,
-                        'mdc-notched-outline--upgraded': true,
-                        'mdc-text-field--required': this.required,
-                        'lime-notched-outline--notched': this.floatLabelAbove(),
-                    }}
-                    dropzone-tip={this.dropZoneTip()}
-                >
-                    <div class="mdc-notched-outline__leading" />
-                    {this.renderLabel()}
-                    <div class="mdc-notched-outline__trailing" />
-                </div>
-                {this.renderLeadingIcon()}
                 {this.renderEmptyValueForReadonly()}
                 {this.renderClearAllChipsButton()}
             </div>,
@@ -742,7 +744,7 @@ export class ChipSet {
         }
 
         return (
-            <i class="mdc-text-field__icon search-icon">
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading">
                 <limel-icon name={this.leadingIcon} />
             </i>
         );