blackbaud / skyux1

DEPRECATED This site contains the codebase for the AngularJS (1.x) implementation of the SKY UX framework. We no longer support this version of SKY UX, and we recommend that you use the latest version instead. https://developer.blackbaud.com/skyux/

DEPRECATED

This site contains the codebase for the AngularJS (1.x) implementation of the SKY UX framework. We still support this version, but it is in maintenance mode. We no longer develop features for this version of SKY UX, and we recommend that you use the latest version instead: https://developer.blackbaud.com/skyux/.

SKY UX

SKY UX provides an HTML, CSS, and JavaScript framework to implement Blackbaud’s design patterns, along with the guidance to handle visual design and interaction patterns.

http://skyux.developer.blackbaud.com/

Installation

You have three options to consume SKY UX. The first and easiest is to point your site to our CDN, which you can read about in our Getting Started guide.

The second option is to install SKY UX via Bower:

bower install blackbaud-skyux

The third option is to install SKY UX via NPM:

npm install blackbaud-skyux

If you install via Bower or NPM, you need to include the same files as indicated in the Getting Started guide but with the URL pointing to your own web server rather than the CDN. You may also use a hybrid approach where you load SKY UX via the CDN and fall back to a version hosted by your web server if the CDN is unavailable.

Note: Before you install via Bower or NPM, you must install Git.

Contributing

We highly encourage contributions from all SKY UX users. We just ask you to follow the coding conventions in the existing code and to write the appropriate documentation and unit tests for your feature.

For information about how to contribute, see the SKY UX contributing guidelines.

Filing Issues

To file a bug, just go to the issues page and create an issue. We operate under the expectation that we will close bugs within two weeks of filing. On the newly created issue, you can select an option to subscribe to email notifications about commits, comments, and releases related to the bug so that you can know exactly where the bug is within its lifecycle.

skyux1's Issues

bbGrid failing with: Cannot read property 'length' of undefined

The following code does not ensure that $scope.options.data is not null.

$scope.locals.hasWaitAndEmpty = function () {
return $scope.options && $scope.options.loading && $scope.options.data.length < 1;
};

Mobile > IOS > Long tab name causes scrolling on page

This is reproducable on the RE NXT Lists page:

1. on iphone save a list with a name that is 50 characters
2. notice that the list name on the tab extends past the grid below it

Notes from support:
While testing the new save feature for lists in CDEV, I noticed a gap between the list and the screen.

It appears that when the list name is using close to or the full characters (50) the page does not fit to scale.

This only appears using a mobile device and does not happen when using a desktop computer

This was test on a iPhone 5s (iOS 9) and was duplicated in Chrome and Safari

Invalid input fields do not have correct styling

On modal forms, the pink focused box shadow stays on the input element after the user has tabbed away from the input. In bootstrap, if the user tabs out of the field, the box shadow is removed. You can see the behavior below. I think the correct behavior would be to remove the box shadow like bootstrap as it is supposed to imply that the element is focused.

http://plnkr.co/edit/apd3zI75ezovJSoyBkKb?p=preview
http://getbootstrap.com/css/#forms-control-validation

On modal forms with freeform inputs, the pink hue remains, but the red border is removed when the user tabs out of the input field.

http://plnkr.co/edit/qLqqGdMNp3u47t6RJg1L?p=preview

The below rule is causing the problem.

.bb-modal-content-wrapper input[type=freeform]{
border: 1px solid #ddd;
font-size: 13px;
-webkit-appearance: none;
}.

Create screenshot tests for mobile breakpoints

For some of our components, we should have screenshots targeted at xs breakpoints to ensure that our responsiveness is working correctly.

Build Getting Started Section of documentation

README 'Filing Issues' Section Grammar Mistake

Looks like some text was removed from the README file.

"You can assign the We are operating under the expectation that we will close bugs within two weeks of filing."

Document our development process

We need to have our development practices documented in case we all get hit by a bus. This includes our build process, automation, pull request process, etc.

Single-select search unusable on mobile Safari

The root of the issue requiring a double-tap to focus is documented in this GitHub issue. Setting focus after the initial tap is executed inside a timeout, but iOS doesn't allow setting focus as a result of anything but direct user interaction. There is a suggested workaround but it is not ideal and it hasn't been adopted by the ui-select folks.

Here's a Plunkr that demonstrates the double-tap requirement:

http://plnkr.co/edit/6RBfSPH0Sk8F2oUxNLRZ?p=preview

To view on a mobile device, click the button in the top-right of the preview pane to launch it in a separate window, then scan the QR code on the mobile device to launch it.

There is also an issue with keyboard jumpiness as well.

This will probably be closed by phasing out ui-select and using the outcome of #68 instead

bbAutonumeric does not update model if the user pastes into the input

From @Blackbaud-MichaelLopez

If a user copies and then pastes text into an input element that has bbAutonumeric applied, the model is not updated and autonumeric rules are never applied to this value.

bbMoment is failing after upgrading to 1.4.0 or higher due to require issues

Our setup is that we load all of Sky and its libs without require on the page, and then we load require. After upgrading from 1.3.0 to 1.4.2, bbMoment fails due to how it behaves when require exists on the page.

Note that a similar issue exists for how enquire.js is being used by Sky's MediaBreakpoints module. I was able to correct this by using the following line before the app is bootstrapped:

define('enquire', window.enquire);

A similar fix does not work for moment:

define('moment', window.moment);

Create sky-libs JS and CSS files

We currently distribute sky and libs files for consumers who want to build their own libs, but that means twice the number of files have to be downloaded. We should create sky-libs files for those consumers who just want to include it all in one file.

Filter bubble text no longer truncated

In the latest version of sky (1.3.0), the text in the filter bubble is not truncated when the text is too long.
To dupe, go to http://plnkr.co/edit/NWv9ARHCN8bAlHCsWrEt?p=preview and filter on "Show guitars". Notice the filter text runs off the edge of the screen and the x to close the filter is below the filter bubble.

Put appropriate devDependencies back as dependencies

Some build tasks rely on the dependencies section of bower.json to resolve dependencies across multiple Bower packages. We put the devDependencies that we moved recently back in as dependencies.

Grid loading indicator does not show if no rows in grid

The grid supports a setting of "loading" which shows a loading indicator over the grid contents while the consumer retrieves new data. This pattern works well and intentionally only blocks the grid contents but not the grid header and other components. That way if you "issue a bad query", you can still manipulate the grid to correct it and not get stuck behind a waiting mask.

However, if there are no rows in the grid (initially loading the page or you have a query that has no rows), then there is no visual indication of loading because the mask is over an empty result set (no height). I think a correction would be to show some nominal height DIV with the mask when we issue "loading" in a state that currently has no rows displaying.

This can be demoed on the Grid documentation page by applying a search filter on the first grid in the demo so that there are no rows. Now clicking Begin loading does nothing visually:

http://skyux.developer.blackbaud.com

Have sky support delete pattern found in RENxt

bb-context-menu-button should stopPropagation

In order to prevent the event from bubbling up to its parents

bb-grid loading spinner centers on columns rather than viewport

From @Blackbaud-LoriWeiss

Precondition:
Your list has more columns then can appear in the window, and there is scroll bar on the list.

1. Refresh list
2. Notice that the spinner is not centered in the browser

We think this is because the spinner is being centered by the width of the columns, even those that are off screen.

Clarify Help Service documentation

We've had some requests from other teams about more detailed information about how to use the help service.

From @Blackbaud-JonathanBell:

I’ve attached a sample page we have that includes more details but isn’t using the Sky wrapper, which we would probably rather them do.

Maybe we can get the Sky documentation updated to include these pieces:

For URL, use //p1helpui.renxt.blackbaud.com/helpwidget.js for production rather than the CDEV link below.

Other options that we should document:

        helpBaseUrl: ‘http://….’  - Optional: Provide the base URL to your help files.  If omittied, the productId will be inserted into the URL https://www.blackbaud.com/files/support/helpfiles/{ProductId}/content/ to construct the base URL.  This parameter override is available if help content must exist at some other path instead.


        getCurrentHelpKey: function() { return ‘myHeppFile.html’}, - A function that returns the page’s current help URL.  This way if a user navigates around your app, at any point clicking the help panel can call this to determine the appropriate help file to show.

        onHelpLoaded: function() {} - Optional callback function after the help panel is loaded.

        knowledgebaseUrl: 'http.....' - Optional. Can customize the KB URL if needed, or set to empty string (‘’) to remove this link.

        caseCentralUrl: 'http://...'  - Optional. Can customize the Case Central URL if needed, or set to empty string (‘’) to remove this link.

        communityUrl: ‘http://….’  - Optional. Can be provided in order for a link to Community to appear

        getChatData: function(userLocale) { {
        if (locale === 'en-gb') {
            return {
                key: '3674699029499270000',
                websiteId: ' 3506212574036402816'
            };
        }
        return {
            key: ' 171147028994005462',
            websiteId: '2766361919244160000'
        };
    }}     --- Optional. Function that returns the appropriate chat key and website id to use for the product based on the user’s locale.

        userData: {  emailAddress: ‘’, firstName: ‘’, lastName: ‘’ }  -  Optional.  Used to pass information about the current user to the chat session.

        clientId: 5740  -  Optional. Used to pass the client / site id to the chat session.

Create Tile pattern documentation

$brand-primary is this yellow color that does not fit with progress bar and other bootstrap controls

Several parts of sky assume that this == window

In data.js, mediabreakpoints.js, and moment.js we have blocks like:

function (window) { ... }(this);

Instead, let's just inject $window through angular.

Component documentation cleanup

Tooltips incorrectly positioned in IE 11

From @Blackbaud-MichaelLopez

http://jsfiddle.net/n0c1vwm7/1/

Might be fixed in angular-ui-bootstrap 0.14.0

Seen in popover

Look into using webdrivercss for screenshot tests

https://github.com/webdriverio/webdrivercss

Create summary section pattern documentation

Evaluate Coverity for security scans

We need to scan our codebase periodically for security vulnerabilities. Coverity offers integrations with GitHub and Tavis CI, so we should be able to use them. T

https://scan.coverity.com/travis_ci

multiple bbAutonumeric inputs cause infinite selecting

http://plnkr.co/edit/wOqxfxTaV3rt8WqDmQnd?p=preview

Focus the first bbAutonumeric input element, then focus the address bar of the browser, then focus the second bbAutonumeric input element. Notice infinite selecting.

Extend checklist control

Extend the checklist control to allow for single-selection and adding new values.

bbAutofocus relies on timeout

bbAutofocus is a directive used for use in modals where the html5 autofocus attribute is interfered with by the modal animation. It uses a 100ms timeout and then focuses on an element. This has stopped working in our documentation, possibly because UI Bootstrap switched to using ngAnimate for animations, increasing the necessary timeout. We should investigate using something more robust than timeouts for autofocus in modals.

Popover cosmetic issues IE and Firefox

From @Blackbaud-JackieKirchhoff

In IE, the popover width does not size correctly, causing text to wrap.
To dupe, open the popover demo in IE and click any of the Click here links or the Top/Bottom/Left/Right buttons. Notice the "Select a beverage:" text is wrapping.

In Firefox, there is sometimes extra white space at the bottom of the popover.
To dupe, open the popover demo in Firefox and click any of the Click here links or the Top/Bottom/Left/Right buttons (may have to do this multiple times). Notice sometimes there is extra white space at the bottom of the popover.

Remove valid Bootstrap CSS classes from Skylint

We're erroneously flagging a few valid Bootstrap CSS classes as invalid in Skylint. We need to remove them:

.input-group-addon
.input-group-btn
.img-circle

sky charts module deprecated?

Hello,

We recently have tested upgrading to the latest sky and have noticed that we see this error on page load

Did you guys get rid of the sky.charts module? I'm not certain that we were even using it, but wanted to confirm that it's no longer supported.

Thanks,

• Brandon

Code coverage below 100% is not failing the build

Recently a change was introduced that dropped our code coverage to under 100%. This should have caused the build to fail. I suspect the build still passed because when rounded to a whole number the result was 100%.

Add "traditional" parameter for bbData.query

From @Blackbaud-JeremyRyan

The jQuery.param method supports a second parameter "traditional: Boolean" which causes brackets not to be added or encoded for array query parameters. Can bbData.query be extended to allow using this parameter?

Missing documentation about free-jqgrid

Hello,

I noticed after upgrading to the latest sky-ux that you guys are now using free-jqgrid as opposed to jqgrid in your code. I assume this is because jqgrid is no longer free to use anymore? It doesn't reflect this in the documentation http://skyux.docs.blackbaudhosting.com/documentation/grid/ so thought this might be something you would like to update for future users of sky-ux.

Checklist search icon location issue IE

From @Blackbaud-JackieKirchhoff

In IE, the search icon on a checklist is too low.
To dupe, open the checklist demo in IE and notice the location of the search icon.

Upgrade to FontAwesome 4.4

Checked indicator in bb-check gets left aligned if you put it in a bb-grid

The text-align: left set for TD in the sky css ends up applying down to the input it contains. The result is that the checkmark/pip is to the left side of the containing square/circle rather than centered.

I was able to address it by explicitly setting text-align: center in my site's css, but just thought you should know

datepicker calendar gets stuck in IE11 when closing modal

@Blackbaud-TimothyWittig

Steps to reproduce:

1. Go to bb-datepicker documentation page and edit in plunker using IE11.
2. Click "Open Datepicker Modal" button.
3. Open calendar control.
4. Without selecting anything, close the modal.
5. Observe that calendar control is still there and can't be removed without a page refresh.

Create component to standardize error messaging

Based on the work Rob and Steve did for RE.

Layout templates
Default messaging by error type
Ability to override content

https://blackbaudinc.box.com/s/9ige6etpfr8wtbqqg59zx5zh66re0kia
The Excel sheet has the error types and messages. Screenshots show examples. IMO the default we provide should be message only, if teams want to include images they would provide custom content.

Unit test code coverage is no longer 100% after fix for #33

The fix for issue #33 left untested code in autonumeric.js. You can see the code coverage report here.

Extend Toast directive to accomodate triage levels

Update the Toast directive to follow our (new/proposed) triage levels that we are also using for labels, badges and notifications:

Success
Info
Warning
Danger

FE NXT has a design ready to go that would make use of this.

bb-wait needs line-height

If bb-wait is used on an element that has the bb-text-block class. This is because .bb-text-block sets the line-height but bb-wait does not.

http://plnkr.co/edit/CrIT6efWf0HubtrP4oX1?p=preview

popover and tooltips do not respect viewport boundaries

This is a known issue in Angular UI but we probably want some solution in sky to address this. I'm thinking you can add some directive that recalculates the width/height if it is outside the viewport.

http://plnkr.co/edit/qelel8Kh7xd7DEZ4WcZu?p=preview

bbTile content section should default to 'display: none' until tile collapsed state is known

From @Blackbaud-MichaelLopez

Today, the tile opens for a few browser frames until the angular digest cycle runs and sets the collapsed state and the content section is hidden or remains open.

This causes page loads with tiles with large content to shuffle around a lot since the entire tile is expanded and then collapsed. I think it would be a better UX if user sees all the tiles collapsed for a few frames and then they open up.

change configuration icon in order to standardize

The change entails swapping the fa-wrench icon to the fa-cog icon. I believe the only place where this needs to happen is for the tile directive.

Bootstrap text colors

We need to determine whether we should override bootstrap text classes.

These are the current text classes. We should probably change the colors of the Sass variables that drive them to match the button/alert/notification color changes we've made.

@Blackbaud-ToddRoberts

Sky headers are truncated too soon.

When the header text for a tile is long, the text is truncated and an ellipsis is shown. This is happening even when there is plenty of room to show the full text.

This screenshot shows a window with the full text for the headers showing.

This screenshot shows a slightly smaller window with the header text for one tile truncated. Note that there is plenty of room to have shown the full header text.

tool doesn't flag deprecated classes contained in ng-class

places where we use deprecated classes in ng-class, e.g. ng-class="{'m-b-md': (!$last)}", do not get flagged by the skylint tool

Update omnibar config to point to minified version of omnibar JS

Currently the bbOmnibarConfig object points to an unminified version of the omnibar JS hosted by auth services. We should point to the minified version.