Skip to content

Instantly share code, notes, and snippets.

Last active Dec 6, 2017
What would you like to do?
GSoC'17- Work Product Submission

Google Summer of Code 2017 - Work Product Submission

  • Name: Sahil Budhwar

  • Project Name: Patternfly Frontend Pattern Development

  • Worked on: Patternfly Webcomponent is a library which provides a set of core Web Components for the PatternFly Project

  • Organization: Fedora Project

  • Project Mentors:

    1. Patrick Riley (priley86)
    2. Brian Leathem (bleathem)
  • Commits List:

  • Pull Requests:

    1. [#23]Pf-dropdown-------------------------------------------[MERGED]
    2. [#46]Pf-touchspin--------------------------------------------[MERGED]
    3. [#50]Pf-popover----------------------------------------------[MERGED]
    4. [#58]Update Attribute Names ------------------------------[MERGED]
    5. [#63]Pf-tooltip: Tooltip Not in view Support ------------- [MERGED]
    6. [#74]pf-donut-chart----------------------------------------[MERGED]

    Note: pf-donut-chart will help set a foundation for future charts webcomponent.

  • Usage:

    npm install --save patternfly-webcomponents

    Patternfly web components require patternfly.css, patternfly-additions.css, and patternfly-webcomponents.css

     <link rel="stylesheet" href="node_modules/patternfly/dist/css/patternfly.css">
     <link rel="stylesheet" href="node_modules/patternfly/dist/css/patternfly-additions.css">
     <link rel="stylesheet" href="node_modules/patternfly-webcomponents/dist/css/patternfly-webcomponents.css">

    For better browser support include polyfills

     <script src="node_modules/webcomponents.js/webcomponents-lite.min.js"></script>

    Use a web component

     <script src="node_modules/patternfly-webcomponents/dist/js/pf-popover.js"></script>
     <pf-popover placement="right" target-selector="#btn-right-t-c" popover-title="Popver on right" dismissible="true">popover text</pf-popover>
     <button id="btn-right-t-c" type="button" class="btn btn-primary" aria-describedby="popover-right">Popover</button>

    For more details visit Patternfly-webcomponents

  • Future Work:

    Develop more and more awesome Webcomponents.

  • Thanks To:

    1. Fedora Project, Patternfly and my mentors for all the awesome work during this period.
    2. Google Summer of code, for this great experience.
Copy link

bt0DotNinja commented Dec 6, 2017

Hi sahil,
I'm Alberto from Fedora CommOps, We note that you have the next community blog entry on draft

  | GSoC’17 – Patternfly Webcomponents – Final Report

let us know if you need help? or if:

a) you need more time;

b) this article or articles is not going to be finished and we stop watching it;

c) it is ready - you should follow the guidelines at

The CommOps team is here to help. Stop by our IRC channel, #fedora-commops, on Freenode or drop a line on the mailing list.


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment