Pull Request

📖 Description

As part of the next major release of fast-foundation, we wanted to do a complete review of the component templates and align the structure and naming as much as possible.

This PR unifies the naming and cleans up some test styles, especially around the recent update to the start and end slots.

Before on the left, update on the right. "C" = class, "P" = part, "R" = role, "S" = slot. 💔 = potentially style-breaking.

Simple containers

Accordion (migrated to #6796)

Remove unused <template> wrapper

Accordion

Complex containers

Breadcrumb (migrated to #6797)

Add "start" and "end" slots

Breadcrumb

Dialog

💔 Flatten "positioning-region" element to host

Dialog

Disclosure

Update to use "start" and "end" helpers
💔 Rename “disclosure” to “details”
💔 Rename “invoker” to “summary”
💔 Rename “disclosure-content” to “content”
Add part to "details", "summary", and "content"

Disclosure

Radio group

💔 Rename “positioning-region” to “control”
💔 Remove “horizontal” or “vertical” class, use attribute on host instead

Radio group

Toolbar

💔 Rename “positioning-region” to “control”

Toolbar

Inputs

Number field (migrated to #6798)

💔 Rename “control” to “field”
💔 Rename “root” to “control”
💔 Rename “controls” to “step-buttons”
💔 Rename “step-up-glyph” to “step-up-icon”
💔 Rename “step-down-glyph” to “step-down-icon”

Number field

Search (migrated to #6798)

💔 Rename “control” to “field”
💔 Rename “root” to “control”
💔 Remove “input-wrapper”
💔 Rename “clear-glyph” to “clear-icon”

Search

Switch (migrated to #6798)

💔 Rename “switch” to “control”
💔 Rename "switch" slot to "thumb"
Add default "thumb" with class and part

Switch

Text area (migrated to #6798)

💔 Rename “control” to “field”
Add wrapper element “control”
Add "start" and "end" slots

Text area

Text field (migrated to #6798)

💔 Rename “control” to “field”
💔 Rename “root” to “control”

Text field

Start, content, end pattern

Badge (migrated to #6797)

Add "start" and "end" slots
💔 Rename “control” to “content”

Badge

Breadcrumb item (migrated to #6797)

💔 Flatten “listitem” div to template

Breadcrumb item

Tab

Wrap default slot in “content”

Tab

Items with children

Accordion item (migrated to #6796)

💔 Rename “icon” to “expand-collapse-icon”
💔 Move “start”, "end", and "expand-collapse-icon" inside “button”
💔 Rename "region" class and part to "panel"

Accordion item

Combobox

💔 Rename “indicator” to “open-close-icon” (slot and wrapper)
💔 Move “open-close-icon” outside of “control” slot
💔 Move “end” slot before “open-close-icon”
💔 Rename "selected-value" to "field"
💔 Rename "control" slot to "field"

Combobox

Horizontal scroll (migrated to #6921)

💔 Rename "content-container" to "content"
💔 Rename "scroll-prev" to "scroll-previous"
💔 Remove "scroll-action" containers
Add default flipper content with parts

Horizontal scroll

Menu item

💔 Remove “input-container”
💔 Rename “checkbox” to “checkbox-indicator”
💔 Rename “radio” to “radio-indicator”
💔 Remove “expand-collapse-glyph-container”
💔 Rename “expand-collapse” to “submenu-icon”
💔 Rename “expand-collapse-indicator” to “submenu-icon”

Menu item

Select

💔 Align to ARIA spec
💔 Rename “indicator” to “open-close-icon” (slot and wrapper)
💔 Remove “control” container
💔 Move “open-close-icon” outside of “control” container
💔 Add "button" element inside "button-container"
💔 Move "start" and “end” slots into "button"
Add "listbox-container" slot

Select

Tree item

💔 Remove “positioning-region” element
💔 Rename “content-region” to “control”
💔 Rename “expand-collapse-glyph” to “expand-collapse-icon”
Add “content” wrapper around default slot

Tree item

Everything else

Avatar

💔 Remove "backplate" container
Add "content" wrapper around default slot

Avatar

Progress (migrated to #6799)

💔 Rename "progress" container to "determinate" and "indeterminate"
💔 Change “determinate” div to slot
💔 Remove “indeterminateIndicator2” option

Progress

Progress ring (migrated to #6799)

💔 Follow Progress structure

Progress ring

Slider (migrated to #6800)

💔 Rename “track-container” part to “track”
Add default "thumb" with class and part
💔 Remove duplicate class (orientation) on root template element

Slider

Slider label (migrated to #6800)

💔 Flatten “container” and “root”
💔 Rename “label” to “content”
Add part to "mark" and "content"

Slider label

👩‍💻 Reviewer Notes

Review the Storybook site, or the illustrations of the components before and after, compared to the changes in code.

📑 Test Plan

Tested via comparison against proposal and in Storybook.

✅ Checklist

General

[x] I have included a change request file using $ yarn change
[ ] I have added tests for my changes.
[x] I have tested my changes.
[x] I have updated the project documentation to reflect my changes.
[x] I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

[ ] I have added a new component
[x] I have modified an existing component

Aug 16 '22 23:08 bheston

I don't have strong opinions on how these should be structured. That's more the area of @chrisdholt. I'll just review the code itself independent of those decisions.