fix(picker): add picker attribute to nested popover and styles to constrain to picker width (#5767)

* fix(picker): add picker attribute to nested popover and styles to constrain to picker width

* chore(picker): address pr feedback

* chore(picker): set icon only + icon story story picker width

* chore(picker): update golden hash

Author: cdransf

.circleci/config.yml

@@ -22,7 +22,7 @@ parameters:
     # 3. Commit this change to the PR branch where the changes exist.
     current_golden_images_hash:
         type: string
-        default: b603e40ceec985d714ea7660266908aa5476ced1
+        default: 9b2f918bdfb7a5d90ac435f9cb103a9d35c263c9
     wireit_cache_name:
         type: string
         default: wireit

packages/picker/src/picker.css

@@ -14,6 +14,8 @@
 @import url("./picker-overrides.css");
 
 :host {
+    --mod-popover-inline-size: var(--mod-picker-inline-size, var(--spectrum-picker-inline-size));
+
     display: inline-flex;
     vertical-align: top;
 

packages/picker/stories/picker.stories.ts

@@ -430,8 +430,8 @@ export const iconValue = (args: StoryArgs): TemplateResult => {
             @change=${handleChange(args)}
             label="Pick an action"
             icons="only"
-            style="width: 100px"
             value="2"
+            style="--mod-picker-inline-size: 100px;"
         >
             <sp-menu-item value="1">
                 <sp-icon-edit slot="icon"></sp-icon-edit>
@@ -459,8 +459,8 @@ export const iconsOnly = (args: StoryArgs): TemplateResult => {
             id="picker-quiet"
             @change=${handleChange(args)}
             label="Pick an action"
-            style="width: 100px"
             value="3"
+            style="--mod-picker-inline-size: 100px;"
         >
             <sp-menu-item value="1">
                 <sp-icon-edit slot="icon" label="Edit"></sp-icon-edit>

packages/popover/src/popover.css

@@ -17,6 +17,7 @@
     min-width: min-content;
     max-height: 100%;
     max-width: 100%;
+    inline-size: var(--mod-popover-inline-size);
     clip-path: none;
 }