From 702b052f9ea1686d2a964648d4bb1d365178160f Mon Sep 17 00:00:00 2001
From: Westbrook Johnson <westbrook.johnson@gmail.com>
Date: Sat, 27 Feb 2021 10:11:48 -0500
Subject: [PATCH] fix(picker): ensure that width is customizable from the
 outside

---
 packages/picker/src/picker.css            |  24 +++
 packages/picker/stories/picker.stories.ts |  31 +++
 packages/picker/stories/states.ts         | 240 ++++++++++++++++++++++
 3 files changed, 295 insertions(+)
 create mode 100644 packages/picker/stories/states.ts

diff --git a/packages/picker/src/picker.css b/packages/picker/src/picker.css
index c4b5179f5a..0e91b95039 100644
--- a/packages/picker/src/picker.css
+++ b/packages/picker/src/picker.css
@@ -15,6 +15,30 @@ governing permissions and limitations under the License.
 :host {
     display: inline-flex;
     vertical-align: top;
+
+    /**
+     * .spectrum-Picker
+     * Move width management to :host
+     **/
+    max-width: 100%;
+    width: var(--spectrum-picker-width);
+    min-width: var(--spectrum-picker-min-width);
+}
+
+:host([quiet]) {
+    width: auto;
+    min-width: 0;
+}
+
+:host([size]) {
+    /* TODO: https://github.com/adobe/spectrum-css/blob/011ca5408ae5eb32bb55e1cf79c06e40171fd17c/components/picker/index.css#L93 */
+    --spectrum-picker-width: var(--spectrum-global-dimension-size-2400);
+}
+
+#button {
+    width: 100%;
+    min-width: 100%;
+    max-width: 100%;
 }
 
 sp-popover {
diff --git a/packages/picker/stories/picker.stories.ts b/packages/picker/stories/picker.stories.ts
index f718f98fc8..5613aa0315 100644
--- a/packages/picker/stories/picker.stories.ts
+++ b/packages/picker/stories/picker.stories.ts
@@ -17,6 +17,7 @@ import '../sp-picker.js';
 import { Picker } from '../';
 import '@spectrum-web-components/menu/sp-menu.js';
 import '@spectrum-web-components/menu/sp-menu-item.js';
+import { states } from './states.js';
 
 export default {
     title: 'Picker',
@@ -156,3 +157,33 @@ export const initialValue = (): TemplateResult => {
         </sp-picker>
     `;
 };
+
+export const custom = (): TemplateResult => {
+    return html`
+        <sp-picker
+            style="width: 400px;"
+            @change="${(event: Event): void => {
+                const picker = event.target as Picker;
+                action(`Change: ${picker.value}`)();
+            }}"
+            label="Pick an state"
+        >
+            <sp-menu style="max-height: 400px;">
+                ${states.map(
+                    (state) => html`
+                        <sp-menu-item id=${state.id} value=${state.id}>
+                            ${state.label}
+                        </sp-menu-item>
+                    `
+                )}
+            </sp-menu>
+        </sp-picker>
+        <p>This is some text.</p>
+        <p>This is some text.</p>
+        <p>
+            This is a
+            <a href="#anchor">link</a>
+            .
+        </p>
+    `;
+};
diff --git a/packages/picker/stories/states.ts b/packages/picker/stories/states.ts
new file mode 100644
index 0000000000..c2d755c082
--- /dev/null
+++ b/packages/picker/stories/states.ts
@@ -0,0 +1,240 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+export const states: {
+    id: string;
+    label: string;
+}[] = [
+    {
+        id: 'lb1-al',
+        label: 'Alabama',
+    },
+    {
+        id: 'lb1-ak',
+        label: 'Alaska',
+    },
+    {
+        id: 'lb1-as',
+        label: 'American Samoa',
+    },
+    {
+        id: 'lb1-az',
+        label: 'Arizona',
+    },
+    {
+        id: 'lb1-ar',
+        label: 'Arkansas',
+    },
+    {
+        id: 'lb1-ca',
+        label: 'California',
+    },
+    {
+        id: 'lb1-co',
+        label: 'Colorado',
+    },
+    {
+        id: 'lb1-ct',
+        label: 'Connecticut',
+    },
+    {
+        id: 'lb1-de',
+        label: 'Delaware',
+    },
+    {
+        id: 'lb1-dc',
+        label: 'District of Columbia',
+    },
+    {
+        id: 'lb1-fl',
+        label: 'Florida',
+    },
+    {
+        id: 'lb1-ga',
+        label: 'Georgia',
+    },
+    {
+        id: 'lb1-gm',
+        label: 'Guam',
+    },
+    {
+        id: 'lb1-hi',
+        label: 'Hawaii',
+    },
+    {
+        id: 'lb1-id',
+        label: 'Idaho',
+    },
+    {
+        id: 'lb1-il',
+        label: 'Illinois',
+    },
+    {
+        id: 'lb1-in',
+        label: 'Indiana',
+    },
+    {
+        id: 'lb1-ia',
+        label: 'Iowa',
+    },
+    {
+        id: 'lb1-ks',
+        label: 'Kansas',
+    },
+    {
+        id: 'lb1-ky',
+        label: 'Kentucky',
+    },
+    {
+        id: 'lb1-la',
+        label: 'Louisiana',
+    },
+    {
+        id: 'lb1-me',
+        label: 'Maine',
+    },
+    {
+        id: 'lb1-md',
+        label: 'Maryland',
+    },
+    {
+        id: 'lb1-ma',
+        label: 'Massachusetts',
+    },
+    {
+        id: 'lb1-mi',
+        label: 'Michigan',
+    },
+    {
+        id: 'lb1-mn',
+        label: 'Minnesota',
+    },
+    {
+        id: 'lb1-ms',
+        label: 'Mississippi',
+    },
+    {
+        id: 'lb1-mo',
+        label: 'Missouri',
+    },
+    {
+        id: 'lb1-mt',
+        label: 'Montana',
+    },
+    {
+        id: 'lb1-ne',
+        label: 'Nebraska',
+    },
+    {
+        id: 'lb1-nv',
+        label: 'Nevada',
+    },
+    {
+        id: 'lb1-nh',
+        label: 'New Hampshire',
+    },
+    {
+        id: 'lb1-nj',
+        label: 'New Jersey',
+    },
+    {
+        id: 'lb1-nm',
+        label: 'New Mexico',
+    },
+    {
+        id: 'lb1-ny',
+        label: 'New York',
+    },
+    {
+        id: 'lb1-nc',
+        label: 'North Carolina',
+    },
+    {
+        id: 'lb1-nd',
+        label: 'North Dakota',
+    },
+    {
+        id: 'lb1-mp',
+        label: 'Northern Marianas Islands',
+    },
+    {
+        id: 'lb1-oh',
+        label: 'Ohio',
+    },
+    {
+        id: 'lb1-ok',
+        label: 'Oklahoma',
+    },
+    {
+        id: 'lb1-or',
+        label: 'Oregon',
+    },
+    {
+        id: 'lb1-pa',
+        label: 'Pennsylvania',
+    },
+    {
+        id: 'lb1-pr',
+        label: 'Puerto Rico',
+    },
+    {
+        id: 'lb1-ri',
+        label: 'Rhode Island',
+    },
+    {
+        id: 'lb1-sc',
+        label: 'South Carolina',
+    },
+    {
+        id: 'lb1-sd',
+        label: 'South Dakota',
+    },
+    {
+        id: 'lb1-tn',
+        label: 'Tennessee',
+    },
+    {
+        id: 'lb1-tx',
+        label: 'Texas',
+    },
+    {
+        id: 'lb1-ut',
+        label: 'Utah',
+    },
+    {
+        id: 'lb1-ve',
+        label: 'Vermont',
+    },
+    {
+        id: 'lb1-va',
+        label: 'Virginia',
+    },
+    {
+        id: 'lb1-vi',
+        label: 'Virgin Islands',
+    },
+    {
+        id: 'lb1-wa',
+        label: 'Washington',
+    },
+    {
+        id: 'lb1-wv',
+        label: 'West Virginia',
+    },
+    {
+        id: 'lb1-wi',
+        label: 'Wisconsin',
+    },
+    {
+        id: 'lb1-wy',
+        label: 'Wyoming',
+    },
+];