Brian Leathem bleathem

Adding PatternFly to an existing project

The easiest option is to install and then link directly to the node_modules path.

Add dependency for patternfly:

npm install --save patternfly

OR Update list of dependencies in package.json to include:

PatternFly Web Components / Framework-Native Proposal

Where we stand

The PatternFly roadmap outlines a proposal to scale framework support by adopting a Web Component based solution for implementing pattern behaviours to support multiple web frameworks.

By building prototypes for PatternFly-webcomponents, we have shown that framework integration of web components is possible, but benefits from the introduction of framework-specific shims to provide application developers with a framework-native experience when consuming the web components.

The problem

Front-end developers are by-and-large in favor of the web component approach for implementing pattern behaviours. However, we need to achieve a critical mass of pattern implementations in order for developers to adopt the solution and begin contributing back their own implementations.

2 : Trivial change (version bump, fix typo etc) No unknowns
3 : Larger trivial change (small documentation update, one-liner code fix etc). No unknowns.
5 : Small code change, very limited in scope across multiple components. No unknowns.
8 : Large code change, limited to 1-2 components. No unknowns.
13 : Large code change, spread across multiple components. No unknowns.
20 : Large code change, not sure about the full scope of the required changes yet. There may be subtasks that I cannot populate yet because I don't know the full scope of the task.
40 : Large code change, potentially very large. Full scope of the task is unknown and the unknowns could be large in the own-right.
100: Potentially huge unknown code changes required. The full scope of the task is not known at all / requirements very unclear. The potential unknowns could be feature-sized.

	import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
	import { createEpicMiddleware, combineEpics } from 'redux-observable';

	const makeActionCreator = (type, ...argNames) => {
	return function (...args) {
	console.log('Creating action', type, args[0]);
	const action = { type };
	argNames.forEach((arg, index) => {
	action[argNames[index]] = args[index];
	});

	[
	{
	"city": "Olathe",
	"region": "Kansas"
	},
	{
	"city": "Warren",
	"region": "Michigan"
	},
	{

	<ul class="list-inline">
	{{# listitems.five }}
	<li class="list-inline-item" style="border: 1px solid gray; padding: .25em;">
	{{> basics-tag tagText=name.first tagClass="tag-info" tagDismissable="true" }}
	</li>
	{{/ listitems.five }}
	</ul>

	$ fhcap cluster create --git-ref=8af48e242b62c1f62d7dd3f104577e8d4364fa25 --name=wfm-cluster-1
	Cluster::Generate: name = wfm-cluster-1
	Cluster::CreateEnvironment: cluster = wfm-cluster-1, environment = single, domain = wfm.skunkhenry.com
	Chef::Environments::Create name = wfm-cluster-1-single, type = single, domain = wfm.skunkhenry.com
	skip fhcap/repos/fhcap-dev/environments/wfm-cluster-1-single.json
	identical fhcap/repos/fhcap-dev/data_bags/environments/wfm-cluster-1-single.json
	skip fhcap/repos/fhcap-dev/organisations/wfm-cluster-1-single_passwords.json
	identical fhcap/repos/fhcap-dev/organisations/wfm-cluster-1.json
	Cluster::Create: name = wfm-cluster-1
	Repo::Checkout: repo = fhcap, git-ref = 8af48e242b62c1f62d7dd3f104577e8d4364fa25, remote = origin

	options { url: 'https://openshift-master.summit.paas.ninja:8443/api/v1beta3/namespaces/demo3/pods',
	auth: { :) },
	method: 'get',
	qs: {},
	rejectUnauthorized: false,
	strictSSL: false }
	[ { metadata:
	{ name: 'sketch-0-pod-1-32xza',
	generateName: 'sketch-0-pod-1-',
	namespace: 'demo3',