feat(fieldlabel)!: s2 migration (#2569)

BREAKING CHANGE: uses Spectrum 2 tokens

Also:
* feat(fieldlabel): medium as default and 100 sizing tokens

- Use the correct "100" sized tokens for medium.
- Make medium styles the default, to conform with existing pattern.
  .spectrum-FieldLabel--sizeM class removed as it is no longer
  necessary.

* feat(fieldlabel): use correct font size tokens

The font-size tokens used for large and extra large needed to be shifted
up to match the s2 spec.

* refactor(fieldlabel): remove deprecated mods

Remove renamed mods marked as deprecated for S2 release.

* docs(fieldlabel): spectrum 2 noted in migration notes

Updates some docs and adds migration notes. Clarifies some docs around
"left" and "right", and fixes duplicate ID warnings from examples code.

* docs(fieldlabel): form - docs update and regenerate mods

Add migration guide section to "Form", that currently lives within the
Field label component. Regenerates mods to include the removal of
deprecated renamed mods.

* fix(fieldlabel): rename mod property referencing global token

A mod custom property was referencing a global token instead of the
component itself. Renames this and adds a note to the migration guide.

* feat(fieldlabel): use correct sizing tokens

Use correct tokens for some large and extra large custom properties,
to matching with design.

* style(fieldlabel): applying linter formatting adjustments

Run linter fix on the fieldlabel component, which rearranges a few
declarations.

* docs(fieldlabel): document asterisk icon size

Add documentation about asterisk UI icon sizes specified on the design.
These sizes are already handled in the Storybook template, but were not
really explained to the user.

* 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.

* build(fieldlabel): specify s2 tokens release for dependency

Use Spectrum 2 version of tokens package in dependencies list.

components/fieldlabel/index.css

@@ -11,82 +11,72 @@ governing permissions and limitations under the License.
 */
 
 .spectrum-FieldLabel {
-  --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75);
-  --spectrum-fieldlabel-color: var(--spectrum-neutral-subdued-content-color-default);
-
+  --spectrum-fieldlabel-min-height: var(--spectrum-component-height-100);
+  --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-100);
+  --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
   --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium);
 
+  --spectrum-fieldlabel-font-size: var(--spectrum-font-size-100);
   --spectrum-fieldlabel-font-weight: var(--spectrum-regular-font-weight);
   --spectrum-fieldlabel-line-height: var(--spectrum-line-height-100);
   --spectrum-fieldlabel-line-height-cjk: var(--spectrum-cjk-line-height-100);
+
+  --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-medium);
+  --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
+
+  --spectrum-fieldlabel-color: var(--spectrum-neutral-subdued-content-color-default);
 }
 
 .spectrum-FieldLabel--sizeS {
   --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75);
   --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75);
   --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
-  --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75);
-
-  --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-small);
-  --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-100);
-
   --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small);
-}
 
-.spectrum-FieldLabel--sizeM {
-  --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75);
-  --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75);
-  --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
   --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75);
 
-  --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-medium);
-  --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
-
-  --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium);
+  --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-small);
+  --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-100);
 }
 
 .spectrum-FieldLabel--sizeL {
-  --spectrum-fieldlabel-min-height: var(--spectrum-component-height-100);
-  --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-100);
-  --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
-  --spectrum-fieldlabel-font-size: var(--spectrum-font-size-100);
-
-  --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-large);
-  --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
-
-  --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large);
-}
-
-.spectrum-FieldLabel--sizeXL {
   --spectrum-fieldlabel-min-height: var(--spectrum-component-height-200);
   --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-200);
   --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
+  --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large);
+
   --spectrum-fieldlabel-font-size: var(--spectrum-font-size-200);
 
-  --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-extra-large);
-  --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
+  --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-large);
+}
 
+.spectrum-FieldLabel--sizeXL {
+  --spectrum-fieldlabel-min-height: var(--spectrum-component-height-300);
+  --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-300);
+  --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
   --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-extra-large);
+
+  --spectrum-fieldlabel-font-size: var(--spectrum-font-size-300);
+
+  --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-extra-large);
 }
 
 .spectrum-FieldLabel {
   display: block;
+
   box-sizing: border-box;
   min-block-size: var(--mod-fieldlabel-min-height, var(--spectrum-fieldlabel-min-height));
-
   padding-block: var(--mod-field-label-top-to-text, var(--spectrum-fieldlabel-top-to-text)) var(--mod-field-label-bottom-to-text, var(--spectrum-fieldlabel-bottom-to-text));
   padding-inline: 0;
 
   font-size: var(--mod-fieldlabel-font-size, var(--spectrum-fieldlabel-font-size));
   font-weight: var(--mod-fieldlabel-font-weight, var(--spectrum-fieldlabel-font-weight));
-
   line-height: var(--mod-fieldlabel-line-height, var(--spectrum-fieldlabel-line-height));
+  color: var(--spectrum-fieldlabel-color);
 
   -webkit-font-smoothing: subpixel-antialiased;
   -moz-osx-font-smoothing: auto;
 
-  color: var(--spectrum-fieldlabel-color);
-
   /* CJK (Chinese, Japanese, and Korean) language support */
   &:lang(ja),
   &:lang(zh),
@@ -116,19 +106,25 @@ 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);
 
-  margin: 0;
   display: grid;
   grid-template-columns: var(--mod-form-grid-template-columns, auto auto);
-  inline-size: var(--mod-form-inline-size, fit-content);
+  row-gap: var(--mod-form-item-block-spacing, var(--spectrum-tableform-item-block-spacing));
   justify-content: start;
 
-  /* @deprecation --mod-tableform-item-block-spacing has been renamed to
-     --mod-form-item-block-spacing. The fallback will be removed in a future version. */
-  row-gap: var(--mod-form-item-block-spacing, var(--mod-tableform-item-block-spacing, var(--spectrum-tableform-item-block-spacing)));
+  inline-size: var(--mod-form-inline-size, fit-content);
+  margin: 0;
 }
 
 /* Row */
@@ -156,9 +152,7 @@ governing permissions and limitations under the License.
 
 /* Rows with stacked alignment */
 .spectrum-Form--labelsAbove {
-  /* @deprecation --mod-tableform-item-block-spacing-labels-above has been renamed to
-     --mod-form-item-block-spacing-labels-above. The fallback will be removed in a future version. */
-  --mod-form-item-block-spacing: var(--mod-form-item-block-spacing-labels-above, var(--mod-tableform-item-block-spacing-labels-above, var(--spectrum-spacing-200)));
+  --mod-form-item-block-spacing: var(--mod-form-item-block-spacing-labels-above, var(--spectrum-spacing-200));
   --mod-form-grid-template-columns: var(--mod-form-grid-template-columns-labels-above, auto);
 
   .spectrum-Form-item {
@@ -170,17 +164,17 @@ governing permissions and limitations under the License.
 .spectrum-FieldLabel,
 .spectrum-Form-itemLabel {
   &.is-disabled {
-    color: var(--highcontrast-disabled-content-color, var(--mod-disabled-content-color, var(--spectrum-disabled-content-color)));
+    color: var(--highcontrast-field-label-disabled-content-color, var(--mod-field-label-disabled-content-color, var(--spectrum-disabled-content-color)));
 
     .spectrum-FieldLabel-requiredIcon {
-      color: var(--highcontrast-disabled-content-color, var(--mod-disabled-content-color, var(--spectrum-disabled-content-color)));
+      color: var(--highcontrast-field-label-disabled-content-color, var(--mod-field-label-disabled-content-color, var(--spectrum-disabled-content-color)));
     }
   }
 }
 
 /********* WHCM *********/
 @media (forced-colors: active) {
   .spectrum-FieldLabel {
-    --highcontrast-disabled-content-color: GrayText;
+    --highcontrast-field-label-disabled-content-color: GrayText;
   }
 }

components/fieldlabel/metadata/fieldlabel.yml

@@ -6,83 +6,98 @@ sections:
       This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/fieldlabel/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
-      ### T-shirt sizing
+      ### x/x/2024 - Version 8.0.0
+      #### Spectrum 2 release
+      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
       Field label now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-FieldLabel--size*` class.
 examples:
   - id: fieldlabel-sizing
     name: Sizing
     markup: |
       <div class="spectrum-Examples">
         <div class="spectrum-Examples-item">
-          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Small</h4>
 
-          <label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeS">Life story</label>
+          <label for="lifestory-s" class="spectrum-FieldLabel spectrum-FieldLabel--sizeS">Life story</label>
           <div class="spectrum-Textfield">
-            <input id="lifestory" name="field" value="" class="spectrum-Textfield-input">
+            <input id="lifestory-s" name="field" value="" class="spectrum-Textfield-input">
           </div>
         </div>
         <div class="spectrum-Examples-item">
-          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Medium (default)</h4>
 
-          <label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Life story</label>
+          <label for="lifestory-m" class="spectrum-FieldLabel">Life story</label>
           <div class="spectrum-Textfield">
-            <input id="lifestory" name="field" value="" class="spectrum-Textfield-input">
+            <input id="lifestory-m" name="field" value="" class="spectrum-Textfield-input">
           </div>
         </div>
 
         <div class="spectrum-Examples-item">
-          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Large</h4>
 
-          <label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeL">Life story</label>
+          <label for="lifestory-l" class="spectrum-FieldLabel spectrum-FieldLabel--sizeL">Life story</label>
           <div class="spectrum-Textfield">
-            <input id="lifestory" name="field" value="" class="spectrum-Textfield-input">
+            <input id="lifestory-l" name="field" value="" class="spectrum-Textfield-input">
           </div>
         </div>
 
         <div class="spectrum-Examples-item">
-          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Extra large</h4>
 
-          <label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeXL">Life story</label>
+          <label for="lifestory-xl" class="spectrum-FieldLabel spectrum-FieldLabel--sizeXL">Life story</label>
           <div class="spectrum-Textfield">
-            <input id="lifestory" name="field" value="" class="spectrum-Textfield-input">
+            <input id="lifestory-xl" name="field" value="" class="spectrum-Textfield-input">
           </div>
         </div>
       </div>
   - id: fieldlabel-standard
     name: Standard
     markup: |
-      <label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Life story</label>
+      <label for="lifestory" class="spectrum-FieldLabel">Life story</label>
       <div class="spectrum-Textfield">
         <input id="lifestory" name="field" value="" class="spectrum-Textfield-input">
       </div>
 
-      <label for="lifestory2" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM is-disabled">Life story</label>
+      <label for="lifestory2" class="spectrum-FieldLabel is-disabled">Life story</label>
       <div class="spectrum-Textfield is-disabled">
         <input id="lifestory2" name="field" value="" class="spectrum-Textfield-input" disabled>
       </div>
   - id: fieldlabel-side-left
-    name: Left
-    description: A left aligned Field label.
+    name: Side label with left aligned text
+    description: Labels with either the `spectrum-FieldLabel--left` or `spectrum-FieldLabel--right` class are for positioning the label to the side (inline start) of the form field. The left class sets the text alignment to left.
     markup: |
-      <label for="lifestory3" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-FieldLabel--left" style="width: 72px">Life story</label>
+      <label for="lifestory3" class="spectrum-FieldLabel spectrum-FieldLabel--left" style="width: 72px">Life story</label>
 
       <div class="spectrum-Textfield spectrum-Textfield--multiline">
         <textarea id="lifestory3" name="field" value="" class="spectrum-Textfield-input"></textarea>
       </div>
   - id: fieldlabel-side-right
-    name: Right
-    description: A right aligned Field label.
+    name: Side label with right aligned text
+    description: With `spectrum-FieldLabel--right`, the side label is still positioned similarly to the left class, but with the text alignment set to right.
     markup: |
-      <label for="lifestory4" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-FieldLabel--right" style="width: 72px">Life story</label>
+      <label for="lifestory4" class="spectrum-FieldLabel spectrum-FieldLabel--right" style="width: 72px">Life story</label>
 
       <div class="spectrum-Textfield spectrum-Textfield--multiline">
         <textarea id="lifestory4" name="field" value="" class="spectrum-Textfield-input"></textarea>
       </div>
   - id: fieldlabel-required
     name: Required
-    description: A Field label for a required field can display either the text "(required)", or an asterisk. If using the asterisk icon, do not leave any space between the label text and the start of the `<svg>` element in the markup, so extra space is not added in addition to the inline margin.
+    description: |
+      A Field label for a required field can display either the text "(required)", or an asterisk.
+      
+      If using the asterisk icon, do not leave any space between the label text and the start of the `<svg>` element in the markup, so extra space is not added in addition to the inline margin. The following UI icon sizes are used for the asterisk:
+        - Asterisk100: Small and medium
+        - Asterisk200: Large
+        - Asterisk300: Extra large
+      
     markup: |
-      <label for="lifestory5" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">
+      <label for="lifestory5" class="spectrum-FieldLabel">
         Life story<svg
           class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
           <use xlink:href="#spectrum-css-icon-Asterisk100" />
@@ -92,15 +107,15 @@ examples:
         <input id="lifestory5" name="field" value="" class="spectrum-Textfield-input">
       </div>
 
-      <label for="lifestory6" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Life story (required)</label>
+      <label for="lifestory6" class="spectrum-FieldLabel">Life story (required)</label>
       <div class="spectrum-Textfield">
         <input id="lifestory6" name="field" value="" class="spectrum-Textfield-input">
       </div>
 
       <br/>
       <br/>
 
-      <label for="lifestory7" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-FieldLabel--left">
+      <label for="lifestory7" class="spectrum-FieldLabel spectrum-FieldLabel--left">
         Life story<svg
           class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
           <use xlink:href="#spectrum-css-icon-Asterisk100" />
@@ -110,7 +125,7 @@ examples:
         <textarea id="lifestory7" name="field" value="" class="spectrum-Textfield-input"></textarea>
       </div>
 
-      <label for="lifestory8" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM is-disabled">
+      <label for="lifestory8" class="spectrum-FieldLabel is-disabled">
         Life story<svg
           class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
           <use xlink:href="#spectrum-css-icon-Asterisk100" />
@@ -119,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/metadata/form.yml

@@ -1,5 +1,16 @@
 name: Form
 description: Form provides structure and spacing for your form fields.
+sections:
+  - name: Custom Properties API
+    description: |
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/fieldlabel/metadata/mods.md">here</a>.
+  - name: Migration Guide
+    description: |
+      ### x/x/2024 - Version 8.0.0
+      #### Spectrum 2 release
+      The renamed mod properties previously marked as deprecated have been removed:
+      - `--mod-tableform-item-block-spacing` has been renamed to `--mod-form-item-block-spacing`
+      - `--mod-tableform-item-block-spacing-labels-above` has been renamed to `--mod-form-item-block-spacing-labels-above`
 examples:
   - id: form-labels-left
     name: Standard - left-aligned text