feat(opacity-checkerboard): adding new component

[vjosyula]

Description

Related issue(s)

Motivation and context

How has this been tested?

• Test case 1
  1. Go here
  2. Do this
• Test case 2
  1. Go here
  2. 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

• I have signed the Adobe Open Source CLA.
• My code follows the code style of this project.
• If my change required a change to the documentation, I have updated the documentation in this pull request.
• 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.

[github-actions]

Branch Preview

• Documentation Site
• Storybook

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]

Tachometer results

Currently, no packages are changed by this PR...

[Westbrook]

Is there an issue where you’ve outlined the goals, API, and usage of an addition like this?

[Westbrook]

There's still no issue or consumption instructions in this change. Please add that somewhere before I can productively review these changes.

[jenndiaz]

I worked on the CSS for this component, just wanted to share the context I have. It is not in the design docs site but is in contributions (https://spectrum-contributions.corp.adobe.com/page/opacity-checkerboard-beta/)

This component is used by Swatch, ColorSlider, Thumbnail, and ColorHandle to display alpha transparency.
Here is the PR on spectrum-css to add and implement the component: adobe/spectrum-css#1916

[Westbrook]

@jenndiaz based off of the info in that PR, I'm not sure that building this as a custom element is the right call here. This seems like it is more of a shared CSS rule(s) rather than shared functionality.

@vjosyula could you look into leveraging this similar to how the clear-button package or the various icon styles? We've got Office Hours this Wednesday at 8am ET, if you wanted to discuss that path more closely.

[Westbrook]

Great start. If we had docs, I'd be happy to merge to main with the couple of notes here. A project branch path with actual implementation to educate the documentation process also works great here. Feel free to take which ever path you're more comfortable with here.

[Rajdeepc]

@Westbrook I have updated the docs with the usage part to the actual documentation. Let me know if you are expecting any more changes on this.

[Westbrook]

My question here is do we find this page helpful to a developer looking to leverage this new feature?

For instance, in #3507 it's noted that this feature is not currently leveraged in that pattern. If we were to ask the contributor there to leverage this, would the above link be enough for them to do so?

[Rajdeepc]

I noticed clear button is not added as a part of the SWC components list, is there any specific reason we are adding opacity Checkerboard?
If we want to add this in the component list, we can create an example like Clear button inside either of ColorHandle, ColorSlider, Swatch and Thumbnail or in all of them and add it as usage examples.
Some specs will be required to achieve this.
cc @jnjosh

[Westbrook]

Most times when there is documentation missing (which is too often), it happens because no one ever asked for it loud enough. I'd much rather documentation be missing than not really usable, but the line there is much more personal that I can really define. If we chose to exclude this from the docs, we could remove the README.md, and then the contents are no longer at question.

I'd like to say that I specifically chose not to include Clear Button in the docs because "it's only ever used in the Clear Button element", but I'd be lying if I said I had thought that far ahead. The CSS values are not documented, and if we intended for them to be used in apps, then we should absolutely get an issue open to expand the docs to include that. What I can say, the Clear Button and Close Button package are primarily left overs from a time when we couldn't consume more than one CSS package in a single SWC package (previously they were all part of the Button package from CSS, which is why the custom element definitions are where they are). It might be time to deprecate those packages and resume consume the CSS for them directly in Button, where Clear Button and Close Button are documented as custom elements.

As a consumer of SWC, I do know that we've copy/pasted the previous opacity CSS into other projects in the past, which points to me wanting the contents of this package documented at some point. I don't want to block this from moving forward, so I'll follow your lead here, either remove the README.md so the package is not included in the docs or expand the README.md so that usage instructions and the like are included, and we can get this merged. Sound good?

[Rajdeepc]

Most times when there is documentation missing (which is too often), it happens because no one ever asked for it loud enough. I'd much rather documentation be missing than not really usable, but the line there is much more personal that I can really define. If we chose to exclude this from the docs, we could remove the README.md, and then the contents are no longer at question.

I'd like to say that I specifically chose not to include Clear Button in the docs because "it's only ever used in the Clear Button element", but I'd be lying if I said I had thought that far ahead. The CSS values are not documented, and if we intended for them to be used in apps, then we should absolutely get an issue open to expand the docs to include that. What I can say, the Clear Button and Close Button package are primarily left overs from a time when we couldn't consume more than one CSS package in a single SWC package (previously they were all part of the Button package from CSS, which is why the custom element definitions are where they are). It might be time to deprecate those packages and resume consume the CSS for them directly in Button, where Clear Button and Close Button are documented as custom elements.

As a consumer of SWC, I do know that we've copy/pasted the previous opacity CSS into other projects in the past, which points to me wanting the contents of this package documented at some point. I don't want to block this from moving forward, so I'll follow your lead here, either remove the README.md so the package is not included in the docs or expand the README.md so that usage instructions and the like are included, and we can get this merged. Sound good?

Yup I think as this opacity-checkerboard can be used in above mentioned components, keeping the README.md and create a usage section will be helpful and a future proof solution. I will get this plan out to @jnjosh and have someone from the team start working on this. Thanks
@Westbrook Is it okay to merge this without README.md and then create a parallel issue to work on the usage documentation?

[Westbrook]

Please move this from the packages directory to the tools directory.

[Westbrook]

Made some nuanced changes to the docs site to better outline what this does for others.

Also, it seems like you never ran yarn to install the package and build the spectrum-*.css file, but I'm not sure.

See the changes here.

Thanks for getting this together! Hopefully this means that we can see this leveraged in some patterns, soon?