uspto / designpatterns Goto Github PK

The button on input groups in Firefox and IE11 (did not check lower versions) extends 1 pixel below the input box.

Possible Fix:
Changing the .btn class to use a line-height of 1.4 (not sure if this affects anything else, only tried it in firebug)

Example on this page:
http://uspto.github.io/designpatterns/patterns-patterns-search.html

Viewers of the guide should have the ability to see the latest official release, the working drafts, and previous major releases.

Current plan:

• Latest official release: uspto.github.io/designpatterns/
• Latest working draft: uspto.github.io/designpatterns/draft/
• Previous major release: uspto.github.io/designpatterns/2.1.4/

Latest, draft, and previous versions should include all documentation, guides, downloads, and changelogs.

Add documentation for performing a release including:

• How git tags are used
• How to perform a minor/patch update on a tagged release

• Default grunt build for draft builds to draft folder
• Add grunt release for official release to root folder and sub folder
• Add UI mechanism and/or docs for viewing official/working/previous versions.
• Add release process documentation

Changes to input-group-btn z-indexes to fix border overlapping inadvertently causing issues with z ordering of dropdowns nested in an input-group-btn.

Think we can add a link on this page or in the nav to the work-in-progress version? Wherever it's logical.

http://uspto.github.io/designpatterns/index.html

This project is awesome! Thanks for creating it. I'm sad, though, because The UI Nightmare That Is The USPTO Patent Search website does not use anything remotely close to this style guide. Instead it features a horror show of UI gaffes, from requiring several clicks to get to a search box, to embedding text in images, using tables everywhere, etc.

So I applaud the creation of this guide — it's clearly needed — but I bemoan its disuse by the USPTO.

Style Guides are great… but running code would be even better. What's the timeframe to implement this guide on USPTO.gov?

Brian,

eFile is using a different pattern for the horizontal steps. May we please add that to pattern library.

thanks,
Menka

Can we try putting the "undo" link within the notification in a frame of sorts? Perhaps in a little button? I'm worried that longer notification text will run into it and make it part of the sentence.

Also,can we try the info icon with the circle? If you disagree, it's fine the way it is--whatever you recommend. That may be too close to the error notification, at first glance.

The system alerts component currently has relatively loose guidelines regarding the automatic/manual closing. We can improve this and expand these guidelines to contextual alerts.

will it be clear which filters are currently applied with a long side list? May want to consider having current filters listed across top? not sure...

For top filters, how did they select two conveyance types? (assuming its a drop down)

Expand the templates in the Inspiration gallery with patterns that provide additional guidance/ideas for Patent applications.

Add or update the following patterns and link them together in a simulated workflow:

It would be great to customize the tooltip with lighter colors as the popover widget. I used it in the assignment with large content but it looks so dark in the light theme that I used from the USPTO pattern lib.

Components > Buttons

• Icon Buttons: missing sr-only for icon-only buttons

Components > Forms

• Add aria-required attribute
• Consider putting radio buttons and checkboxes into fieldset/legends (Bootstrap doesn't really support this, so holding off for now)
• Add aria-invalid to invalid inputs and role="alert" on contextual errors

Components > Menus

• Not accessible with AT (since these are static representations of menus with static a tags, I think we're fine. Real implementation using bootstrap is keyboard accessible)

Components > Popovers

• Icon buttons lacking sr-only
• Not accessible with AT (need more information, currently static)

Components > Tables

• Fixed header may have AT issues (need more information)
• Add aria-sort to sorted tables. (doesn't look like aria-sort handles multi-sort, or just use 'other'?)

Components > Tooltips

• Not accessible with AT (bootstrap plugin issue?)

Patterns > Search

• Add labels to inputs

Patterns > Wizards

• Navigation items lacking label/status
• Ensure all fields have correct label tags

Inline css background image not working in IE.

I'm new here, so this may have been answered before. Why is our Button text sentence case when in my experience best practice dictates Title case?

Thanks,
Jim Kauffman

Mind if we make the white background row first, in the striped table?

can we add GA to the demo site? Let me know if you need the USPTO GA code

The separator for the filters contains a null character, it does not render in Chrome, but it does in Firefox and IE.

CSS Class:
.filter-criteria .filter-applied-list > li:after

URL:
http://uspto.github.io/designpatterns/patterns-patterns-filters.html#side-filters

We would like to specify an additional long date format as: MM/DD/YYYY

In tables with many dates, for space constraint reasons, it would take up less space to use the above format.

asedfsdf

Since the repository is still private, we want to add a notice when clicking the 'View on Github' links that tells people to request access.

I don't believe I've seen radio buttons and check boxes used in a menu like that, is this needed?

Waiting on Arva to finalize

Some of the text on the notifications and system alerts in our pattern seem to refer to very similar events in the system. Thereby, it is not clear for new teams to understand, which one to use when. Can we clarify the usage context better?

For example,

and

Transition permalinks from /1.0.1/ to /1/.

The current permalink style is /1.0.1/. We only care about archiving major versions, and we don't want direct links to break for each minor/patch version. This task is to move from /1.0.1/ to /1/ to improve longevity of the links between minor/patch versions.

The header shade is the same color as the stripes. Difficult to tell the difference between the header and the stripe in the first row.

Added icons to alerts page.

Still need to add to form examples.

After Segoe, can we add Helvetica as a fallback font for OSX? And then Arial and sans-serif, as you have it.

should add a suggested minimum width for buttons used in form submission, i.e. even if the button only has a few characters, there is no need to make it only the width needed for the characters.

On the modal description it states that the footer should always be visible. The default behavior in bootstrap is to allow the modal to expand vertically and scroll using the main browsers scroll bar. To me, this more usable for users as they don't need to hover or click in to the modal content to begin scrolling. Thoughts?

P.S. if we keep the guideline for the footer always being visible, we will need to update the example modal as it expands off of the page currently when more content is added.

Chrome only seams to render the 700 weight of Segoe UI, explorer renders them all. Are others having this problem?

Looks really clean. See anything here you think would be useful to add?

http://msdn.microsoft.com/en-us/library/windows/apps/hh465475.aspx

Hi,

One of the first decisions UXD made (before you came aboard, Brian) was that the asterisk color would be the same color as the form field label text. Do you know why and when this changed? Not that it's a bad change, but just making sure it's what UXD wants as a whole.

Thanks

how would the undo and retry work in practice? We currently usually have just an x to close the notification.

also, are alerts that appear in a form, and notifications that appear after form submission both contextual alerts? e.g. one might appear inside the form, one might slide in at the top of the whole page?

Hi, We've got issues with Chrome not showing the different fonts, again. Jeff is using 37 and could only see 700 weight. The rest all looked like 400. I'm using 38, and 300 and 200 look the same.

The toggle switch pattern has been added to the form controls section. Feedback appreciated!

http://uspto.github.io/designpatterns/patterns-components-formControls.html#toggle-switches

Swatch corrections final.pdf

Icons working fine on Google Chrome but not able to see on IE9. Check the attached image.

not sure about the three solutions. For instance on the Medium example, the numbers represent items and not pages, yet the drop down shows Jump to page

Where did the font weights issue leave off? I just attended a demo where the metadata pattern was used and it didn't show any increased weight for the labels.

(update: looks like issue 37 discusses this: #37 ,but it still isn't working on my laptop. did I not get a uspto wide browser update perhaps or is this an issue for others?)

On my laptop, chrome doesn't show the bolding but in explorer it does. Screen shots below:

Users would like the bullet design to be both where it is now, and then cross-referenced in their own menu item. Some didn't know to look under typography for that.

The packaged zip file is currently empty. A regression from cf5f7bd.