Wrap document capture error message at bounds of file input #4324
Conversation
app/javascript/packages/document-capture/components/acuant-capture.scss
Outdated
Show resolved
Hide resolved
**Why**: AirBnb base allow-lists an expected set of patterns for development, not including postcss.config.js. This configuration is both inextensible and excessively restrictive. The default should suffice for the essence of the rule. See: https://github.com/airbnb/javascript/blob/ee2f22a10c0b82a21eaa7743905712b6cb145fc2/packages/eslint-config-airbnb-base/rules/imports.js#L72-L94
**Why**: USWDS includes many comments in its output, which are not removed by sass-loader, even in either of "compressed" and "compact" output styles.
**Why**: Since these bundles are compiled separately from application SCSS, if bundled SCSS relies on design system functions or variables, they must be preloaded. Preloading at loader configuration avoids need to include in each bundle.
**Why**: Ensure error message wraps at bounds of the file input
aduth
force-pushed
the
aduth-error-wrap
branch
from
9986504
to
2df9969
Compare
For context, the updated messaging:
Annie and I chatted briefly about this, since part of my intention with these changes was to refactor the component slightly to allow it to be more reusable. A message like this is challenging, since not all usages of a file input component would need these specific file types. What we landed on was to allow the text to be customized where it's used, just like with other texts (hint, etc), so that we can still tailor the message appropriately to the hint. I've updated this in 669ff6d and 32cadc2. Here's how the customized message looks:
Since we'd still want a fallback text in case a customized message is not provided in other usage, I've left this from the initial implementation. Though based on @anniehirshman-gsa 's feedback, shortened it slightly in 06cff29 to allow it to fit on one line:
|
Co-authored-by: Annie Hirshman (she/her) <66273797+anniehirshman-gsa@users.noreply.github.com>
|
Thanks for catching that mistake @anniehirshman-gsa . Updated in 28ea67e. |
Why: Per design feedback.
Implementation Notes:
This turned out to require a messy cascade of unrelated revisions, triggered by a desire to adopt CSS imported via React components (introduced in #4260). I've made a point to describe the purpose of each of these changes in detailed commit history. Ultimately, it's made worse by outdated and implicit dependencies (see also 18F/identity-design-system#159).
I think these are worth working through in order to benefit from advantages of granular CSS bundles, but for this purpose of this requirement, it might be best to either...
app/assets/stylesheets/components/_file-input.scss)