patternfly

WebJar for patternfly

License	License Apache-2.0
GroupId	GroupId org.webjars.bower
ArtifactId	ArtifactId patternfly
Last Version	Last Version 3.54.1
Release Date	Release Date Jul 31, 2018
Type	Type jar
Description	Description patternfly WebJar for patternfly
Project URL	Project URL http://webjars.org
Source Code Management	Source Code Management https://github.com/patternfly/patternfly

Download patternfly

Filename	Size
patternfly-3.54.1.pom
patternfly-3.54.1.jar	4 MB
patternfly-3.54.1-sources.jar	22 bytes
patternfly-3.54.1-javadoc.jar	22 bytes
Browse

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.bower/patternfly/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>patternfly</artifactId>
    <version>3.54.1</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.bower/patternfly/
implementation 'org.webjars.bower:patternfly:3.54.1'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.bower/patternfly/
implementation ("org.webjars.bower:patternfly:3.54.1")

Apache Buildr

'org.webjars.bower:patternfly:jar:3.54.1'

Apache Ivy

<dependency org="org.webjars.bower" name="patternfly" rev="3.54.1">
  <artifact name="patternfly" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.bower', module='patternfly', version='3.54.1')
)

Scala SBT

libraryDependencies += "org.webjars.bower" % "patternfly" % "3.54.1"

Leiningen

[org.webjars.bower/patternfly "3.54.1"]

Dependencies

compile (25)

Group / Artifact	Type	Version
org.webjars.bower : font-awesome	jar	[4.7.0,5)
org.webjars.bower : jquery	jar	[3.2.1,3.3)
org.webjars.bower : bootstrap	jar	[3.3.7,3.4)
org.webjars.bower : datatables.net-select Optional	jar	[1.2.0,1.3)
org.webjars.bower : patternfly-bootstrap-treeview Optional	jar	[2.1.0,2.2)
org.webjars.bower : moment-timezone Optional	jar	[0.4.1,0.5)
org.webjars.bower : font-awesome-sass Optional	jar	[4.7.0,5)
org.webjars.bower » bootstrap-slider Optional	jar	[9.9.0,10)
org.webjars.bower : jquery-match-height Optional	jar	[0.7.2,0.8)
org.webjars.bower » types__c3 Optional	jar	[0.6.0,0.7)
org.webjars.bower : bootstrap-sass Optional	jar	[3.3.7,4)
org.webjars.bower » drmonty-datatables-colvis Optional	jar	[1.1.2,1.2)
org.webjars.bower » patternfly-bootstrap-combobox Optional	jar	[1.1.7,1.2)
org.webjars.bower : c3 Optional	jar	[0.4.11,0.5)
org.webjars.bower : eonasdan-bootstrap-datetimepicker Optional	jar	[4.17.47,5)
org.webjars.bower : bootstrap-touchspin Optional	jar	[3.1.1,3.2)
org.webjars.bower : bootstrap-select Optional	jar	[1.12.2]
org.webjars.bower : datatables.net Optional	jar	[1.10.15,2)
org.webjars.bower : google-code-prettify Optional	jar	[1.0.5,1.1)
org.webjars.bower : datatables.net-colreorder-bs Optional	jar	[1.3.2,1.4)
org.webjars.bower : d3 Optional	jar	[3.5.17,3.6)
org.webjars.bower : datatables.net-colreorder Optional	jar	[1.4.1,2)
org.webjars.bower : moment Optional	jar	[2.19.1,3)
org.webjars.bower : bootstrap-switch Optional	jar	[3.3.4,3.4)
org.webjars.bower : bootstrap-datepicker Optional	jar	[1.7.1,2)

Project Modules

There are no modules declared in this project.

PatternFly 4

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 4, 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 4 Development requires Node v12.0.0 or greater

To setup the PatternFly 4 development environment:

clone the project
run npm install from the project root
run npm 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-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 npm run build and npm run serve
in another terminal, run npm run 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://pf4.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.

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
run npm run dev
run npm run a11y (in another console)

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 4 is supported on the latest two major versions of the following browsers:

Chrome
Firefox
Safari
Edge

PatternFly

Created to promote design commonality and improved user experience across enterprise IT products and applications.

Versions

Version
3.54.1 Jul 31, 2018
3.29.13 Dec 15, 2017
3.25.0 May 25, 2017
3.24.0 May 11, 2017
3.23.3 Apr 28, 2017
3.23.0 Mar 15, 2017
3.22.1 Mar 2, 2017
3.21.0 Feb 21, 2017
3.19.0 Feb 2, 2017
3.18.1 Jan 20, 2017
3.18.0 Jan 20, 2017
3.17.0 Jan 7, 2017
3.16.0 Jan 6, 2017
3.15.0 Jan 6, 2017
3.14.0 Nov 17, 2016
3.8.0 Jan 6, 2017
3.7.0 Jul 22, 2016
3.6.0 Jul 11, 2016
3.5.1 Jun 29, 2016
3.5.0 Jun 17, 2016
3.3.2 Mar 31, 2016
2.10.0 Apr 11, 2016
2.8.0 Jan 18, 2016
2.6.0 Nov 11, 2015
2.5.0 Nov 9, 2015
2.4.0 Oct 21, 2015
2.2.0 Sep 16, 2015
1.3.0 Jun 17, 2015