vmware / clarity

Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.

NOTE: The Clarity Design System has moved and is now split into two repositories, one for Clarity Angular and one for Clarity Core. This repository is now for archived purposes only.

Clarity Design System

Clarity is an open source design system that brings together UX guidelines, design resources, and coding implementations with Web Components. This repository includes everything you need to build, customize, test, and deploy Clarity. For complete documentation, visit the Clarity website.

If you are looking for Clarity Angular, our previous implementation of Clarity built in Angular, please see the angular branch for the latest version there.

Getting Started

Clarity is published as five npm packages:

• Contains the Web Components that work in any JavaScript framework.
• Contains shims for core usage in Angular environment
• Contains shims for core usage in React environment
• Our open source sans-serif typeface.

Installing Clarity

Visit our documentation at https://clarity.design/get-started/

Documentation

For documentation on the Clarity Design System, including a list of components and example usage, see our website.

Contributing

The Clarity project team welcomes contributions from the community. For more detailed information, see our contribution guidances.

Licenses

• The Clarity Design System is licensed under the MIT license.

Feedback

If you find a bug or want to request a new feature, please open a GitHub issue.

Include a link to the reproduction scenario you created by forking one of the Clarity Stackblitz Templates for the version you are using at Clarity StackBlitz templates.

Support

For our support policies please visit https://clarity.design/get-started/support/

For questions, ideas, or just reaching out to the team feel free to open a discussion in our GitHub Disscussion section.

clarity's Issues

Code highlighting not applied when navigating through angular's router

Select one ... (check one with "x")

[x] bug
[ ] feature request
[ ] enhancement

Expected behavior

Navigating to a component via a route should result in the same code highlighting as refreshing the page on that route.

Actual behavior

Code highlighting is only applied if the component is refreshed.

Reproduction of behavior

Load this page. Code highlighting is applied. Next, navigate to a different route, then either hit the back button or navigate back. Code highlighting is not correctly applied.

Environment details

• Angular version: 2.1.0

• Clarity version: 0.7.0

• OS and version: Win8.1 x64

• Browser: Seen in Chrome 54 and Firefox 48 & 50. Code highlighting does not work at all in Edge, probably unrelated.

Datagrid - Multiline Text

Select one ... (check one with "x")

[ ] bug
[X] feature request

Expected behavior

Currently, multi-line text is supported(-ish) for text inside rows. We don't have a spec for multi-line text in column headers, though. So:

1. Confirm the current design for multi-line text in rows is the one we want. See screenshot attached.
2. Create spec for multi-line text in headers.

Provide validation for select boxes

Select one ... (check one with "x")

[ ] bug
[X] feature request

• Design validation messages for select boxes
• Implement validation/errors for select boxes
• Add documentation/example of form validation for selects and multi-selects to website

Expected behavior

We need design/implementation for form validation/error messages for select boxes.
Note this should include multi-selects.

This should also be done in relation to Issue #45

[Core] Upgrade to Angular 2.2.0

Select one ... (check one with "x")

[ ] bug
[X] feature request

Expected behavior

Angular 2.2.0 is out, we should upgrade Clarity to it (and making sure there are no breaking changes) to release in 0.7.1.

https://github.com/angular/angular/blob/master/CHANGELOG.md#220-upgrade-firebooster-2016-11-14

Support Momentum Scrolling on .main-container

Select one ... (check one with "x")

[x] bug
[x] feature request
[ ] enhancement

Expected behavior

The main container should support momentum scrolling on iOS devices.

Actual behavior

The main container does not scroll nicely on iOS devices (tested with iPad on iOS 9).

Reproduction of behavior

E.g. the clarity docs site:

Adding this css fixes the issue:

.main-container {
  /* has to be scroll, not auto */
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

Environment details

• Angular version: 2.2.X

• Clarity version: 0.7

• OS and version:

• Browser: [iOS 9/10 Safari | iOS XX UIWebView | iOS XX WKWebView ]

Provide validation for text areas

Select one ... (check one with "x")

[ ] bug
[X] feature request

The following tasks will be needed.

• Design form validation/errors for textareas
• Implement error/validation messages for textareas
• Add Documentation on the website

Expected behavior

How does a user provide validation to a text area. In an input field, there is an error icon to the right of the field which provides a tooltip with information about the error, how does that match to text areas?

Actual behavior

No validation yet.

Need a single row selection/action pattern on datagrid

Select one ... (check one with "x")

[ ] bug
[X ] feature request

Expected behavior

We need a pattern for selecting a single row in datagrid and taking action on it especially when patch operations are not available. Think of a datagrid containing user accounts and a single action (Edit). How do you select one user and edit their account.

Actual behavior

Currently, we don't have a pattern for this.

Reproduction of behavior

N/A

Environment details

N/A

• Angular version: 2.0.X
  N/A

• Clarity version:
  Future

• Browser:
  all

Homepage should have a link to the sketch template when mentioning it

Select one ... (check one with "x")

[ ] bug
[ ] feature request
[X] enhancement

Actual behavior

Currently, we mention the sketch template on the homepage but do not provide a link to it, this might be confusing to some users based on discussion here: https://news.ycombinator.com/item?id=12965381. We should provide a link to the sketch template when appropriate, even on the homepage.

Need to provide an option to close all other open stackblocks when a new stackblock is opened in StackView

Select one ... (check one with "x")

[ ] bug
[X] feature request

Expected behavior

Need to provide a way for users to close all other stack blocks when a new stack block gets opened so the stack view acts as an accordion. This will not be the default option, it will be an additional feature that a user can turn on.

Actual behavior

Right now the default and only behavior is to allow as many stack blocks to be open within a stack view.

Reproduction of behavior

N/A

Environment details

• Angular version: 2.0.X
  2.1.0

• Clarity version:
  0.6.1

• Browser:
  all

Text style updates to UI Kit

[x] bug
[ ] feature request
[ ] enhancement

Expected behavior

P4 should be #000000
Data Grid & Table headers should be P6

Actual behavior

P4 is #565656
Data Grid & Table headers are P4

Reproduction of behavior

Environment details

• Angular version:

• Clarity version: 0.6.0 UI Kit

• OS and version:

• Browser: [all]

Login background pattern black on IE11

Select one ... (check one with "x")

[x ] bug
[ ] feature request
[ ] enhancement

Expected behavior

login background blue background to render correctly

Actual behavior

solid black background on IE11 (fine on Edge)

Reproduction of behavior

running IE11 on windows 10 (ok with Edge) open login URL to document (same issue on running app)
https://vmware.github.io/clarity/documentation/login

notice it is running with default document mode and agent (desktop).

Environment details

• Angular version: 2.0.X

• Clarity version: 0.6.1 (according to nodes_module/clarity-ui/package.json)

• OS and version: windows 10

• Browser: [IE 11 ]

Update form headers on the website

[x] bug
[ ] feature request
[ ] enhancement

Expected behavior

• Form headers should have normal casing
• Form headers margin-bottom should be reduced by 12px

Actual behavior

• Form headers are set to text-transform: uppercase
• Form headers are difficult to distinguish with the current whitespace
• https://vmware.github.io/clarity/documentation/forms

Reproduction of behavior

Environment details

• Angular version: 2.0.X

• Clarity version:

• OS and version:

• Browser: [all]

Tooltips, Dropdown Menus & Sign Posts get clipped off in Modals

Select one ... (check one with "x")

[x ] bug
[ ] feature request

Current behavior

Currently .modal-body in .modal has a max-height: 55vh and overflow-y: auto. Using the max-height and overflow: auto allows us to handle overflowing content inside of the .modal-body. But because of the way overflow: auto works, the current behavior clips off tooltips, dropdown menus, sign posts, or any other component that has position: absolute in modal-body if the component spans outside of the .modal-body. The only way to avoid the component from being clipped off right now is to change the direction using the direction classes provided.

Tooltip gets clipped off

Modal scrolling on content overflow

Expected behavior

Tooltips, Dropdown Menus, and Sign Posts should not get clipped off in Modals

Proposed Fix

The only alternative solution, that we know of, is to remove the max-height and the overflow-y: auto from the .modal-body. Instead use overflow: visible and and allow the content in the modal to decide its height. If the modal height is greater than the view height, the .content-area scrolls to show the remaining modal. This solution satisfies all the conditions that we want to meet but changes that way the modal works.

One example of this is the modal implementation that Twitter uses.

Tooltip in Modal

Popover/Sign Post in a Modal

Content overflow + Scrolling

Other alternative that we considered

Use an attribute to store the content for the component and adding it on the body or .main-container when the tooltip is activated.

This solution doesn't work because:

1. Storing content in attributes doesn't work because we can't use HTML markup in attributes and some of the components like Sign Posts should be able show links, images etc inside of them.
2. Bad from accessibility point of view because screen readers might read the tooltip content in incorrect order because its added in the body or .main-container
3. DOM manipulation every time the content is shown because it has to be added to the body or .main-container when active and removed when inactive.

Implications of implementing the proposed alternative solution:

1. Changes the way Modal works. Breaking change for applications which use modals which has overflowing content inside of it.
2. Affects the design and implementation of Wizards since the wizard design assumes that the dialog has a max-height and the implementation depends on Modals.

Environment details

• Angular version: 2.0.X

• Clarity version: 0.2.0 and above

• Browser: all

Open to suggestions/alternative solutions that might help solve this issue and still allow for Modals to have a max-height and the ability to support overflowing content.

Note: Sign Posts are under implementation

Publish the initial set of Clarity Icons

Select one ... (check one with "x")

[ ] bug
[X] feature request

Expected behavior

Now that we have an initial set of 50 icons, we should make them available as part clarity-icons.

Initial set of icons

clr-dropdown component close on click has delay

Select one ... (check one with "x")

[x] bug
[ ] feature request
[ ] enhancement

Expected behavior

Dropdown should close immediately after click

Actual behavior

Dropdown closes approx 300ms or later after click. It's enough to be noticably delayed.

Reproduction of behavior

Check out drop down under heading: "1. clrMenuPosition is set to top-left. Default is bottom-left"
at https://vmware.github.io/clarity/documentation/dropdowns

Environment details

• Browser: [Chrome 54]

Hamburger/Overflow Icons Bug Fixes

• The hamburger icon on medium and smaller breakpoints is not vertically aligned.
• cursor is not set to pointer
• header nav/actions styling on hover is not followed by the responsive nav triggers

Select one ... (check one with "x")

[x ] bug
[ ] feature request
[ ] enhancement

Expected behavior

Actual behavior

Reproduction of behavior

Environment details

• Angular version: 2.0.X

• Clarity version:

• OS and version:

• Browser: [all ]

on minified version of clarity, please have first characters depict the clarity.css version

Select one ... (check one with "x")

[ ] bug
[ ] feature request
[X] enhancement

Expected behavior

Being able to view clarity.css version when inspecting the clarity minified version.
This helps quite a lot to create consistency between different web-services using clarity-css.

Actual behavior

upon inspecting clarity-ui.min.css, you will see the normalize version it uses:
"/*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */html{font-family....."

Reproduction of behavior

go to any web page using clarity-ui.min.css, inspect the file.

I can't tell which clarity version the clarity page uses :) I can tell which normalize version though! (although i don't care :( )

Environment details

---

• Angular version: 2.0.X

• Clarity version:
  Any

• OS and version:
  Any

• Browser:
  All

<input type="url"> doesn't get styled like <input type="text"> does

Select one ... (check one with "x")

[x] bug
[ ] feature request
[ ] enhancement

Expected behavior

Should look like text input

Actual behavior

Looks unstyled, no css selector matches, see top field in figure below

Reproduction of behavior

... trivial

Environment details

• Angular version: 2.2.X

• Clarity version: 0.7

• OS and version: OS X el Cap

• Browser: [all]

[WEB] Internal component pages in documentation can scroll left/right even when they shouldn't

Select one ... (check one with "x")

[X ] bug
[ ] feature request

Expected behavior

Scrolling should be smooth and work correctly on mobile devices.

Actual behavior

Currently, pages like the card documentation page can scroll to show empty space to the right/left on the Clarity website. Some components have less space but can continue to scroll left/right as you try to scroll through the page.

Reproduction of behavior

Visit the card documentation page or (almost) any other page on a mobile browser.

Environment details

• Angular version: 2.0.X
  2.1.0

• Clarity version:
  0.7.0

• Browser:
  iOS 10 (Chrome or Safari)

Minor: Debug code left in datagrid.ts

[x] bug
[ ] feature request
[ ] enhancement

Expected behavior

No messages printed to the console from normal datagrid behavior.

Actual behavior

Prints the number of empty rows.

Reproduction of behavior

Can be seen in demo app here.

Environment details

• Angular version: 2.1.0

• Clarity version: 0.7.0

• OS and version: Win8.1 x64

• Browser: All

Line of code in question is here.

npm install failed

Select one ... (check one with "x")

[x] bug
[ ] feature request
[ ] enhancement

After I updated the package.json file, then run rpm install

Expected behavior

The latest clarity UI has been installed

Actual behavior

It threw errors:
npm ERR! peerinvalid The package @webcomponents/[email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants @webcomponents/custom-elements@github:webcomponents/custom-elements.git#v1.0.0-alpha.3

Reproduction of behavior

Environment details

The dependencies in my package.json are:
"@angular/common": "^2.1.0",
"@angular/compiler": "^2.1.0",
"@angular/core": "^2.1.0",
"@angular/forms": "^2.1.0",
"@angular/http": "^2.1.0",
"@angular/platform-browser": "^2.1.0",
"@angular/platform-browser-dynamic": "^2.1.0",
"@angular/router": "^3.1.0",
"@angular/upgrade": "^2.1.0",
"@webcomponents/custom-elements": "github:webcomponents/custom-elements#v1.0.0-alpha.3",
"clarity-angular": "^0.6.0",
"clarity-icons": "^0.6.0",
"clarity-ui": "^0.6.0",
"core-js": "^2.4.0",
"font-awesome": "^4.5.0",
"mutationobserver-shim": "^0.3.2",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "^0.19.27",
"web-animations-js": "^2.2.1",
"zone.js": "0.6.21"

• Angular version: 2.0.X

• Clarity version:
  0.7.0

• OS and version:
  MAC OS

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

scrollbar on website What's New section is in the wrong place

Select one ... (check one with "x")

[X] bug
[ ] feature request
[ ] enhancement

Expected behavior

Scrollbar in content area should be all the way to the left and extend from bottom of header to bottom of screen

Actual behavior

Scroll bar is in the middle of the page

Reproduction of behavior

Go to the What's New section. Scroll the page

Environment details

• Clarity version: 0.7.1

• OS and version:

• Browser: [all]

Branding Icon should hide on medium and smaller screens

Select one ... (check one with "x")

[ x] bug
[ ] feature request
[ ] enhancement

Expected behavior

Actual behavior

Branding Icon should hide on medium and smaller screens.

Reproduction of behavior

Environment details

• Angular version: 2.0.X

• Clarity version: 0.7.0

• OS and version: All

• Browser: [All]

[NG] Support AoT compilation

Select one ... (check one with "x")

[ ] bug
[x] feature request
[ ] enhancement

Expected behavior

Applications using Clarity components should be able to use AoT compilation.

Actual behavior

Some of the Clarity components cannot be compiled ahead of time, mostly because they modify HTML elements directly instead of going through the renderer.

Reproduction of behavior

Pretty hard to reproduce in a plunker...

Environment details

• Angular version: 2.0.X

• Clarity version: 0.7.0

• OS and version: all

• Browser: all

[icons] clarity icons should not depend on source code outside of itself

Select one ... (check one with "x")

[ ] bug
[ ] feature request
[X] enhancement

Expected behavior

Clarity icons should be a package all on its own. It should not rely on SASS files inside of ClarityUI.

Actual behavior

Clarity icons imports ../clarity/utils/variables.clarity -- which is a file inside of clarityUI.

Reproduction of behavior

Environment details

• Angular version: 2.0.X

• Clarity version: 0.7.1

• OS and version:

• Browser: all

[ bug ] Error loading "clarity-angular" in app.module.js

I have installed clarity in quickstart angular
But i have thise error loading "clarity-angular" in app.module.js

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./node_modules/clarity-icons/clarity-icons.min.css">
    <script src="./node_modules/mutationobserver-shim/dist/mutationobserver.min.js"></script>
    <script src="./node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script>
    <script src="./node_modules/clarity-icons/clarity-icons.min.js"></script>    
    <link rel="stylesheet" href="./node_modules/clarity-ui/clarity-ui.min.css"> 
    

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ClarityModule } from 'clarity-angular';

import { AppComponent }  from './app.component';

@NgModule({
  imports:[ 
      BrowserModule,
      ClarityModule
    ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

link of all code https://ide.c9.io

Add installation instruction for Clarity using angular-cli

Select one ... (check one with "x")

[ ] bug
[ ] feature request
[x] enhancement

Expected behavior

In the documentation, add instruction on how to include Clarity for projects using angular-cli.

Active .nav-item box-shadow does not overlap with the box-shadow of .nav

Select one ... (check one with "x")

[ x] bug
[ ] feature request

Expected behavior

The box-shadow of .nav should overlap with the box-shadow of an active .nav-item

Actual behavior

The box-shadow of .nav is not overlapping with the box-shadow of an active .nav-item

Environment details

• Angular version: 2.0.X

• Clarity version: 0.6.2 and above

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Documentation site is running in Angular dev mode

Select one ... (check one with "x")

[ ] bug
[ ] feature request
[x] enhancement

Expected behavior

The documentation site at https://vmware.github.io/ is currently running in Angular 2 Development mode. This means that debug metadata is still attached to elements and slows the site down. You could improve the speed of the site significantly by adding a production setup which disables dev mode and includes AOT compilation.

Reproduction of behavior

Open console on site to see dev mode warning message.

Provide an infinite scrolling option to the Datagrid

Select one ... (check one with "x")

[ ] bug
[X] feature request

Expected behavior

The datagrid should provide a feature to allow infinite scrolling (in addition to pagination).

Actual behavior

Currently, we only offer pagination.

Environment details

• Angular version: 2.0.X
  2.1.X

• Clarity version:
  0.7.0

• Browser:
  All

Alert text is not vertically centred to icon

[X] bug
[ ] feature request
[ ] enhancement

Expected behavior

Alert icons are aligned with text.

Actual behavior

Text is slightly higher than the alert text.

Reproduction of behavior

<div class="alert alert-warning alert-sm">
    <button type="button" class="close" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
    <div class="alert-item">
        <span class="alert-text">
            This text will not line up with icon
        </span>
    </div>
</div>

Environment details

• Clarity version: 0.7.0

• Browser: [ Chrome 54 | Firefox 49.0.2 ]

Workaround

Specifying line-height: initial; on the alert-text will cause the text to line up correctly.

[Bug] Closed modals emit (clrModalOpenChange) even when Esc is pressed

Select one ... (check one with "x")

[x] bug
[ ] feature request

Expected behavior

Already closed modals should not emit anything when trying to close again. Ideally, they shouldn't even listen to keyboard events unless they're open.

Actual behavior

If I have 5 closed modals on my page and press Esc, all 5 of them emit a(clrModalOpenChange) output.

Environment details

• Angular version: 2.0.X

• Clarity version: 0.5.6

• Browser: all

Document how to import only part of Clarity SCSS into a project

[ ] bug
[ ] feature request
[x] enhancement

Expected behavior

Users of clarity should only have to pull in the css they need (e.g. that of components actually used).
This improves page load times and reduces parsing overhead.

Actual behavior

Current setup instructions say we should include the full clarity-ui.min.css @ ~800kb IIRC.
Source: https://vmware.github.io/clarity/get-started/index.html#howToUse , section 2b.

I'm not sure this would be easily doable, but using SCSS @imports the clarity-ng components could reference the corresponding clarity-ui scss files.

Provide a .forRoot() method on ClarityModule to prevent reimport of ClrResponsiveNavigationService in lazy-loaded feature modules

Select one ... (check one with "x")

[ ] bug
[ ] feature request
[x] enhancement

Expected behavior

ClarityModule needs a .forRoot() method so that it cooperates nicely with lazy-loaded feature modules.

Actual behavior

The current implementation results in separate instances of ClrResponsiveNavigationService per injector scope of lazy loaded feature modules

Reproduction of behavior

For reference, see https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html#!#q-for-root

Environment details

• Angular version: 2.2

• Clarity version: 0.7

• OS and version: OS X El Capitan

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Add an Autocomplete component

[ ] bug
[X] feature request
[ ] enhancement

Expected behavior

Implement an auto complete component that will automatically display a dropdown with possible choices. Should support:

• custom filter function
• drop-down template (eg: multiline lines)

Reproduction of behavior

Example of an autocomplete component from another library: https://material.angularjs.org/latest/demo/autocomplete

Remove routerLinks from datagrid demos

Select one ... (check one with "x")

[X] bug
[ ] feature request

Actual behavior

Having routerLinks in the templates of the datagrid demos is breaking the datagrid documentation.

Feature Request: TreeView

We would love to have TreeView in the awesome framework.

[ ] bug
[X ] feature request
[ ] enhancement

[CORE] Add CSS regression testing to Clarity's repo

Select one ... (check one with "x")

[ ] bug
[X] feature request

Expected behavior

We currently have tools that we use to make sure components work when we make changes but we should have public CSS regression testing as part of our build/submission process.

Minor: Increase space above first H3 on components pages ~ 24px on component pages

Select one ... (check one with "x")

[ ] bug
[ ] feature request
[X] enhancement

Expected behavior

The H3 (i.e. "Using 'Blat") should be clearly discernible, especially after clicking the Design Guidelines link.

Actual behavior

Heading is crowded and pushed to top.
It's difficult to see.

Reproduction of behavior

https://vmware.github.io/clarity/documentation/datagrid#guidelines

Environment details

• Angular version: 2.0.X

• Clarity version:
  0.7.0

• OS and version:

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  all

[Clarity Website] Improve scrolling on mobile devices

Select one ... (check one with "x")

[X ] bug
[ ] feature request

Expected behavior

Scrolling on the Clarity website on mobile devices should work smoothly.

Actual behavior

Right now, it is hard to scroll in the documentation or get started pages (although it is fine on the homepage for example)

Reproduction of behavior

Attempt to scroll on any of the component pages.

Environment details

iOS 10

• Angular version: 2.0.X
  2.1.0

• Clarity version:
  0.6.2

• Browser:
  Safari/Chrome on iOS 10

[WEB] Incorrect padding being set on the website header for screen-sizes under 991px

Select one ... (check one with "x")

[x ] bug
[ ] feature request
[ ] enhancement

Actual behavior

Extra padding is added after the .header-actions on the website on screen size below 991px. This should only be done for the website header on all the 4 pages and not the header demos

Expected behavior

Reproduction of behavior

Environment details

• Angular version: NA

• Clarity version: NA

• Browser: all

Feature Request: Multiple select for dropdown/select boxes

Multiple select

[ ] bug
[X] feature request
[ ] enhancement

Expected behavior

With a select box/drop-down, the users can select one or multiple items from a list of values. On the option list, every option can have a checkbox in front of it. Should be able to select/check all options and uncheck/unselect all options. This feature would be very useful on a dashboard application.

Example:

http://i.stack.imgur.com/1SYwV.gif

Re-factored cards added padding to the left and right of progress blocks

Select one ... (check one with "x")

[X] bug
[ ] feature request
[ ] enhancement

Actual behavior

There is an additional X amount of padding to the left and right to progress blocks inside of cards.

See image.

Reproduction of behavior

Visible on the website https://vmware.github.io/clarity/documentation/progress

Environment details

• Angular version: 2.0.X

• Clarity version: 0.7.1

• Browser: all

Where is the documentation for angular components?

I don't see the documentation for angular components anywhere; am I missing something here?

I would also expect the full source code for each example to be available like most other component libraries.

BTW, a gitter would be nice for general usage questions.

Add Plunkr/Codepen/JSFiddle or similar template for quick bug reports

Select one ... (check one with "x")

[ ] bug
[ ] feature request
[x] enhancement

Expected behavior

It would help tremendously if you could provide a Plunkr/Codepen/JSFiddle template (whatever works for you) for users to spin up quick repros and submit bug reports. Couldn't find any such template in the docs.

Adjust breakpoint on html5, css3, and NG2 badges

Select one ... (check one with "x")

[ x] bug
[ ] feature request
[ ] enhancement

Expected behavior

Rendering of badges should have better reactive behavior w/ titles on narrow view ports

Actual behavior

When component pgs w/ longer titles on iPhone 6, badges crowd over topic title

Reproduction of behavior

Environment details

• Angular version: 2.0.X

• Clarity version:
  0.7.0

• OS and version:

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

The Stack View Cheveron is not middle aligned on Stack View with children

Select one ... (check one with "x")

[x ] bug
[ ] feature request
[ ] enhancement

Expected behavior

Stack View's with children should display a chevron vertically aligned in the middle.

Actual behavior

The Stack View with children has a chevron aligned to the top of its container.

Reproduction of behavior

Environment details

• Angular version: 2.2.0

• Clarity version: 0.7.0

• OS and version: OSX (El Capitan) & Windows 10

• Browser: [ Firefox 49.0, IE 10, IE 11, MS Edge ]

[WEB] Sub-navigation renders incorrectly on the website (renders correctly on the Clarity Demos).

Select one ... (check one with "x")

[X] bug
[ ] feature request

Expected behavior

The sub-navigation in the headers and sub-nav documentation should appear correctly.

Actual behavior

Right now, it appears below the line as in the following image:

Reproduction of behavior

Visit: https://vmware.github.io/clarity/documentation/header

Environment details

• Angular version: 2.0.X
  2.1.X

• Clarity version:
  0.7.0

• Browser:
  Chrome Version 54.0.2840.71 (64-bit) on Mac

[Core] Upgrade Clarity to TypeScript 2.0

Select one ... (check one with "x")

[ ] bug
[X] feature request

Expected behavior

We should upgrade Clarity to TypeScript 2.0

Document how to use dropdown in header-nav

Select one ... (check one with "x")

[x] bug
[x] feature request
[ ] enhancement

Expected behavior

Documentation should include an example for how to correctly use a dropdown with a text label in the navbar.

Actual behavior

Consider the following code:

<clr-main-container>
  <clr-header>
    <div class="branding">
      <a routerLink="/home" class="nav-link">
        <span class="clr-icon clr-clarity-logo"></span>
        <span class="title">Logo</span>
      </a>
    </div>

    <div class="header-nav">
      <clr-dropdown clrMenuPosition="bottom-right">
        <a clrDropdownToggle class="nav-link" id="changeProject">
          <span class="nav-text">{{currentProject.name}}</span>
          <clr-icon shape="caret" class="icon-orient-down"></clr-icon>
        </a>
        <div class="dropdown-menu">
          <a clrDropdownItem *ngFor="let p of projects" [routerLink]="['p', p.tag]">{{p.name}}</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item disabled" href="#">All</a>
        </div>
      </clr-dropdown>
...

This positions the caret in the center of the nav-link like so:

I can fix this using the following hack/workaround:

.dropdown .dropdown-toggle:not(.btn) clr-icon[shape="caret"] {
  right: 0;
  left: initial;
}

Which then looks like this

I'm either doing something wrong OR this is a bug in clarity.

Reproduction of behavior

See above

Environment details

• Angular version: 2.2.X

• Clarity version: 0.7

• OS and version: OS X el Capitan

• Browser: [Chrome 54, others likely affected as well]