spectrum-Search-icon should be pushed down into TextFieldBase (#1685)

* Fix to use spectrum-Textfield-icon instaed of spectrum-Search-icon

* Delete UNSAFE_className

* small adjustment to left position of the icon which drifted too far to the start edge

* Update to match padding from spectrum-css
We need to check in with design on this before we can merge it

* fix start padding to rely on textfield

Co-authored-by: Rob Snow <rsnow@adobe.com>

Author: so99ynoodles

packages/@adobe/spectrum-css-temp/components/search/index.css

@@ -70,8 +70,6 @@ governing permissions and limitations under the License.
   /* Correct the outline for input[type="search"] style in Safari. */
   outline-offset: -2px;
 
-  /* Use padding instead of text-indent so long strings don't overlap the icon */
-  padding-inline-start: var(--spectrum-search-padding-left);
   text-indent: 0;
 
   /* Don't let long strings overlap the close icon */
@@ -96,16 +94,3 @@ governing permissions and limitations under the License.
   }
 }
 
-/* Positions search magnifier UI icon */
-.spectrum-Search .spectrum-Search-icon {
-  display: block;
-  position: absolute;
-  height: var(--spectrum-global-dimension-size-200);
-  width: var(--spectrum-global-dimension-size-200);
-  inset-inline-start: 12px;
-  top: calc(calc(var(--spectrum-textfield-height) / 2) - calc(var(--spectrum-global-dimension-size-200) / 2));
-
-  transition: fill var(--spectrum-global-animation-duration-100) ease-in-out;
-
-  pointer-events: none;
-}

packages/@adobe/spectrum-css-temp/components/search/skin.css

@@ -11,4 +11,3 @@
  */
 
 @import './index.css';
-@import './skin.css';

packages/@adobe/spectrum-css-temp/components/search/vars.css

@@ -227,15 +227,21 @@ governing permissions and limitations under the License.
   position: absolute;
   height: var(--spectrum-icon-info-medium-height);
   width: var(--spectrum-icon-info-medium-width);
-  inset-inline-start: var(--spectrum-global-dimension-size-100);
+  /* This has a named variable in a future update of spectrum-css. */
+  inset-inline-start: var(--spectrum-global-dimension-size-150);
   top: var(--spectrum-global-dimension-size-85);
   transition: fill var(--spectrum-global-animation-duration-100) ease-in-out;
 }
 
 /* styles the textfield properly if the left icon is provided */
 .spectrum-Textfield-inputIcon {
   /* Use padding instead of text-indent so long strings don't overlap the icon */
-  padding-inline-start: calc(calc(var(--spectrum-global-dimension-size-200) + var(--spectrum-icon-info-medium-width)) - 1px);
+  /* These values have real names in a spectrum-css update, when we update, use those. */
+  padding-inline-start: calc(
+    var(--spectrum-global-dimension-size-150) +
+    var(--spectrum-global-dimension-size-225) +
+    var(--spectrum-global-dimension-size-65)
+  );
 
   .spectrum-Textfield--quiet & {
     padding-inline-start: calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-info-medium-width));

packages/@adobe/spectrum-css-temp/components/textfield/index.css

@@ -25,14 +25,7 @@ import {useSearchFieldState} from '@react-stately/searchfield';
 function SearchField(props: SpectrumSearchFieldProps, ref: RefObject<TextFieldRef>) {
   props = useProviderProps(props);
   let defaultIcon = (
-    <Magnifier
-      data-testid="searchicon"
-      UNSAFE_className={
-        classNames(
-          styles,
-          'spectrum-Search-icon'
-        )
-      } />
+    <Magnifier data-testid="searchicon" />
   );
 
   let {