patternfly / patternfly-design Goto Github PK
View Code? Open in Web Editor NEWUse this repo to file all new feature or design change requests for the PatternFly project
Use this repo to file all new feature or design change requests for the PatternFly project
There should not be a cards AND a card folder under the pattern-library. add the design folder for "card" underneath the "cards" folder and removed the "card" folder from the pattern-library
The PF kebab example (https://www.patternfly.org/pattern-library/widgets/#kebabs) shows sentence style capitalization for menu items.
In PF T&W (http://www.patternfly.org/styles/terminology-and-wording/) the section for Capitalization for Common Components - it doesn’t talk about capitalization for menu items. But it does say to use Headline capitalization for Button labels. My thought would be Headline would be used for menu items as well.
Could the appropriate recommendation be added to the documentation?
Existing documentation is not clear about how to handle drill-down if multiple elements within a list item or card are linked. Current guidance that a single click on a list or card item should drill down to the next level may not be sufficient for all use cases.
Recommendation: Consider cases where there may be multiple drill-down links and how one should handle this case vs. single drill-down link.
No guidelines on what the value in the center of the donut chart should report. Examples show either Available or Used value, but what is preferable and when?
Upon mention of the "line chart", the bar chart pattern (https://github.com/patternfly/patternfly-design/blob/master/pattern-library/data-visualization/bar-chart/design/overview.md) should link to it (http://www.patternfly.org/pattern-library/data-visualization/line-chart/#/api).
"Line Chart" should has have header style capitalization.
Behavior for row expansion is inconsistent between HTML and Angular implementations. HTML expands when clicking the row. Angular only when clicking the caret icon. Design is closer to HTML implelmentation.
http://www.patternfly.org/pattern-library/forms-and-controls/form-field-layouts/#/api
The section for left aligned labels has a screenshot that shows top aligned labels instead
On this page - http://www.patternfly.org/pattern-library/data-visualization/bar-chart/#/api
Right now it looks like:
Legend: It is recommended to include a legend to define the colors on the chart. On the bar chart, the legend may be located left aligned and underneath the chart or left aligned and to the right of the chart. - Interactive Legend (optional): Clicking on a series in the legend should toggle the visibility of the series in the chart.
and should look like...
On the list view page [1], replace all instances of "Data Toolbar" with "Toolbar" and link them over to the Toolbar pattern here: http://www.patternfly.org/pattern-library/forms-and-controls/toolbar/
[1] http://www.patternfly.org/pattern-library/content-views/list-view/#/api
Remove the h1 titles "Overview" and "Examples"
http://www.patternfly.org/pattern-library/cards/trend-card/#/api
There is some problems with the formatting on the Login page under the Notifications section. See: http://www.patternfly.org/pattern-library/application-framework/login-page/#/design
In Angular example, footer link does not display hand cursor on hover. See example for Footer with Link & Timeframe filter
The Angular implementation does not present row variations as does the HTML/CSS example. There is also no guidance on how these variations can be used, what types of element are available and how they can be defined.
Recommendation: Provide more context for examples and explain general template that should be used to format list items. This would promote better consistency between designs that use list view. Create consistent HTML and Angular examples that implement these variations.
Remove the word "Overview" as it's redundant on Heat Map pattern https://github.com/patternfly/patternfly-design/blob/master/pattern-library/data-visualization/heat-map/design/overview.md
On the design tab (http://www.patternfly.org/pattern-library/data-visualization/bar-chart/#/api), after item "5. Bar:", there is a bug because "Interaction" has a "-" before it. I think it was supposed to be a sub-bullet.
It should look like...
http://www.patternfly.org/pattern-library/data-visualization/heat-map/#/api
Heat map does not have usabiilty tests or discovery so those folders should be removed. See:
https://github.com/patternfly/patternfly-design/tree/master/pattern-library/data-visualization/heat-map
Same issue as patternfly/patternfly#607, jquery.matchHeight-min.js
has changed location.
However there are also some pages that pull resources from CDNs and I suppose that's not what you want. Changing those would require further synchronization with patternfly-org.
Re masthead, Kyle confirmed that the following example is outdated and should come off the PF site: http://www.patternfly.org/pattern-library/navigation/horizontal-navigation/horizontal-navigation.html#
The buttons in the modal examples in the form pattern (link is below) should be updated.https://www.patternfly.org/pattern-library/forms-and-controls/forms/#_
In the overview section, "aggregate status card" should be "Aggregate Status Card"
http://www.patternfly.org/pattern-library/cards/aggregate-status-card/#/api
the design and overview files in the drag-and-drop folder are incorrectly named.
Currently, they are called drag-drop_design.md
and drag-drop_overview.md
; they should be called design.md
and overview.md
Remove the title "Example" from the overview page
http://www.patternfly.org/pattern-library/communication/empty-state/#/api
On the table view page [1], replace all instances of "Data Toolbar" with "Toolbar" and link them over to the Toolbar pattern here: http://www.patternfly.org/pattern-library/forms-and-controls/toolbar/
[1] http://www.patternfly.org/pattern-library/content-views/table-view/
The are various inconsistencies and omissions between design, HTML, and Angular examples. These include:
There is also no reference to bar labeling in design description and when to use top labeled vs. left/right labeled bars or explanation of color coding.
Remove the section title called "Overview" on the overview tab. Remove the example header called "Default Table". It's not necessary and we can just show the screenshot. http://www.patternfly.org/pattern-library/content-views/table-view/#/_
All instances of "Toast notifications" on the Overview page should be "Toast Notifications"
http://www.patternfly.org/pattern-library/communication/toast-notifications/#/api
Remove the section header called "Example" on the overview page. http://www.patternfly.org/pattern-library/communication/wizard/#/api
There are multiple inconsistencies between trend card design examples and Angular implementation examples. Some of these include:
I used the template, which has relative links. Can we update the templates to have the correct format @cshinn ?
Here is the PR for the new Masthead pattern: https://github.com/beanh66/patternfly-design/blob/fb4b2e134405ed5006fe30620b584a7a50437fdb/pattern-library/application-framework/masthead/masthead_overview.md
The pattern library currently includes three parallel view types for presenting summary level content: Card, List, and Table views. Card and List views are presented as full page examples to show how this view can be used in the context of a page. Table View is presented as a stand-alone pattern without additional context. Table view seems to focus more specifically on behaviors associated with data tables.
Recommendation: Create a full page Table View pattern that shows how a table can be used for a summary view similar to List or Card views. Separate out details of data table interaction into a new pattern as tables may be useful in a variety of view contexts.
"Grid lines:" (the second bullet) should be "Grid Lines:" http://www.patternfly.org/pattern-library/data-visualization/area-chart/#/api
http://www.patternfly.org/pattern-library/data-visualization/bullet-chart/#/api
On the overview page, "bullet graph" should be "Bullet Graph"
Remove "description" from the About Modal https://github.com/patternfly/patternfly-design/blob/master/pattern-library/communication/about-modal/design/design.md
The Dashboard Card (Base) pattern is intended as a general container for other dashboard cards, but the relationship between this pattern and other dashboard card patterns in unclear. These is also redundancy between the documentation of features that may be part of the card base pattern (like the time frame filter) rather than the card content itself. This seems like a perfect opportunity for modularization where all dashboard cards are constructed from a consistent base container and additional charts.
There are also inconsistencies between design page and examples around Title formatting. Design says Title is always followed by a horizontal separator, but this is not true in all examples.
On the Overview tab for the Donut Chart, all instances of "donut chart" should be "Donut Chart"
http://www.patternfly.org/pattern-library/data-visualization/donut-chart/#/api
The Forms pattern has numerous inconsistencies with other patterns in the library. Some specific issues are:
Current Forms pattern only addresses simple data entry forms focusing on modals.
Recommendation: Entire Forms section should be reconsidered using a top-down approach. What are the patterns we need? How do we leverage existing work that was done? Where are the gaps.
On the Trend Card page: http://www.patternfly.org/pattern-library/cards/trend-card/#/api
There are "-" listed after all the labels and should be removed.
While the design page includes for 2-Level (Secondary) and 3-Level (Tertiary) navigation options, the examples on the Overview and Code pages are only for 2-Level Nav.
The list view design documentation has the following:
"Pagination: Card view can also support pagination. See Pagination for more details."
Should say Card view instead of list view. Link goes to github instead of the pattern on the site.
The example used in the Overview page for List View is too wide to fit in the page template and therefor wraps. It therefore looks different when opened in a separate window.
Recommendation: Redesign the example so it fits.
In the Card View pattern, the HTML and Angular implementations don't match. HTML follows the design in terms of form and function. Angular implementation lacks formatted card contents and supports selection options that are not described in the design.
Recommend to update Angular card appearance and clarify selections model (updating the design if necessary).
Current documentation does not explain what to display if multiple conditions are being shown in a card and only some of them are reporting conditions that need attention (others are OK). Documentation only addresses what to show if everything is shown or if everything is running OK.
The optional Pin feature is documented as part of Tertiary Navigation, but wouldn't this feature be just as valid for 2 levels of navigation?
Also, not sure that the icon used for Pin is what we ended up with. Pin feature is not demonstrated in any of the examples.
The example shown on this page: http://www.patternfly.org/pattern-library/widgets/#info-tip was superseded by the Notification Drawer and new masthead design and should be revised. Furthermore, an Info Tip is just a general pop-up that is not specifically associated with messages or notifications so this example is misleading.
Card does not have any information for discovery or usability testing so it's not necessary to have those template .md files or folders in there. See: https://github.com/patternfly/patternfly-design/tree/master/pattern-library/card
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.