Skip to content

Commit

Permalink
Merge pull request #2812 from department-of-veterans-affairs/remove-v…
Browse files Browse the repository at this point in the history 
…1-example-2802

Removes v1 examples. Standardizes error handling on hint text guidance in form fields. [Fixes #2802]
  • Loading branch information
@humancompanion-usds
humancompanion-usds authored May 17, 2024
2 parents 959fb4c + 62e1a01 commit 654da3e
Show file tree
Hide file tree
Showing 26 changed files with 262 additions and 397 deletions.
98 changes: 25 additions & 73 deletions src/_about/whats-new.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,61 +16,68 @@ title: What’s new?
uswds
>
<h2 slot="headline">
v1 components will be deprecated on May 3, 2024
v1 components have now been deprecated
</h2>
<div>
<p className="vads-u-margin-y--0">
All V1 components will be officially retired and no longer available for use by May 3, 2024. Teams that have chosen to opt out of migrating to v3 components will be automatically opted in on this date. <a href="{{ site.baseurl }}/about/developers/using-web-components#uswds-v1-to-v3-migration">Learn how to migrate a component</a>.
If your team is still using a v1 component, instances will be flagged in the Collab Cycle and may be considered launch blocking. <a href="{{ site.baseurl }}/about/developers/using-web-components#uswds-v1-to-v3-migration">Learn how to migrate a component</a>.
</p>
</div>
</va-alert>

## April 2024
The team continued to synch to USWDS v3 and updated and fixed v3 components while the Figma Library continued to be built out.

### New features and compopnents
The team continued to synch to USWDS v3 and updated and fixed v3 components while the Figma Library continued to be built out.

### New features and components

* Icon Button Component (#2641)
* Formation Deprecation - Add 768px Breakpoint to CSS Library (#2533)
* Conversion to USWDS v3 Borderless table component (#1860)

### Updated components and bug fixes

* [Alert] - Remove background-only prop from Alert In Figma (#2394)
* Review & submit - fix accordion error styling (#77064)
* Injected Header - Add eslint warning & inline comments for React Modals that should not be touched (#2541)
* Remove V1 Memorable Date from Component Library and Storybook (#2660)
* Search Typeahead component does not close as expected when the component loads with a value prefilled (#2676)
* Formation Deprecation - Typography base size migration QA vets-website, content-build and vagov-content (#2525)
* Formation Deprecation - Typography base size migration QA component-library (#2566)
* Formation Deprecation - Typography base size migration QA component-library (#2566)
* Rename medium-mobile breakpoint to tablet (#2679)
* va-summary-box should require that a header be present (#2557)
* Update components section in Storybook(#2589)
* Update remaining Formation color variables to their css-library counterparts (#79489)
* Review & submit - fix accordion error styling(#77064)
* Update remaining Formation color variables to their css-library counterparts (#79489)
* Formation Deprecation - Migrate font settings from Formation to CSS Library (#2537)
* Remove Font Awesome icon overrides in USWDS components (#2577)
* Formation Deprecation - Migrate font settings from Formation to CSS Library (#2537)
* Remove Font Awesome icon overrides in USWDS components (#2577)

### Figma Library updates

* Figma rebuild: Templates - How to apply (Forms (#2464)
* Figma rebuild: Templates - Multiple Responses (Patterns) (#2457)
* Add missing icons for texting/mobile device and external link (#2381)
* Figma rebuild: Templates - Confirmation (Forms) (2466)
* Icons - Update Figma Components to use USWDS icons (#2624)

### Documentation updates

* Icon web component - Documentation (#2197)
* Create documentation about web component analytics (#2625)

### Accessibility updates
* Discovery: Research and propose aria-describedby alternatives
(#2619)

* Discovery: Research and propose aria-describedby alternatives(#2619)
* Icon web component - Accessibility review (#1365)
* va-select needs describedby property (#2587)


## March 2024

The team continued to synch to USWDS v3 and made updates and fixes to v3 components while the Figma Library continues to be built out.

### Updated components and bug fixes

* CSS-Library: add missing tokens after audit of formation (#1074)
* CSS-Library: update tokens missed in previous update (#1087)
* va-accordion: remove Font Awesome icon override (#1083)
Expand All @@ -80,21 +87,24 @@ The team continued to synch to USWDS v3 and made updates and fixes to v3 compone
* Updated all instances of color-primary-darker and color-primary-darkest in vets-website#2311

### Figma Library updates
* Added v3 Borderless Table Design to the component library (#1859)

* Added v3 Borderless Table Design to the component library (#1859)
* Add Military Address pattern to templates (#2329)
* Added Direct Deposit pattern to templates (#2453)
* Added Review form pattern to templates (#2465)
* Added Introduction pattern to templates (#2484)
* Added Service History pattern to templates ((#2460)
* Update the design system template screens for intro page (#2385)
* Added Introduction pattern to templates (#2484)
* Added Service History pattern to templates (#2460)
* Update the design system template screens for intro page (#2385)

### Documentation updates

* Fixed broken link to "linking to external link" info (#2552)
* Documented pattern for Ask users for a single response (#2611)
* Wrote guidance for icon migration (#2536)

## Leap Year February 2024
The team continued to deliver web components synced to USWDS v3 and made updates and fixes to v3 components while the Figma Library continues to be built out.

The team continued to deliver web components synced to USWDS v3 and made updates and fixes to v3 components while the Figma Library continues to be built out.

### New and updated components

Expand Down Expand Up @@ -129,7 +139,6 @@ Modal (#1634, #2449, #2450)
* va-alert and va-expandable-alert: Updated accessibility documentation for announcing alerts (role="alert") in #2145
* Design Libraries has been updated with Figma information in #2410


## Winter 2024

The team continued to deliver web components synced to USWDS v3 and brought the platform inline with the v3 color palette.
Expand Down Expand Up @@ -251,61 +260,4 @@ A long list of bug fixes can be found in our [component release notes](https://g
### Deprecated React components

* Table
* CheckboxGroup

## Spring 2023

The team has mainly focused on building out new variations of our form components based on USWDS v3. However, we've also made the changes below.

### New and updated components

* Updated [va-table to support pagination]({{ site.baseurl }}/components/table#with-pagination).
* Alert - Background-color-only with no icon is now deprecated in favor of the with icon variation. That variation is now known as [Alert - Slim]({{ site.baseurl }}/components/alert#examples---slim-alert), to align with the US Web Design System.
* Added va-card to [Card]({{ site.baseurl }}/components/card) in addition to new examples
* Added width variations to [Text input]({{ site.baseurl }}/components/form/text-input#widths) and [Number input]({{ site.baseurl }}/components/form/number-input#widths)
* Added fieldsets to [radio buttons]({{ site.baseurl }}/components/form/radio-button) and [checkboxes]({{ site.baseurl }}/components/form/checkbox#examples---group)
* Added [Form - Autosave]({{ site.baseurl }}/components/form/autosave)
* Added [Form - Need help?]({{ site.baseurl }}/components/form/need-help)
* Added [Form - Penalty notice]({{ site.baseurl }}/components/form/penalty-notice)
* Added [Form - Prefill]({{ site.baseurl }}/components/form/prefill)
* Added icon support to [va-accordion-item]({{ site.baseurl }}/components/accordion#icon-in-header)
* Added Tile variation to [va-checkbox]({{ site.baseurl }}/components/form/checkbox#tile)
* Added option for currency to [va-number-input]({{ site.baseurl }}/components/form/number-input#currency)
* Added extra hint text to [va-memorable-date]({{ site.baseurl }}/components/form/memorable-date#extra-hint-text)

See the [component-library release notes](https://github.com/department-of-veterans-affairs/component-library/releases) for more detailed issues on component fixes.

### Content style guide updates

* Added a [Specific topics and programs section]({{ site.baseurl }}/content-style-guide/specific-topics-and-programs/) with a [Payments and debts entry]({{ site.baseurl }}/content-style-guide/specific-topics-and-programs/payments-and-debts/).
* Revised our [Bulleted lists]({{ site.baseurl }}/content-style-guide/bulleted-lists) section. We now recommend always introducing bulleted lists with a full sentence. This helps with our efforts to translate content.
* Revised the [en dash entry]({{ site.baseurl }}/content-style-guide/punctuation#em-and-en-dashes-hyphens) in our [Punctuation section]({{ site.baseurl }}/content-style-guide/punctuation/). We now recommend avoiding en dashes for accessibility reasons. Screen readers don’t consistently announce them.
* Revised our [plain language section]({{ site.baseurl }}/content-style-guide/plain-language/).

### New entries in [Word list]({{ site.baseurl }}/content-style-guide/word-list/)

* Defense Department
* Department of Defense
* Edith Nourse Rogers STEM Scholarship
* PACT Act
* Service-connected disability rating

### Deprecated React components

* DropdownPanel
* ProgressButton
* RadioButtons
* SystemDownView

### Sketch Library updates

* Added the aforementioned new Form components (Autosave, Need help?, Penalty notice, Prefill)
* Templates library now uses the correct header and footer throughout.
* Reorganized patterns to match new naming and nav structure.
* Added sidenav mobile menu.


### Documentation updates

* Added Form templates for [How to apply]({{ site.baseurl }}/templates/forms/how-to-apply), [Introduction]({{ site.baseurl }}/templates/forms/introduction), [Review]({{ site.baseurl }}/templates/forms/review).
* Added variations to checkbox, number input, and memorable date.
* CheckboxGroup
19 changes: 7 additions & 12 deletions src/_components/accordion.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@ figma-link: https://www.figma.com/file/JDFpGLIojfuQwANXScQjqe/VADS-Component-Exa
uswds-v3: default
web-component: va-accordion
anchors:
- anchor: Examples - v3
- anchor: Examples - v1
- anchor: Examples
- anchor: Usage
- anchor: Code usage
- anchor: Content considerations
Expand All @@ -18,11 +17,11 @@ anchors:
- anchor: Component checklist
---

## Examples - v3
## Examples

### Default

{% include storybook-preview.html story="uswds-va-accordion--default" link_text="va-accordion v3 along with additional variations" %}
{% include storybook-preview.html story="uswds-va-accordion--default" link_text="va-accordion default" %}

### Bordered

Expand All @@ -46,10 +45,6 @@ anchors:

{% include storybook-preview.html story="uswds-va-accordion--icon-headers" link_text="va-accordion Icon in header" %}

## Examples - v1

{% include storybook-preview.html story="components-va-accordion--default" link_text="va-accordion v1 default and additional variations" %}

## Usage

<a class="vads-c-action-link--blue" href="https://designsystem.digital.gov/components/accordion/">Refer to the U.S. Web Design System for usage guidance</a>
Expand All @@ -59,13 +54,13 @@ anchors:
#### Additional uses of accordions

* **Organizing related sections of content to condense and chunk the content.** When you need to organize related sections of content into a smaller space use accordions to condense and group the content.
* **A series of content**: If you have a series of content in the body of a page and outside of a form or tool. For example, if you have a series of questions as part of an FAQ section or a set of options for payment that each have additional details.
* **A series of content**: If you have a series of content in the body of a page and outside of a form or tool. For example, if you have a series of questions as part of an FAQ section or a set of options for payment that each have additional details.
* **Content organized under a new heading.** If you have enough content that it makes sense to organize under a new heading that does not make sense under the same heading as the content nearby.
* **Reveal and compare relevant information.** When users need to reveal and compare relevant and related information accordions can make this easier.

#### Additional reasons to consider something else

* **Users would benefit from seeing additional context for a discrete piece of content.** Use the [Additional info]({{ site.baseurl }}/components/additional-info) component instead to leverage show/hide functionality, especially in a form.
* **Users would benefit from seeing additional context for a discrete piece of content.** Use the [Additional info]({{ site.baseurl }}/components/additional-info) component instead to leverage show/hide functionality, especially in a form.
* **Content that can be organized under the current heading.** Use the [Additional info]({{ site.baseurl }}/components/additional-info) component if you have additional content that provides context and makes sense under the same heading as the content nearby.
* **Required content**: If the majority of people need the content to accomplish the main task then it should not be hidden from view.

Expand All @@ -78,8 +73,8 @@ anchors:

## Content considerations

* Keep content succinct – accordion height will fluctuate depending on the length of the content.
* If the accordion has a subheading, it should not wrap to two lines.
* Keep content succinct – accordion height will fluctuate depending on the length of the content.
* If the accordion has a subheading, it should not wrap to two lines.
* In general, accordions should organize static content. Outside of the forms review page, where accordions are used to group sections of editable information, we discourage the use of form elements like radio buttons, checkboxes, and buttons within accordions. Interactive elements will not be focusable when the accordion is in a collapsed state.

## Accessibility considerations
Expand Down
21 changes: 2 additions & 19 deletions src/_components/additional-info.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,23 +19,6 @@ anchors:

## Examples

<va-alert
class="vads-u-margin-bottom--1"
close-btn-aria-label="Close notification"
disable-analytics="false"
full-width="false"
slim
status="warning"
uswds
visible="true"
>
<React.Fragment key=".0">
<p class="vads-u-margin-y--0">
The v1 and v3 variations of this component are identical as this component does not exist in the USWDS. Teams should switch to the v3 variation in preparation for global color and typography changes that the v3 variation will accept.
</p>
</React.Fragment>
</va-alert>

### Default

{% include storybook-preview.html story="uswds-va-additional-info--default" link_text="va-additional-info v3 default" %}
Expand All @@ -53,7 +36,7 @@ anchors:
* **Revealing helpful background information**: When you have additional information you want to convey about an application, process, or a step or question in a form that is not critical. This component should be used in instances where a more prominent [Alert]({{ site.baseurl }}/components/alert) would not be appropriate.
* **Clarifying outcomes for an input**: In cases where a person's input can have large or complicated impact on outcomes we use contextual help in Additional info to locate expanded guidance next to the relevant interaction.
* **Information closely tied to an input.** Use this component over an [Accordion]({{ site.baseurl }}/components/accordion) when the content is closely tied to a particular message or input on the screen. If the content is more tangentially related then use an Accordion.
* **Clarifying a form question**: If a form question needs clarification, and that clarification is brief, use Additional info. The lighter design prevents breaking up the visual progression as the user navigates the form. These can also serve as alternative to where accordions feel too heavy. If a form is a conversation, Additional info would be considered an aside. (This <a href="https://blog.navapbc.com/structuring-a-complex-eligibility-form-for-healthcare-gov-37d79a5ad6">case study on structuring complex health care questions for healthcare.gov</a> goes into greater detail on how to structure your form as a conversation.)
* **Clarifying a form question**: If a form question needs clarification, and that clarification is brief, use Additional info. The lighter design prevents breaking up the visual progression as the user navigates the form. These can also serve as alternative to where accordions feel too heavy. Be sure to review the [hint text guidance]({{ site.baseurl }}/components/form/label#hint-text) for implementation details. If a form is a conversation, Additional info would be considered an aside. (This <a href="https://blog.navapbc.com/structuring-a-complex-eligibility-form-for-healthcare-gov-37d79a5ad6">case study on structuring complex health care questions for healthcare.gov</a> goes into greater detail on how to structure your form as a conversation.)
* **Content that can be organized under the current heading.** If you have additional content that provides context and makes sense under the same heading as the content nearby.
* **Information not applicable to all**: Additional info can hide details that may not be applicable to all users.

Expand Down Expand Up @@ -81,7 +64,7 @@ The following are places where Additional info can be used:

* After a header (h2, h3, h4) or paragraph to provide orthogonal details or provide an answer to a common question.
* Within a [Process list]({{ site.baseurl }}/components/process-list) to shorten the length of content within a step.
* Within a [Form]({{ site.baseurl }}/components/form) to provide additional help text.
* Within a [Form]({{ site.baseurl }}/components/form/label#with-additional-info) to provide additional help text.
* Whenever there is a chance to enhance the understanding a user has about a particular choice.

### Design principles
Expand Down
24 changes: 6 additions & 18 deletions src/_components/alert.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,9 @@ figma-link: https://www.figma.com/file/JDFpGLIojfuQwANXScQjqe/VADS-Example-Libra
uswds-v3: default
web-component: va-alert
anchors:
- anchor: Examples - Standard - v3
- anchor: Examples - Standard properties - v3
- anchor: Examples - Slim alert - v3
- anchor: Examples - Standard - v1
- anchor: Examples - Slim alert - v1
- anchor: Examples - Standard
- anchor: Examples - Standard properties
- anchor: Examples - Slim alert
- anchor: Usage
- anchor: Code usage
- anchor: Content considerations
Expand All @@ -21,7 +19,7 @@ anchors:
- anchor: Component checklist
---

## Examples - Standard - v3
## Examples - Standard

### Informational alert (aka default)

Expand Down Expand Up @@ -65,7 +63,7 @@ Used to inform the user of the benefits of signing in. Mainly, that information

This variation can be used when pre-fill is not offered on a form (which should be avoided).

## Examples - Standard properties - v3
## Examples - Standard properties

### Heading level

Expand All @@ -80,22 +78,12 @@ This variation can be used when pre-fill is not offered on a form (which should
* Any alert variation can be dismissible, including slim alerts. This example shows an informational alert that can be dismissed.
* Allow a user to dismiss a notification wherever appropriate.

## Examples - Slim alert - v3
## Examples - Slim alert

Any style of alert box can be modified to be a Slim alert. The iconography for Slim alerts is consistent with the way icons are used in standard Alerts.

{% include storybook-preview.html story="uswds-va-alert--slim" height="352px" link_text="va-alert Slim" %}

## Examples - Standard - v1

### Informational alert (aka default)

{% include storybook-preview.html story="components-va-alert--default" link_text="va-alert informational v1 and additional variations" %}

## Examples - Slim alert - v1

{% include storybook-preview.html story="components-va-alert--slim" height="352px" link_text="va-alert Slim v3 and additional variations" %}

## Usage

<a class="vads-c-action-link--blue" href="https://designsystem.digital.gov/components/alert/">Refer to the U.S. Web Design System for usage guidance</a>
Expand Down
Loading

0 comments on commit 654da3e

Please sign in to comment.