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.
Lundalogik · Jan 4, 2024 · 7e8feed · 7e8feed
1 parent 29d8bc2
commit 7e8feed
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 53 deletions.
diff --git 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
@@ -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>
         );