fix(picker): add separate mod for label font-weight (#2079)

* fix(picker): update font weight to have separate mod for placeholder

* chore(picker): update storybook to use custom styles

components/picker/index.css

@@ -406,7 +406,7 @@ governing permissions and limitations under the License.
 
   font-size: var(--mod-picker-font-size, var(--spectrum-picker-font-size));
   line-height: var(--mod-picker-line-height, var(--spectrum-picker-line-height));
-
+  font-weight: var(--mod-picker-font-weight, var(--spectrum-picker-font-weight));
 
   text-overflow: ellipsis;
   text-align: start;
@@ -415,7 +415,7 @@ governing permissions and limitations under the License.
   margin-block-end: calc(var(--mod-picker-spacing-bottom-to-text, var(--spectrum-picker-spacing-bottom-to-text)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));
 
   &.is-placeholder {
-    font-weight: var(--mod-picker-font-weight, var(--spectrum-picker-font-weight));
+    font-weight: var(--mod-picker-placeholder-font-weight, var(--spectrum-picker-font-weight));
     font-style: var(--mod-picker-placeholder-font-style, var(--spectrum-picker-placeholder-font-style));
     transition: color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-in-out;
 

components/picker/metadata/mods.md

@@ -46,6 +46,7 @@
 | `--mod-picker-inline-size`                             |
 | `--mod-picker-line-height`                             |
 | `--mod-picker-placeholder-font-style`                  |
+| `--mod-picker-placeholder-font-weight`                 |
 | `--mod-picker-spacing-bottom-to-text`                  |
 | `--mod-picker-spacing-edge-to-disclosure-icon`         |
 | `--mod-picker-spacing-edge-to-disclosure-icon-quiet`   |

components/picker/stories/template.js

@@ -1,6 +1,8 @@
 import { html } from "lit";
 import { useArgs } from "@storybook/client-api";
 import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 
 import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js";
 import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
@@ -10,7 +12,7 @@ import { Template as HelpText } from "@spectrum-css/helptext/stories/template.js
 
 import "../index.css";
 
-export const PickerButton = ({
+export const Picker = ({
 	rootClass = "spectrum-Picker",
 	size = "m",
 	labelPosition,
@@ -55,6 +57,7 @@ export const PickerButton = ({
 			})}
 			?disabled=${isDisabled}
 			aria-haspopup="listbox"
+			style=${ifDefined(styleMap(customStyles))}
 			@click=${(e) => {
 				updateArgs({ isOpen: !isOpen });
 			}}
@@ -141,7 +144,7 @@ export const Template = ({
 			: ""}
 		${labelPosition == "left" ?
 			html`<div style="display: inline-block">
-				${PickerButton({
+				${Picker({
 					...globals,
 					rootClass,
 					size,
@@ -163,7 +166,7 @@ export const Template = ({
 			</div>
 			`
 		: 
-			PickerButton({
+			Picker({
 				...globals,
 				rootClass,
 				size,
@@ -176,7 +179,7 @@ export const Template = ({
 				isDisabled,
 				isReadOnly,
 				customClasses,
-				customStyles,
+				customStyles: customStyles,
 				content,
 				iconName,
 				labelPosition,