Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Make USWDS v3 version the default for all web components except va-file-input #1082

Merged
merged 14 commits into from Mar 11, 2024
Merged

Make USWDS v3 version the default for all web components except va-file-input #1082

merged 14 commits into from Mar 11, 2024

Conversation

it-harrison
Copy link
Contributor

@it-harrison it-harrison commented Mar 8, 2024 •
edited

Chromatic

https://2405-iii--65a6e2ed2314f7b8f98609d8.chromatic.com

Description

This PR sets the default value for the uswds prop to true for all components with a v3 variant. It also makes adjustments to components that used composition with other components so that the correct version is used. Finally, it updates stories and moves up v3 stories to the top of the sidebar in Storybook.

Closes 2405

QA Checklist

  • Component maintains 1:1 parity with design mocks
  • Text is consistent with what's been provided in the mocks
  • Component behaves as expected across breakpoints
  • Accessibility expert has signed off on code changes (if applicable. If not applicable provide reason why)
  • Designer has signed off on changes (if applicable. If not applicable provide reason why)
  • Tab order and focus state work as expected
  • Changes have been tested against screen readers (if applicable. If not applicable provide reason why)
  • New components are covered by e2e tests; updates to existing components are covered by existing test suite
  • Changes have been tested in vets-website using Verdaccio (if applicable. If not applicable provide reason why)

Screenshots

Acceptance criteria

  • QA checklist has been completed
  • Screenshots have been attached that cover desktop and mobile screens

Definition of done

  • Documentation has been updated, if applicable
  • A link has been provided to the originating GitHub issue (or connected to it via ZenHub)

@it-harrison it-harrison added the major Major change in semantic versioning label Mar 10, 2024
@it-harrison it-harrison marked this pull request as ready for review March 11, 2024 14:37
@it-harrison it-harrison requested a review from a team as a code owner March 11, 2024 14:37
@it-harrison it-harrison changed the title initial commit set v3 as default for all web components Mar 11, 2024
@it-harrison it-harrison mentioned this pull request Mar 11, 2024
Closed
3 tasks
jamigibbs
jamigibbs reviewed Mar 11, 2024
View reviewed changes
packages/web-components/src/components/va-button/va-button.tsx
@@ -87,6 +90,14 @@ export class VaButton {
})
componentLibraryAnalytics: EventEmitter;

componentDidLoad() {
// check if the element has a class named uswds-false added from parent
if (this.el.classList.contains('uswds-false')) {
Copy link
Contributor

Choose a reason for hiding this comment

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

@it-harrison Do you mind adding some details here as a PR comment about why you're needing to do this?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@jamigibbs sure - there is a bug with Stencil in which an attribute set on a child component inside a parent does not get added to the rendered HTML. For instance, if we want the v1 version of va-button-pair and we set uswds="false" on VaButtonPair then, although the uswds prop is added to the child va-button components inside va-button-pair, when rendered the va-button elements will not have uswds="false". So it is necessary to add this attribute manually. When all v1 components have been decommissioned we can remove this code where it occurs.

@it-harrison it-harrison changed the title set v3 as default for all web components make v3 default for all web components Mar 11, 2024
@jamigibbs
Copy link
Contributor

Any idea why this component is hanging out at the bottom of the Storybook sidebar?

Screenshot 2024-03-11 at 10 51 30 AM

@it-harrison
Copy link
Contributor Author

Any idea why this component is hanging out at the bottom of the Storybook sidebar?

Screenshot 2024-03-11 at 10 51 30 AM

@jamigibbs there was a v1 version of statement-of-truth that should not be included - I removed it and tweaked the v3 story so it should be ok now

@it-harrison it-harrison merged commit 1f3b13d into main Mar 11, 2024
8 checks passed
@it-harrison it-harrison deleted the 2405-iii branch March 11, 2024 21:46
@jamigibbs jamigibbs changed the title make v3 default for all web components Make USWDS v3 version the default for all web components except va-file-input Mar 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jamigibbs jamigibbs jamigibbs approved these changes

@micahchiang micahchiang micahchiang approved these changes

Assignees
No one assigned
Labels
major Major change in semantic versioning
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Formation Deprecation - set uswds prop to true on all components
3 participants
@it-harrison @jamigibbs @micahchiang