Beta - repair site integration issues#4611
Conversation
mejiaj
left a comment
There was a problem hiding this comment.
Can we move the files in test-patterns to their respective component directories?
Since these aren't used on the website, we can create a test section for each component story. Similar to "Components/Form Inputs/Checklist" for example.
|
@mejiaj When you get a chance can you give this another look? I am still working on some final review for the USWDS-site sister PR but wanted to give you a chance to look at this if you had the time. I'll update you when USWDS-site is ready. |
mejiaj
left a comment
There was a problem hiding this comment.
Looking great so far, just a few minor comments and it's good to go.
|
|
||
| .usa-input--success { | ||
| @include u-border($theme-input-state-border-width, "success"); | ||
| } |
There was a problem hiding this comment.
It's a bit confusing, but I think this particular partial is for the text input component in Fractal, here.
This used to be in %block-input-styles. I think we're okay because I see this package imported in the following components:
- usa-hint
- usa-icon-list ❓- Why does this component require input styles?
- input prefix/suffix
- memorable date
- usa select
- time picker
- search
- footer
- fieldset
- validation
- form controls
There was a problem hiding this comment.
@mejiaj Do you know if any of these items need the usa-input--success class?
For reference, a little bit about my method:
To make the placeholder backwards compatible, I needed to:
- Remove the nested elements from the placeholder, which in this case was the usa-input--success class.
- Add the
usa-input--successrules back in where needed- To do this, I worked under the assumption that if there was an error class, there should also be a success. To find the error styles, I searched for error rules that have similar styling (in this case:
@include u-border($theme-input-state-border-width) and then included a sibling success class.
- To do this, I worked under the assumption that if there was an error class, there should also be a success. To find the error styles, I searched for error rules that have similar styling (in this case:
If you can think of a better method or know of other components that need the usa-input--success styles, please let me know and I'll add them in.
- Add default labels to `usa-password` component - Cleanup password input id references, replace old references with a variable - Pass data object explicitely to `usa-password`; might be a quirk with twigjs but empty object is passed if reference is used
| "toggle": { | ||
| "title": "Toggle password", | ||
| "aria_controls": password_id, | ||
| "text": { | ||
| "show": "Show password", | ||
| "hide": "Hide password" | ||
| } | ||
| } |
There was a problem hiding this comment.
Discovered this quirk while testing the sign-in-form component on Site.
What didn't work
Data isn't passed when building to HTML by reference in twig includes.
{% include "@components/_usa-password/src/usa-password.twig" with { toggle: password.toggle } %}What worked
You can still use includes, but you have to write out the data you want to pass.
{% include "@components/_usa-password/src/usa-password.twig" with {
toggle: {
…the data
}
} %}There was a problem hiding this comment.
Thanks for the digging into that @mejiaj. Much appreciated!
Description
After installing USWDS beta onto USWDS-site, we encountered some build and compilation errors. The issues and resolutions are outlined below.
For reference, this branch has been installed on USWDS-site branch
al-beta-integrationand is available for demo and testing in USWDS-Site PR #1493This is part 1/2 for the resolution of Issue 1491
(Part 2/2 can be found in USWDS-Site PR #1493)
File structure:
Errors discovered after running
npm run build:htmlusa-in file names inside /html-templates (ex: usa-usa-accordion)usa-xxwhen they weretemplates-usa-xxbeforeSass issues:
Issues discovered after running
gulp buildSass@importinstead of@forward.@importcan cause compilation issues with nested elements inside placeholders, where elements are not included in the compiled file.@importfor backwards compatibility@importis usedHTML build/Data issues:
Issues related to JSON files
currentclass instead of oneStorybook issues:
Issues discovered in Storybook