From ff2cfe09ca4967a228835379701785766c987c42 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Mon, 13 Nov 2023 14:28:48 -0800
Subject: [PATCH] refactor(input, input-number, input-text): avoid redundant
 :host

---
 .../components/input-number/input-number.scss | 71 ++++++-------
 .../src/components/input-text/input-text.scss | 65 ++++++------
 .../src/components/input/input.scss           | 99 ++++++++++---------
 3 files changed, 121 insertions(+), 114 deletions(-)

diff --git a/packages/calcite-components/src/components/input-number/input-number.scss b/packages/calcite-components/src/components/input-number/input-number.scss
index 1342ebc3740..9c5e28890e7 100755
--- a/packages/calcite-components/src/components/input-number/input-number.scss
+++ b/packages/calcite-components/src/components/input-number/input-number.scss
@@ -56,7 +56,7 @@
 
 @include disabled();
 
-:host input {
+input {
   transition: var(--calcite-animation-timing), block-size 0, outline-offset 0s;
   -webkit-appearance: none;
   @apply font-inherit
@@ -75,38 +75,36 @@
 }
 
 // states
-:host {
-  & input {
-    @apply text-color-1
-      border-color-input
-      border
-      border-solid;
-    &::placeholder,
-    &:-ms-input-placeholder,
-    &::-ms-input-placeholder {
-      @apply text-color-3 font-normal;
-    }
-  }
-  & input:focus {
-    @apply border-color-brand text-color-1;
-  }
-  & input[readonly] {
-    @apply bg-background font-medium;
-  }
-  & input[readonly]:focus {
-    @apply text-color-1;
-  }
-  & calcite-icon {
-    @apply text-color-3;
+input {
+  @apply text-color-1
+    border-color-input
+    border
+    border-solid;
+  &::placeholder,
+  &:-ms-input-placeholder,
+  &::-ms-input-placeholder {
+    @apply text-color-3 font-normal;
   }
 }
+input:focus {
+  @apply border-color-brand text-color-1;
+}
+input[readonly] {
+  @apply bg-background font-medium;
+}
+input[readonly]:focus {
+  @apply text-color-1;
+}
+calcite-icon {
+  @apply text-color-3;
+}
 
 //focus
-:host input {
+input {
   @apply focus-base;
 }
 
-:host input:focus {
+input:focus {
   @apply focus-inset;
 }
 
@@ -396,18 +394,21 @@
   @apply border-t-color-1;
 }
 
-:host .inline-child {
-  @apply transition-default bg-transparent;
-  .editing-enabled {
-    background-color: inherit;
+// input needed for higher specificity of these overrides
+input {
+  &.inline-child {
+    @apply transition-default bg-transparent;
+    .editing-enabled {
+      background-color: inherit;
+    }
   }
-}
 
-:host .inline-child:not(.editing-enabled) {
-  @apply border-color-transparent
+  &.inline-child:not(.editing-enabled) {
+    @apply border-color-transparent
     flex
-    cursor-pointer;
-  padding-inline-start: 0;
+    cursor-pointer text-ellipsis;
+    padding-inline-start: 0;
+  }
 }
 
 @include hidden-form-input();
diff --git a/packages/calcite-components/src/components/input-text/input-text.scss b/packages/calcite-components/src/components/input-text/input-text.scss
index 72a3de625b2..e7fd4717ece 100755
--- a/packages/calcite-components/src/components/input-text/input-text.scss
+++ b/packages/calcite-components/src/components/input-text/input-text.scss
@@ -72,31 +72,29 @@ input {
 }
 
 // states
-:host {
-  & input {
-    @apply text-color-1
-      border-color-input
-      border
-      border-solid;
-    &::placeholder,
-    &:-ms-input-placeholder,
-    &::-ms-input-placeholder {
-      @apply text-color-3 font-normal;
-    }
-  }
-  & input:focus {
-    @apply border-color-brand text-color-1;
-  }
-  & input[readonly] {
-    @apply bg-background font-medium;
-  }
-  & input[readonly]:focus {
-    @apply text-color-1;
-  }
-  & calcite-icon {
-    @apply text-color-3;
+input {
+  @apply text-color-1
+    border-color-input
+    border
+    border-solid;
+  &::placeholder,
+  &:-ms-input-placeholder,
+  &::-ms-input-placeholder {
+    @apply text-color-3 font-normal;
   }
 }
+input:focus {
+  @apply border-color-brand text-color-1;
+}
+input[readonly] {
+  @apply bg-background font-medium;
+}
+input[readonly]:focus {
+  @apply text-color-1;
+}
+calcite-icon {
+  @apply text-color-3;
+}
 
 //focus
 
@@ -284,18 +282,21 @@ input[type="text"]::-ms-reveal {
   @apply border-t-color-1;
 }
 
-.inline-child {
-  @apply transition-default bg-transparent;
-  .editing-enabled {
-    background-color: inherit;
+// input needed for higher specificity of these overrides
+input {
+  &.inline-child {
+    @apply transition-default bg-transparent;
+    .editing-enabled {
+      background-color: inherit;
+    }
   }
-}
 
-.inline-child:not(.editing-enabled) {
-  @apply border-color-transparent
+  &.inline-child:not(.editing-enabled) {
+    @apply border-color-transparent
     flex
-    cursor-pointer;
-  padding-inline-start: 0;
+    cursor-pointer text-ellipsis;
+    padding-inline-start: 0;
+  }
 }
 
 @include hidden-form-input();
diff --git a/packages/calcite-components/src/components/input/input.scss b/packages/calcite-components/src/components/input/input.scss
index a29d1e5e648..3e2394b8dc6 100755
--- a/packages/calcite-components/src/components/input/input.scss
+++ b/packages/calcite-components/src/components/input/input.scss
@@ -97,8 +97,8 @@
   }
 }
 
-:host textarea,
-:host input {
+textarea,
+input {
   transition: var(--calcite-animation-timing), block-size 0, outline-offset 0s;
   -webkit-appearance: none;
   @apply font-inherit
@@ -116,48 +116,50 @@
     font-normal;
 }
 
-:host input[type="search"]::-webkit-search-decoration {
+input[type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
 // states
-:host {
-  & input,
-  & textarea {
-    @apply text-color-1
-      border-color-input
-      border
-      border-solid;
-    &::placeholder,
-    &:-ms-input-placeholder,
-    &::-ms-input-placeholder {
-      @apply text-color-3 font-normal;
-    }
-  }
-  & input:focus,
-  & textarea:focus {
-    @apply border-color-brand text-color-1;
-  }
-  & input[readonly],
-  & textarea[readonly] {
-    @apply bg-background font-medium;
-  }
-  & input[readonly]:focus,
-  & textarea[readonly]:focus {
-    @apply text-color-1;
+input,
+textarea {
+  @apply border
+    border-color-input
+    border-solid
+    text-color-1
+    text-ellipsis;
+  &::placeholder,
+  &:-ms-input-placeholder,
+  &::-ms-input-placeholder {
+    @apply text-color-3 font-normal;
   }
-  & calcite-icon {
-    @apply text-color-3;
+  &:placeholder-shown {
+    @apply text-ellipsis;
   }
 }
+input:focus,
+textarea:focus {
+  @apply border-color-brand text-color-1;
+}
+input[readonly],
+textarea[readonly] {
+  @apply bg-background font-medium;
+}
+input[readonly]:focus,
+textarea[readonly]:focus {
+  @apply text-color-1;
+}
+calcite-icon {
+  @apply text-color-3;
+}
 
 //focus
-:host textarea,
-:host input {
+textarea,
+input {
   @apply focus-base;
 }
-:host textarea:focus,
-:host input:focus {
+textarea:focus,
+input:focus {
   @apply focus-inset;
 }
 
@@ -339,7 +341,7 @@ input[type="time"]::-webkit-clear-button {
 }
 
 // number buttons
-:host input[type="number"] {
+input[type="number"] {
   -moz-appearance: textfield;
 
   &::-webkit-inner-spin-button,
@@ -477,16 +479,16 @@ input[type="time"]::-webkit-clear-button {
 }
 
 // hide the default date picker
-:host input::-webkit-calendar-picker-indicator {
+:input::-webkit-calendar-picker-indicator {
   @apply hidden;
 }
 
-:host input[type="date"]::-webkit-input-placeholder {
+input[type="date"]::-webkit-input-placeholder {
   visibility: hidden !important;
 }
 
 // textarea resize icon
-:host textarea::-webkit-resizer {
+textarea::-webkit-resizer {
   @apply absolute
     bottom-0
     box-border
@@ -555,18 +557,21 @@ input[type="time"]::-webkit-clear-button {
   @apply border-t-color-1;
 }
 
-:host .inline-child {
-  @apply transition-default bg-transparent;
-  .editing-enabled {
-    background-color: inherit;
+// input needed for higher specificity of these overrides
+input {
+  &.inline-child {
+    @apply transition-default bg-transparent;
+    .editing-enabled {
+      background-color: inherit;
+    }
   }
-}
 
-:host .inline-child:not(.editing-enabled) {
-  @apply border-color-transparent
-    flex
-    cursor-pointer text-ellipsis;
-  padding-inline-start: 0;
+  &.inline-child:not(.editing-enabled) {
+    @apply border-color-transparent
+      flex
+      cursor-pointer text-ellipsis;
+    padding-inline-start: 0;
+  }
 }
 
 @include hidden-form-input();