From 7fb09322540b39d34609f0eaa94f0057de19cb34 Mon Sep 17 00:00:00 2001
From: Stephane Comeau <scomea@microsoft.com>
Date: Tue, 31 Aug 2021 23:22:14 -0700
Subject: [PATCH] style update

---
 .../src/picker/fixtures/picker.html           | 12 ++++++++
 .../src/picker/picker-list-item.styles.ts     | 27 +++++++++++++++++-
 .../src/picker/picker-list.styles.ts          |  8 +++---
 .../src/picker/picker-menu-option.styles.ts   | 28 ++++++++++++++++++-
 .../src/picker/picker-menu.styles.ts          |  1 +
 .../src/picker/picker.stories.ts              | 28 ++++++++++++++++++-
 .../src/picker/picker.styles.ts               |  2 +-
 7 files changed, 98 insertions(+), 8 deletions(-)

diff --git a/packages/web-components/fast-components/src/picker/fixtures/picker.html b/packages/web-components/fast-components/src/picker/fixtures/picker.html
index 9a7aaf9f836..b0df3f61711 100644
--- a/packages/web-components/fast-components/src/picker/fixtures/picker.html
+++ b/packages/web-components/fast-components/src/picker/fixtures/picker.html
@@ -72,5 +72,17 @@ <h2>Multiple items, limit to 3</h2>
         label="Select people"
     ></fast-picker>
 
+    <h2>Custom content templates</h2>
+    <fast-picker
+        id="customtemplatepicker"
+        default-selection=""
+        selection=""
+        options="apples,oranges,bananas,pears,pineapples,strawberries"
+        no-suggestions-text="No suggestions available"
+        suggestions-available-text="Suggestions available"
+        loading-text="Loading"
+        label="Select some things"
+    ></fast-picker>
+
     <div style="height: 400px; opacity: 0;"></div>
 </fast-design-system-provider>
diff --git a/packages/web-components/fast-components/src/picker/picker-list-item.styles.ts b/packages/web-components/fast-components/src/picker/picker-list-item.styles.ts
index bef7d27e639..7ae5bb3efca 100644
--- a/packages/web-components/fast-components/src/picker/picker-list-item.styles.ts
+++ b/packages/web-components/fast-components/src/picker/picker-list-item.styles.ts
@@ -66,4 +66,29 @@ export const pickerListItemStyles: (
 :host([aria-selected="true"]) {
     background: ${accentFillActive};
     color: ${foregroundOnAccentActive};
-}`.withBehaviors(forcedColorsStylesheetBehavior(css``));
+}`.withBehaviors(
+        forcedColorsStylesheetBehavior(
+            css`
+                :host {
+                    border-color: transparent;
+                    forced-color-adjust: none;
+                    color: ${SystemColors.ButtonText};
+                    fill: currentcolor;
+                }
+
+                :host(:not([aria-selected="true"]):hover),
+                :host([aria-selected="true"]) {
+                    background: ${SystemColors.Highlight};
+                    color: ${SystemColors.HighlightText};
+                }
+
+                :host([disabled]),
+                :host([disabled]:not([aria-selected="true"]):hover) {
+                    background: ${SystemColors.Canvas};
+                    color: ${SystemColors.GrayText};
+                    fill: currentcolor;
+                    opacity: 1;
+                }
+            `
+        )
+    );
diff --git a/packages/web-components/fast-components/src/picker/picker-list.styles.ts b/packages/web-components/fast-components/src/picker/picker-list.styles.ts
index 7182ecac926..f8ac66174fe 100644
--- a/packages/web-components/fast-components/src/picker/picker-list.styles.ts
+++ b/packages/web-components/fast-components/src/picker/picker-list.styles.ts
@@ -64,22 +64,22 @@ export const pickerListStyles: (
             border-color: ${accentFillActive};
         }
 
-        ::focus-within[role="combobox"] {
+        :focus-within[role="combobox"] {
             border-color: ${focusStrokeOuter};
             box-shadow: 0 0 0 1px ${focusStrokeOuter} inset;
         }
     `.withBehaviors(
         forcedColorsStylesheetBehavior(
             css`
-                :hover[role="combobox"] {
+                [role="combobox"]:active {
                     background: ${SystemColors.Field};
                     border-color: ${SystemColors.Highlight};
                 }
-                :focus-within:enabled[role="combobox"] {
+                [role="combobox"]:focus-within {
                     border-color: ${SystemColors.Highlight};
                     box-shadow: 0 0 0 1px ${SystemColors.Highlight} inset;
                 }
-                input::placeholder {
+                input:placeholder {
                     color: ${SystemColors.GrayText};
                 }
             `
diff --git a/packages/web-components/fast-components/src/picker/picker-menu-option.styles.ts b/packages/web-components/fast-components/src/picker/picker-menu-option.styles.ts
index 115880fe80c..ed7ce7f6008 100644
--- a/packages/web-components/fast-components/src/picker/picker-menu-option.styles.ts
+++ b/packages/web-components/fast-components/src/picker/picker-menu-option.styles.ts
@@ -5,6 +5,7 @@ import {
     forcedColorsStylesheetBehavior,
     FoundationElementDefinition,
 } from "@microsoft/fast-foundation";
+import { SystemColors } from "@microsoft/fast-web-utilities";
 import {
     accentFillActive,
     bodyFont,
@@ -66,4 +67,29 @@ export const pickerMenuOptionStyles: (
     color: ${foregroundOnAccentActive};
 }
 
-`.withBehaviors(forcedColorsStylesheetBehavior(css``));
+`.withBehaviors(
+        forcedColorsStylesheetBehavior(
+            css`
+                :host {
+                    border-color: transparent;
+                    forced-color-adjust: none;
+                    color: ${SystemColors.ButtonText};
+                    fill: currentcolor;
+                }
+
+                :host(:not([aria-selected="true"]):hover),
+                :host([aria-selected="true"]) {
+                    background: ${SystemColors.Highlight};
+                    color: ${SystemColors.HighlightText};
+                }
+
+                :host([disabled]),
+                :host([disabled]:not([aria-selected="true"]):hover) {
+                    background: ${SystemColors.Canvas};
+                    color: ${SystemColors.GrayText};
+                    fill: currentcolor;
+                    opacity: 1;
+                }
+            `
+        )
+    );
diff --git a/packages/web-components/fast-components/src/picker/picker-menu.styles.ts b/packages/web-components/fast-components/src/picker/picker-menu.styles.ts
index 25696f7e71c..d85f2604edb 100644
--- a/packages/web-components/fast-components/src/picker/picker-menu.styles.ts
+++ b/packages/web-components/fast-components/src/picker/picker-menu.styles.ts
@@ -39,6 +39,7 @@ export const pickerMenuStyles: (
             width: 100%;
             max-height: 100%;
             min-height: 58px;
+            box-sizing: border-box;
             flex-direction: column;
             overflow-y: auto;
             overflow-x: hidden;
diff --git a/packages/web-components/fast-components/src/picker/picker.stories.ts b/packages/web-components/fast-components/src/picker/picker.stories.ts
index 6ce6575ce6d..2ea5b0f39cf 100644
--- a/packages/web-components/fast-components/src/picker/picker.stories.ts
+++ b/packages/web-components/fast-components/src/picker/picker.stories.ts
@@ -1,7 +1,33 @@
+import { html, ViewTemplate } from "@microsoft/fast-element";
+import addons from "@storybook/addons";
+import { STORY_RENDERED } from "@storybook/core-events";
+import { Picker } from "@microsoft/fast-foundation";
 import PickerTemplate from "./fixtures/picker.html";
 
+const optionContentsTemplate: ViewTemplate = html`
+    <div style="background: blue">
+        ${x => x.value}
+    </div>
+`;
+
+const itemContentsTemplate: ViewTemplate = html`
+    <div style="background: purple">
+        ${x => x.value}
+    </div>
+`;
+
+addons.getChannel().addListener(STORY_RENDERED, (name: string) => {
+    if (name.toLowerCase().startsWith("picker")) {
+        const customTemplatePicker = document.getElementById(
+            "customtemplatepicker"
+        ) as Picker;
+        customTemplatePicker.menuOptionContentsTemplate = optionContentsTemplate;
+        customTemplatePicker.listItemContentsTemplate = itemContentsTemplate;
+    }
+});
+
 export default {
     title: "Picker",
 };
 
-export const Picker = () => PickerTemplate;
+export const picker = () => PickerTemplate;
diff --git a/packages/web-components/fast-components/src/picker/picker.styles.ts b/packages/web-components/fast-components/src/picker/picker.styles.ts
index 188d0872fd5..b3577cc474b 100644
--- a/packages/web-components/fast-components/src/picker/picker.styles.ts
+++ b/packages/web-components/fast-components/src/picker/picker.styles.ts
@@ -50,4 +50,4 @@ export const pickerStyles: (
         .top {
             flex-direction: column-reverse;
         }
-    `.withBehaviors(forcedColorsStylesheetBehavior(css``));
+    `;