patternfly / patternfly-3

This repo contains the HTML, CSS, and JQuery for the PatternFly 3 project.

PatternFly 5

Install

• This assumes an environment is already set up for npm packages - if not, please use npm init following the steps at https://docs.npmjs.com/getting-started/using-a-package.json.
• run npm install @patternfly/patternfly --save

When you install PatternFly 5, the package includes:

• a single file for the entire compiled library: node_modules/@patternfly/patternfly/patternfly.css
• individual files with each component compiled separately: node_modules/@patternfly/patternfly/<ComponentName>/styles.css
• a single file for the entire library's source (SASS): node_modules/@patternfly/patternfly/patternfly.scss
• individual files for each component's source (SASS): node_modules/@patternfly/patternfly/<ComponentName>/styles.scss

Any of the files above are meant for use in consuming the library. The recommended consumption approach will vary from project to project.

Development

PatternFly 5 Development requires Node v16.0.0 or greater

To setup the PatternFly 5 development environment:

• clone the project
• run yarn install from the project root
• run yarn start
• open your browser to http://localhost:8001

After working on your contribution, check for accessibility violations.

Create components, layouts...

To create source file scaffolding for a new component, layout, utility, or demo, run the NPM script:

node generate <CamelName>

Below are the full options for this script:

Options:
  -f, --folder <folder>  Source folder (components, demos, layouts, or utilities) (default: "components")

Examples

To create a "Test component" component (.pf-v5-c-test-component), run:

node generate TestComponent

To create a "Test layout" layout (.pf-l-test-layout), run:

node generate TestLayout -f layouts

To create 3 new demos named "Test demo", "Test demo 2", and "Test demo 3", run:

node generate TestDemo TestDemo2 TestDemo3 -f demos

Update screenshots

When making visual changes to a full page example, new example preview screenshots must be generated. To update the screenshots:

• open a terminal and run yarn build && yarn serve
• in another terminal, run yarn screenshots

Guidelines for CSS development

• For issues created in Core that will affect a component in PF-React, a follow up issue must be created in PF-React once the Pull Request is merged. The issue should include the Core PR #, the Core Release, a link to the component in https://core-staging.patternfly.org, and information detailing the change.
• If global variables are modified in Core, a React issue should be opened to address this.
• CSS developers should ensure that animation is well documented and communicated to the respective React developer.
• Once the component/enhancement is complete it should receive sign off from a visual designer who can then update the master sketch file with any changes.

Handlebars guidelines

For information on how to contribute, refer to our guidelines.

CSS/Sass guidelines

For more information on using CSS and Sass, refer to our guidelines.

Custom icon guidelines

For more information on custom icons, refer to our guidelines.

Beta components

When creating a brand new component, it should be released as beta in order to get feedback.

Testing for accessibility

PatternFly uses aXe: The Accessibility Engine to check for accessibility violations. Our goal is to meet WCAG 2.0 AA requirements, as noted in our Accessibility guide.

How to perform an accessibility audit with aXe

aXe is available as either a browser extension or npm script.

To run the a11y audit locally:

• install the latest chromedriver and ensure its available on your system $PATH
  • macOS users can simply brew cask install chromedriver
• open a terminal and run yarn build && yarn serve
• in another terminal, run yarn a11y

The tool is configured to return WCAG 2.0 AA violations for the full page renderings of all components, layouts, utilities, and demos. The tool will provide feedback about what the violation is and a link to documentation about how to address the violation.

The same tool is also available as a browser extension for Chrome and Firefox.

Fixing violations

Ignore the violations that aren’t related to your contribution.

Fix violations related to your contribution.

If there are violations that are not obvious how to fix, then create an issue with information about the violation that was found. For example, some violations might require further discussion before they can be addressed. And some violations may not be valid and require changes to the workspace or tooling to stop flagging the violation.

If you have any suggestions about ways that we can improve how we use this tool, please let us know by opening an issue.

FAQ

CSS Variables

How do I use CSS variables to customize the library?

Browser support

PatternFly 5 is supported on the latest two major versions of the following browsers:

• Chrome
• Firefox
• Safari
• Edge

patternfly-3's Issues

Alignment of .badge looks off in .nav-tabs

Noticed in Katello/katello#3881, filing this for @ehelms.

The alignment of .badge apperas to be off when used in a .nav-tab.

Markup:

<ul class="nav nav-tabs">
  <li class="active">
    <a>
      Affected repositories
      <span class="badge">3</span>
    </a>
  </li>
</ul>

Latest Patternfly:

Just bootstrap3:

Provide a way to easily move the navbar sideways

I was thinking something more like this: http://wrapbootstrap.com/preview/WB0573SK0

That could be useful if there are a lot of items in the top navbar, then moving it sideways might make it look cleaner. I might be wrong though!

Integrating a bootstrap template to rails 4 application

Hi,
I am new to ruby on rails and i want to add a bootstarp theme to my application i downloaded it from here http://startbootstrap.com/
I have this directories /css, /font-awesome-4.1.0, /fonts, /js and other HTML files
Could you please tell me where to put each of these directories to get it work perfectally
Thanks in advance

please bring gregsheremeta:patternfly-spec under the patternfly umbrella

I've created a project that contains a spec file that packages patternfly as an RPM.

Please bring this repo under the patternfly project. I suppose you can fork it or just copy and paste.

https://github.com/gregsheremeta/patternfly-spec

.glyphicon has unexpected "top" style.

patternfly.css 1.1.3 contains this snippet:

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

The "top: 1px" causes a button with a glyphicon to be out of alignment (see screenshot).

The HTML for the buttons in the screenshot:

            <div id="dashboard-toolbar" class="pull-right zoom-controls">
              <div class="dropdown" style="display:inline-block">
                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                  <span style="width:6em;text-align:left;padding-left:5px;display:inline-block"></span>
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                  <li role="presentation"><a role="menuitem" tabindex="-1" data-action="goto-now">Go to now</a></li>
                  <li role="presentation" class="divider"></li>
                  <li role="presentation"><a role="menuitem" tabindex="-1" data-range="300">5 minutes</a></li>
                  <li role="presentation"><a role="menuitem" tabindex="-1" data-range="3600">1 hour</a></li>
                  <li role="presentation"><a role="menuitem" tabindex="-1" data-range="21600">6 hours</a></li>
                  <li role="presentation"><a role="menuitem" tabindex="-1" data-range="86400">1 day</a></li>
                  <li role="presentation"><a role="menuitem" tabindex="-1" data-range="604800">1 week</a></li>
                </ul>
              </div>
              <button class="btn btn-default glyphicon glyphicon-zoom-out" data-action="zoom-out"></button>
              <div class="btn-group">
                <button class="btn btn-default fa fa-angle-left" data-action="scroll-left"></button>
                <button class="btn btn-default fa fa-angle-right" data-action="scroll-right"></button>
              </div>
            </div>

We are working around this with this CSS:

.btn.glyphicon {
    top: 0px;
}

What's your recommendation?

disabled variants of btn-danger and btn-primary are colorless

Ran into a situation where I needed a bunch of btn-danger together, but some of them disabled. I noticed that the disabled ones were colorless.
Feature or bug?

class*="-exclamation" affects other stylesheets

The following rule in less/icons.less affects other projects classes and seems to be needlessly broad:

[class*="-exclamation"] {
  color: #fff;
}

In particular in Cockpit it makes certain things show up in white as they change state.

has-warning and btn-warning doesn't match

On bootstrap.org label-warning uses #F0AD4E and has-warning input uses the color #8A6D3B
http://getbootstrap.com/components/#labels
http://getbootstrap.com/css/#forms-control-validation

Patternfly use the stronger, more orange #EC7A08 for label-warning, but still use #8A6D3B for the has-warning input.
https://www.patternfly.org/widgets/#labels
https://www.patternfly.org/widgets/#forms

mixed IE8 support

PatternFly says

Since PatternFly is based on Bootstrap, PatternFly supports the same browsers as Bootstrap

This includes IE8.

However, the dependency tree pulls in jquery > 2, which is not IE8 compatible.

PatternFly should explicitly pull in jquery < 2.

Full page example

A full page/site example is needed. At the very least a cmplete page with navigation, some tables, etc.

Provide a zip of patternfly

Hi,

I was wondering if it would be possible to provide a tarball or zip of the distribution of patternfly (similar to what Bootstrap offers here: http://getbootstrap.com/getting-started/#download) instead of having to install bower.

That would probably be useful for people like me who does not have npm or node installed on my computer.

Too much margin after bootstrap-select control

The bootstrap-select control has a 10px margin-bottom. This causes help-block not to be displayed together with the control.

Another option for login

From https://www.patternfly.org/wikis/patterns/user-authentication/loginlogout/ , the login page is really stunning!

However, I'd like to have another supported option for login. Clicking on the 'Login' button will provide a pop-up that will ask for Login credentials. That will, IMO, probably make the Login process more seamless and fluid. If the user decides he doesn't want to login after all, he/she can just click on [x] or any other part of the screen to get out of the Login pop-up.

Problem with glyphicons -> dependency on bootstrap

In patternfly.css, glyphicons are fetched from components/ directory:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../../components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot');
  src: url('../../components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../../components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff') format('woff'), url('../../components/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../../components/bootstrap/dist/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Problem is that components directory is not stated anywhere as dependency, and you also say that patternfly does not depend on bootstrap, which seems incorrect from this.
I expect everything important to be in dist, so when building my web application which does minification and similat operations I get an error because I had no reason to know that stuff from components directory has to be copied.

Gulp vs Grunt

Can we switch from Grunt to Gulp?
https://medium.com/@preslavrachev/gulp-vs-grunt-why-one-why-the-other-f5d3b398edc4

patternfly components - what is that for?

When I install patternfly from bower, there is a components folder inside. What is that for? All of those are stated under devDependencies in bower.json, but it seems to me like all this is needed for patternfly to work. If that is correct, why are they not normal dependencies?

Font awesome only

Bootstrap uses this: http://fontawesome.io/icons/

I add the icons by doing this:

<span class="fa fa-user"></span> 

Why is patternfly using Icomoon?
It causes freak implementations:

<span class="pficon pficon-user"></span>

Website down?

Hi there,

Seems like the website is down.. maybe maintenance.. But I miss it nevertheless.
Might be a good idea to move the Patternfly website to some RHEV managed cluster! 💃 😄

Search component example not working well for server side search

If you have a workflow where you display a page with search form to the user, who fills in their query and submits the form back to the server that returns a new page, there are several issues with the example code.

1. Clicking the search button does not submit the form. The user has to submit via keyboard. Specifying the button type as submit fixes this.
2. If the form is displayed again on the result page, the input field contains submitted text, but the clear button is hidden. This can be fixed by using

$(".search-pf .clear").toggle(!$(this).prev('input').val());

instead of the hide call which (according to docs) does not support boolean argument.

Small text on PatternFly.org?

Not sure if PatternFly.org represents a default PatternFly theme, but the text is tiny, verging on non-compliance with WCAG. Consider using a more readable font or increasing the font size by default.

OpenSans should go in components

I think dist/OpenSans* should be moved into ./components/opensans/

checkboxes and radio buttons not hidpi aware

Tried patternfly on a HiDPI/Retina screen (3200x1800 on 13") and everything look good, except for the checkboxes and radio buttons, at least on Firefox.

Checkbox from Cockpit:

Radio button from https://www.patternfly.org/wp-content/uploads/patternfly/tests/form.html

Sidebar code fails if no navbar

In Cockpit we have the navbar in an outer frame, rather than in the document itself. The sidebar logic looks for this before setting the height of .sidebar-pf:

    if ( $('.navbar-pf .navbar-toggle').is(':hidden') ) {

This causes the sidebar not to work, unless we put an invisible hack of a navbar inside the document. Is there a better way to determine whether we're on mobile or not?

Backgrounds should be optional

1# Case one
Consider this:
I do not want a background image, but a color.

Situation:
Open the patteryfly css.. remove the background-image attribute.

Problem:
When updating patternfly, my changes will be overridden

Temp solution:
I could add my own css, but than it will download the image anyways..eventhough it will not use it. Because it is in the patternfly css which is loaded.

2# Case two
Consider this:
I want a custom background image.

Situation:
Open the patteryfly directory and replace the image.

Problem:
When updating patternfly, my changes will be overridden.

"grunt" command isn't available after following the steps in the README.

One way to get it is "sudo npm install -g grunt-cli", but I can't say whether this is the right way.

pficon-service has poor complex typography

The pficon-service icon has complex double lines, and path overlaps, which cause it to render poorly at anything but the largest scales.

Pagination issue on datatable

Hi

I think the datatable plugin bundled with patternfly JS has some issues when you configure datatable with "server processing" feature: It wont show appropriate pagination length, buttons and numbers.

Thanks for this awesome work!

Dashboard widgets

Hi there,

What are the libraries behind the dashboard graph? Right now they are just images, but I would like to implement these, so could you please tell me?

Javascript Libraries

Hi there,

is there a list of javascript libraries that will be included in the future? Things like the c3js library?
I ask this, because it could happen that some systems require documents need to be uploaded, or images even. Imagine a whitelabel enabled reseller SAAS dashboard for instance.
In that case, what image uploading libraries would one use?

Date picker

Add a pattern/widget for inputting dates and times

Is bootstrap a dependency

I am interested if bootstrap is in any way dependency for patternfly? Do I have to include bootstrap js or css in order for patternfly to work? Thank you

Release new version with Google Code Prettify included

Could you please $SUBJ$? 🚀

Content jumps when opening a dialog

The content of the browser jumps a bunch of pixels to the right when a dialog opens.

placeholder text makes input field look disabled

Having placeholder text in an input field makes it look disabled. The port fields in the screenshot (with none placeholders) do not look like I can type into them because their contents are the same grey as a disabled field (eg: the disabled 'TCP' dropdown).

Ugly looking alert octagon exclam icons

Unfortunately, the alert octagon exclam icons look misaligned and quite amateur when rendered on Linux. I would suggest not using overlay at all to get consistent behavior across browsers and operating systems.

fonts are too small

I think body font-size=11px is horribly small.
In github, g+ and gmail default theme, it's 13px. In bootstrap-3 default is 14px.
11px is just too small.

Please publish package to npmjs.com

I'd like to use only npm in my project. Please publish patternfly to npmjs.com. It seems to be easy: https://gist.github.com/coolaj86/1318304

Monospace <pre>, <code> etc... nearly unreadable on linux

The patternfly font choice results in an almost unreadable <pre> and <code> tags on linux.

Wrong path for bootstrap in examples

Hi,

• I've noticed that most (or all?) of the examples in the project (inside the test folder) defines the wrong path for bootstrap.min.js. In this case, the folder does not exist.
  e.g https://github.com/patternfly/patternfly/blob/master/tests/accordions.html#L19
• I've also noticed that my browser could not display some icons.
  OS: Fedora 20
  Browser: Firefox 29
  
• Last thing I wanted to mention was that the example uses
  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> [1]
  This would work fine if the examples were put in an HTTP server and we would launch it with http://<example>/dashboard.html . However, I would think that users will usually launch it from the file itself with file:///home/dcheung/<extra_paths>/dashboard.html, and in that case, the JQuery code won't be downloaded.
  So I'd suggest we switch to http://code.jquery.com/jquery-1.10.2.min.js

[1]: e.g https://github.com/patternfly/patternfly/blob/master/tests/dashboard.html#L15

Collapse plugin not present

The collapse plugin from Bootstrap seems not to be present in the patternfly.js file. If is a feature then the documentation should mention it and provide simple way how to get standalone collapse plugin.

Extended form controls

Hi there,

What libraries are going to be included for extended form controls, like

• range-sliders
• on/off toggle

and other stuff that would be nice in a app where you can scale infrastructure by hand.

Home page of https://site-patternfly.rhcloud.com/ doesn't look good with a dark desktop theme

Not sure if that is an issue with the theme itself or just that concrete page.

The rest of the pages on the site look good - i.e. the background is white despite the default dark color of the desktop theme.

input boxes with error changes to non-error on hover

On http://getbootstrap.com/css/#forms-control-validation the input with error is all red, also on hover.
However, with Patternfly, the input changes color on hover. https://www.patternfly.org/widgets/#forms

Should it have a rule about the hover state for the has-error class specifically, so it doesn't get overrun by the regular input boxes hover?

text-cursor on bootstrap-combobox dropdown

The cursor changes to cursor: text; on the bootstrap-combobox instead of cursor: pointer; like other patternfly dropdowns.

Error in dropdown

We have a form in Cockpit where if nothing is selected in the dropdown, gives you an error and a small note that you need to select something in this dropdown, similar to the text fields.
This could probably be of use to the rest of patternfly as well.

The css is:
.has-error > .bootstrap-select > button > span {
color: #A94442;
}

support for modal-sm

I have a dialog in Cockpit where the default dialog width of 600px is waaay to wide.
Bootstrap have a class called modal-sm that sets the width of the dialog to 300px, but this doesn't seem to work in Patternfly.
Would it be possible to add support for this?
http://getbootstrap.com/javascript/#modals-sizes

Login - assumtions about dom structure

I was implementing login page and encountered several style limitations.

1. Assumption that it will be the top level and only page with this structure in DOM. Its difficult to place the login screen to some containing element and avoid touching html and body element.
   • .login-pf body -> .login-pf .login-pf-body
2. Usage of ids instead of classes prevents to have two instances in DOM.
   • #brand -> .login-pf-brand
   • #badge -> .login-pf-badge
3. It might be better to have to 2 .rows in .container. First containing #brand and second containing .login and .details. The semi-transparent background would be transferred to the second. It will allow to remove the -70px relative position from #badge a thus remove the height: 18px assumption on #badge img. In the end it should allow to use images with variable height without additional styles - good for branding.
4. background images with non-uniform bottom (more colors than just @login-bg-color) don't look good on tall (screen height > displayed bg img height) and medium width (768px < screen width < 1200px) screens. In this interval the image doesn't cover whole screen so the @login-bg-color color is displayed on the bottom part, creating a hard visible transition. The example PatternFly background doesn't suffer from this issue since it has quite uniform bottom colors making the transition smooth. I'm not sure what should be the proper fix for other images. Maybe to use better image.

If there is some consensus, I can create patch for issues 1,2,3. The bad part is that these changes are not backwards compatible.

repo down

Hi the patternfly repo on:
http://copr-be.cloud.fedoraproject.org/results/patternfly/patternfly1
is down.

Br,
Mac

very slim dropdown of combobox

Compared to the bootstrap-select widget the dropdown of the bootstrap-combobox is very slim.
Setting the width of .dropdown-menu to 100% seems to do the trick.

Font-awesome / Glyphicons links in distribution point outside of distribution

In dist/css/patternfly.css:

@font-face {
  font-family: 'FontAwesome';
  src: url('../../components/font-awesome/fonts/fontawesome-webfont.eot?v=4.0.3');
  ...
}

This works during patternfly development, but it does not work when using patternfly as bower dependency, installed in bower_components directory (project specific):

GET http://localhost:8080/ag-push/bower_components/patternfly/components/font-awesome/fonts/fontawesome-webfont.woff?v=4.1.0 404 (Not Found)
GET http://localhost:8080/ag-push/bower_components/patternfly/components/font-awesome/fonts/fontawesome-webfont.ttf?v=4.1.0 404 (Not Found)
GET http://localhost:8080/ag-push/bower_components/patternfly/components/font-awesome/fonts/fontawesome-webfont.svg?v=4.1.0 404 (Not Found)