Description

The ds-c-button--transparent SCSS class is designed to remove button backgrounds, and have them appear closer to links. These buttons are relying on color as the only cue they are actionable, and would benefit from a text underline. Screenshot attached below.

Related to #331

Rework symbol construction in the Design System sketch file to improve responsive behavior - currently resizing some symbols skews their proportions.

Description

@bernardwang reported this design issue when using the checked children on small checkboxes.
The expanding line does not line up.

To do

• Update design so small checkbox and radio checked children examples line up properly

Description

webfonts, css assets fail to load on sandbox.bluebutton.cms.gov/v1/o/applications/register issues with s3 asset object/bucket key, and deployment URIs for sandbox.bluebutton.cms.gov

update:

I'm also seeing this on https://sandbox.bluebutton.cms.gov/

S3 related:

• https://s3.amazonaws.com/content-impl-bbonfhir-com/static/bootstrap/css/less/*
• https://s3.amazonaws.com/content-impl-bbonfhir-com/static/bootstrap/css/dist/css/bootstrap.css

NoSuchKeyThe specified key does not exist.static/bootstrap/css/dist/css/bootstrap.cssCC87AC85E992EC19GgeYLw8li/9KxuL2gClSGzKOffHFZcCJOOY9bUTyy099HRaWz3E6uFfi03Hd7x1qkXMiOVXnUSI=

deployment URI related:

• http://localhost:8000/assets/fonts//*
• http://localhost:8000/assets/fonts//Bitter-Italic.eot?

Doesn't break functionality, but UX/UI is funky without the CSS.

Steps to reproduce the issue

Navigation:

1. sign in
2. https://sandbox.bluebutton.cms.gov/v1/o/applications/
3. https://sandbox.bluebutton.cms.gov/v1/o/applications/register/

Additional information

• I wasn't sure where to open this issue.

Browser Version : Firefox 62.0.2 (64-bit)

list of what looked like related repos, info:

• https://github.com/CMSgov/bluebutton-css
• https://github.com/CMSgov/bluebutton-web-server
• https://github.com/CMSgov/HealthCare.gov-Styleguide
• https://github.com/CMSgov/bluebutton-ansible-playbooks-data-sandbox/search?q=sandbox&unscoped_q=sandbox
• https://github.com/HHSIDEAlab/hhsdevcloud-ansible

Related to #331

Explore providing sample page templates - the healthcare.gov UI kit file has templates for a step list page and a form page. Can we bring these in, and are there others we think would be useful? Maybe an app landing page like https://localhelp.healthcare.gov/ ?

Attempts to use the example for Tabs results in a seemingly empty div.

JSX

                <Tabs>
                    <TabPanel id="interventions" tab="Interventions">
                        someother stuff here
                    </TabPanel>
                    <TabPanel id="implementation" tab="Implementation Costs">
                        some stuffh ere
                    </TabPanel>
                </Tabs>

html

<div>
    <div class="ds-c-tabs" role="tablist"></div>
    <div aria-hidden="true" aria-disabled="false" class="ds-c-tabs__panel" id="interventions" role="tabpanel">someother stuff here</div>
    <div aria-hidden="true" aria-disabled="false" class="ds-c-tabs__panel" id="implementation" role="tabpanel">some stuffh ere</div>
</div>

Traced it to the line that detects TabPanels (child.type === TabPanel); see screenshot

Inquiring to change to child.props && child.props.tab.

Environment:

"@cmsgov/design-system-core": "^1.23.0",
"react": "16.3.0",

Components retrieved via individual exports, i.e.

import { TabPanel } from '@cmsgov/design-system-core/dist/components/Tabs/TabPanel';
import { Tabs } from '@cmsgov/design-system-core/dist/components/Tabs/Tabs'; 

Description

Array.includes isn't supported in Internet Explorer 11, but was included in the latest release: 752e14f#diff-bc403a3448d8591da046ffb97228eab1R102

Steps to reproduce the issue

1. Test a masked SSN input field in Internet Explorer 11

Additional information

Description

I was looking for information on component maturity states on https://design.cms.gov/ and could not find an explanation. I'd like to recommend creating a page somewhere on the site (maybe under guidelines) that defines the component states.

In addition, I think it would be nice to update the component states to use plain language

• Draft (What used to be alpha)
• Work in progress (What used to be beta)
• Ready (Ready to implement)

These components are in either alpha or beta and I'm not sure what that means
https://design.cms.gov/components/dialog/
https://design.cms.gov/components/spinner/
https://design.cms.gov/components/tabs/
https://design.cms.gov/patterns/step-list/
https://design.cms.gov/components/autocomplete/

Description

As a Developer, I would like to submit form data to my server as an unmasked value to make validation easier, but when I re-display the value in a read-only state (i.e. in <p> tag), I would like to display the masked version.

Currently, I can do the first part, unmasking the value using the design system's exported unmaskValue method. However, there isn't an exported method to mask the value, though it exists.

TLDR: Export maskValue along with the already exported unmaskValue

Use this issue to discuss this component in the Design System

Use this issue to discuss this component in the Design System

Description

The <Autocomplete /> component shows 2 axe-core errors. The first is related to the input aria-controls attribute looking for an ID that is not always present. The second is related to the input autocomplete attribute using an invalid value of "nope" to prevent Chrome from using its own auto-suggest box.

Suggested Fixes

1. Have the aria-controls attribute appear only when the listbox of suggestions is on screen. Otherwise set it to a null (non-rendering) value.
2. Update the autoCompleteLabel to "off" from "nope" and retest with Chrome

Description

Release 1.31.0 includes a new pattern that expands the <Choice /> component to reveal nested elements. The frame around this content has to be resized to see the entire block as shown in this screen capture: http://recordit.co/KOrNGbwrn0

This is a subset of #331

Added

• inverse buttons
• buttons with icons
• transparent buttons

Description

If we are going to keep the distinction between components and patterns we need to define when something is a component VS pattern.

Proposing to move the following components under patterns as they are more complex and involve multiple components.

• Date Field
• Help drawer
• Modal dialog
• Month picker
• Tabs
• Vertical navigation

CC @melwoodard @phiden @1Copenut thoughts?

Description

Instructions for site packages and themes should be updated.

Added medicare.gov site package to the design system and followed the directions for site packages and themes. This yielded no discernible results when running a quick test with a test-theme.

In order to view the test-theme successfully in the design system documentation site, the following steps were taken:

1. Added a 'settings' folder inside test-theme's src folder
2. Within the 'settings' folder, added an_override.color.scss file with the following style: $color-primary: #ff0000;
3. Included the following cms imports inside the index.scss file:

// Design system overrides
@import 'settings/override.color';
// @import 'settings/override.forms';

// Design system core and grid styles
@import '@cmsgov/design-system-core/src/index';
@import '@cmsgov/design-system-layout/src/index';

4. After running yarn start:theme, test-theme rendered as expected

Currently, the sketch file has items that are not in the design system and the design system has code components that are not in the Sketch file.

Fonts missing

Maybe we need to tell folks to make sure they have the following installed? Follow on work #334

Colors

Sketch file has special state colors defined but they are not in the code. - Follow on work #352

Components

Buttons

• Sketch file is missing inverse buttons
• Sketch file is missing buttons with icons - Follow on work #354

Badge

• Sketch file is missing large text version

Checkbox and radio

• Sketch file is missing inverse versions
• Sketch file is missing right to left version
• Sketch file is missing hint text and errors

Select

• Sketch file is missing different sizes
• Sketch file is missing inverse versions

Date field

• Sketch file is different than code (which is the source fo truth?)
• Sketch file is missing error example

Table

• Sketch file is different than code (which is the source fo truth?)

Tabs

Sketch file is different than code (which is the source fo truth?) Follow on work - #353

Text field

• Sketch file is different than code (which is the source fo truth?). Sketch file is missing labels and hint text.
• Sketch file is missing disabled text field
• Sketch file is missing inverse versions

Vertical navigation

• Sketch file is different than code (which is the source fo truth?)

Missing components from Sketch file

Follow on work #355

Missing patterns from Sketch file

• Documentation page
• Review
• Step List

Missing patterns from Sketch file

This is a subset of #331

• Documentation page
• Review
• Step List

Possible tool for this: https://github.com/johnotander/immutable-css

Description

We have some advanced table features in our backlog. Does the core team have either of the following in your roadmap for table or list features?

1. Paging (classic style)
2. Sorting (by column header)

Use this issue to discuss this component in the Design System

I am trying to use your framework, and am having trouble getting it initially setup. I would like to use the SASS version and have followed your documentation, with no luck. I am well versed in SASS and should not be an issue once the directory is setup correctly.

Currently I have the following directory setup

Main Directory

• index.html
• node_modules
• fonts
• images
• css

which other files and setup should I include? From there which files do I create or add to import the rest of the Sass and override?

Use this issue to discuss this component in the Design System

Hi,

not really an issue, more a question. I read the article on Medium about this design system and was very impressed and as such I would like to replicate it so I can use it myself.

Is the purpose of this repo sharing the design system itself or the functionality of how it was made? I get the impression it's more the former than the latter, and as such I was wondering if it would be possible of maybe creating a guide on how you did the setup?

kind regards,

Nathan

Description

Alerts serve many purposes, mostly to inform users of time-sensitive or in-passing information. Sometimes this information needs to persist, other times it is simply a confirmation, and users should be able to dismiss it.

Additional information [optional]

Per the 18F WDS recommendation on alerts, I propose we add an optional prop to the Alert.jsx component for a dismiss UI mechanism. A button seems a good candidate.

Related to #331

Improve naming and organization of symbols, text styles, and layer styles - ensure naming matches what's used in the documentation, revisit submenu organization.

Component: Alert

US Web Design Standard 👉

@keithk proposed adding a border to the Alert component. @keithk Feel free to add onto this with any additional thoughts/feedback.

cc @alishalisha for thoughts.

Related to a comment originally posted in #331

Description

In the Responsive page templates page of the Sketch file, the artboards for Desktop and Mobile don't use measurements that conform with spacing or responsive layout guidance on the site.

Desktop artboard size

• In the Sketch file, the artboard width for standard desktop is set to 1104px, which seemed non-standard and confusing.
• Based on the breakpoints and variables in the responsive design page, I would expect it to be set to 1024px, or to provide an annotation about why 1104px was chosen.

Current:

Desktop grid layout

• In the Sketch file, the grid on the Desktop-sized artboard is set to take up 1040px wide (including outside gutters). In the current settings, the gutter width is set to 29px, which does not conform to the 8-pixel grid defined in the spacing page documentation
• Based on the breakpoints and variables in the responsive design page, I would expect it to be set to 1024px (or smaller) but definitely not larger. I would also expect that the gutters measure even increments of 8px. Otherwise, I expect to find an annotation telling how these settings are derived.

Current:

Additional comments

I haven't gone into the Mobile or Tablet layout yet, but the quirks in the desktop template make me really unsure if I should trust them.

Description

It would be helpful and a bit of a shortcut to add a one-line start command that allows users to install dependencies and start the development server.

The design system is predicated on Yarn so any script solutions should use it as the task runner as opposed to NPM.

Description

This is not an issue but moreso a question/consideration. It seems that Section 508 is compliant with WCAG 2.0 levels A and AA as of January 18, 2017, per https://www.section508.gov/manage/laws-and-policies and https://www.access-board.gov/attachments/article/1877/ict-final-rule.pdf:

The Revised 508 Standards and 255 Guidelines incorporate by reference the Web Content Accessibility Guidelines (WCAG) 2.0, a globally-recognized and technologically-neutral set of accessibility guidelines for Web content. For Section 508-covered ICT, all covered Web and non-Web content and software—including, for example, Web sites, intranets, word processing documents, portable document format documents, and project management software—is required, with a few specific exceptions, to conform to WCAG 2.0’s Level A and Level AA Success Criteria and Conformance Requirements

Is the CMS Design System supposed to be compliant with this latest version of Section 508? If so, I think it'd be good to advertise on the website and documentation that the framework is compliant with WCAG 2.0 AA (perhaps, if necessary, with a footnote that said "few specific exceptions" may apply). I think this would help prospective users of the framework realize that this is the case.

Use this issue to discuss this component in the Design System

Description

Create a call out with information about the Sketch files and give more guidance for using the Sketch file. Mainly that you will need to install fonts as well. Zip the fonts and Sketch file together so when unzipped folks have everything they need.

Example

https://designsystem.digital.gov/download/

Following the pattern proposal guidelines, I'd like to suggest that we add the "Exposed Within" form pattern to the design system. Also included in this pattern is a new component, which for lack of a better name, I'm calling "Inset". Both of these are detailed below.

Proposal Part 1: Exposed Within

The "Exposed Within" pattern is a way to progressively reveal an additional question only when it is relevant to the user. This takes the form of a question that is visually nested below a checked radio/checkbox field.

Example

What user need this pattern solves

There may be times when a service needs to ask the user for more information based on how they answered a previous question. This pattern allows the form to be as minimal as possible, and only surfaces questions that are relevant to the user's circumstances.

Supporting evidence

1. Some research on this pattern was mentioned in Web Form Design, by Luke Wroblewski. In their research they asked users to use 9 different form patterns and used eye tracking software to measure the number and duration of their fixations. The average number of eye fixations indicates the level of effort required to parse a form. And the length of fixation indicates the time spent looking at each element.

   The “expose within radio buttons” method also hid irrelevant form inputs from people until they needed them. This meant it was easy on the eyes and completed quite quickly. In fact, this was the fastest solution we tested and had the lowest number of average fixations.

2. This is pattern is recommended by GOV.uk

3. and recommended in the Co-op Design Manual

Alternative patterns

This pattern doesn't solve for all use cases, but is a good solution for situations when you need to progressively reveal one piece of information. If you need to ask for more than one thing, an alternative pattern may be better, like revealing the information below the original question's fieldset or on a separate screen.

Proposal Part 2: Inset component

While prototyping the Exposed Within pattern above, I ran into the need for a new component that visually looks like the content is nested, while having a border that leads the user's eye to the element that it is nested within.

What user need this pattern solves

The Inset component is meant to draw attention to important content, or to associate a block of content with another element. It can be used as part of the Exposed Within pattern, in a progressive disclosure accordion (ie. for help text), or on its own as a way to distinguish a block of text from its surrounding content.

Example
Progressively disclosed text
Important content

Alternative components

This component is somewhat similar to the Alert component, in that it can be used to draw attention to important content. However, the Inset component is also used to visually associate its content with neighboring elements, and can be used to indicate a nested relationship.

The Alert component also has a similar left border, but that visual styling could change, as it has in the past.

Supporting evidence

1. This is a pattern recommended by GOV.uk. In their CSS, they named it panel, however I find that confusing and not very accurate.

The Assets Framework referring to: https://assets.cms.gov/resources/framework/3.4.1/Pages/#
Phrased another way, is Assets sunsetted?

• https://github.com/pocketjoso/specificity-graph
• https://github.com/katiefenn/parker
• https://github.com/cssstats/postcss-cssstats

Description

We have a need for a general purpose dialog component in our products at HHS OIG. Here's a gov.uk example for reference of what we are considering. Does the core team have a dialog component on the roadmap?

If not, we will look at implementing our own.

Use this issue to discuss this component in the Design System

Does this replace the Assets Framework 3.4.1? if yes, do you have any replacement for data table sorting and filtering along with JSON support within CMS design system

We should be able to do this once this pull request is merged: lerna/lerna#621

Description

Consider moving the wiki pages into a guides folder to keep documentation in one place as well as have the ability to review, modify, and collaborate on documentation easier.

Pages can be found here https://github.com/CMSgov/design-system/wiki

Description

Opens up the variation prop on the <Button> component so we can have arbitrary variation classes in site packages and themes.

Description

Add information to the pull request template for building snapshots with yarn update-snapshots

https://design.cms.gov/style/color/

Description

When designing a layout that will use the vertical nav component, I expected each version in the design system site to be consistently styled. Instead I spotted a small variation between them.

It would be helpful for all three of these examples to be consistent — I'm not sure which is the canonical UI style.

Steps to reproduce the issue

1. Visit the Vertical Nav Component page: https://design.cms.gov/components/vertical-nav/
2. Look at the styles of all three examples on that page

• The nav as used in the site's own navigation uses carets to show sections that expand with sub-sections

  • 

• The regular HTML component does not use carets to show sections that expand with sub-sections

  • 

• The react component uses carets

  • 

Create CBJ pipeline for building design-system
https://jira.cms.gov/browse/WNMGOPS-103

Create a deployment job to deploy design-system
https://jira.cms.gov/browse/WNMGOPS-104

Description

Add running locally information to the README page and remove from the contributing page.

Description

The Choice component allows for inputs to be placed to the right of labels, which can create ragged spacing and readability issues. We should discuss if this is a pattern we want to maintain going forward, or if it would be better deprecated. This discussion will include identifying any uses in the wild, and ways to notify and remediate any breaking changes.

This came about as part of a discussion on #341, specifically @melwoodard comment #341 (comment)

Including screen shot from that PR showing an example right to left layout with checkedChildren

Additional information [optional]

Use this issue to discuss this component in the Design System

Can use this tool to calculate the proper spacing for a button to match input fields: http://jxnblk.com/formula/