Description:

Address blocks are status blocks of address content.
You can view the component here

The address block component in the sketch library, design.va.gov, and react library is out of sync.

These are the ways this component is not synced

The address block is not in the sketch library or react library. There is no documentation on how to use it on design.va.gov.

Complete the following tasks to synchronize component:

Sketch library: Add address component to the sketch library in the content presentation section
React library: Add address component to the react library
Design.va.gov Add documentation on how to use address component on this page

Bug Report

• I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

The second exception states to "Spell out ordinals up to tenth (first, second, third, etc.). Then use the style: 11th, 12th, etc."

Then in the "Like This" section, the example is:
All runners-up from 5th to 11th place will receive an honorable mention.

And in "Not Like This" the example follows the guidance:
All runners-up from fifth to 11th place will receive an honorable mention.
�

What I expected to happen

Guidance and examples should align

Reproducing

• Formation version: current
• Device: Macbook
• Browser: Chrome

Steps to reproduce:

1. visit https://design.va.gov/content-style-guide/numbers
2. review the exception guidance
3. review the examples

This update is for:

• Content style guide (but on Documentation section of design system)

What is the nature of this update?

On this page: https://design.va.gov/documentation/content-writers

And this page: https://design.va.gov/documentation/feedback

Please replace the content style guide mailto link with this snippet that enables subject line:

Email us at [email protected].

@rianfowler commented on Tue Jan 29 2019

• webfonts don't start loading until the CSS is processed which increases the time it takes for text to render on the page
• webfonts are blocking the rendering of text on the page
• our build process hashes the webfont assets even though they're static

@rianfowler commented on Fri Apr 05 2019

One quick fix might be to move the webfonts into a separate CSS file so they can be downloaded in parallel with the CSS.

Feature Request

• I’ve searched for any related issues and avoided creating a duplicate issue.

This update is for:

• Content styleguide
• Component
• Pattern
• Utility
• Other

What is the name

Modal component

What is the nature of this update?

• When to use
• When to use something else
• Code snippet
• Accessibility
• Research insight
• General documentation

Additional Context

The example shown when you click on Open Modal on https://design.va.gov/components/modal feels misaligned with the rest of the examples throughout the documentation. It feels as though it may not be intentional to have the alert component inside the modal component w/ a content block underneath, and the language in the example could be improved.

Perhaps this is exactly as intended, but felt another set of eyes on to confirm would be worthwhile.

Feature Request

Add simple version of error alert

• I’ve searched for any related issues and avoided creating a duplicate issue.

Is this feature request relating to an existing component or utility? Please describe.

• Component/utility name: Sketch Library — Error alert - large

Do you have a suggestion for a new component or utility?

Currently, the only version of an error alert (labeled "Alerts: Error - Large") in the Sketch library has a header, body text, a subhead and more body text:

Sometimes an error alert can be simple, mirroring our Warning and Information alert symbols. Because we don't have a simple version in the Sketch Library, designers have to break the symbol which isn't ideal. We could add a Simple version into the Library, that looks like this:

I'm not sure what the best naming conventions are here, but something to allow designers to not break symbols would be great!

Feature Request

• I’ve searched for any related issues and avoided creating a duplicate issue.

This update is for:

• Content styleguide
• Component
• Pattern
• Utility
• Other

What is the nature of this update?

Let's replace all references to Formation on design.va.gov and this repo with VA.gov Design System or Design System if the context is clear.

Description:

Additional info component is used in forms and on static content pages to reveal helpful content that provides contextual details about applications, processes, or steps in a form. In the expanded state of the component, the use of Headings 4-6, body text, links, ordered lists, and unordered lists are encouraged.

The additional info component in the sketch library, design.va.gov, and react library are out of sync.

You can view the additional info component on design.va.gov and the react library

These are the ways this component is not synced

• Sketch library component is visually different than the component in design.va.gov and the react library.
• There is no documentation on the additional info component on design.va.gov

Complete the following tasks to synchronize component:

Sketch library:

• Change color of blue bar from #00A6D2 to #9BDAF1 to match the component in React library, design.va.gov, and prod
• Change color of chevron icon from #212121 to #adb0b5 to match the component in React library, design.va.gov, and prod
• Change spacing of the chevron icon 8px from the text

React library*:

• Widen the vertical bar to 8px

Design.va.gov:

• Widen the vertical bar to 8px
• Add documentation: Have rules on when we need to use the vertical bar and when we don’t. For example, when the additional info component is nested in an alert, the additional vertical stripe would not be needed. When the additional info component is alone, the blue vertical bar shows that the information is connected. Documentation draft can be found here.

Bug Report

• I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

In the design system footer, when you hover over the official VA logo, the hover text says it's going to go to VA.gov. But it actually takes you to the top of the design system homepage.

-->

What I expected to happen

To be taken to VA.gov homepage

Reproducing

• Formation version:
• Device: (e.g. iPhone 8, Macbook) PC
• Browser: (e.g. Firefox, IE 11) CHROME

Steps to reproduce:

• [ X] Other

See attached screenshot.

What is the nature of this update?

• General documentation

Additional Context

on this page https://www.va.gov/playbook/ - the tiles for the design guide and the editorial guide should point to the new pages on Design.va.gov.

1/
Currently: https://www.va.gov/playbook/design/
Should go to: https://design.va.gov/design/

2/
Currently: https://www.va.gov/playbook/editorial/
Should go to: https://design.va.gov/content-style-guide/

@kevwalsh commented on Mon Mar 11 2019

As a design system user looking to see if i could use <a>'s for buttons, it took me a long time to figure out if it was OK. I looked at code snippets first, which are almost all <button>'s (except for "Big buttons, Primary". I still wasn't sure if it was OK to use it for other variants, until i read the help text at the bottom. Including more <a>'s in the code snippets for other variants would be helpful.

Support question

• I’ve searched for any related issues/questions on github

How can we help?

• Component/utility name: Alert boxes

--> We used the alert box component on the Facility Locator search results page and facility detail page to indicate facility operating status. When used on the detail page, it raised a 508 compliance issue by skipping from H1 to H3.

department-of-veterans-affairs/va.gov-team#8299

Is it possible to make the component flexible to implementation or 508 compliant?
-->

What you have tried:

In the meanwhile, we will address this with HTML.

@kevwalsh commented on Thu Feb 14 2019

We do not yet have established image aspect ratios to work with.

I suggest we start with this simple list: 1:1 (square), 2:1, 3:2, 7:2 ("banner").

We have these cropping styles already built into the Drupal UX. When an editor uploads an image, they can go ahead and use all these cropping styles, see screenshot.

It's relatively straightforward to add new aspect ratios in drupal, but we probably want to keep the number below 5 or 6.

@kevwalsh commented on Thu Feb 14 2019

Note that the names for these aspect ratios should also be under consideration. You can see i didn't use the w:h naming convention for the square one (but maybe we should).

Feature Request

• I’ve searched for any related issues and avoided creating a duplicate issue.

Is this feature request relating to an existing component or utility? Please describe.

• Component/utility name: Text styles for mobile

Do you have a suggestion for a new component or utility?

I do! I made a quick pass at a handful of pages on va.gov, and I believe the only styles that scale for mobile are h1, h2, and Lead. I documented those numbers below!

h1
desktop = 40/52
mobile = 32/39

h2
desktop = 30/39
mobile = 24/31

Lead
desktop = 20/34
mobile = 16/27

Additional context

I didn't find any other text styles that scaled on smaller screens…but that doesn't mean they aren't out there. I'm not sure if there is a way to search for site-wide media queries or w/e in order to root them out.

Feature Request

• I’ve searched for any related issues and avoided creating a duplicate issue.

This update is for:

• Content styleguide
• Component
• Pattern
• Utility
• Other

What is the name

1. Add documentation for link behavior to:

• Links section of the Content styleguide

• Links section of Typography in Design documentation

What is the nature of this update?

• When to use
• When to use something else
• Code snippet
• Accessibility
• Research insight
• General documentation

Additional Context

For all links:

• Links should only open in a new tab if clicking the link will result in the user losing progress or data. Otherwise, links should open in the same window.
• This includes scenarios where a user may be:
  • immediately logged out of their VA.gov session,
  • may lose their place in the middle of an application that is not saved, or
  • may lose data that they are entering/uploading into a form.
  • In all of these cases, it should also be considered whether the link is worth potentially taking the user away from where they are.

For download links:

• semantically, the link is always a Hyperlink (<a/>), never a <button>.
• The media type and file size should be visually readable.
• Use icons and color to enhance visual presence.
• The download link should open in the same window.

Code Snippet

For download links:

<!-- CSS from USWDS - need to recreate style for Foundation -->
<style>
[href^=http]:not([href*=".gov"]):after,
[target="_blank"]::after, 
[type="application/pdf"]::after,[target=popup]::after {
    background: url(https://designsystem.digital.gov/assets/img/external-link.svg) no-repeat 0 0;
    background-size: 100%;
    content: "";
    display: inline-block;
    height: .65em;
    margin-bottom: -1px;
    margin-left: .25rem;
    width: .65em;
}
</style>
<p>This is a 
         <a href="https://www.va.gov/playbook/downloads/Voices_Of_Veterans.pdf" download="WCAG_Checklist.pdf" title="Download the Voices of Veterans PDF" type="application/pdf">
                    download link  
          </a> <dfn>4.9MB, PDF</dfn>
 </p>

Feature Request

• I’ve searched for any related issues and avoided creating a duplicate issue.

This update is for:

• Content styleguide
• Component
• Pattern
• Utility
• Other

What is the name

This update is for the Contributing to Formation page on design.va.gov.

What is the nature of this update?

Let's update this page to reflect the new governance process, and also retire Formation from all parts of this page, including the URL.

Potential new sections:

• Overview of the full process
• Updating an existing component
• Creating a new component
• Criteria the Design System Council uses to evaluate proposals
• What to do if you have a question
• FAQ
  • How long does this process take?
  • Who is on the design system council?

Potential sections to retire:

• Scenarios

To modify:

• Removing a component section

This will probably need a little bit of consensus gathering

Assigning this to myself, Kevin, and Crystabel for right now, and ultimately we should consult with Gretchen on all the edits and new content.

I volunteer myself to take a first pass at this update!

Feature Request

• I’ve searched for any related issues and avoided creating a duplicate issue.

Is this feature request relating to an existing component or utility? Please describe.

• Component/utility name: I am not sure of its official name but it's the animated right-caret links (Eligibility, How to file a claim, etc.) that appear on this page: https://www.va.gov/disability/

Do you have a suggestion for a new component or utility?

The component is fine but it's not in the Sketch file for me to use in mockups.

Are there rules around its usage? It seems no one can be sure. I propose that we reserve this component as "tool launcher" links. Also it seems that these links will appear in the main navigation on the next page. Perhaps that could be another rule around usage? I don't think we want this used on regular content navigation links.

I will take ownership of updating the Sketch file.

Bug Report

• I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

On the Modal component page, the Crisis Line modal example is missing the Font Awesome classes from the button, so it appears to be missing.

What I expected to happen

Crisis line modal example should have a close button

Reproducing

• Formation version: current
• Device: Macbook
• Browser: Chrome

Steps to reproduce:

1. navigate to https://design.va.gov/components/modal
2. Click on the Get Help from Veteran Crisis Line button

Additional Info

Based on what I see in production, the design system documentation example needs to add the .fas and .fa-times-circle classes.

I also noticed the modal closes on keypress of the Esc key on va.gov, but not in the design system doc. Maybe that will be fixed once the correct classes are added?

New url example: https://department-of-veterans-affairs.github.io/veteran-facing-services-tools/visual-design/components/accepttermsprompt/ (edited)

/platform changed to /visual-design/components

Feature Request

• I’ve searched for any related issues and avoided creating a duplicate issue.

Is this feature request relating to an existing component or utility? Please describe.

• Component/utility name:

Do you have a suggestion for a new component or utility?

Additional context

Description

Accordions are a list of headers that can be clicked to hide or reveal additional content.
3 types: borderless, bordered, and multi-selectable
The accordion/collapsible panel component in the sketch library, design.va.gov, and react library are out of sync.

You can view the component in design.va.gov and the react library.

These are the ways this component is not synced

• The naming of the react library component is different than the sketch library component and the design.va.gov component. The react library component is called "collapsible panel." The component in design.va.gov and in the sketch library is called "accordion."
• The borderless accordion and multi selectable accordion are not in the react library website

Complete the following tasks to synchronize component:

• Sketch library: no action needed
• React library: Add the borderless accordion and distinguish between a normal selectable (one accordion open at a time) and multi-selectable accordion to this page:
• Design.va.gov: no action needed

This update is for:

https://dev-design.va.gov/documentation/#us-web-design-system-already-included

• Content styleguide
• Component
• Pattern
• Utility
• Other

-->

What is the nature of this update?

• General documentation

Additional Context

Current:
We will not be update to version to USWDS v2, primarily because:

Many of the naming conventions have changed between the two versions
The design of some of the base components has changed based on specific needs for VA.gov
Formation includes its own set of utility classes and design tokens

SUGGESTED CHANGE:
Lead-in text; periods at end of bullet points (if they're complete sentences, they all get punctuation); we use numerals (except for weird cases of 1 vs "one").

We're not currently updating to USWDS v2 because:

Many of the naming conventions have changed between the 2 versions.
The design of some of the base components has changed based on specific needs for VA.gov.
Formation includes its own set of utility classes and design tokens.

@rtwell FYSA

This update is for Patterns > Pages > Hub Pages

What is the name

Right Rail and Promo Spots

What is the nature of this update?

General documentation. These sections currently have placeholder content and would benefit from similar content we have for the rest of the sections on this page.

On this page: https://www.va.gov/health-care/family-caregiver-benefits/comprehensive-assistance/

See screenshot attached. The text link is one link, but renders on hover as 2 separate links.

EX: when you hover over "Use our online caregiver support" part of the text, it shows as an active link; and when you hover over the latter part of the text "coordinator search tool" that shows as another separate link.

But they both point to https://www.caregiver.va.gov/help_landing.asp and I believe should be rendering as one unified link.

Feature Request

• I’ve searched for any related issues and avoided creating a duplicate issue.

Is this feature request relating to an existing component or utility? Please describe.

• Component/utility name: Telephone

Having a telephone number wrap to the next line makes it harder to read. Making it not wrap would improve readability.

Do you have a suggestion for a new component or utility?

I am suggesting a new utility definition is added that allows a block of content to not be wrapped

.no-wrap {
  white-space: nowrap;
}

Within the foundation style, there are multiple instances of the nowrap value being used.

• Pagination links
• Icon links
• Modal buttons
• Exit icon (mixin)
• Login container

Within the vets-website repo, this property has been added to at least a dozen custom stylesheets. Not all are related to telephone numbers.

Feature Request

As a frontend developer, I need a reusable form wizard component so I can implement multi-choice user workflows in a quick and standards-compliant way.

• I’ve searched for any related issues and avoided creating a duplicate issue.

Goals

What outcome(s) do we want to see?
A well defined and documented standard approach to frontend multi-choice forms with conditional logic.

Use Case

A user on va.gov should should be able to navigate a series of questions, with the workflow of those questions and a final result page defined by developers.

Multi-path workflow

Based on the answer to a previous question, different questions should be shown. For example, based on their answer to an initial question "Are you a VA employee?" one of the later questions should be different, while all other questions should remain the same.

Styling Customization

Our application is only intended for mobile usage, and needs to be operable when the user is standing, walking, or holding things in another hand. Additionally the results must be visible to VA staff from 6 ft away. Therefore we need to make questions and input areas very clear and large, and need the final results to be readable at a distance.

Is this feature request relating to an existing component or utility? Please describe.

• Component/utility name:
  The closest existing component is: https://github.com/department-of-veterans-affairs/vets-website/blob/master/src/applications/static-pages/wizard/index.js

Do you have a suggestion for a new component or utility?

Alternatively use a 3rd party library such as https://formio.github.io/formio.js/

Additional context

Background

There is a wizard pattern documented on https://design.va.gov/patterns/wizards which points to multiple code examples with various implementations. One of these examples is How to file a VA disability claim(source code) which uses a <Wizard> component. This component was created for a particular use case, and may or may not be suitable for reuse. It is not published as a Formation component.

A frontend engineering team was tasked with creating a multi-path form for the Coronovirus Screener app (source code). Because of the urgent need for deployment of the app and lack of clarity around a standard approach, code may have been written which is redundant with other solutions.

Possible Solutions

1. Document and publish the <Wizard> component to Formation with enhancements if needed
2. Adapt the Coronovirus Screener code to be reusable
3. Identify and document a 3rd party library as the standard for this use case

Jared - I'm 'forwarding' this feedback about design system pages. These came in via the content style guide email inbox but they are regarding sections beyond. See pasted copy from email; also attached - as GH doesn't render the highlighted texts in the original message. /jen

Design-system-pages-issues-DR.pdf

This update is for:

• Content styleguide
• Component
• Pattern
• Utility
• Other

What is the name

What is the nature of this update?

• When to use
• When to use something else
• Code snippet
• Accessibility
• Research insight
• General documentation

Additional Context

From: Rodriguez, Donna Adorian
Sent: Tuesday, June 18, 2019 7:05 AM
To: VA Web Design [email protected]
Subject: Content style guide

It does not appear the code is undated to USDWS 2.0. What version is this site based on? How often will it be updated?
Formation is built with USWDS 1.6.x. We will not be migrating to version to 2 for a number of reasons. Primarily is that it breaks much of the existing design of VA.gov and the LOE is too high for something that brings no significant changes to design or functionality. The main difference is USWDS 2.0 introduces utilities, which we have already built into Formation. If USWDS introduces a new component that would be useful on VA.gov, the process will be to implement that component individually, in a way that works with VA.gov's design system.

Here are a few things I found while going through site:

At top, here’s how you know link on home page does not drop down.
This was resolved earlier this week. In creating non-react versions of the accordions, a polyfill needed to be added Formation to fix a bug in IE. VA.gov had the polyfill already. It was added to design.va.gov on Monday or Tuesday. There is a ticket to include it Formation.

https://design.va.gov/documentation
provide hyperlink to analytics.usa.gov to go to site.
Done.

How do you get license for Sketch?
www.sketch.com
I do not know how VA gets liceneses. I imagine the process may differ by department?

Spacing Units paragraph (1st paragraph)
https://design.va.gov/design/spacing-units
Add “to” to when applied “to” margins …
Done.

Link to Formation’s base files produces 404 error.
Fixed.

https://design.va.gov/documentation/designers
Capitalize Veterans
Fixed.

https://design.va.gov/patterns
VA.gov
Fixed

https://design.va.gov/layout
needs a . U.S.
Fixed

https://design.va.gov/documentation/developers
Should help you get started

Depends greatly on your project structure

Implementing design works
Implications that designs design
In general-duplicative
some, some
You will notice that not everything in Formation follows the naming the convention …
Components may be refactored
Fixed

https://design.va.gov/documentation/whats-new
fixed bug where
Fixed

Feature Request

I'm not sure which bucket this should fall in, so i dropped it here as an "improvement".

As a designer building pages using the Sketch Library, type should always be styled so when i duplicate or copy art boards or layers, all typographic styles will piggyback with the component. Right now, some of the typography elements on the Styles page and the Template page do not have text styles applied.

• I’ve searched for any related issues and avoided creating a duplicate issue.

This update is for:

• Content styleguide
• Component
• Pattern
• Utility
• Other

What is the name

What is the nature of this update?

• When to use
• When to use something else
• Code snippet
• Accessibility
• Research insight
• General documentation?

Additional Context

Describe the bug
When using feature class from https://design.va.gov/components/featured-content any <p> child elements have their font and color overridden using !important. This means developers also have to use !important on their styling of this tag within a feature element or it will be overridden.

To Reproduce

style.scss includes this CSS:

  .feature p {
    color: inherit !important;
    font: inherit !important;
}

Example app HTML:

<div class="feature">
  <h3>If I’m a Veteran, can I use this app?</h3>
  <p style="myClass">You may be able to use this app if you are Veteran.</p>
</div>

Example app CSS/SASS:

.myClass {
  font-weight: bold;
}

Expected behavior
Normally a developer would expect the <p> to become styled with font-weight: bold; however this will be overridden by the feature class font settings.

Bug Report

• I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

When you try to apply the required label to a form input in Sketch 61.2, the required overlaps the form input label.

The same thing occurs when you try to use a button with an icon on the right, and update the label.

When you look at these elements in older versions of Sketch (I also have 51 installed), this isn't an issue. Suspect this is due to changes in how Sketch handles resizing content across newer versions.

What I expected to happen

The elements should be pinned to the right side of the element and preserve spacing between the label and the required / icon.

I'm not sure what the breakpoint is...e.g Sketch 59 may be okay.

Reproducing

• Formation version: latest
• Device: MacBook
• Sketch: Compare across version 51 and 61

Steps to reproduce:

1. Open a file in the latest version of Sketch.
2. Go to Insert > VA Pattern Library and select either a button with an icon, or a text input form field
3. Insert the symbol, and then update the label via the overrides

Bug Report

The CMS team found list-style: disc for unordered lists in an accordion, the Patient advocates accordion on https://www.va.gov/pittsburgh-health-care/health-services/

It seemed like a css bug, but inspecting the css shows .usa-accordion-bordered>ul li ul, .usa-accordion>ul li ul { list-style: disc; }

_accordions.scss shows

  > ul li ul {
    list-style: disc;
    > li > ul {
      list-style: circle;
      > li > ul {
        list-style: square;
      }
    }
  }
}

it's unclear, in the design system, if this is desired. Either the design system should be updated to include these variations, either in https://design.va.gov/design/typography or https://design.va.gov/components/accordions. Or maybe ordered and unordered lists deserve their own page in the system, which can cross-reference the Process list component

Feature Request

• I’ve searched for any related issues and avoided creating a duplicate issue.

In department-of-veterans-affairs/va.gov-team#2691 I have designed an updated template for downloading VA forms. That template is comprised of a single wide column.

@jaredcunha-usds suggested that we should add this as a standard template here: https://design.va.gov/layout/page-templates

Being new to the design system, I'm not sure how this should be specified programatically. I did see the 732 pixel wide standard in the Sketch file but I'm not sure this correlates to anything in actual code or column widths.

• Component/utility name:

Do you have a suggestion for a new component or utility?

Yes this should be a responsive layout.

Feature Request

• I’ve searched for any related issues and avoided creating a duplicate issue.

Is this feature request relating to an existing component or utility? Please describe.

• Component/utility name: Minimized header/footer

Do you have a suggestion for a new component or utility?

There was work done to suggest a minimized header/footer for certain use cases and partner sites here:
https://github.com/department-of-veterans-affairs/va.gov-team/blob/master/products/global/header-footer-and-navigation/secondary-header-footer/design/VA-subdomain-header-footer.pdf

Should we add it as an official thing available in the Sketch file? And potentially as code available elsewhere (TBD)?

Additional context

I found out about this because I was asked to consult on a EULA/terms of service microsite for the transition from MHV to My VA Heath. It seems there could be additional partner-ish projects that could benefit from this component.

EULA/terms of service design work: department-of-veterans-affairs/va.gov-team#5242

Bug Report

• I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

The text inside the promo banners examples is using .vads-u-color--gray-light which renders an insufficient color contrast ration on a white background.

I also notice on the Sidebar nav component the ratio seems weak to me. It passes an axe audit in my browser, BUT the parent container has an inline style of opacity=.5 which decreases the contrast. I think this inline style needs to be removed.

What I expected to happen

The color contrast between text and background would be greater and meet minimum WCAG 2.0 requirements.

Reproducing

• Formation version: current documentation site
• Device: Macbook
• Browser: Chrome

Steps to reproduce:

1. Navigate to this page https://design.va.gov/components/promo-banners
2. View the examples
3. Navigate to this page https://design.va.gov/components/sidenav
4. View the examples

What is the name

Content Principles

What is the nature of this update?

The examples (Like This, Not Like This) appear to have some stray placeholder content. The phrase "service member" is repeated a few times. Screenshot attached

Feature Request

• I’ve searched for any related issues and avoided creating a duplicate issue.

1. This request comes out of the work in #152

Let's add the download icon to the official VA design system list of icons:
https://design.va.gov/design/icons

2. Does it also have to get added to the Sketch file...? If I need to open a separate issue for that work, let me know.

3. @jaredcunha-usds also requested the following. I'm happy to help but not sure what it entails:

I'd love for someone to take a look at that icon page at some point. That was brought over from the old Fractal site (which no longer exists). The icons page is a limited set, but technically, the entirety of the Font Awesome free solid set is available. Same with brands.

Bug Report

• I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

The covid screener is using the secondary button styling. However it appears as transparent yet we got input from the design system experts as well as accessibility experts that the background should be white. See attached issues.

department-of-veterans-affairs/va.gov-team#9610

department-of-veterans-affairs/vets-website#13212

What I expected to happen

Suggestion is to style it with a white background by default instead of transparent. That will ensure it looks correct regardless of background it sits upon.

Add new design and UX guidance for sitewide downtime banner in the design system

This is related to the recent UX, design, and content changes for sitewide downtime banners.

This update is for:

• Content styleguide
• Component
• Pattern
• Utility
• Other

What is the name: sitewide downtime banner

What is the nature of this update?

• When to use
• When to use something else
• Code snippet
• Accessibility
• Research insight
• General documentation - design, ux behavior/pattern

Additional Context

Reference tickets:
#9536
#9223

[ ] Add desktop design and specs in the design system @rtwell TBD
[ ] Add mobile design and specs in the design system @rtwell TBD
[ ] Add UX and governance guidance content @peggygannon TBD
[ ] Link updated downtime messages in the dictionary to the new component examples. @peggygannon TBD

UX and governance guidance for component write-up in design system:

• Used when all (or most) unauth and auth apps, tools, and sign in experiences across the entire site are affected (EX: vets-api).
• Ability to publish: DEPO.
• Displays sitewide, including VAMC products.
• 2 states: In advance of downtime; and during downtime.
• Yellow for advance; red for during.
• Can be dismissed per cookie on default (configurable per cookie or per session)
• In-advance messaging displays by default 12 hours in advance, but can be configured to display earlier for extreme cases (such as a 24 hour outage).
• During message automatically removed at end time.
• Text is template/standardized, with custom dates and times. 300 character count limit including spaces.
• Display hierarchy when there are multiple banners is a) Emergency banner, then b) Sitewide downtime banner,

Feature Request

• I’ve searched for any related issues and avoided creating a duplicate issue.

This update is for:

• Content styleguide
• Component
• Pattern
• Utility
• Other

What is the name

Form Controls > Select Box

What is the nature of this update?

• When to use
• When to consider something else
• Code snippet
• Accessibility
• Research insight
• General documentation

Additional Context

Currently, the last example under for the Select Box component reads:
"For site navigation (use the navigation components instead)."

As a new user to the site, when I initially read that, I thought, "Cool! There are navigation components?" but then didn't see anything called Navigation in the menu... and wasn't sure if it was referring to the Side Nav component.

I think the main point of the guidance is to discourage use of a select box as navigation. To be more clear, I propose changing the language to:
"To navigate users to another page in the site, use a text link or the Sidenav component"

Feature Request

• I’ve searched for any related issues and avoided creating a duplicate issue.

This update is for:

• Content styleguide
• Component
• Pattern
• Utility
• Other

What is the name

What is the nature of this update?

• When to use
• When to use something else
• Code snippet
• Accessibility
• Research insight
• General documentation

Additional Context

From a dev on my team: " https://design.va.gov/components/alertboxes#full-width-alerts
In their Full Width Alerts Warning section they have
"usa-alert-full-width-info" instead of "usa-alert-full-width-warning"
under the Show HTML section and I for one can tell you it'll confuse
the heck out of any developer that tries to use it the first time
around."

Here is the list of issue templates for this repo.

We currently have 4 templates:

• Bug report
• Documentation request
• Feature request
• Support question

Make sure that the language and instructions in the templates reflect the governance model, and that each one provides clear guidance for what information and artifacts are needed on each one.

Consider:

• Change the name of "Feature request"
• Consider removing "Support question" in favor of encouraging questions in Slack (?)

(Tagging the three of us on this with the idea that one of us can self-assign to work on as we have time)

Feature Request

• I’ve searched for any related issues and avoided creating a duplicate issue.

Do you have a suggestion for a new component or utility?

There is a 'Right Rail" component that is used in both the VA Disability Rating page as well as the Check your claim or appeal status page. Ther right rail is the content area on the right side of the page that houses a list of three blocks of information with a heading, a horizontal rule, then some content. The pages using the right rails are both listed here ( from staging ) -

The right rail in the above screenshots is being used to house additional information that is supplemental to the main content on the page. I would think part of our design process needs to be determining -

1. What are the cases in which we use this right rail as well as what are the cases in which we DO NOT use this right rail?
2. In order to make this a reusable component we need to come up with a few pre-defined layouts that the content blocks inside the right rail can take, what are those pre-defined layouts?
3. What specific types of content can and should be housed inside the right hand rail. What we have on these pages above may serve as a model but don't necessarily need to be the main examples?
4. How many individual content blocks should be allowed in the right rail component?

Feature Request

• I’ve searched for any related issues and avoided creating a duplicate issue.

Is this feature request relating to an existing component or utility? Please describe.

• Component/utility name: H3 link (used in "Helpful links" content section as seen at the bottom of https://www.va.gov/change-address/ )

I am creating a design spec via department-of-veterans-affairs/va.gov-team#2691 and I am including a similar section as "Helpful links."

I asked @1Copenut aka Trevor for an a11y review. He says that the H3 link header should be underlined:

The helpful links would benefit from an underline or other visual indicator. The links rely on color to distinguish them from non-interactive text. See https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/F73 for further description of this item.

I'm not sure if this is a change to the standard component or a utility class.

Bug Report

• I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

On the typography page, the content for the font Bitter, appears to have been copy-pasted directly from Google and doesn't credit the author (it's written in first person)

What I expected to happen

The copy would speak to why Bitter was chosen for the VA design system and/or credit the original designer who wrote the text in first person.

Reproducing

• Formation version: current
• Device: Macbook
• Browser: Chrome

Steps to reproduce:

1. Visit https://design.va.gov/design/typography
2. Read copy about Bitter

@kevwalsh commented on Thu Feb 14 2019

We do not yet have established image aspect ratios to work with.

I suggest we start with this simple list: 1:1 (square), 2:1, 3:2, 7:2 ("banner").

We have these cropping styles already built into the Drupal UX. When an editor uploads an image, they can go ahead and use all these cropping styles, see screenshot.

It's relatively straightforward to add new aspect ratios in drupal, but we probably want to keep the number below 5 or 6.

@kevwalsh commented on Thu Feb 14 2019

Note that the names for these aspect ratios should also be under consideration. You can see i didn't use the w:h naming convention for the square one (but maybe we should).

Bug Report

There are a bunch of duplicative text styles in the Library (some of which are seemingly duplicates, while others are very different, but named the same title.

• I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

Looks like some duplicates snuck in

What I expected to happen

one single text style per text variant

Description:

Alerts keep users informed of important and sometimes time-sensitive changes.

Alert boxes in the sketch library, design.va.gov, and react library are out of sync.

You can view the component in design.va.gov and the react library

These are the ways this component is not synced

• Background alerts and full width alerts are missing from the sketch library
• Background alert in react library has a heading when it shouldn’t (this makes it look like our information callout component)
• The alerts in design.va.gov and in the react library are really long in length

Complete the following tasks to synchronize component:

Sketch library:

• Add background only alerts back to the sketch library
• Add full width alerts to the sketch library
• Rename sketch library "alerts" to "alert boxes" to match react library and design.va.gov

React library:

• Background alert in has a heading when it shouldn’t. Match these to the background only alerts in design.va.gov
• Reduce column width in and line length so that alerts aren't too long

Design.va.gov:

• Reduce column width in and line length so that alerts aren't too long

Feature Request

• I’ve searched for any related issues and avoided creating a duplicate issue.

Is this feature request relating to an existing component or utility? Please describe.

No.

Do you have a suggestion for a new component or utility?

Right now, for the confirmation page on forms, we have a feature designed/coded that adds a "print this page" button and a custom css style. You can see how it works here: https://dsva.slack.com/archives/CMJ2V70UV/p1590174244210900?thread_ts=1590157417.209200&cid=CMJ2V70UV

It was coded by Justin on the Caregiver team. (@LinnJS)

It would be great to get this documented in our pattern library, sketch files, and then potentially think about some kind of global change so each team isn't having to do it themselves.

Additional context

This is an open, WIP issue to author and manage a process to address design system inconsistencies where the design system doesn't work as expected. It could look like this:

1. Identify an inconsistency (if not a bug) in our execution of USWDS/VADS
2. Document that inconsistency, and make a governance call on what would be better.
3. Document the improvement in the design system at design.va.gov.
4. Code the improvement across production.

An example of how this could be addressed is issue #142

This is an open issue that will be addressed in the Fall/Winter of 2019.