spectrum-web-components
spectrum-web-components copied to clipboard
adobe
Finalize Tree View implementation.
Description
This has had a prerelease at https://www.npmjs.com/package/@spectrum-web-components/tree-view.
In that this has been pre-released already, I think it makes sense to get it into a more official "beta" situation and add it to the library for tighter scrutiny. If that makes sense as a path forward, I can update the Golden Images here so that CI should pass.
- add Tree View pattern, previously review at #1478
- add Tree View multi-select support #1423
- add docs
- https://westbrook-treeview--spectrum-web-components.netlify.app/components/tree-view/
- https://westbrook-treeview--spectrum-web-components.netlify.app/components/tree-view-heading/
- https://westbrook-treeview--spectrum-web-components.netlify.app/components/tree-view-item/
- add tests
- prep for release
- based on https://www.w3.org/TR/wai-aria-practices-1.2/#TreeView
Related issue(s)
- fixes #1222
Motivation and context
Spectrum coverage
How has this been tested?
- [ ] Test case 1
- Go here
- Experiment with the demos
- Compare their functionality to https://www.w3.org/TR/wai-aria-practices-1.2/#TreeView
Types of changes
- [x] New feature (non-breaking change which adds functionality)
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.
- [x] I have added tests to cover my changes.
- [x] All new and existing tests passed.
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:
- 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}
A details slot (just after the label) will allow to add some details/actions to the item. Some examples include:
File size
Favorites/Bookmarks
Adding the content directly into the default slot (which is label) makes it almost impossible to align, so a dedicated slot would be very helpful.
A
detailsslot (just after the label) will allow to add some details/actions to the item. Some examples include:
This seems like a good idea, but it not likely to be part of an initial shipment of this pattern as it is not represented upstream in the Spectrum Design spec. We'll raise this with their team and see whether they are interested in pursuing this.
I see that there is now an optional Actions area to which I referred as "details" slot. I don't know if it was there from the beginning.
@sorinsarca the upstream spec changing a good amount is one of many reasons work here has paused. It’s not likely we will return to this until late August to September when there is updated input from the design and CSS teams.
@ranjeet-choudhary ~Hi! CSS team has migrated this component to Core Tokens, but the previous issues still need to be addressed as of 23 days ago. I just followed up with @pfulton on the status of this.~
UPDATE: The CSS team JUST released a new version of the TreeView CSS which includes several bug fixes and enhancements! :)
