Skip to content

feat(fieldlabel)!: s2 migration #2569

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Mar 11, 2024
Merged

feat(fieldlabel)!: s2 migration #2569

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
87f10fb
feat(fieldlabel): medium as default and 100 sizing tokens
jawinn Feb 22, 2024
ebda48d
feat(fieldlabel): use correct font size tokens
jawinn Feb 22, 2024
0968501
refactor(fieldlabel): remove deprecated mods
jawinn Feb 22, 2024
8f8111f
docs(fieldlabel): spectrum 2 noted in migration notes
jawinn Feb 26, 2024
c1d9b15
docs(fieldlabel): form - docs update and regenerate mods
jawinn Feb 26, 2024
a23ffd9
fix(fieldlabel): rename mod property referencing global token
jawinn Feb 26, 2024
62046e0
feat(fieldlabel): use correct sizing tokens
jawinn Feb 26, 2024
886fa06
style(fieldlabel): applying linter formatting adjustments
jawinn Feb 26, 2024
391a6d0
docs(fieldlabel): document asterisk icon size
jawinn Feb 26, 2024
4e703d8
feat(fieldlabel): black and white static color variants
jawinn Feb 27, 2024
35eb6f1
build(fieldlabel): specify s2 tokens release for dependency
jawinn Mar 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 40 additions & 46 deletions components/fieldlabel/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down Expand Up @@ -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 */
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
}
}
93 changes: 67 additions & 26 deletions components/fieldlabel/metadata/fieldlabel.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -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" />
Expand All @@ -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" />
Expand All @@ -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>
11 changes: 11 additions & 0 deletions components/fieldlabel/metadata/form.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down
Loading