├── .editorconfig ├── .eslintrc ├── .github ├── CONTRIBUTING.md ├── DOCUMENTATION_TEMPLATE.md ├── ISSUE_TEMPLATE.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .travis.yml ├── CODE-GUIDELINES.md ├── LICENSE ├── LICENSE.txt ├── README.md ├── deploy_key.enc ├── gulpfile.js ├── linting.json ├── package-lock.json ├── package.json ├── patternlab-config.json ├── scripts └── postinstall.js └── source ├── PatternFlyIcons-webfont.json ├── _annotations └── annotations.js ├── _data ├── data.json └── listitems.json ├── _meta ├── _00-head.mustache └── _01-foot.mustache ├── _patterns ├── .gitkeep ├── basics │ ├── buttons │ │ ├── button-icon-variations.hbs │ │ ├── button-icon.hbs │ │ ├── button-icon.md │ │ ├── button-sizes.hbs │ │ ├── button-sizes.md │ │ ├── button-styles.hbs │ │ ├── button-styles.md │ │ ├── button.hbs │ │ └── button.md │ ├── forms │ │ ├── checkbox.hbs │ │ ├── checkbox.md │ │ ├── control-sizing.hbs │ │ ├── control-sizing.md │ │ ├── disabled-states.hbs │ │ ├── disabled-states.md │ │ ├── form-group.hbs │ │ ├── form-group.md │ │ ├── inline-forms.hbs │ │ ├── inline-forms.md │ │ ├── input-controls.hbs │ │ ├── input-controls.md │ │ ├── input.hbs │ │ ├── input.md │ │ ├── right-aligned-labels.hbs │ │ ├── right-aligned-labels.md │ │ ├── select.hbs │ │ ├── select.md │ │ ├── static-controls.hbs │ │ ├── static-controls.md │ │ ├── top-aligned-labels.hbs │ │ ├── top-aligned-labels.md │ │ ├── validation.hbs │ │ └── validation.md │ ├── icons │ │ ├── icon-circle.hbs │ │ ├── icon-circle.md │ │ ├── icon-fa.hbs │ │ ├── icon-fa.md │ │ ├── icon-pf.hbs │ │ ├── icon-pf.md │ │ ├── icon-sizes.hbs │ │ ├── icon-sizes.md │ │ ├── icon.hbs │ │ └── icon.md │ ├── table │ │ ├── table-contextual-classes.hbs │ │ ├── table-contextual-classes.md │ │ ├── table-patternfly.hbs │ │ ├── table-patternfly.md │ │ ├── table.hbs │ │ └── table.md │ ├── typography │ │ ├── blockquote.hbs │ │ ├── blockquote.md │ │ ├── fonts.hbs │ │ ├── fonts.md │ │ ├── headings.hbs │ │ ├── headings.md │ │ ├── inline-elements.hbs │ │ ├── inline-elements.md │ │ ├── lead.hbs │ │ ├── lead.md │ │ ├── lists.hbs │ │ ├── lists.md │ │ ├── paragraph.hbs │ │ └── paragraph.md │ └── zexample │ │ └── listitems.hbs ├── components │ ├── alerts │ │ ├── alert-dismissable.hbs │ │ ├── alert-styles.hbs │ │ ├── alert.hbs │ │ └── alert.md │ ├── badges │ │ ├── badge-styles.hbs │ │ ├── badge-styles.md │ │ ├── badge.hbs │ │ └── badge.md │ ├── breadcrumbs │ │ ├── breadcrumb.hbs │ │ └── breadcrumb.md │ ├── cards │ │ ├── card-accent.hbs │ │ ├── card-accent.md │ │ ├── card-footer-dropdown.hbs │ │ ├── card-footer-dropdown.md │ │ ├── card-footer.hbs │ │ ├── card-header-dropdown.hbs │ │ ├── card-header-dropdown.md │ │ ├── card-header-kebab.hbs │ │ ├── card-header-kebab.md │ │ ├── card-header.hbs │ │ ├── card-icon-large.hbs │ │ ├── card-icon-large.md │ │ ├── card-icon-medium.hbs │ │ ├── card-icon-medium.md │ │ ├── card-kebab.hbs │ │ ├── card-kebab.md │ │ ├── card-multiselect-header.hbs │ │ ├── card-multiselect-header.md │ │ ├── card-multiselect.hbs │ │ ├── card-multiselect.md │ │ ├── card.hbs │ │ └── card.md │ ├── dropdowns │ │ ├── dropdown-states.hbs │ │ ├── dropdown-styles.hbs │ │ ├── dropdown.hbs │ │ ├── dropdown.md │ │ ├── kebab.hbs │ │ └── kebab.md │ ├── masthead │ │ ├── masthead.hbs │ │ └── masthead.md │ ├── navigation │ │ ├── nav.hbs │ │ └── navlink.hbs │ ├── pagination │ │ ├── pagination-sizes.hbs │ │ ├── pagination-sizes.md │ │ ├── pagination.hbs │ │ └── pagination.md │ ├── secondary-navigation │ │ ├── secondary-nav.hbs │ │ └── secondary-nav.md │ ├── tabs │ │ ├── tabs-single-level-with-dropdown.hbs │ │ ├── tabs.hbs │ │ └── tabs.md │ └── view-selector │ │ ├── view-selector.hbs │ │ └── view-selector.md ├── templates │ ├── basic-template.hbs │ └── cardview │ │ ├── cardview.hbs │ │ └── cardview.md └── utilities │ ├── box-shadow │ ├── box-shadow.hbs │ └── box-shadow.md │ ├── spacing │ ├── spacing.hbs │ └── spacing.md │ └── typography │ ├── headings.hbs │ ├── headings.md │ ├── typography.hbs │ ├── typography.md │ ├── vertical-rhythm.hbs │ └── vertical-rhythm.md ├── css ├── pattern-scaffolding.css └── style.css ├── favicon.ico ├── fonts ├── Overpass-Bold-Italic.eot ├── Overpass-Bold-Italic.woff ├── Overpass-Bold.eot ├── Overpass-Bold.woff ├── Overpass-ExtraLight-Italic.eot ├── Overpass-ExtraLight-Italic.woff ├── Overpass-ExtraLight.eot ├── Overpass-ExtraLight.woff ├── Overpass-Italic.eot ├── Overpass-Italic.woff ├── Overpass-Light-Italic.eot ├── Overpass-Light-Italic.woff ├── Overpass-Light.eot ├── Overpass-Light.woff ├── Overpass-Regular.eot ├── Overpass-Regular.woff ├── PatternFlyIcons-webfont.eot ├── PatternFlyIcons-webfont.svg ├── PatternFlyIcons-webfont.ttf ├── PatternFlyIcons-webfont.woff ├── overpass-bold-italic.woff2 ├── overpass-bold.woff2 ├── overpass-extrabold-italic.eot ├── overpass-extrabold-italic.woff ├── overpass-extrabold-italic.woff2 ├── overpass-extrabold.eot ├── overpass-extrabold.woff ├── overpass-extrabold.woff2 ├── overpass-extralight-italic.woff2 ├── overpass-extralight.woff2 ├── overpass-heavy-italic.eot ├── overpass-heavy-italic.woff ├── overpass-heavy-italic.woff2 ├── overpass-heavy.eot ├── overpass-heavy.woff ├── overpass-heavy.woff2 ├── overpass-italic.woff2 ├── overpass-light-italic.woff2 ├── overpass-light.woff2 ├── overpass-mono-bold.eot ├── overpass-mono-bold.woff ├── overpass-mono-bold.woff2 ├── overpass-mono-light.eot ├── overpass-mono-light.woff ├── overpass-mono-light.woff2 ├── overpass-mono-regular.eot ├── overpass-mono-regular.woff ├── overpass-mono-regular.woff2 ├── overpass-mono-semibold.eot ├── overpass-mono-semibold.woff ├── overpass-mono-semibold.woff2 ├── overpass-regular.woff2 ├── overpass-semibold-italic.eot ├── overpass-semibold-italic.woff ├── overpass-semibold-italic.woff2 ├── overpass-semibold.eot ├── overpass-semibold.woff ├── overpass-semibold.woff2 ├── overpass-thin-italic.eot ├── overpass-thin-italic.woff ├── overpass-thin-italic.woff2 ├── overpass-thin.eot ├── overpass-thin.woff └── overpass-thin.woff2 ├── images ├── brand.svg └── logo-alt.svg ├── js └── .gitkeep └── scss ├── _pf-alert.scss ├── _pf-badge.scss ├── _pf-buttons.scss ├── _pf-card.scss ├── _pf-colors.scss ├── _pf-fonts.scss ├── _pf-forms.scss ├── _pf-functions.scss ├── _pf-icons.scss ├── _pf-masthead.scss ├── _pf-mixins.scss ├── _pf-nav.scss ├── _pf-pagination.scss ├── _pf-secondary-nav.scss ├── _pf-shame.scss ├── _pf-tables.scss ├── _pf-type.scss ├── _pf-utilities.scss ├── _pf-variables.scss ├── _pf-view-selector.scss └── patternfly.scss /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | tab_width = 2 8 | end_of_line = lf 9 | charset = utf-8 10 | trim_trailing_whitespace = true 11 | insert_final_newline = true 12 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "node": true, 4 | "builtin": true 5 | }, 6 | "globals": {}, 7 | "rules": { 8 | "block-scoped-var": 0, 9 | "camelcase": 0, 10 | "comma-spacing": [1, {"before": false, "after": true}], 11 | "consistent-return": 2, 12 | "curly": [2, "all"], 13 | "dot-notation": [1, { "allowKeywords": true }], 14 | "eqeqeq": [2, "allow-null"], 15 | "global-strict": [0, "never"], 16 | "guard-for-in": 2, 17 | "indent": [1, 2, {"SwitchCase": 1, "VariableDeclarator": 1}], 18 | "lines-around-comment": [1, { 19 | "beforeBlockComment": true, 20 | "beforeLineComment": true, 21 | "allowBlockStart": true, 22 | "allowObjectStart": true, 23 | "allowArrayStart": true 24 | }], 25 | "key-spacing": 0, 26 | "keyword-spacing": 1, 27 | "new-cap": 0, 28 | "no-alert": 2, 29 | "no-bitwise": 2, 30 | "no-caller": 2, 31 | "no-cond-assign": [2, "except-parens"], 32 | "no-debugger": 2, 33 | "no-dupe-args": 2, 34 | "no-dupe-keys": 2, 35 | "no-empty": 2, 36 | "no-eval": 2, 37 | "no-extend-native": 2, 38 | "no-extra-bind": 2, 39 | "no-extra-parens": 0, 40 | "no-extra-semi": 2, 41 | "no-func-assign": 2, 42 | "no-implied-eval": 2, 43 | "no-invalid-regexp": 2, 44 | "no-irregular-whitespace": 1, 45 | "no-iterator": 2, 46 | "no-loop-func": 2, 47 | "no-mixed-requires": 0, 48 | "no-multi-str": 2, 49 | "no-multi-spaces": 1, 50 | "no-native-reassign": 2, 51 | "no-new": 2, 52 | "no-param-reassign": 1, 53 | "no-proto": 2, 54 | "no-redeclare": 0, 55 | "no-script-url": 2, 56 | "no-self-assign": 2, 57 | "no-self-compare": 2, 58 | "no-sequences": 2, 59 | "no-shadow": 2, 60 | "no-undef": 2, 61 | "no-underscore-dangle": 0, 62 | "no-unreachable": 1, 63 | "no-unused-vars": 1, 64 | "no-use-before-define": 1, 65 | "no-useless-call": 2, 66 | "no-useless-concat": 2, 67 | "no-with": 2, 68 | "quotes": [0, "single"], 69 | "radix": 2, 70 | "semi": [0, "never"], 71 | "strict": 0, 72 | "space-before-blocks": 1, 73 | "space-before-function-paren": [1, { 74 | "anonymous": "always", 75 | "named": "never" 76 | }], 77 | "space-in-parens": [1, "never"], 78 | "space-infix-ops": 1, 79 | "valid-typeof": 2, 80 | "vars-on-top": 0, 81 | "wrap-iife": [2, "inside"] 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to PatternFly 2 | 3 | 17 | -------------------------------------------------------------------------------- /.github/DOCUMENTATION_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: pattern-name-here 3 | --- 4 | ## Overview 5 | 6 | If this is a bootstrap component: 7 | This is a Bootstrap component, [see complete documentation here](URL) 8 | 9 | Otherwise: 10 | 11 | Link to the design specs 12 | 13 | Only if needed write a short description with implementation notes. Design and interaction notes are already written on the design specs, don't repeat information. 14 | 15 | For example for buttons: Always add a modifier class to add color to the button. Never use the class `.btn` on its own. 16 | 17 | ## Accessibility 18 | 19 | Write accessibility, aria tags, tab index and other notes to make this component accessible. 20 | 21 | ## Usage 22 | 23 | | Class | Usage | 24 | | -- | -- | 25 | | `.class-name-here` **Applied to:** `` | **Outcome:** Outcome-here **Required:** Yes/No **Remarks:** Remarks-here | 26 | | Example: `.btn` **Applied to:** ``, ` 7 | -------------------------------------------------------------------------------- /source/_patterns/basics/buttons/button.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Buttons 3 | --- 4 | ## Overview 5 | 6 | This is a Bootstrap component, [see complete documentation here](http://v4-alpha.getbootstrap.com/components/buttons/) 7 | -------------------------------------------------------------------------------- /source/_patterns/basics/forms/checkbox.hbs: -------------------------------------------------------------------------------- 1 | {{!-- 2 | formCheckboxInline - set it to true to create inline checkboxes 3 | --}} 4 | 5 | 6 |
7 | 11 |
12 | -------------------------------------------------------------------------------- /source/_patterns/basics/forms/checkbox.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Forms 3 | --- 4 | ## Overview 5 | 6 | This is a Bootstrap component, [see complete documentation 7 | here](http://v4-alpha.getbootstrap.com/components/forms) 8 | -------------------------------------------------------------------------------- /source/_patterns/basics/forms/control-sizing.hbs: -------------------------------------------------------------------------------- 1 | {{> basics-input formInputModifierClass="form-control-lg" 2 | formInputPlaceholder=".form-control-lg" formInputId="example-form-control-large" }} 3 | {{> basics-input formInputPlaceholder="Default input" 4 | formInputId="example-form-control-default"}} 5 | {{> basics-input formInputModifierClass="form-control-sm" 6 | formInputPlaceholder=".form-control-sm" 7 | formInputId="example-form-control-small" }} 8 | 9 | {{> basics-select formInputModifierClass="form-control-lg" }} 10 | {{> basics-select }} 11 | {{> basics-select formInputModifierClass="form-control-sm" }} 12 | -------------------------------------------------------------------------------- /source/_patterns/basics/forms/control-sizing.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Forms control sizing 3 | --- 4 | ## Overview 5 | 6 | This is a Bootstrap component, [see complete documentation 7 | here](http://v4-alpha.getbootstrap.com/components/forms/#control-sizing) 8 | -------------------------------------------------------------------------------- /source/_patterns/basics/forms/disabled-states.hbs: -------------------------------------------------------------------------------- 1 | {{> basics-form-group formLabel="Email" formInputType="email" 2 | formDisabled=true formInputId="example-disabled-input" }} 3 | 4 | {{> basics-form-group formSelect=true formLabel="Example select" 5 | formDisabled=true formInputId="example-disabled-select" }} 6 | 7 | 8 | -------------------------------------------------------------------------------- /source/_patterns/basics/forms/disabled-states.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Forms disabled states 3 | --- 4 | ## Overview 5 | 6 | This is a Bootstrap component, [see complete documentation 7 | here](http://v4-alpha.getbootstrap.com/components/forms/#disabled-states) 8 | -------------------------------------------------------------------------------- /source/_patterns/basics/forms/form-group.hbs: -------------------------------------------------------------------------------- 1 | {{!-- 2 | formRightAligned - when set to true it'll display the label on the right of the form 3 | formHelp - when set to true it'll display a help text line 4 | --}} 5 | 6 |
7 | 8 | 9 | 10 | {{#if formRightAligned}}
{{/if}} 11 | 12 | {{#if formTextarea}} 13 | 18 | {{else formStaticControl}} 19 |

{{ formStaticControlText }}

20 | {{else if formSelect }} 21 | {{> basics-select }} 22 | {{else}} 23 | {{> basics-input }} 24 | {{/if}} 25 | 26 | {{#if formFeedbackMessage }} 27 | 28 | {{/if}} 29 | 30 | {{#if formHelp }} 31 | {{ formHelpText }} 32 | {{/if}} 33 | 34 | {{#if formRightAligned}}
{{/if}} 35 | 36 |
37 | -------------------------------------------------------------------------------- /source/_patterns/basics/forms/form-group.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Forms group 3 | --- 4 | ## Overview 5 | 6 | This is a Bootstrap component, [see complete documentation 7 | here](http://v4-alpha.getbootstrap.com/components/forms/#form-groups) 8 | -------------------------------------------------------------------------------- /source/_patterns/basics/forms/inline-forms.hbs: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | {{> basics-input formInputModifierClass="mr-pf-sm" formLabel="Email" 5 | formInputType="email" formInputPlaceholder="email" 6 | formInputId="example-inline-input-email" }} 7 | 8 | 9 | {{> basics-input formInputModifierClass="mr-pf-sm" formLabel="Password" 10 | formInputType="password" formInputPlaceholder="password" 11 | formInputId="example-inline-input-password"}} 12 | 13 | {{> basics-button btnType="submit" btnText="Sign In" btnClass="btn-primary" 14 | }} 15 | 16 |
17 | -------------------------------------------------------------------------------- /source/_patterns/basics/forms/inline-forms.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Forms inline 3 | --- 4 | ## Overview 5 | 6 | This is a Bootstrap component, [see complete documentation 7 | here](http://v4-alpha.getbootstrap.com/components/forms/#inline-forms) 8 | 9 | ## Accessibility 10 | 11 | Use either `` or `aria-label` for input fields where no label is visible. 12 | 13 | | Attribute | Value | Usage | 14 | | -- | -- | -- | 15 | | `aria-label` **Applied to:** `` | Text string that labels the input | **Outcome:** Provides a text label for the input to assistive technology **Required:** When a `