From 13041bff9abb4b6fab09616e8e52c83a5d9c6427 Mon Sep 17 00:00:00 2001
From: Josh Winn <965114+jawinn@users.noreply.github.com>
Date: Mon, 11 Mar 2024 13:04:35 -0400
Subject: [PATCH] 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 | 86 ++++++++---------
components/fieldlabel/metadata/fieldlabel.yml | 93 +++++++++++++------
components/fieldlabel/metadata/form.yml | 11 +++
components/fieldlabel/metadata/mods.md | 40 ++++----
components/fieldlabel/package.json | 2 +-
.../fieldlabel/stories/fieldlabel.stories.js | 31 ++++++-
components/fieldlabel/stories/template.js | 21 ++++-
7 files changed, 187 insertions(+), 97 deletions(-)
diff --git a/components/fieldlabel/index.css b/components/fieldlabel/index.css
index fd4b63b2f43..e092a335028 100644
--- a/components/fieldlabel/index.css
+++ b/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,10 +164,10 @@ 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)));
}
}
}
@@ -181,6 +175,6 @@ governing permissions and limitations under the License.
/********* WHCM *********/
@media (forced-colors: active) {
.spectrum-FieldLabel {
- --highcontrast-disabled-content-color: GrayText;
+ --highcontrast-field-label-disabled-content-color: GrayText;
}
}
diff --git a/components/fieldlabel/metadata/fieldlabel.yml b/components/fieldlabel/metadata/fieldlabel.yml
index 4a1a2c3ab65..6840249ab12 100644
--- a/components/fieldlabel/metadata/fieldlabel.yml
+++ b/components/fieldlabel/metadata/fieldlabel.yml
@@ -6,7 +6,15 @@ sections:
This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here.
- 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
@@ -14,75 +22,82 @@ examples:
markup: |
-
S
+
Small
-
+
-
+
-
M (default)
+
Medium (default)
-
+
-
+
-
L
+
Large
-
+
-
+
-
XL
+
Extra large
-
+
-
+
- id: fieldlabel-standard
name: Standard
markup: |
-
+
-
+
- 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: |
-
+
- 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: |
-
+
- 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 `