Skip to content

fix(opacitycheckboard): add to component stories #2056

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Aug 2, 2023

Conversation

jenndiaz
Copy link
Contributor

@jenndiaz jenndiaz commented Jul 27, 2023

Description

  • Adds opacity checkerboard to the stories for Swatch, ColorHandle, and Thumbnail

  • Adjusts markup for Thumbnail component

  • adds transparent story to swatch

  • OpacityCheckerboard:
    The OpacityCheckerboard story template is modified, so it can accept content as an arg and exclude the wrapper, so that it can be used in the ColorSlider story, and other components' stories. Also makes some other minor adjustments and adds a story. @jawinn

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Test outline:

Open the storybook for the Thumbnail component:

  • All variants should load without issue
  • checkerboard opacity displayed when appropriate (should match [Production Docs Site]

Open the Docs Site for the Thumbnail component:

  • Opacity checkerboard should be displayed on the Disabled, Landscape, Portrait, Layer Selected, and sized variants (should match Production Docs Site)

Open the storybook for the Swatch component:

  • All variants should load without issue
  • checkerboard opacity displayed on the transparent variant

Open the storybook for the ColorHandle component:

  • All variants should load without issue
  • checkerboard opacity should be displayed

Open the storybook for the Opacity Checkerboard component:

  • All variants should load without issue
  • position control should accept any valid CSS background property and displayed component should adjust

All tests completed by @jawinn

Regression testing

Validate:

  1. A legacy documentation page (such as accordion), including:
  • The page renders correctly
  • The page is accessible
  • The page is responsive
  1. A migrated documentation page (such as action group), including:
  • The page renders correctly
  • The page is accessible
  • The page is responsive

All regression tests completed by @jawinn

Screenshots

To-do list

  • I have read the contribution guidelines.

  • I have updated relevant storybook stories and templates.

  • I have tested these changes in Windows High Contrast mode.

  • If my change impacts other components, I have tested to make sure they don't break.

  • If my change impacts documentation, I have updated the documentation accordingly.

  • ✨ This pull request is ready to merge. ✨

@github-actions
Copy link
Contributor

github-actions bot commented Jul 27, 2023

🚀 Deployed on https://pr-2056--spectrum-css.netlify.app

@github-actions github-actions bot temporarily deployed to pull request July 27, 2023 21:10 Inactive
@github-actions github-actions bot temporarily deployed to pull request July 27, 2023 22:00 Inactive
@github-actions github-actions bot temporarily deployed to pull request July 28, 2023 15:31 Inactive
@jenndiaz jenndiaz marked this pull request as ready for review July 28, 2023 15:58
@github-actions github-actions bot temporarily deployed to pull request July 28, 2023 16:40 Inactive
jawinn and others added 5 commits July 31, 2023 12:44
- Modify storybook template so that it can be imported and used by other
  components' stories. Allow passing in content, and excluding the
  storybook testing wrapper markup.
- Moves defaultValue to args, as that syntax has been deprecated in
  newer versions of Storybook:
  https://storybook.js.org/docs/react/api/arg-types#defaultvalue
- Adds a new story with a centered background position mod, and
  clarifies that the arg is changing the mod.
@pfulton pfulton force-pushed the jenndiaz/add-opacitycheckboard-to-stories branch from 7308bbc to 246a196 Compare July 31, 2023 16:44
@github-actions github-actions bot temporarily deployed to pull request July 31, 2023 16:52 Inactive
@pfulton pfulton added the run_vrt For use on PRs looking to kick off VRT label Jul 31, 2023
@github-actions github-actions bot removed the run_vrt For use on PRs looking to kick off VRT label Jul 31, 2023
Copy link
Collaborator

@jawinn jawinn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some of the Chromatic VRTs are showing the color handle moving position in a few different components.

jawinn added 2 commits August 1, 2023 13:55
Colorhandle had lost some of the classes being passed to it. They needed
to be passed down to the new OpacityCheckerboard story template.
@github-actions github-actions bot temporarily deployed to pull request August 1, 2023 18:06 Inactive
@jawinn jawinn added the run_vrt For use on PRs looking to kick off VRT label Aug 1, 2023
@github-actions github-actions bot removed the run_vrt For use on PRs looking to kick off VRT label Aug 1, 2023
@github-actions github-actions bot temporarily deployed to pull request August 2, 2023 18:38 Inactive
@pfulton pfulton merged commit a1411f6 into main Aug 2, 2023
@pfulton pfulton deleted the jenndiaz/add-opacitycheckboard-to-stories branch August 2, 2023 18:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants