patternfly / patternfly-org Goto Github PK

View Code? Open in Web Editor NEW

68.0 32.0 134.0 628.75 MB

Home of patternfly.org

Home Page: https://www.patternfly.org

License: MIT License

JavaScript 93.52% CSS 5.99% EJS 0.35% Shell 0.14%

hacktoberfest

patternfly-org's Introduction

patternfly-org

The PatternFly Org is the source for the official documentation for PatternFly.

Development

Development setup requires yarn. If you do not already have yarn installed on your system, see https://yarnpkg.com/en/.

A Node version greater than 18.16.0 is also required.

Live Reload Server

New server

You can install the NPM dependencies with:

yarn install

A local development server at http://localhost:8003 can be started with:

yarn start

Build

The new v5 site can be built with:

yarn build:v5

The static assets get copied to build/patternfly-org.

Deploy

When you submit a PR, previews should be automatically generated for you and uploaded as PR comments. This takes between 5-10 minutes.

When the PR is merged to main, the site is first deployed to a staging S3 bucket.

When PatternFly does a release (currently every 3 weeks) this bucket is copied to https://patternfly.org.

Old submodules

You might have a dirty file tree with old submodules and folders lying around. You can remove these with:

git clean -dfx

Contribute to HTML/CSS

To contribute to PatternFly's HTML/CSS core repo, refer to the core contribution guide and the related guidelines.

patternfly-org's People

Contributors

Stargazers

Watchers

Forkers

jeff-phillips-18 dlabrecq danltest mcarrano lhinson srambach junezhang dgutride priley86 dtaylor113 adamj bleathem mwcz sjcox-rh patternfly-build fh1ch roupraih andresgalante cshinn michpetrov d-s jennyhaines garrett david-martin jgiardino jamesnetherton cdcabrera veduket catrobson beanh66 kybaker tadayosi amarie401 rohoover zhutaoredhat tomer seanforyou23 katierik stacymcauliffe redallen bmignano jknilans jeperry whatisdis mturley jessiehuff jenny-s51 lareplog mmenestr ncameronbritt rachael-phillips gdoyle1 kchurc18 evwilkin doruskova mattnolting iokaravas andybraren abigaeljamie nlcwong keshav-mishra thedemodev daodaonocode abichen christiemolloy beccaglass afialkoff japhilli-rh bkrikori cben janwright73 jennydaman nicolethoen joeldmyers kevinhatchoua jakuje gaurav-nelson lwright736 anishaswain bgliwa01 bitwiseor marisvirik indraraj xiquita florkbr preetiw whitingjr jschuler wolfeallison kaedward jpuzz0 andrew-ronaldson pankajshivpuje coreyvickery blfetche thatblindgeye kuklas tiyiprh cooperredhat endofline4

patternfly-org's Issues

Widgets: Infotip missing image

The path to the logo on info tips is broken:

Aggregate Status Card: Example images

Following are changes to make to the example images in the Aggregate Status Card pattern.

Design tab, “Top Accent (optional):” If it’s optional, show one example with and the other without. Same for “Object Icon.”
On the 793 Hosts image in “Content Area,” move the pink callouts so they don’t overlay the content.
On the 856 Hosts image in “Content Area,” move the cursor so it doesn’t obscure the underline (which is the thing we’re trying to demonstrate).

PatternFly -> Cards -> Aggregate Status Card -> Code -> Angular-PatternFly : missing images

Verify placement: Red Hat logo, legal text, social media buttons

I'm not aware of the correct design but it seems odd that the red hat logo, legal text and social media icons are all inline within the what's new row. Can/should they be moved to white row below?

I noticed in mobile it's overlapping content.

Dead image on forms/design page

There's a broken image at the top of https://beta.patternfly.org/pattern-library/forms-and-controls/forms/#_design

Widgets: Copy link is out of place

On snippets the copy link is out of place.

Widgets: Bootstrap Datepicker: Duplicated examples

We are duplicating this one.

Code snippet for login page is incomplete

http://v2-patternfly.rhcloud.com/pattern-library/application-framework/login-page/#_code
Code snippet doesn't make clear that is necessary to add the following class to make the login page look as it should be:
<html lang="en-us" class="login-pf">

This needs to be declared in the code snippet.

Login pattern: Example images

Following are changes that need to be made to the example images in the Login pattern.

On Design tab, the hi-fi mockup shows “Forgot Username or Password?” but the wireframes in # 8 show “Forgot username or password?”. The sample on the Code tab shows “Forgot username or password”. All should show "Forgot username or password?"
On Design tab, the hi-fi mockup shows “Remember Username” but the wireframes in # 8 show “Remember username”. The sample on the Code tab also shows “Remember username”. All should show "Remember username"

Widgets: pretty print example has the copy link

The pretty print example should not have the copy btn:

Forms page

@LHinson If on the forms page we are only going to show error message, maybe we should call it "form validation" something like https://www.google.com/design/spec/patterns/errors.html

If not then we should add the different inputs and ways to use a form, or link to http://getbootstrap.com/css/#forms since its the same on paternfly.

Date picker is missing examples

Date picker has different ways to use, on the website we only show one.

We show component, we are missing: range, inline and text input.

AngularJs vs Angular-PatternFly

On the code tab, the tab for angular should be called "AngularJS" vs "Angular-PatternFly"

Horizontal menu missing snippets on Navbar Variations

Since for this version of the website we are not going to write tech documentation to explain the difference and modifiers for each variation of the menu, maybe we should add code snippets on Navbar Variations.

Aggregate Status Card: Copyediting

Following are typos or copy changes for the Aggregate Status Card pattern.

Key: old text -> new text (where to find the text)

Make sure you are consistent and either opt to always use the icon or not. -> Be consistent; either use the icon on all the cards throughout your application, or don't use it in any. (Design, Header Area # 2)
Icons should be used thoughtfully and sparingly. -> Use icons thoughtfully and sparingly. (Design, Header Area # 2)
Ensure that the icon’s visual metaphor provides valuable meaning rather than pointless clutter. -> Ensure that the icon’s symbol metaphor provides valuable meaning. (Design, Header Area # 2)
A status icon represents -> This represents (Design, Header Area # 1)
If no objects exists -> If no objects exist (Design, Content Area # 3)
with an underline on hover -> with an underline that appears on hover (Design, Content Area # 5)

PF blog site which is referenced by the PF beta site brings you back to regular PF site

Starting on beta.patternfly.org - if i navigate to PF Blogs, it brings me to blog.patternfly.org which has navigation pointing back to the regular PF site.

Will this be updated once the new site goes live?

No nav link that takes users to top of widgets page

As far as I can tell, there is no nav link that takes users to https://v2-patternfly.rhcloud.com/pattern-library/widgets/

Clicking on the "widgets" menu item should probably link there in addition to expanding the accordion (because there is a "widgets" page unlike the other primary nav categories)

What is the purpose of Icon "Cheatsheet"?

There are little differences between the main Icon page and the linked icon "Cheatsheet". Just wondering if we should combine the two pages into one.

The list of PF icons are the same in the main Icon page and the 'cheatsheet', however the cheatsheet does have additional functionality:

"To use on the desktop, install PatternFlyIcons-webfont.ttf or FontAwesome.otf, set it as the font in your application, and copy and paste the icons directly from this page into your designs."

the .ttf and .otf files are links which downloads the files when clicked
If you hover over a PF icon you get a "Copy to clipboard" which works, I guess, not sure where I'm supposed to 'paste' the content. Pasted into text editor and IDE, but displayed a binary object?

Seems like we could add the same functionality to the main Icon page and remove the 'cheatsheet'

Overlap with example and "reference markup" expand link

Overlap with example and "reference markup" expand link. See http://beta.patternfly.org/pattern-library/navigation/horizontal-navigation/#example-code-3

Pie charts don't render one beside the other

The pie chart samples are rendering one ontop of the other rather than one beside the other.

Login pattern: Copyediting

Following are typos or copy changes for the Login pattern.

Key: old text -> new text (where to find the text)

error messages -> error message (Overview)
case by case -> case-by-case (Design, # 3)
Login button -> Log In button (Design, # 3)
"A “Remember username” checkbox" -> A “Remember Username” checkbox (Design, # 4)
Due to security reasons -> For security reasons (Design, # 4)
"Forgot username or password?" is a link -> "Forgot Username or Password?" is a link (Design, # 5)
The login button appears -> The Log In button appears (Design, # 6)
Apply text sparingly, do not -> Use text sparingly; do not (Design, # 7)
If there are multiple strings, each message would appear on its own line and the area adjusts as needed in order to fit these messages. A couple examples of these messages include: -> If there are multiple strings, each message appears on its own line, and the area adjusts as needed to fit these messages. Examples of these messages include: (Design, # 8)
the value entered -> the values entered (Design, # 8)

New website: list view preview tile missing top border

https://v2-patternfly.rhcloud.com/pattern-library/#_

Top border missing from List View preview image

Missing T&W

Looking at “what’s new”, it appears that “Links” and "Common Terms and Words” are missing from /styles/terminology-and-wording

Pagination controls are detached from data tables.

Donut chart needs updated content.

The Donut Chart content seems different than what's on the current site. Also, the graphic in the Design page (https://v2-patternfly.rhcloud.com/pattern-library/data-visualization/donut-chart/#/_design) does not seem like the right one. It has no call-outs to go with the text to the right.

Bottom of PF Home/Splash page, 'Featured Content' carousel, clickable?

Just seems to show images with no text and clicking on images doesn't do anything.

Trend Card: broken links

On the Design tab for Trend Card:

Both instances of "time frame filter" are 404.
"actions panel" link is 404.

Can't "Command+A" to select the code

For example, in this page, https://v2-patternfly.rhcloud.com/pattern-library/cards/trend-card/#/_code
The code below index.html.

When mouseover the code area, Command +A, it can't select all the code below index.html. If it feels confusion to operate Command+A to select the code, you can add a little button "Copy" to let user copy the code easier than now. Currently we need to manually select the code.

My environment is Mac 10.10.5, and Chrome 50.0.2661.102 (64-bit).

What's New on the home page is out of date

What's New on the home page is out of date.

Trend Card: code sample

On the Trend Card Code tab:

On the Card with Multiple Trends example, the right-most end point (and presumably current value) for Virtual Disk I/O doesn't look like it's 30%. Same for Memory Utilization, which should be 22%.
The numbers (30%, 6%, and 22%) should be left-aligned.
The label on the action icon should be “Create Cluster” to be in keeping with our T&W.

Broken tag on widgets/#css

https://v2-patternfly.rhcloud.com/pattern-library/widgets/#css has a broken strong tag

N/A

PF.org footer Twitter, Facebook, and google+ links; should they open in new tabs/windows?

Just annoying, I clicked on Twitter, which went to PF twitter page, however it replaced PF.org, so when I closed the twitter window, I had to re-launch PF.org.

Reference Implementation snippets are close on widgets

On all widgets the code snippets are collapsed.

Forms page modal example

Remove the stye tag from the example. It was just meant to make the modal visible not to be part of the snippet. We don't want any user to use that style on modal in any case.

New PatternFly site: PatternFly Modal Design page - link goes to old site

The link PatternFly Modal on this page: https://v2-patternfly.rhcloud.com/pattern-library/communication/about-modal/#_design is still linking to the old site.

Typo on Get Started page in beta version

In the Community section, "involved" is misspelled

"Interested in getting nvolved"

http://beta.patternfly.org/get-started/#_

Vertical menu missing something on the snippet

@jeff-phillips-18 Can you please help me review this snippet: http://beta.patternfly.org/pattern-library/navigation/vertical-navigation/#_code
We are missing something on the snippet to add the margin on the left of the content to make room for the menu.