Releases: codeforamerica/uswds
Prevent and recover from errors pattern
Validation demo iteration, new screen and message updates
Validation Demo Updates
- New screen. Pre-validated, prevent errors screen example
- Update validation demo messages and no validation to form attributes
- Reduce the use of "Please" in validation messaging
Other fixes
- Make select overflow text truncate with an ellipsis (...)
- Add additional form attributes to the form card; method, post, novalidate, etc.
- Make the required asterisk hidden for screen readers in form components and remove the title attribute (until we can pass in a custom string for the value)
Validation demo iteration & enhancements
- Remove invalid form group demo until the recover from errors (validation) demo is ready
- Make invalid labels in the recover from errors (validation) demo accept focus
- Add specialized
cfa-sr-onlyutility that doesn't stretch the focus indicator - Accept HTML, remove the legend's required hint in the memorable date component
- Accept HTML in form labels, help text, and errors in other form element components
Validation demo iteration & additional fixes
- Update validation demo with new components and validation messaging
- Make the example layout accept the full title
- Fix ID assignment for some component demos
- Allow multiple errors for the memorable date fieldset and styling
- Document issue with styling the tag in its corresponding Sass file
- Coordinate form group and fieldset error states
- Remove alerts and skip nav from the toolbar component
- Update form card width, create setting and corresponding width utility
Display context for components and other updates
- WIP demo for recovering from errors (validation)
- Add body class configuration to example template
- Add context and component template information to rendered demos
- Place alert at the top of the toolbar contents order, include configurable skip nav
- Use th:block for Thymeleaf accordion item iteration
- Do not include package name in template path demonstration
New "about" and design docs
Added updated drafts for the about page and updated "getting started" documentation for designers and engineers.
v0.0.1 Alpha
This theme is the user interface of the Honeycrisp Design System applied to the U.S. Web Design System (USWDS). This means we’ve adapted the USWDS through various settings to emulate the client experience of Honeycrisp.
Earlier this year, the Safety Net Innovation Lab Platform team investigated migrating from Code for America’s internal design system, Honeycrisp, to the Federal Standard: the USWDS for the Form Flow Builder platform.
If you are designing and demonstrating applications today that will be built using the Form Flow Builder tomorrow, you won’t have to worry about the learning curve or overhead of fully adopting and configuring the USWDS. You will get an application that looks and works in a way we are used to, but you will be using the USWDS under the hood. It is an interstitial tool for Honeycrisp-based applications to adopt the USWDS fully.
Background
Here are a few highlights we found in our design system investigation.
A shared definition of a design system. Through collaboration with the platform team and designers, we came up with the following definition: a design system is… a foundation of shared practices and reusable components guided by design strategy and clear standards that can be used by and adapted to the evolving needs of products, services, and the teams using them.
Potential benefits of adopting the USWDS…
- Easier to customize
- Increased efficiency and autonomy
- More components
- Better product for partners
To take advantage of the USWDS while preserving the value of our internal design system…
- Create a Code for America USWDS theme using Honeycrisp design tokens (styles)
- Migrate the Form Flow Builder to the theme
Full Changelog: https://github.com/codeforamerica/uswds/commits/v0.0.1-alpha.0
Proof of concept for customizing USWDS
v0.0.0-1