Skip to content

Fix Process List "Big" variant showing connected line#357

Merged
aduth merged 1 commit intomainfrom
aduth-fix-process-list-big-connnected
Jun 16, 2023
Merged

Fix Process List "Big" variant showing connected line#357
aduth merged 1 commit intomainfrom
aduth-fix-process-list-big-connnected

Conversation

@aduth
Copy link
Contributor

@aduth aduth commented May 26, 2023

Merges to (blocked by) #356

Fixes an issue where Process List "Big" variant would show with the connected line when not rendered in prose content.

Issue can be seen here ("Big" should not show line): https://idp.dev.identitysandbox.gov/components/inspect/process_list/preview

Issue can't be seen here, since design system documentation is shown in .usa-prose: https://design.login.gov/components/process-list/#big

The underlying issue is a CSS specificity conflict, where the styles responsible for unsetting the border width were only strong enough to override the previous border width styling when rendered inside .usa-prose, but not when rendered outside .usa-prose. The changes here make it so that the "Big" border is only applied to the connected process list.

Testing Instructions:

  1. Go to https://federalist-340d8801-aa16-4df5-ad22-b1e3e731098e.sites.pages.cloud.gov/preview/18f/identity-design-system/aduth-fix-process-list-big-connnected/process-list/#big
  2. Observe the Big Process list shows without border
  3. In DevTools console, enter document.querySelector('.usa-prose').classList.remove('usa-prose')
  4. Observe the Big Process list still shows without border

Base automatically changed from aduth-override-src to main June 9, 2023 19:54
@aduth aduth requested a review from a team June 16, 2023 13:55
@aduth aduth force-pushed the aduth-fix-process-list-big-connnected branch from 26d996b to 68d4255 Compare June 16, 2023 14:05
@aduth aduth force-pushed the aduth-fix-process-list-big-connnected branch from 68d4255 to dfffaec Compare June 16, 2023 14:07
@eric-gade
Copy link

@aduth I think the federalist link for testing the fix per the instructions expired

Copy link

@eric-gade eric-gade left a comment

Choose a reason for hiding this comment

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

code changes look good to me

@aduth
Copy link
Contributor Author

aduth commented Jun 16, 2023

@aduth I think the federalist link for testing the fix per the instructions expired

Thanks for catching! It got outdated in some of the path shuffling with #358. I updated the link in the original comment.

@eric-gade
Copy link

Ok sweet, and the live test is working on my end. All looks good.

Copy link
Contributor

@zachmargolis zachmargolis left a comment

Choose a reason for hiding this comment

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

LGTM

@aduth aduth merged commit 1246ad9 into main Jun 16, 2023
@aduth aduth deleted the aduth-fix-process-list-big-connnected branch June 16, 2023 16:24
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