feat(fieldlabel): black and white static color variants

Add classes for static colors, as defined on the designs. And adds
examples of these variants to the documentation.

Author: jawinn

components/fieldlabel/index.css

@@ -106,6 +106,14 @@ governing permissions and limitations under the License.
   text-align: end;
 }
 
+.spectrum-FieldLabel--staticBlack {
+  color: var(--spectrum-black);
+}
+
+.spectrum-FieldLabel--staticWhite {
+  color: var(--spectrum-white);
+}
+
 /********* Form *********/
 .spectrum-Form {
   --spectrum-tableform-item-block-spacing: var(--spectrum-spacing-300);

components/fieldlabel/metadata/fieldlabel.yml

@@ -8,8 +8,10 @@ sections:
     description: |
       ### x/x/2024 - Version 8.0.0
       #### Spectrum 2 release
-      Field label now uses Spectrum 2 tokens and specifications. The medium size styles are used by default, so the `spectrum-FieldLabel--sizeM` class is no longer necessary and has been removed.
-      The mod custom property `--mod-disabled-content-color` has been renamed to `--mod-field-label-disabled-content-color`.
+      Field label now uses Spectrum 2 tokens and specifications. A few notable changes and additions:
+      - The medium size styles are used by default, so the `spectrum-FieldLabel--sizeM` class is no longer necessary and has been removed.
+      - Two variant classes have been added for black and white static colors.
+      - The mod custom property `--mod-disabled-content-color` has been renamed to `--mod-field-label-disabled-content-color`.
 
       ### 11/13/2020 - Version 3.0.0
       #### T-shirt sizing
@@ -132,3 +134,29 @@ examples:
       <div class="spectrum-Textfield is-disabled">
         <input id="lifestory8" name="field" value="" class="spectrum-Textfield-input" disabled>
       </div>
+
+  - id: fieldlabel-static-colors
+    name: Static colors
+    markup: |
+      <div style="background-color: rgb(181, 209, 211); color: rgb(181, 209, 211); padding: 15px 20px;">
+        <label for="lifestory6" class="spectrum-FieldLabel spectrum-FieldLabel--staticBlack">
+          Static black label with example background<svg
+            class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
+            <use xlink:href="#spectrum-css-icon-Asterisk100" />
+          </svg>
+        </label>
+        <div class="spectrum-Textfield">
+          <input id="lifestory6" name="field" value="" class="spectrum-Textfield-input">
+        </div>
+      </div>
+      <div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); padding: 15px 20px;">
+        <label for="lifestory7" class="spectrum-FieldLabel spectrum-FieldLabel--staticWhite">
+          Static white label with example background<svg
+            class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
+            <use xlink:href="#spectrum-css-icon-Asterisk100" />
+          </svg>
+        </label>
+        <div class="spectrum-Textfield">
+          <input id="lifestory7" name="field" value="" class="spectrum-Textfield-input">
+        </div>
+      </div>

components/fieldlabel/stories/fieldlabel.stories.js

@@ -1,4 +1,4 @@
-// Import the component markup template
+import { html } from "lit";
 import { Template } from "./template";
 
 export default {
@@ -54,6 +54,17 @@ export default {
 			},
 			control: "boolean",
 		},
+		staticColor: {
+			name: "Static color",
+			description: "Variants that can be used when a Field label needs to be placed on top of a colored background or a visual.",
+			type: { name: "string" },
+			table: {
+				type: { summary: "string" },
+				category: "Component",
+			},
+			options: ["black", "white"],
+			control: "select",
+		},
 	},
 	args: {
 		rootClass: "spectrum-FieldLabel",
@@ -100,4 +111,22 @@ WrappingAndRequired.args = {
 	alignment: "left",
 	isRequired: true,
 	style: { width: "200px" },
+};
+
+export const StaticColors = (args) => html`
+	${Template({
+		...args,
+		label: "The black static color class used on a label marked as required",
+		staticColor: "black",
+	})}
+	${Template({
+		...args,
+		label: "The white static color class used on a label marked as required",
+		staticColor: "white",
+	})}
+`;
+StaticColors.storyName = "Static colors";
+StaticColors.args = {
+	alignment: "left",
+	isRequired: true,
 };

components/fieldlabel/stories/template.js

@@ -1,7 +1,8 @@
 import { html } from "lit";
 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 { styleMap } from "lit/directives/style-map.js";
+import { capitalize, lowerCase } from "lodash-es";
 
 import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
 
@@ -17,6 +18,7 @@ export const Template = ({
 	alignment,
 	isDisabled,
 	isRequired,
+	staticColor,
 	style = {},
 	...globals
 }) => {
@@ -40,13 +42,14 @@ export const Template = ({
 			iconName = "Asterisk100";
 	}
 
-	return html`
+	const labelMarkup = html`
 		<label
 			class=${classMap({
 				[rootClass]: true,
 				[`${rootClass}--size${size?.toUpperCase()}`]:
 					typeof size !== "undefined",
 				[`${rootClass}--${alignment}`]: typeof alignment !== "undefined",
+				[`${rootClass}--static${capitalize(lowerCase(staticColor))}`]: typeof staticColor !== "undefined",
 				"is-disabled": isDisabled,
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
@@ -64,4 +67,18 @@ export const Template = ({
 				: ""}
 		</label>
 	`;
+
+	// When using the static color variants, wrap the label in an example element with a background color.
+	return !staticColor
+		? labelMarkup
+		: html`
+			<div
+				style=${styleMap({
+					padding: "1rem",
+					backgroundColor: staticColor === "white" ? "rgb(15, 121, 125)" : staticColor === "black" ? "rgb(181, 209, 211)" : undefined,
+				})}
+			</div>
+				${labelMarkup}
+			</div>
+		`;
 };