18f / identity-design-system Goto Github PK
View Code? Open in Web Editor NEWAn extension of the U.S. Web Design System used on Login.gov sites to consistently identify the Login.gov brand.
License: Creative Commons Zero v1.0 Universal
An extension of the U.S. Web Design System used on Login.gov sites to consistently identify the Login.gov brand.
License: Creative Commons Zero v1.0 Universal
Introduced in #27.
Howdy 👋
I'm an Engineer at MO Studio working on a project for the VA related to In-Person Identity Proofing for Login.gov accounts. We're using this design system on top of USWDS for our prototype.
Our designers have access to the 2023-10-VA_Request-LGDS_Design_Assets
project in Figma and have used these two components in mockups that we can't identify in the library code. They are the "Step Indicator" and "List Link Item" components screen captured below:
The step indicator works with USWDS styling but seems to be missing LGDS styles to extend it. The List Link seems like its unique to LGDS. Can you point us to any docs or examples of these components? Even just the CSS for them would help us implement them as custom components for now.
Thanks for reviewing and for all the work that goes into building and maintaining this project!
~ Mateo
Why: By consistently practicing language in an intentional way, we can provide content that supports login.gov users’ needs and improve their experience on our sites and materials.
Stories:
Steps
Additional resources:
Notes:
The color page currently lists colors appropriately, but doesn‘t explain that they can be used via utility classes. The documentation should indicate that, and reference the U.S. Web Design System’s documentation on the matter.
a utility class that can be used when necessary that breaks text to new lines so it can be applied globally to all tables
A great addition to the design system would be styles for tables, including those with top and side headers, and tables with no outlines.
Implemented in #32, but documented here for completeness.
Implement styles and documentation for:
One of @rtwell’s pet-peeves about the US Web Design System styles was/is that the sidebar navigation on the left of pages isn’t accessible as you’re navigating through pages.
We should be able to apply .position-sticky
to that to get it to stick nicely… right? Right. I couldn’t get it working, even though it’s covered in the U.S. Web Design System documentation.
We’ll have to make sure that the bottom of longer menus are still accessible for longer menus on shorter height screens.
As specified in login-gov_styleguide_v1.9.3.sketch:
The content in tooltips should remain accessible to those navigating by keyboards and to those on phones, as well as screen readers.
Two additional steps to help run the style guide that might be useful to add to documentation:
As specified in login-gov_styleguide_v1.9.3.sketch:
These should be an adaptation of Labels in the U.S. Web Design System.
There should be some documentation added about the appropriate uses for these labels as well. What are those uses?
Would it be worthwhile to create CSS classes that would include the path to the image along with styles such as height and width declaration, and color? That way code could be easily maintained and updated in fewer places when using images.
SCSS Linters raise issues on selectors like usa-checkbox__label
using underscores and requests using hyphens instead. Several selectors in the design system use underscores which creates multiple linter issues.
The Templates pages in the documentation scaffolding seem to be relating to Form Templates in the U.S. Web Design System, and will need discovery of what they are, and implementation in the style guide.
As annoying as hound is, I think it is a really effective way of ensuring that our css code remains clean. A good example of this implementation is the 18F site:
The lint file should probably be updated from the 18F/frontend repo:
The documentation site should define whole page layouts that are common for use within login.gov, similar to the U.S. Web Design System’s Page Templates.
Additionally, the documentation site should use those layouts, once they are completed. The documentation site currently has no footer and a pretty weak header, just because they were never properly implemented.
Possible bug in the syntax for function roundable-focus-outline-box-shadows
in _focus.scss
This code:
Generates this error:
The function is likely expecting an argument declaration, like so:
@function roundable-focus-outline-box-shadows () { @return 0 0 0 $theme-focus-offset color('white'), 0 0 0 $theme-focus-width + $theme-focus-offset color($theme-focus-color); }
The above syntax makes the error disappear.
The Buttons page currently has some placeholder text, which wasn’t originally written because I wasn’t aware of how the buttons should be used:
Use these button styles unless doing x and y, in which case, use other buttons.
These buttons should be used when x-ing and y-ing.
I still don’t know how those buttons should be used, but we should have a reason why those styles exist, or delete them.
Would a style of key value pairs be a candidate for the Design System? As more data will be incorporated in the Partner's Dashboard this style would be helpful in displaying types of data and their values.
https://federalist-proxy.app.cloud.gov/site/18f/identity-style-guide/
Ideally, this is available so that i can potentially use it on a govt project similar login UI.
Please consider a required form fields style for the Login.gov design system. Partner forms have more optional fields than required fields, so a distinct style for required fields will assist the user in spotting the needed information both in filling out the form and identifying validation errors.
Code samples is part of the content for Partners. Could we extend code formatting styles beyond markdown for styling code in Dashboard?
Consider a way to communicate version changes to the Design System. This helps apps that may have a dependency to the design system in the package.json like this example:
"identity-style-guide": "^2.1.3"
We’re currently using the default USWDS focus outline colors and styles — we’ll probably want to adjust the color to fit into our color palette and perhaps adjust the shapes of the outlines around some of the form controls (most notably the radio buttons and checkboxes).
The USWDS recommends using Font Awesome (FA).
Current Issue:
Meanwhile, Login does not have a standardized, default set option to pull from for the Login site/platform. Also, helpful for Login people to pull from for their slide decks.
This task is competed when:
Currently, the email template page on design.login.gov is 404-ing, which leads to Federalist default 404 message
As implemented in #30, code styles should be covered in the documentation, as login.gov will be using code styles as well downstream.
Design a dropdown action button that follows the design system styles for interactive states and is flexible for adding submenu option for options possible from the action menu.
The link to the documentation for installation and usage instructions is pointed to a page that does not render well (https://federalist-proxy.app.cloud.gov/site/18f/identity-style-guide/).
The implementation into developers.login.gov
is the first time we have a lot of inline code snippets:
Inline code |
---|
… as well as block-level code:
Block code |
---|
… that’s integrated into a lot of written text. I think it’s hard to distinguish where the code blocks start and end, since we’re relying only on font family changes.
Additionally, for single-line code blocks, the scrollbar appears over the text, making it impossible to use:
Scrollbar issue |
---|
As specified in login-gov_styleguide_v1.9.3.sketch:
Unclear of the best implementation for this — if we should include JavaScript for this, or just the styles.
As specified in login-gov_styleguide_v1.9.3.sketch:
Unsure if we should do one or none of these:
.usa-input-file-large
), but leave the JavaScript implementation up to the application consuming this..usa-drop-target
, .usa-file-preview
), but not glue them together, and leave the JavaScript implementation up to the application consuming this.The Components Overview page is currently blank.
Is there anything that should go there, or should we delete it? 🔮
Consider a data list view format in the Design System to support indexing of data, with sorting options and entity actions.
Proposal: Consider writing and adding release notes to design.login.gov
site (Similar to USWDS' release notes)
Stories:
Definition of Done:
design.login.gov
sitedesign.login.gov
site (Consider a subnav under Usage section)For consistency, add a content style guide item for punctuation of toast messages. They are short but should include periods at the end of sentences.
On the data viz side, it would be awesome to have:
Additional items:
As content grows in scope and depth, several products have a need for a navigation option that will allow for deeper taxonomy and labels that may be longer than the average width current top navigation system is set up for.
A side navigation option is needed that will support web applications as well. These tend to have a toolbar to support user actions and global navigation nodes horizontally across the top. A side navigation would complement that type of information architecture.
Note: At the moment, this is in the blocked / waiting
column. The issue was originally created without any additional context beyond the issue/subject line. Will need to investigate more
The autoprefixer for rails is missing in the design system. The design systems vendor prefixer is currently is configure only in the gulp file, and it imports the configuration settings from https://github.com/uswds/uswds-gulp/blob/master/config/browsers.js.
Ruby apps need something like this autoprefixer include in the distributed package and a long term plan to set the .browserslistrc in tangent with the USWDS settings.
Why: As a user looking at screenshots, illustrations, etc., I want to better understand what I am looking at via captions (HT: Karla R.)
Use case example: Captions for screenshots in How to create an account
Notes:
<figcaption>
, including <figure>
AC:
Update: LG-2591 ticket created
It would be nice to have things like “backup codes” vs. “security codes” (etc) covered in the style guide.
Our current disabled buttons are not meeting accessibility contrast requirements and disabled buttons may or may not be very accessible at all. Moving forward we should either consider increasing our contrast or electing to not include them in the system.
The home page should cover at least:
As specified in login-gov_styleguide_v1.9.3.sketch:
I suspect we’ll want to implement this as something like .usa-progress-indeterminate
.
A partial implementation of this is visible while setting up a security key, but I’m not sure if this is the desired animation.
Additionally, the scaffolding for the Progress indicator documentation suggests there is a determinate style for these progress indicators as well, but they are not included in the Sketch specification.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.