Fix Field-field shrink behavior (#2176)

* Fix Field-field shrink behavior

* handle default width

* remove erroneous import

* Apply to both side label and position Top

* revert change

* Pushing to work on as a group

* Only apply our size in forms for search within picker

* Remove wrapper we added

* Reverting so that things continue to work as they are on main

* revert searchwithin in forms work

* save point

* reverting field once more

* missed one instance of wrapper

* remove extra unneeded class

Author: snowystinger

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

@@ -88,6 +88,9 @@ governing permissions and limitations under the License.
 
     .spectrum-Field-field {
       flex: 1;
+      /* Setting `flex: 1;` is equivalent to `flex: 1 1 0;`, which means we expect to be able to shrink
+      * To be able to shrink, we must have a min-width that isn't 'auto' */
+      min-width: 0;
     }
 
     .spectrum-Field-field--multiline {

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

@@ -64,3 +64,13 @@ governing permissions and limitations under the License.
     }
   }
 }
+
+/* this is specific to handling default width */
+.spectrum-SearchWithin-container {
+  /* ensure we have higher specificity than .spectrum-Field */
+  &.spectrum-SearchWithin-container {
+     /* override the default width of the field container, only with labelPosition=top. */
+     --spectrum-field-default-width: var(--spectrum-global-dimension-size-3000);
+    min-inline-size: var(--spectrum-global-dimension-size-3000);
+  }
+}

packages/@react-spectrum/searchwithin/chromatic/SearchWithin.chromatic.tsx

@@ -81,7 +81,7 @@ const Template: Story<SpectrumSearchWithinProps> = (args) => (
 
 // Chromatic can't handle the size of the side label story so removed some extraneous props that don't matter for side label case.
 const TemplateSideLabel: Story<SpectrumSearchWithinProps> = (args) => (
-  <Grid columns={repeat(2, '1fr')} autoFlow="row" gap="size-200" width={900}>
+  <Grid columns={repeat(2, '1fr')} autoFlow="row" gap="size-200">
     {combinations.map(c => {
       let key = Object.keys(c).map(k => shortName(k)).join(' ');
       if (!key) {

packages/@react-spectrum/searchwithin/src/SearchWithin.tsx

@@ -80,7 +80,11 @@ function SearchWithin(props: SpectrumSearchWithinProps, ref: FocusableRef<HTMLEl
     <Field
       {...props}
       labelProps={labelProps}
-      ref={domRef}>
+      ref={domRef}
+      wrapperClassName={classNames(
+        styles,
+        'spectrum-SearchWithin-container'
+      )}>
       <div
         role="group"
         aria-labelledby={labelProps.id || ariaLabel}