• Stars
    star
    123
  • Rank 290,145 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 10 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

This repo contains instructions and the code for a set of Angular 1 components for the PatternFly project.

Build Status Dependency Status Code Climate NSP Status Join the chat at https://gitter.im/patternfly/angular-patternfly Coverage Status

AngularJS components for PatternFly

This project will provide a set of common AngularJS components for use with the PatternFly reference implementation.

Getting started

You have to install required software before you're able to use grunt:

  • Install Node.js - Find more information on Node.js

    Angular Patternfly stays up to date with the Node LTS Release Schedule. If you're using Angular Patternfly downstream, we suggest the use of an actively supported version of Node/NPM, although prior versions of Node may work.

  • Install npm - If npm is not already installed with Node.js, you have to install it manually. Find more information on NPM

  • Install Grunt globally - Find more information on Grunt

    $ npm install -g grunt-cli
  • Install npm dependencies with:

    $ npm install

You should have your environment ready now.

Angular-PatternFly can now be built with:

$ npm run build

To see all the grunt tasks that are available:

$ npm run help

Using Angular-PatternFly In Your Application

Note:

  1. Add Angular-PatternFly as dependencies for your project and you'll receive all the libraries you'll need:

    $ npm install angular-patternfly --save
  2. Add the core Patternfly CSS and script includes to your HTML file(s):

    Please see: https://github.com/patternfly/patternfly/blob/master/QUICKSTART.md

    Alternatively, the minimum you will need:

    <!-- PatternFly Styles -->
    <!-- Note: No other CSS files are needed regardless of what other JS packages located in patternfly/components that you decide to pull in -->
    <link rel="stylesheet" href="node_modules/angular-patternfly/node_modules/patternfly/dist/css/patternfly.min.css">
    <link rel="stylesheet" href="node_modules/angular-patternfly/node_modules/patternfly/dist/css/patternfly-additions.min.css">
    
    <!-- Patternfly required settings (no jquery or further JS dependencies required by this include) -->
    <script src="node_modules/angular-patternfly/node_modules/patternfly/dist/js/patternfly_settings.min.js"></script>
    
  3. Add the following CSS include to your HTML file(s):

    <!-- Angular-PatternFly Styles -->
    <link rel="stylesheet" href="node_modules/angular-patternfly/dist/styles/angular-patternfly.min.css" />
  4. Add the following script includes to your HTML file(s), adjusting where necessary to pull in only what you need:

    <!-- Angular -->
    <script src="node_modules/angular-patternfly/node_modules/angular/angular.min.js"></script>
    
    <!-- Bootstrap-Select (Optional): The following lines are only required if you use the pfBootstrapSelect directive -->
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="node_modules/bootstrap-select/js/bootstrap-select.js"></script>
    
    <!-- Angular-Bootstrap -->
    <script src="node_modules/angular-patternfly/node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js"></script>
    <script src="node_modules/angular-patternfly/node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>
    
    <!-- Angular-Sanitize -->
    <script src="node_modules/angular-patternfly/node_modules/angular-sanitize/angular-sanitize.min.js"></script>
    
    <!-- Angular-Animate -->
    <script src="node_modules/angular-patternfly/node_modules/angular-animate/angular-animate.js"></script>
    
    <!-- Angular-PatternFly  -->
    <script src="node_modules/angular-patternfly/dist/angular-patternfly.min.js"></script>
    
    <!-- Lodash -->
    <script src="node_modules/angular-patternfly/node_modules/lodash/lodash.min.js"></script>
  5. (optional) The 'patternfly.charts' module is not a dependency in the default angular 'patternfly' module. In order to use patternfly charts you must add it as a dependency in your application:

    my-app.module.js:
    
    angular.module('myApp', [
     'patternfly',
     'patternfly.charts'
    ]);

    And script includes to your HTML file:

    <!-- C3, D3 - Charting Libraries. -->
    <script src="node_modules/angular-patternfly/node_modules/patternfly/node_modules/c3/c3.min.js"></script>
    <script src="node_modules/angular-patternfly/node_modules/patternfly/node_modules/d3/d3.min.js"></script>
  6. (optional) The 'patternfly.table' module is not a dependency in the default angular 'patternfly' module. In order to use pfTableView, you must add 'patternfly.table' as a dependency in your application:

    my-app.module.js:
    
    angular.module('myApp', [
     'patternfly',
     'patternfly.table'
    ]);

    Add the npm dependency:

    $ npm install angularjs-datatables --save

    Add the following CSS includes to your HTML file(s):

    <!-- Place before any patternfly css -->
    <link rel="stylesheet" href="node_modules/angular-patternfly/node_modules/datatables.net-dt/css/jquery.dataTables.css" />

    Add the following Javascript includes to your HTML file(s):

    <script src="node_modules/angular-patternfly/node_modules/patternfly/node_modules/jquery/dist/jquery.js"></script>
    <script src="node_modules/angular-patternfly/node_modules/patternfly/node_modules/datatables.net/js/jquery.dataTables.js"></script>
    <script src="node_modules/angular-patternfly/node_modules/patternfly/node_modules/datatables.net-select/js/dataTables.select.js"></script>
    <script src="node_modules/angularjs-datatables/dist/angular-datatables.min.js"></script>
    <script src="node_modules/angularjs-datatables/dist/plugins/select/angular-datatables.select.min.js"></script>
  7. (optional) The 'patternfly.canvas' module is not a dependency in the default angular 'patternfly' module. In order to use pfCanvasEditor or pfCanvas, you must add 'patternfly.canvas' as a dependency in your application:

    my-app.module.js:
    
    angular.module('myApp', [
     'patternfly',
     'patternfly.canvas'
    ]);

    Add the npm dependencies:

    $ npm install jquery-ui-dist --save
    $ npm install angular-dragdrop --save
    $ npm install angular-svg-base-fix --save

    Add the following Javascript includes to your HTML file(s):

     <!-- jquery before angular.js -->
     <script src="node_modules/angular-patternfly/node_modules/patternfly/node_modules/jquery/dist/jquery.js"></script>
     <script src="node_modules/jquery-ui-dist/jquery-ui.js"></script>
    
     <!-- angular-dragdrop and angular-svg-base-fix after angular.js -->
     <script src="node_modules/angular-dragdrop/src/angular-dragdrop.js"></script>
     <script src="node_modules/angular-svg-base-fix/src/svgBaseFix.js"></script>

    Also, the canvas background grid image is located in 'node_modules/angular-patternfly/dist/imgs/canvas-dot-grid.png' please copy this image to your application's main images directory and reference it by overridding the '.canvas' css class:

    <style>
     .canvas {
       background-image: url('/myapp/imgs/canvas-dot-grid.png');
       background-repeat: repeat;
     }
    </style>

Less to Sass Conversion

During the build process Less files are converted to Sass files in /dist/sass. Then the Sass files are compiled into /dist/sass/angular-patternfly.css. If you would like to copy the Sass generated css into the main /dist/styles directory, execute:

grunt build --sass

This task will copy /dist/sass/angular-patternfly.css to /dist/styles/angular-patternfly.css. Then the build process will minimize the css in /dist/styles.

The Less to Sass Conversion step will be accomplished and managed as a part of any Pull Request which includes Less file changes. Although contributors may want to build and test their style changes with Sass before submitting a Pull Request, this step should always be tested and validated by reviewers before a style change is merged and released. If a contributor is having issues with Sass conversion that they cannot resolve, Pull Request reviewers will need to ensure that the Sass conversion step is successfully accomplished, tested, and included in the Pull Request before it is approved and merged.

For more detailed information, please read PatternFly Less to Sass Conversion

Note: When a Less file is added/deleted/renamed it needs to be updated in the main Less import file /styles/angular-patternfly.less and the main Sass import file styles/_angular-patternfly.scss.

Using with Webpack

In order to use Angular-Patternfly in a Webpack-bundled application there are some things you need to keep in mind:

Create an alias for the jQuery module (if using JQuery dependency)

In order to let Webpack find the correct jQuery module when assembling all the dependencies you need to create an alias for it in the webpack.conf.js file:

...
resolve: {
  alias: {
    "jquery": "patternfly/node_modules/jquery"
  }
}
...

Additionally, you have to use the webpack.ProvidePlugin so the $ and the jQuery variables are added to the window object, making them available to the other modules (Patternfly included):

...
plugins: [
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery",
    "window.jquery": "jquery"
  })
]
...

API documentation

The API documentation can be built with:

$ npm run uidocs

If you're interested in reading the docs right away, you can use special target, which will start a web server:

$ npm run uidocs:view

After executing this tasks you'll be able to access the documentation at http://localhost:8000/. If a different port is desired, it may be specified on as an option:

$ npm run uidocs:view -- --port=8002

Git Commit Guidelines

PatternFly uses a semantic release process to automate npm and bower package publishing, based on the following commit message format.

Each commit message consists of a header, a body and a footer. The header has a special format that includes a type, a scope and a subject (full explanation):

<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>
Patch Release
fix(pencil): stop graphite breaking when too much pressure applied
// Specific example using the component name as the scope
fix(pfEmptyState): add missing closing <span> tag
Feature Release
feat(pencil): add 'graphiteWidth' option
// Specific example using the component name as the scope
feat(pfNotificationDrawer): add empty state message to group without notifications
Breaking Release
perf(pencil): remove graphiteWidth option
// Specific example using the component name as the scope
perf(pfFakeComponent): remove pfFakeComponent
Non-Release

chore(pencil): rename internal graphiteDensity variable chore(pfNotificationDrawer): rename internal drawer expanded variable

Contributing

We're always interested in contributions from the community.

Please ensure that your PR provides the following:

  • Detailed description of the proposed changes
  • Follows the style rules for javascript and html.
  • Rebased onto the latest master commit
  • If you would like to become a maintainer, please see our Contributing Guide

Unit Testing Required

Applying a unit test, or an update to a unit test, is a contribution requirement.

If you're unfamiliar with Angular unit testing, or just need a refresher, here are the overall Angular 1x guidelines.

You can access the Angular PatternFly unit test spec files under the test directory.

To get started, some basic guidelines:

  • Provide a clear statement of what the component does. This encompasses what is expected, and what is produced.
  • The component has features, be clear and concise on what is expected, and what is produced from each.

Browser Support

Since PatternFly is based on Bootstrap, PatternFly generally supports the same browsers, see also Bootstrap browser support.

More Repositories

1

patternfly-3

This repo contains the HTML, CSS, and JQuery for the PatternFly 3 project.
HTML
1,148
star
2

patternfly-react

A set of React components for the PatternFly project.
TypeScript
774
star
3

patternfly

This repo contains core (HTML/CSS) implementation for PatternFly. Issues related to CSS/HTML and layout should be filed here.
SCSS
697
star
4

patternfly-elements

PatternFly Elements. A set of community-created web components based on PatternFly design.
TypeScript
376
star
5

patternfly-timeline

A time based / event series interactive visualization using d3.js. Use drag and zoom to navigate in time.
JavaScript
136
star
6

patternfly-design

Use this repo to file all new feature or design change requests for the PatternFly project
HTML
114
star
7

patternfly-react-seed

A PatternFly seed for React web applications
TypeScript
88
star
8

patternfly-ng

The code for a set of Angular 6+ components for the PatternFly project. Note that the release/3.x branch supports Angular 4 and 5.
TypeScript
88
star
9

patternfly-org

Home of patternfly.org
JavaScript
69
star
10

patternfly-design-kit

The PatternFly Design Kit is a Sketch library used for creating PatternFly accurate design mockups
49
star
11

patternfly-sass

A port of Patternfly from Less to Sass
HTML
40
star
12

patternfly-demo-app

The PatternFly 3 demo app serves as a boiler for building your production app with PatternFly, Node.JS, and Webpack. Demo:
CSS
24
star
13

patternfly-react-demo-app

DEPRECATED: This project is no longer active. See https://github.com/patternfly/patternfly-react-seed for PF4 demos.
JavaScript
21
star
14

react-log-viewer

TypeScript
18
star
15

patternfly-quickstarts

Repository containing the PatternFly Quick Start extension code
TypeScript
15
star
16

patternfly-a11y

JavaScript
10
star
17

react-topology

TypeScript
10
star
18

pf-codemods

Codemods for upgrading from [email protected] to [email protected]. Uses eslint.
TypeScript
10
star
19

training-scenarios

PatternFly Developer Training
Shell
8
star
20

react-component-groups

TypeScript
8
star
21

patternfly-tutorial

This guide will help you set up PatternFly and start a PatternFly dashboard.
HTML
8
star
22

patternfly-next-react-demo-app

Demo React Application using Patternfly Next and Patternfly React
JavaScript
6
star
23

generator-pfelement

JavaScript
5
star
24

react-catalog-view

TypeScript
3
star
25

patternfly.github.io

HTML
3
star
26

patternfly-unified-design-kit

3
star
27

patternfly-code-guide

PatternFly Code Guide documents standards for developing flexible, durable, and sustainable HTML and CSS for PatternFly
HTML
3
star
28

react-console

This package provides VncConsole, SerialConsole and DesktopViewer React components
TypeScript
2
star
29

pfe-tools

TypeScript
2
star
30

angularjs-datatables

Clone of angular-datatables v0.5.6
HTML
2
star
31

angular-patternfly-demo-app

A base AngularJS application developed to create examples and samples of Angular-Patternfly components
JavaScript
2
star
32

patternfly-site

Wordpress theme for patternfly.org v1
JavaScript
2
star
33

patternfly-webcomponents

Proof of concept PatternFly design Web Components
JavaScript
2
star
34

patternfly-elements-documentation

Documentation website code for PatternFly Elements. Make documentation edits here.
CSS
2
star
35

react-data-view

TypeScript
1
star
36

patternfly-sketch-plugin

JavaScript
1
star
37

react-user-feedback

TypeScript
1
star
38

patternfly-jquery

HTML
1
star
39

patternfly-sandbox-ng

This repo contains instructions and the code for a set of Angular 6+ components for the PatternFly project. http://www.patternfly.org/patternfly-sandbox-ng
JavaScript
1
star
40

gatsby-theme-patternfly-org

Moved to https://github.com/patternfly/patternfly-org
1
star
41

design-tokens

SCSS
1
star
42

patternfly-blog

Wordpress theme for blog.patternfly.org
JavaScript
1
star