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.

This comment has been minimized.

Copy link

@bt0DotNinja 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