docs(swatchgroup): refactor docs, add a11y section #5699
Conversation
|
📚 Branch Preview🔍 Visual Regression Test ResultsWhen a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
Deployed to Azure Blob Storage: If the changes are expected, update the |
Tachometer resultsCurrently, no packages are changed by this PR... |
| @@ -163,16 +174,16 @@ The `selected` property is always represented as an array, and as such an applic | |||
| > | |||
| <sp-swatch color="var(--spectrum-blue-500)"></sp-swatch> | |||
| <sp-swatch color="var(--spectrum-indigo-500)"></sp-swatch> | |||
| <sp-swatch color="var(--spectrum-purple-500)" selected></sp-swatch> | |||
There was a problem hiding this comment.
Oh I see. I guess we had multiple selecteds on the swatches in this group to illustrate that, at least initially if it's programmatically set that way, the array can still have multiple elements even in single select mode, even though you can only actually select one swatch.
I'm on board with removing this nuance in the example. It really doesn't feel much like a feature to me. Plus the selected array switches from two elements back to just one once you select a different swatch.
| <sp-swatch color="var(--spectrum-fuchsia-500)"></sp-swatch> | ||
| <sp-swatch color="var(--spectrum-magenta-500)"></sp-swatch> | ||
| </sp-swatch-group> | ||
| <div>Selected: [ ]</div> | ||
| <div> | ||
| Selected: [ "var(--spectrum-blue-500)", "var(--spectrum-purple-500)" ] |
There was a problem hiding this comment.
Would these arrays look better with code formatting? I'm on the fence; not sure I have a huge preference either way.
| ``` | ||
|
|
||
| </sp-tab-panel> | ||
| <sp-tab value="rounding">Rounding</sp-tab> |
There was a problem hiding this comment.
Do you think it is useful to show the rounding="none" option? According to the design guidelines, that's actually the preferred/default corner rounding for swatch groups. We haven't shown that anywhere in the docs, however.
Along the same lines, do you think it would be useful to show the border="none" option? I was just thinking we should show examples of all of the available values for those attributes, since it's not super clear just from the API table.
There was a problem hiding this comment.
It's unfortunate that the import of the border/rounding/shape types doesn't seem to work properly for the API table, since we end up with just the name of the type (for instance SwatchBorder) instead of the actual values it can take.
Either way, I think the swatch docs can do a lot of the heavy lifting for showing all the different features and options for a swatch and we don't necessarily need to repeat all of that, and it might be fine to just link to swatch somewhere around here instead of describing all the options again.
What I would want to show/tell for swatch group though would include:
- No rounding since the design docs state that that's the preference within a group
- Something about the border but I can't remember off the top of my head what's the most relevant within a swatch group... is the preference light border? Does it depend on the swatch's color contrast?
- The text here talks about how you can put a property on the swatch group and it overrides any properties applied to the swatch, so I think that's what I'd want to see in the code snippet(s). If we set one rounding on the swatch group, and another on the swatch, the one on the group should take precedence. If we set a size on the swatch group, and another on the swatch, the one on the group would take precedence, etc.
Rajdeepc
added
ready-for-merge
Description
Documentation audit for the swatch group component.
Related issue(s)
Author's checklist