Downloaded the latest, saw the above error when employing pfSimpleFilter / pfDataToolbar. Working on the issue presently, will provide additional information as the issue becomes clearer.

more info
the below commit does away with angular extend in lieu of merge, this is presently not supported by angular > 1.4 (ie 1.3.18)
be9c015

Specifying patternfly as a dependency in this project causes SASS load path issues when used with patternfly-sass in a Rails application. My suggestion would be to create a fork or a special version calles angular-patternfly-sass where the bower.json and package.json files specify patternfly-sass as a dependency instead of patternfly.

Could you somehow fix this? I can help with testing by trying to integrate it into our application.

Please add a description of 'total' to the chartData ng-doc

chartData object the data to be shown as an area chart
.xData - Array, X values for the data points, first element must be the name of the data
.yData - Array, Y Values for the data points, first element must be the name of the data
.total - (optional) The Total amount, used when determining percentages

hi,
when wa can use the new component of patternfly as liste view toast .... ?
is not in github repository !
thanks

Right now, there is no way to prevent multiple instances of the same notification at the same time, for example if you have an $http responseError interceptor that generates a session timeout message, multiple identical messages will be shown when multiple requests fail at the same time.

I'm not sure what the right approach to tackle that is, maybe we could get away with simply not adding a notification that deep equals to something already there.. Maybe something like having a concept of predefined notifications in Notifications might make more sense because then it should be at least easy to tell if it's already there or not...

What do you think?

Instead of setting the colors of the donut percentage chart in the directive itself we should add classes that describe the desired state and set the colors in patternfly.css. This will allow consumers of angular-patternfly to override these colors as needed.

See also https://github.com/patternfly/angular-patternfly/pull/64/files#r38665528

Need to figure out a way to get the styling from demo.css into plunkr.

See also #48.

Since all the files are ignored in bower.json, when we use:

$ bower install "patternfly/angular-patternfly"

no files are installed (incl. /dist folder).

The main section for bower.json lists both the unminified and minified versions of the code. Are both really needed?

We're using wiredep to include our bower components automatically and it is picking up both of these files.

When using ff, the pfsimple sort direction toggle does not result in the resorting of the list. This also affects pfDataToolbar.

Write a directive to wrap the bootstrap date picker that is available in patternfly 2.0

Are there intentions to move to Angular 1.3.x. Just wanting to remove resolutions in our bower file.

If jQuery is not being used in application , than in pfDonutPctChart directive having issue with $.extend function , this is jQuery function , and here jquery is not being used , so either $.extend wherever is used that should be not there. or we should have our own custom javascript extend function , that will merge two object and return in to the first object .

The links in the sort menu are missing href attributes and can't be activated using the keyboard. They also don't get the pointer mouse icon on hover because of the missing href.

/cc @jwforres @rhamilto

Create a directive that encapsulates the patternfly reference HTML for a the card component

We have several English strings in angular-patternfly and should support internationalization and localization.

I've used angular-gettext in the past but I think it would be better to provide files per language if possible using something like grunt-static-i18n perhaps? Then the consumer of angular-patternfly could just include the js file for the language they need.

Mobile Safari will treat the first tap as a hover and only open the dropdown on the second tap. Also the tooltip overlays the dropdown items.

/cc @jwforres @rhamilto

When the ng-options changes, the hidden element is correctly updated to reflect the change (as tested in https://github.com/patternfly/angular-patternfly/blob/aa38a2806d2df0f3ed156668104f4bd966707f82/test/select/select.spec.js#L44) but the generated dropdown (which is what's displayed in the browser) is not, and remains with the old options. This should be fixed and the test should test for it as well.

We only want to require c3/d3 if patternfly.charts is being used. We need to remove this dependency.

I would assume Angular-Patternfly to be under the Apache 2.0 License because Patternfly itself is but Angular-Patternfly does not have a license.txt.

What license is Angular-Patternfly intended to be used under?

We should be using ng-annotate via grunt-ng-annotate to avoid verbose function declarations when using dependency injection.

It turns this:

angular.module("MyMod").controller("MyCtrl", function($scope, $timeout) {
});

into this

angular.module("MyMod").controller("MyCtrl", ["$scope", "$timeout", function($scope, $timeout) {
}]);

automatically at build time so minificaiton is safe.

Related to #135, which was fixed to allow donut chart to display in IE and Safari, but we lost the ability to specify HTML in the center label. This issue is to track allowing one to also specify HTML for the center label.

I want to use modals in my angular-pf application, and it'd be nice to have a directive to take a lot of the repetitive work and boilerplate HTML out of it. angular-bootstrap has a modal service, but it doesn't really seem to match the angular-pf style. The modal service needs to be fed a full template to create the modal from, including all the boilerplate, whereas existing angular-pf directives appear to be more geared around supplying that boilerplate for you.

A hypothetical directive could look like this:

<div pf-modal modal-name="mymodal" modal-title="This is a modal" ok-label="Do it" ok-type="danger">
    Modal body content here.
</div>

Alternatively, it could be more based around the configuration object pattern that some of the more complex angular-pf directives use:

<div pf-modal config="configobject">
    Modal body content here.
</div>

$scope.configobject = {
    name: 'mymodal',
    title: 'This is a modal',
    okButton: {
        label: 'Do it',
        type: 'danger'
    }
};

In both those examples, the OK button type would map to the btn-<type> Bootstrap button class for the OK button. The latter pattern would make more sense if we want something a bit more configurable than a simple OK/Cancel button pair on the modal, with something more like the button config objects used by pfToolbar and pfListView.

Displaying the modal could be controlled via a service similar to the angular-bootstrap modal service, which would return a modal object with one or more promise properties (and methods to close/dismiss the modal programmatically). You'd use it in a similar fashion to this:

mycontroller.controller('mycontroller', ['$scope', 'pfModal',
    function($scope, pfModal) {
        // show the modal with the name 'mymodal'
        var modal = pfModal.show('mymodal');

        // modal object has a result property of type promise
        modal.result.then(function(result) {
            // do something when the user hits ok
        }, function(reason) {
            // or when they hit cancel
        });
    }
]);

Alternatively (and especially if the config object pattern is used), rather than using a return object with promises we could supply functions to call when the modal is closed/dismissed:

$scope.configobject ={
    ...
    onClose: function() { ... },
    onCancel: function() { ... }
};

I've had a go at doing an implementation myself (using the directive and service pattern), but my angular knowledge doesn't appear to be up to the job yet. If someone really wants to see my (likely quite terrible) code, I can make it available for ridicule.

I think it'd be really useful to get some sort of modal directive into angular-pf, even if the interface doesn't look like the above :)

I have tried the following as suggested in the main page

<html>
  <head>
    <title>Website</title>
    <link rel="stylesheet" href="bower_components/angular-patternfly/dist/styles/angular-patternfly.min.css"/>

    <script src="/bower_components/angular/angular.js"></script>
    <script src="/bower_components/patternfly/components/c3/c3.min.js"></script>
    <script src="/bower_components/patternfly/components/d3/d3.min.js"></script>
    <script src="/bower_components/angular-patternfly/dist/angular-patternfly.min.js"></script>
    <script src="/js/main.js"></script>
  </head>
  <body ng-app="myapp">
    <div ng-controller="MainController"></div>
    <h1>Msg = {{ msg }}</h1>
  </body>
</html>

And

var app = angular.module("myapp", [
    'patternfly',
    'patternfly.charts',
]);

app.controller("MainController", function($scope) {
    $scope.msg = "Hello World";
})

But the following error is given:

localhost/:1 GET http://localhost:5000/bower_components/patternfly/components/c3/c3.min.js 
localhost/:1 GET http://localhost:5000/bower_components/patternfly/components/d3/d3.min.js 
localhost/:1 GET http://localhost:5000/bower_components/patternfly/components/c3/c3.min.js 
localhost/:1 GET http://localhost:5000/bower_components/patternfly/components/d3/d3.min.js 
angular-patternfly.min.js:1 Uncaught ReferenceError: $ is not defined(anonymous function) @ angular-patternfly.min.js:1(anonymous function) @ angular-patternfly.min.js:1
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module myapp due to:
Error: [$injector:modulerr] Failed to instantiate module patternfly due to:
Error: [$injector:modulerr] Failed to instantiate module patternfly.filters due to:
Error: [$injector:modulerr] Failed to instantiate module patternfly.select due to:
Error: [$injector:nomod] Module 'patternfly.select' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.5/$injector/nomod?p0=patternfly.select

Two major reasons:

• There is no /bower_components/patternfly/components/d3/d3.min.js and for c3. They are in seperate folders.
• When I used the non-minified patternfly.js, and corrected the d3 and c3 paths, I see the error is generated from this line where $ is undefined. var patternflyDefaults = $().c3ChartDefaults();

What to do?

Create a demo.css file so that we can put demo css into it. This file should be for showcase purposes only and not get distributed via bower.

In dist/angular-patternfly.js there is a declaration of patternfly module, and in that declaration one of stated dependencies is patternfly.formgroup. However, there is no such module so error is returned, and I am guessing it would be correct to put patternfly.form instead.

We need to add unit tests for the pfTransclude directive

http://www.patternfly.org/pattern-library/forms-and-controls/help-on-forms/#

Native Field Level Help as defined in stock patternfly would be nice to have in the pfFormGroup directive.

The field level help would simply be defined in a new optional attribute. Possibly

Instead of using a string in a config object we should use directives and transclude the content of the directive into the appropriate sections. Either that or we could look into using angular-blocks.

See also #100 (comment)

When installing angular-patternfly v2.2.1 via bower, angular-patternfly.js is missing the pfSimpleSort directive.

We are trying to port some things to angular in ManageIq and for that we use custom ui components which depends on angular patternfly, but we are trying to use only npm for managing these custom ui components. So it would be nice if this repository would be also available in node packages and not only at bower.

Bower's devDependencies are meant for things needed only for development, tests, etc. Packages that are actually depended upon for the daily operation should be listed as dependencies instead. (That's according to the bower spec.)

Right now, angular-patternfly's bower.json has no dependencies and everything in devDependencies, but I think there are no real devDependencies and everything should be a dependency. But I'm quite sure that since charts depends on ui.bootstrap and ngSanitize, at least angular-sanitize and angular-bootstrap should definitely be in dependencies..

For example, if I look at:
http://angular-patternfly.rhcloud.com/#/api/patternfly.card.directive:pfCard

Inspect "My Card Title", I see that '.content h2' selectors are overriding 'pf' selectors:

.content h2 {
font-size: 24px;
line-height: 36px;
}

.content h2, .content h3, .content h4, .content h5 {
margin: 1em 0 5px;
}
.card-pf-title {
font-size: 16px;
font-weight: 400;
margin: 20px 0;
padding: 0;
}

Right now it is searching the entire document for a match

current version of angular-patternfly v2.9.0 not fully functional with angular-ui v1.x.

If I try to create a card with no title, I get a blank area and a separator above my content.

LiveOak's lo-autofocus directive is implemented here:

https://github.com/liveoak-io/liveoak/blob/792ef16af6cba1c5d452f2f3cd8f8f5a679df8d5/console/src/main/resources/app/js/directives.js#L258

It would be handy to expose it as pf-autofocus directive to allow sharing this functionality between diffirent consoles.

1 - The Parameters show that the "showTopBorder" is false by default, but the Demo, shows the border. If it isn't the default, i'd suggest it's not shown. Can the demo be enhanced to allow the option to show/hide the border?
2 - Typo here ... "subtTtle"

A current issues with ngDocs and angular ui-bootstrap is causing us to keep a copy of the angular-bootstrap-prettify.js checked into angular-patternfly.

This file should be removed once the following issue is resolved:
angular-ui/bootstrap#4315

When using C3 charts is often necessary to access the API for performing additional operations. For that, it should be possible to get access to the chart object that is generated by C3.

I get error that .selectpicker() is undefined on line 674 in directive patternfly.select.
Do you maybe know what is the problem here? Where is this selectpicker supposed to come from?
I included patternfly in my project but I did not include any bootstrap, I am supposed to include bootstrap?

It looks that there is wrong padding for button, In case I have just one Action button used in pfToolbar:

code example:

    vm.toolbarConfig = {
      actionsConfig: {
        primaryActions: [
          {
            name: 'Edit',
            title: 'Edit service dialog',
            actionFn: performAction
          }
        ]
      }
    };

screenshots:

single action button:

action button together with filters:

When trying to use "track by" expression with pfSelect, an error is thrown.

eg:
<select pf-select ng-model="pet" id="pet" ng-options="o as o for o in pets track by $index"></select>
throws
Error: [$parse:syntax] Syntax Error: Token 'track' is an unexpected token at column 6 of the expression [pets track by $index] starting at [track by $index].

It should be possible to use it, as it is without the pfSelect directive.

The API page (currently located at http://angular-patternfly.rhcloud.com/#/api) starts with a blank page. This should have some information about the angular-patternfly project and the overall Angular Patternfly API.

Sort icons for alphabetic and numeric are using A-Z and 1-9. This doesn't translate so we need to add an alternative for non english languages.

What is the license for Angular Patternfly

https://patternfly.atlassian.net/issues/?filter=10303

• Base PF ref impl example of Utilization Bar Chart does display in IE
• Angular Dir of Utilization Bar Chart does NOT display in IE, suspect the animate doesn't work in IE