fix: long picker options truncated in quiet mode (#5813)

* truncate overflowing text in quiet pickers that are in a fixed width container
* add story to demonstrate quiet picker in fixed width container

Co-authored-by: Freddie Bawden <[email protected]>
Co-authored-by: Robert Snow <[email protected]>
Co-authored-by: Daniel Lu <[email protected]>

Author: 4 people

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

@@ -159,14 +159,16 @@ governing permissions and limitations under the License.
 .spectrum-Field.spectrum-Dropdown-fieldWrapper--quiet {
   display: inline-flex;
   flex-direction: column;
-  inline-size: auto;
+  inline-size: 100%;
+  max-width: max-content;
 
   .spectrum-Dropdown--quiet {
     inline-size: auto;
     min-inline-size: var(--spectrum-dropdown-quiet-min-width);
 
     .spectrum-Dropdown-trigger {
-      inline-size: auto;
+      inline-size: 100%;
+      max-width: max-content;
     }
   }
 

packages/@react-spectrum/picker/stories/Picker.stories.tsx

@@ -415,6 +415,36 @@ export const Quiet: PickerStory = {
           <Item key="always">Always</Item>
         </Picker>
       </View>
+      <hr />
+      <View
+        width={200}>
+        <h4>Quiet picker with label and fixed width (200px)</h4>
+        <Picker
+          isQuiet
+          label="Choose frequency"
+          defaultSelectedKey="sometimes">
+          <Item key="rarely">Rarely</Item>
+          <Item key="sometimes">
+            This text is very long and will overflow the container
+          </Item>
+          <Item key="always">Always</Item>
+        </Picker>
+      </View>
+      <hr />
+      <View
+        width={600}>
+        <h4>Quiet picker with label and fixed width (600px)</h4>
+        <Picker
+          isQuiet
+          label="Choose frequency"
+          defaultSelectedKey="sometimes">
+          <Item key="rarely">Rarely</Item>
+          <Item key="sometimes">
+            This text is very long the picker should expand to fit
+          </Item>
+          <Item key="always">Always</Item>
+        </Picker>
+      </View>
     </View>
   )
 };