Thanks to visit codestin.com
Credit goes to github.com

Skip to content

USWDS - Indeterminate Checkbox: Cleanup scss and stories#5650

Merged
thisisdano merged 9 commits intocheckbox-indeterminate-feature-branchfrom
cm-cleanup-scss-and-stories
Jan 22, 2024
Merged

USWDS - Indeterminate Checkbox: Cleanup scss and stories#5650
thisisdano merged 9 commits intocheckbox-indeterminate-feature-branchfrom
cm-cleanup-scss-and-stories

Conversation

@mahoneycm
Copy link
Contributor

@mahoneycm mahoneycm commented Nov 30, 2023 •
edited
Loading

Summary

Runs prettier and reorganizes storybook twig files to match existing variant patterns.

Breaking change

This is not a breaking change.

Related issue

Resolves #5658

Related pull requests

#5549
#5648

Preview link

Indeterminate checkbox story →
Indeterminate checkbox tile story →

Problem statement

Contributed work needed some minor adjustments to match USWDS patterns.

Solution

  1. Run prettier
  2. Create isolated indeterminate checkbox stories
  3. Remove indeterminate examples from pre-existing stories.

Major changes

Added indeterminate storybook control and stories to display the new variant.

Note

After discussion, we decided this qualified as a variant and not a test.

Testing and review

  1. Confirm there are no build errors.
  2. Confirm running npm run lint:sass does not flag any failures.
  3. Confirm npm run prettier does not introduce any changes.
  4. Existing checkbox stories matches develop.
  5. Confirm test stories match the existing pattern for test features.

@mahoneycm mahoneycm mentioned this pull request Nov 30, 2023
Merged
2 tasks
mejiaj
mejiaj suggested changes Dec 5, 2023
View reviewed changes
Copy link
Contributor

@mejiaj mejiaj left a comment •
edited
Loading

Choose a reason for hiding this comment

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

@mahoneycm thanks for the fixes. Is there an issue to tie this to? Can you add the preview links too?

Added a note related to treating this as a true variant instead of using test templates.

@mahoneycm
Copy link
Contributor Author

mahoneycm commented Dec 5, 2023

Update 12/5/23

  • New Issue created for this PR
  • Preview links updated
  • Indeterminate templates were moved out of the test directory

I included the twig files in the src directory. This matches the current pattern set by checkbox/radio as well as usa-collection and usa-process-list

I noticed other components, such as header or footer, use a nested folder pattern but each of those templates had their own json content files so it seemed uneccessary for these files. Let me know if you’d prefer them to live in their own folder(s)!

@mahoneycm mahoneycm requested a review from mejiaj December 5, 2023 20:57
@mahoneycm mahoneycm linked an issue Dec 11, 2023 that may be closed by this pull request
USWDS - Checkbox: Cleanup indeterminate story + run prettier #5658
Closed
@mahoneycm mahoneycm modified the milestone: uswds 3.8.0 Jan 4, 2024
@mahoneycm mahoneycm mentioned this pull request Jan 4, 2024
Closed
3 tasks
amyleadem
amyleadem suggested changes Jan 9, 2024
View reviewed changes
Copy link
Contributor

@amyleadem amyleadem left a comment

Choose a reason for hiding this comment

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

Thanks for cleaning this up @mahoneycm. I added a question below about the need for breaking indeterminate styles into their own story. We don't currently do that for the checked state so I am curious about the reasoning. Curious to hear your thoughts.

I ran the following tests:

  • Confirm npm start runs without error
  • Confirm npm run test runs without error
  • Confirm the indeterminate state styles match the checked state when $theme-body-background-color is set to a dark color (I tested with ”ink”)
  • Confirm that running prettier does not generate new fixes

mejiaj
mejiaj approved these changes Jan 9, 2024
View reviewed changes
Copy link
Contributor

@mejiaj mejiaj left a comment

Choose a reason for hiding this comment

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

LGTM, no issues with code.

Noting file size for the new assets:

  1. checkbox-indeterminate.svg - 657B
  2. checkbox-indeterminate-alt.svg - 636B

@mahoneycm
Copy link
Contributor Author

mahoneycm commented Jan 10, 2024

Update 1/10/24

To easily compare states, I've added a checked checkbox to the indeterminate stories. I also added a storybook control to activate an indeterminate checkbox on other stories as well. In my opinion, this follows similar patterns for other states such as the disabled state for this component.

I also removed the indeterminate twig files in favor of using the standard template with the indeterminate state permanently set to true.

PR summary also adjusted to remove "test" references and the decision to treat this as a variant.

@mahoneycm mahoneycm requested a review from amyleadem January 10, 2024 15:20
amyleadem
amyleadem approved these changes Jan 18, 2024
View reviewed changes
Copy link
Contributor

@amyleadem amyleadem left a comment

Choose a reason for hiding this comment

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

The update looks great! I was able to easily perform visual comparisons in the stories. Thanks for updating that.

@mejiaj, any objections to this updated approach?

@mejiaj
Copy link
Contributor

mejiaj commented Jan 19, 2024

LGTM, thank you both

@mahoneycm mahoneycm requested a review from thisisdano January 22, 2024 15:50
@thisisdano thisisdano merged commit 2ee01fc into checkbox-indeterminate-feature-branch Jan 22, 2024
@thisisdano thisisdano deleted the cm-cleanup-scss-and-stories branch January 22, 2024 18:32
@mahoneycm mahoneycm mentioned this pull request Feb 23, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

3 more reviewers

@mejiaj mejiaj mejiaj approved these changes

@thisisdano thisisdano thisisdano approved these changes

@amyleadem amyleadem amyleadem approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

USWDS - Checkbox: Cleanup indeterminate story + run prettier

4 participants

@mahoneycm @mejiaj @thisisdano @amyleadem