predixdesignsystem / predix-design-stencil Goto Github PK

Creating forms goes very quickly when there are examples of all the datatypes. It allows designers to copy and paste, then modify as well as select and examine to determine what symbols were used.

For example, in the form layout... Include input and read-only states for:
Geocode (Lat, Long)
Map (to display location of Geocode)
URL
Time Stamp (Only read-only)
Status (E.g. the status of the form... pending, assigned, etc.)
Date (with date picker)
Image (display, upload, etc.)
File (Upload, clear, valid file types)

It's not clear how a user would select all in the (Group 11) example in the Sketch template.

There is no checkbox in the header, and I would assume clicking SELECTED would sort.

When resizing the Card/Light symbol the Divider Line - Light is not properly positioned top on resizing. If you shrink it in height the Diver Line - Light gets positioned outside of the symbol and is no longer visible. I did not check the dark card.

Request to include the disabled cursor state as part of the cursor symbols. A disabled state will help illustrate disabled interactions.

Request to add a symbol for a search field, and an advanced search

I'm trying to use the Design Starter Kit but it doesn't seem to come with GE Inspira Sans font. There's a copy of SF from Apple but all the symbols are created with GE Inspira.

Request to add a scroll bar symbol for wireframe purposes only

As part of the forms items, a good addition would be a simple label, with no value or value field associated.

I have used this often to create forms with dropdowns as an example.

The symbol exists as you use it as part of the form symbols, so it is a matter of exposing the label by itself :)

I am not clear how to utilize in Sketch, the responsive grids you have on your site. I didn't see any grids in the Sketch file?

Thanks!

It would be really helpful to be able to switch between the open and closed states for section headers.

Also, including them on the example layouts.

The vertical spacing on the selected state of tabs is a lot taller than the default and disabled states, making the comps jumpy.

It seems there is a missing item for the Light Breadcrumb. I have attached a screenshot.

Ideally tied to the same color, so that if we modify the brand bar color for a customer it changes in both the brand bar and the collapsed brand bar.

Thanks!

I find myself using labels for forms that involve other types of data entry mechanism like dropdowns.

Currently the label symbol only appears with the form field. Could you add the Label symbol by itself as an option without the form field?

Example usage:

Chip right border does not show up when you have large text within, and expand the chip to fit within the right padding.

Example of max width that works:

Example where it does NOT work:

Can the status colors be added to the icon overlay colors? It would be great to be able to use a trending up/down arrow with the proper colors. Right now it's limited.

Fix Text Area Form to wrap. Change from auto to fixed.