Experimental Design [Plain divider]

[aagosto90]

What

I'm proposing a plain hairline divider to be added to the design system as a variation of the only existing current divider component.

Purpose

The divider can be useful in situations where content is related but separate, which is a problem that is not currently solved by the divider with stars. That component is to be used for separate sections that don't directly relate to one another, so I see a need for a plain divider.

Usage

Context or task: This divider would be used on pages where including a divider can help to organize and divide sections of content, but the sections still need to appear to be related and not completely different topics.

Behavior

Needs to responsively resize horizontally, but there is no interaction with this component.

Examples

I realized this component doesn't yet exist when designing a notification center MVP - a list page of past notifications (not live yet). Here's an example of how this component could be utilized in a list:

It's also already being used in some places in production. Here's an example in the claims tool:

Accessibility

Would want Platform to recommend the color and weight to comply with accessibility standards.

Guidance

We don't want this component to be overused where a divider is not necessary, so designers should try to design without it initially and use it if there seems to be no better way to create a hierarchy and division of content. This can be a very helpful component on content-heavy pages where a user might want to skip to another section visually if one is not of interest. We can even use this component to draw users to the beginning of a new section so important content doesn't get buried when there is a lot of information to convey.

Research (optional)

N/A

Code (optional)

N/A but would likely use the code for the existing divider and just not include the stars.

Next steps

You may present your work to the Design System Council at an upcoming meeting. If you do not or cannot attend the Design Council Meeting, you can opt to get an asynchronous approval.

Submit requests to join an upcoming Design System Council meeting in #platform-design-system.

During the meeting, the Design System Council Working Group will evaluate the request and make a decision.

If your request is approved, you can add your component or pattern to the system. If you have any questions on how to add your component or pattern to the system, please reach out to the Design System Team at #platform-design-system.

[caw310]

@aagosto90 , Would like to discuss this during the DSC meeting on Friday, June 2 at 1pm ET. Are you available to join?

[humancompanion-usds]

Let's do an audit! Ryan, Robin, and others said start here:

• Resources & Support
• Find a VA location
• Header & footer
• Search results (GI Bill comparison tool)
• Above Feedback
• Need Help? component
• Appeals forms
• https://department.va.gov/about/ (blue, yellow, and red rules)

When we do this audit we should also have a look at lists. I'd like to move Lists out of the Typography section and talk about more than just <ul> and <ol>. For example, from Check-in After Visit Summary:

[humancompanion-usds]

1. Update List Figma component to make separate a prop and ensure the color, width, and spacing. @ldraney https://app.zenhub.com/workspaces/platform-design-system-5f8de67192551b0012ebb802/issues/gh/department-of-veterans-affairs/vets-design-system-documentation/2510
2. Update "Stars" to be an <hr/> rather than a div.
3. Show a regular "non-stars" version of a divider.
4. Update guidance to guide designers to not use the Stars. @humancompanion-usds

@caw310 to create an issue for items 2 and 3.