spectrum-web-components
spectrum-web-components copied to clipboard
adobe
refactor(field-group): use core tokens
Description
This updates the Fieldgroup component to use core tokens
Uses beta release. Hold for full release.
Related issue(s)
Motivation and context
How has this been tested?
- [ ] Test case 1
- Go here
- Do this
- [ ] Test case 2
- Go here
- Do this
Screenshots (if appropriate)
Types of changes
- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to change)
- [ ] Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)
Checklist
- [x] I have signed the Adobe Open Source CLA.
- [x] My code follows the code style of this project.
- [x] If my change required a change to the documentation, I have updated the documentation in this pull request.
- [x] I have read the CONTRIBUTING document.
- [ ] I have added tests to cover my changes.
- [ ] All new and existing tests passed.
- [ ] I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
Best practices
This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.
Branch Preview
Visual regression test results
When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
- High Contrast Mode | Medium | LTR
- Classic | Lightest | Medium | LTR
- Classic | Lightest | Medium | RTL
- Classic | Lightest | Large | LTR
- Classic | Lightest | Large | RTL
- Classic | Light | Medium | LTR
- Classic | Light | Medium | RTL
- Classic | Light | Large | LTR
- Classic | Light | Large | RTL
- Classic | Dark | Medium | LTR
- Classic | Dark | Medium | RTL
- Classic | Dark | Large | LTR
- Classic | Dark | Large | RTL
- Classic | Darkest | Medium | LTR
- Classic | Darkest | Medium | RTL
- Classic | Darkest | Large | LTR
- Classic | Darkest | Large | RTL
- Express | Lightest | Medium | LTR
- Express | Lightest | Medium | RTL
- Express | Lightest | Large | LTR
- Express | Lightest | Large | RTL
- Express | Light | Medium | LTR
- Express | Light | Medium | RTL
- Express | Light | Large | LTR
- Express | Light | Large | RTL
- Express | Dark | Medium | LTR
- Express | Dark | Medium | RTL
- Express | Dark | Large | LTR
- Express | Dark | Large | RTL
- Express | Darkest | Medium | LTR
- Express | Darkest | Medium | RTL
- Express | Darkest | Large | LTR
- Express | Darkest | Large | RTL
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Tachometer results
Chrome
action-bar permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 247 kB | 31.03ms - 31.19ms | - | unsure 🔍 -0% - +1% -0.10ms - +0.16ms |
| branch | 248 kB | 30.98ms - 31.17ms | unsure 🔍 -1% - +0% -0.16ms - +0.10ms |
- |
action-menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 616 kB | 189.40ms - 192.17ms | - | unsure 🔍 -2% - +0% -3.90ms - +0.28ms |
| branch | 616 kB | 191.03ms - 194.15ms | unsure 🔍 -0% - +2% -0.28ms - +3.90ms |
- |
card permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 395 kB | 76.07ms - 77.35ms | - | unsure 🔍 -1% - +1% -0.85ms - +0.83ms |
| branch | 395 kB | 76.17ms - 77.27ms | unsure 🔍 -1% - +1% -0.83ms - +0.85ms |
- |
field-group permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 304 kB | 240.43ms - 244.18ms | - | unsure 🔍 -2% - +0% -4.50ms - +0.56ms |
| branch | 305 kB | 242.58ms - 245.97ms | unsure 🔍 -0% - +2% -0.56ms - +4.50ms |
- |
illustrated-message permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 296 kB | 37.41ms - 37.67ms | - | unsure 🔍 -1% - +0% -0.26ms - +0.11ms |
| branch | 297 kB | 37.49ms - 37.74ms | unsure 🔍 -0% - +1% -0.11ms - +0.26ms |
- |
menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 314 kB | 216.64ms - 220.36ms | - | unsure 🔍 -2% - +1% -4.05ms - +1.30ms |
| branch | 315 kB | 217.95ms - 221.80ms | unsure 🔍 -1% - +2% -1.30ms - +4.05ms |
- |
overlay permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 351 kB | 67.94ms - 68.79ms | - | unsure 🔍 -1% - +1% -0.91ms - +0.53ms |
| branch | 351 kB | 67.97ms - 69.13ms | unsure 🔍 -1% - +1% -0.53ms - +0.91ms |
- |
picker permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 459 kB | 660.18ms - 681.73ms | - | unsure 🔍 -3% - +2% -17.70ms - +14.27ms |
| branch | 459 kB | 660.87ms - 684.48ms | unsure 🔍 -2% - +3% -14.27ms - +17.70ms |
- |
popover permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 244 kB | 28.13ms - 28.32ms | - | faster ✔ 0% - 1% 0.03ms - 0.38ms |
| branch | 244 kB | 28.28ms - 28.58ms | slower ❌ 0% - 1% 0.03ms - 0.38ms |
- |
radio permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 284 kB | 85.76ms - 87.05ms | - | faster ✔ 3% - 5% 2.48ms - 4.28ms |
| branch | 285 kB | 89.16ms - 90.42ms | slower ❌ 3% - 5% 2.48ms - 4.28ms |
- |
slider permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 347 kB | 131.33ms - 133.73ms | - | unsure 🔍 -1% - +1% -1.56ms - +1.81ms |
| branch | 347 kB | 131.22ms - 133.58ms | unsure 🔍 -1% - +1% -1.81ms - +1.56ms |
- |
split-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 552 kB | 2024.86ms - 2028.21ms | - | unsure 🔍 -0% - +0% -3.12ms - +1.30ms |
| branch | 552 kB | 2026.00ms - 2028.89ms | unsure 🔍 -0% - +0% -1.30ms - +3.12ms |
- |
tooltip permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 250 kB | 28.24ms - 28.43ms | - | unsure 🔍 -1% - +0% -0.28ms - +0.14ms |
| branch | 251 kB | 28.22ms - 28.59ms | unsure 🔍 -0% - +1% -0.14ms - +0.28ms |
- |
Firefox
action-bar permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 247 kB | 136.68ms - 155.92ms | - | unsure 🔍 -8% - +8% -12.12ms - +12.12ms |
| branch | 248 kB | 138.92ms - 153.68ms | unsure 🔍 -8% - +8% -12.12ms - +12.12ms |
- |
action-menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 616 kB | 608.17ms - 626.35ms | - | unsure 🔍 -1% - +2% -8.08ms - +15.04ms |
| branch | 616 kB | 606.63ms - 620.93ms | unsure 🔍 -2% - +1% -15.04ms - +8.08ms |
- |
card permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 395 kB | 246.19ms - 258.45ms | - | unsure 🔍 -3% - +3% -7.77ms - +8.65ms |
| branch | 395 kB | 246.41ms - 257.35ms | unsure 🔍 -3% - +3% -8.65ms - +7.77ms |
- |
field-group permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 304 kB | 1045.04ms - 1064.16ms | - | unsure 🔍 -1% - +2% -12.16ms - +16.84ms |
| branch | 305 kB | 1041.36ms - 1063.16ms | unsure 🔍 -2% - +1% -16.84ms - +12.16ms |
- |
illustrated-message permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 296 kB | 120.68ms - 132.44ms | - | unsure 🔍 -11% - +3% -15.29ms - +4.25ms |
| branch | 297 kB | 124.28ms - 139.88ms | unsure 🔍 -3% - +12% -4.25ms - +15.29ms |
- |
menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 314 kB | 757.22ms - 776.10ms | - | unsure 🔍 -1% - +2% -10.90ms - +13.58ms |
| branch | 315 kB | 757.52ms - 773.12ms | unsure 🔍 -2% - +1% -13.58ms - +10.90ms |
- |
overlay permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 351 kB | 262.75ms - 275.69ms | - | unsure 🔍 -2% - +4% -5.44ms - +10.92ms |
| branch | 351 kB | 261.48ms - 271.48ms | unsure 🔍 -4% - +2% -10.92ms - +5.44ms |
- |
picker permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 459 kB | 1820.80ms - 1847.96ms | - | unsure 🔍 -1% - +1% -26.98ms - +13.58ms |
| branch | 459 kB | 1826.02ms - 1856.14ms | unsure 🔍 -1% - +1% -13.58ms - +26.98ms |
- |
popover permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 244 kB | 117.84ms - 140.16ms | - | unsure 🔍 -14% - +9% -19.19ms - +12.51ms |
| branch | 244 kB | 121.08ms - 143.60ms | unsure 🔍 -10% - +15% -12.51ms - +19.19ms |
- |
radio permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 284 kB | 356.26ms - 367.18ms | - | unsure 🔍 -4% - +0% -14.63ms - +0.27ms |
| branch | 285 kB | 363.83ms - 373.97ms | unsure 🔍 -0% - +4% -0.27ms - +14.63ms |
- |
slider permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 347 kB | 447.95ms - 466.77ms | - | faster ✔ 1% - 6% 2.43ms - 29.49ms |
| branch | 347 kB | 463.61ms - 483.03ms | slower ❌ 0% - 6% 2.43ms - 29.49ms |
- |
split-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 552 kB | 2245.77ms - 2270.27ms | - | unsure 🔍 -1% - +1% -22.76ms - +14.20ms |
| branch | 552 kB | 2248.47ms - 2276.13ms | unsure 🔍 -1% - +1% -14.20ms - +22.76ms |
- |
tooltip permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 250 kB | 119.39ms - 131.21ms | - | unsure 🔍 -6% - +7% -7.84ms - +8.16ms |
| branch | 251 kB | 119.76ms - 130.52ms | unsure 🔍 -7% - +6% -8.16ms - +7.84ms |
- |
Summary of Changes Impacting Failures
There are two failure patterns on field group which are expected given that the markup for field group has been updated to allow for top label and side label variants in addition to vertical and horizontal layouts.
Changes impacting these failures are:
- Addition of Label and Helptext to Fieldgroup
- Label within Fieldgroup has two layout variants
- top label ('spectrum-FieldGroup--toplabel')
- side label ('spectrum-FieldGroup--sidelabel')
- Addition of a nested parent div (class name 'spectrum-FieldGroupInputLayout') containing the field items.
- 'spectrum-FieldGroupInputLayout' inherits the horizontal and vertical positioning of Fieldgroup items from its parent div modifier classes, 'spectrum-FieldGroup spectrum-FieldGroup--vertical' and 'spectrum-FieldGroup spectrum-FieldGroup--horizontal' (UPDATE)
- The additional nested div is necessary to control the layout of field items separately from the field group label
UPDATE: The initial PR applied the vertical and horizontal layout modifier classes to the new nested div ('spectrum-FieldGroupInputLayout'), which was not ideal. An update was made after the initial VRTs to ensure the layout of field items is inherited from the modifier class as applied to the top level parent container (base class name 'spectrum-FieldGroup'). All modifier classes for all 4 layout variations can now be applied to the parent container:
- spectrum-FieldGroup spectrum-FieldGroup--toplabel spectrum-FieldGroup--vertical
- spectrum-FieldGroup spectrum-FieldGroup--toplabel spectrum-FieldGroup--horizontal
- spectrum-FieldGroup spectrum-FieldGroup--sidelabel spectrum-FieldGroup--vertical
- spectrum-FieldGroup spectrum-FieldGroup--sidelabel spectrum-FieldGroup--horizontal
Failure Pattern 1: Expected, web-components needs update to markup
Assessment: Horizontal layout of field group items is shown in this failure with insufficient end margin on field group items. Margin-inline-end of each item should be --spectrum-spacing-300 or 16px. This margin is applied through the class of spectrum-FieldGroupInputLayout--horizontal on the parent div of the field items so that it will only impact horizontally aligned fieldgroups.
Failure Pattern 2: Expected, web-components needs update to markup
Assessment: The fields are failing to align vertically due to the missing vertical layout class. A class of spectrum-FieldGroupInputLayout--vertical must be applied to the parent div of the field items so they will align flex column instead of flex row.
@Westbrook it looks like the markup needs to be updated so that each fieldgroup has the correct layout and styling for vertical and horizontal variations. Field group items need a wrapping div of <div class="spectrum-FieldGroupInputLayout spectrum-FieldGroupInputLayout--vertical"> or <div class="spectrum-FieldGroupInputLayout spectrum-FieldGroupInputLayout--horizontal">. Please let me know if I can do anything to help with this.
Please take a look at https://github.com/adobe/spectrum-web-components/blob/main/packages/field-group/src/spectrum-config.js#L22-L33 where you should be able to update to selector values for the new classes names. You'll need to run yarn to ensure the new code is built before further testing and/or committing that update.
Please take a look at https://github.com/adobe/spectrum-web-components/blob/main/packages/field-group/src/spectrum-config.js#L22-L33 where you should be able to update to
selectorvalues for the new classes names. You'll need to runyarnto ensure the new code is built before further testing and/or committing that update.
I can see now the error is on my end - I applied the horizontal and vertical modifier classes to a child div (.spectrum-FieldGroupInputLayout) when they should be applied to the parent div instead (.spectrum-FieldGroup). I'm going to update the component and come back and run this again.
This is a revised assessment of the VRT failures in Fieldgroup. After the initial assessment, it was decided that Fieldgroup was intended to have a default layout featuring vertically aligned fields. This is a design change noted at https://spectrum.adobe.com/page/checkbox-group/ and https://spectrum.adobe.com/page/radio-group/ (screenshots included below).
Failure Pattern 1: Expected due to design change
All remaining failures are due to the default layout of fieldgroup having been changed from horizontal to vertical. The following are screenshots from spectrum.adobe.com specifying this change.
This has been merged in the CSS repo, and the full release has been published: @spectrum-css/[email protected]
