🚀 Description

Dropdown currently relies on some private stuff in Tag that's specific to Dropdown.

Dropdown, for example, has a requirement to present Tags different visually when Dropdown is readonly. Tag is also configured by Dropdown to show pencil icon when a selected Dropdown Option is editable.

I talked to Design. There are no other use cases for these Tag features outside Dropdown. So I've copied Tag into Dropdown and removed the Dropdown-specific stuff from Tag.

Additionally:

Minor

Tag no longer supports a --max-inline-size custom property. Dropdown, to our knowledge, was the only user of it and no longer uses it. If you have a use case for --max-inline-size, let us know.

📋 Checklist

• I have followed the Contributing Guidelines.
• I have added tests to cover new or updated functionality.
• I have added or updated Storybook stories.
• I have localized new strings.
• I have followed the ARIA Authoring Practices Guide or met with the Accessibility Team.
• I have included a changeset.
• I have scheduled a design review.
• I have reviewed the Storybook and Visual Test Report links below.

🔬 Manual Testing

Dropdown

1. Check out this branch.
2. Navigate to Dropdown in Storybook.
3. Set multiple.
4. Select a few options.
5. Verify a tag is shown for each selected option.
6. Give the first selected option a long label.
7. Resize the viewport.
8. Verify tags truncate and move into overflow as needed.
9. Remove a tag by clicking its "X" button.
10. Verify the tag is removed and its corresponding option is deselected.
11. Make a selected option editable.
12. Verify the option's tag has a pencil icon.
13. Verify that clicking the pencil icon closes Dropdown and results in an "edit" event.
14. Verify that clicking a tag's label toggles Dropdown open and closed.
15. Select every option.
16. Use your keyboard to tab to each option's tag and press Enter or Space to remove each tag.
17. Verify the tags are removed and their corresponding options are deselected.
18. Also verify that focus correctly moved from one tag's removal button ("X") to the next or previous tag's removal button.

Tag

1. Check out this branch.
2. Navigate to Tag in Storybook.
3. Verify Tag's visuals and functionality.