vmware-clarity/ng-clarity

Clarity Angular is a scalable, accessible, customizable, open-source design system built for Angular.

Clarity Angular

Getting Started

Clarity Angular is published as two npm packages:

• Contains the static styles for building HTML components.
• Contains the Angular components. This package depends on @clr/ui for styles.

Installing Clarity

• Install CSS Only
• Install Angular Components

Documentation

For documentation on the Clarity Angular, 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 CONTRIBUTING.md.

Licenses

• The Clarity Design System is licensed under the MIT license.
• The font is licensed under the Open Font License (OFL).
• This project is tested with: Browserstack, Assistiv Labs.

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.

ng-clarity's Issues

Combobox selection list losing focus when typing in the filter input

This is a bug report for the @clr Angular or UI versions of the design system.
For the web-component implementation of Clarity (@cds), visit vmware-clarity/core.

Describe the bug

When typing in the filter box the actively focused element from the list may be filtered out and focus is getting lost

How to reproduce

Please provide a link to a reproduction scenario using one of the Clarity Stackblitz templates. Reports without a clear reproduction may not be prioritized until one is provided.

Steps to reproduce the behavior:

Expected behavior

Move the focus on the 1st matching item when filtering

Versions

Clarity version:

• v12.x
• v13.x
• Other:

Framework:

• Angular
• React
• Vue
• Other:

Framework version:
ie: Angular 11

Device:

• Type: [e.g. MacBook]
• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional notes

Add any other notes about the problem here.

clr-icon attribute update results in NPE in some scenarios

Describe the bug

Dynamically updating an attribute of an icon while shape attribute is empty or missing can result in NPE:

TypeError: Cannot read properties of null (reading 'split')
  at I._normalizeShape(/csp/gateway/portal/vendor.7fd679d72d21509b94c1.js:1:985089)
  at I.attributeChangedCallback(/csp/gateway/portal/vendor.7fd679d72d21509b94c1.js:1:986159)
  at G.value(/csp/gateway/portal/polyfills.25a724193ef080312c3d.js:1:29707)
  at G.value(/csp/gateway/portal/polyfills.25a724193ef080312c3d.js:1:24043)
  at I.attributeChangedCallback(/csp/gateway/portal/polyfills.25a724193ef080312c3d.js:1:23631)
  at jn.value(/csp/gateway/portal/vendor.7fd679d72d21509b94c1.js:1:455503)
  at It.value(/csp/gateway/portal/vendor.7fd679d72d21509b94c1.js:1:443435)

How to reproduce

1. Open this stack blitz: https://stackblitz.com/edit/clarity-light-theme-clr12-cds5-1uka2y?file=src/app/app.component.html
2. Open browser console / clear console from messages
3. Click 'Change Shape'
4. See browser error

Expected behavior

No error to be seen.

Versions

Clarity version:

• [ x ] v12.x

Framework:

• [ x ] Angular

Framework version:
ie: Angular 12

Device:

• Type: MacBook
• Browser: Chrome
• Version: 102

Additional notes

We discovered this bug during testing as we tried to dynamically set the 'shape' attribute based on a property coming from our backend. In some scenarios this property was undefined and we hit this error when we clicked on the icon. Please consider the stack-blitz as one of many potential ways to provoke the error.

Internal point of contact: stoimenovg

Cannot find module 'lit-html'

This is a bug report for the @clr Angular or UI versions of the design system.
For the web-component implementation of Clarity (@cds), visit vmware-clarity/core.

Describe the bug

Error: node_modules/@cds/core/button-action/button-action.element.d.ts:43:22 - error TS2307: Cannot find module 'lit-html' or its corresponding type declarations.

43 render(): import("lit-html").TemplateResult<1>;
~~~~~~~~~~

Error: node_modules/@cds/core/icon/icon.element.d.ts:94:32 - error TS2307: Cannot find module 'lit-html' or its corresponding type declarations.

94 protected render(): import("lit-html").TemplateResult<1> | import("lit-html").TemplateResult<2>;
~~~~~~~~~~

Error: node_modules/@cds/core/icon/icon.element.d.ts:94:71 - error TS2307: Cannot find module 'lit-html' or its corresponding type declarations.

94 protected render(): import("lit-html").TemplateResult<1> | import("lit-html").TemplateResult<2>;
~~~~~~~~~~

Error: node_modules/@cds/core/internal/base/focus-trap.base.d.ts:12:32 - error TS2307: Cannot find module 'lit-html' or its corresponding type declarations.

12 protected render(): import("lit-html").TemplateResult<1>;
~~~~~~~~~~

A clear and concise description of what the bug is, and the conditions when it occurs.

How to reproduce

Please provide a link to a reproduction scenario using one of the Clarity Stackblitz templates. Reports without a clear reproduction may not be prioritized until one is provided.

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Angular: 14.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1400.0
@angular-devkit/build-angular 14.0.0
@angular-devkit/core 14.0.0
@angular-devkit/schematics 14.0.0
@schematics/angular 14.0.0
rxjs 7.5.5
typescript 4.7.3

Clarity version:
"@cds/core": "^6.0.1",
"@clr/angular": "^13.3.2",
"@clr/icons": "^13.0.2",
"@clr/ui": "^13.3.2",

• v12.x
• v13.x
• Other:

Framework:

• Angular
• React
• Vue
• Other:

Framework version:
ie: Angular 11

Device:

• Type: [e.g. MacBook]
• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional notes

Add any other notes about the problem here.

TypeError initializing ClrAlert

This is a bug report for the @clr Angular or UI versions of the design system.
For the web-component implementation of Clarity (@cds), visit vmware-clarity/core.

Describe the bug

A TypeError is generated on initialization of each clr-alert components with a clrAlertClosed binding to an initially true value that are nested within clr-alerts.

How to reproduce

Stackblitz reproduction: https://stackblitz.com/edit/clarity-light-theme-clr13-cds6-fdb27g?file=src%2Fapp%2Fapp.module.ts

Steps to reproduce the behavior:

1. Load the stackblitz example page
2. Inspect the console
3. Notice the error:

vendor.js:31364 ERROR TypeError: Cannot read properties of undefined (reading 'length')
    at MultiAlertService.close (vendor.js:111464:27)
    at ClrAlert.close (vendor.js:111578:30)
    at ClrAlert.set closed [as closed] (vendor.js:111534:12)
    at setInputsForProperty (vendor.js:35878:35)
    at elementPropertyInternal (vendor.js:34902:9)
    at ɵɵproperty (vendor.js:39345:9)
    at AppComponent_Template (main.js:93:118)
    at executeTemplate (vendor.js:34497:9)
    at refreshView (vendor.js:34363:13)
    at refreshComponent (vendor.js:35554:13)

Expected behavior

The TypeError should not be generated on initialization of a clr-alert component with the clrAlertClosed binding to an initially true value.

Versions

Clarity version:

• v12.x
• v13.x
• Other:

Framework:

• Angular
• React
• Vue
• Other:

Framework version:
Angular 13

Device:

• Type: Laptop
• OS: Windows 10
• Browser chrome, firefox
• Version 100.0.4896.127, 99.0.1

Additional notes

Validation of the array is likely the quick fix, but not triggering the close on initialization seems like the more appropriate fix.

Header styling for dropdown caret is broken in multiple places

This is a bug report for the @clr Angular or UI versions of the design system.
For the web-component implementation of Clarity (@cds), visit vmware-clarity/core.

Describe the bug

Visit https://angular.clarity.design/documentation/header, and observe the following headers:

1. Caret for settings icon overlap on top of the icon
2. Dropdown in header area has two much padding between nav-text and caret icon. Underlying class is header .header-actions > .dropdown .dropdown-toggle.nav-text

Versions

Clarity version:

• [x ] v12.x
• [ x] v13.x
• Other:

Framework:

• [x ] Angular
• React
• Vue
• Other:

Framework version:
Angular 12/13 (Same behavior on both, problem is with CSS)

Device:

• Type: Laptop
• OS: Windos 10
• Browser: Edge Chromium
• Version: 101.0.1210.39 (Official build) (64-bit)

Problems with DatePicker when used in a datagrid filter

This is a bug report for the @clr Angular or UI versions of the design system.
For the web-component implementation of Clarity (@cds), visit vmware-clarity/core.

Describe the bug

I want to implement a custom date filter for clarity datagrid. It should be a simplified version of this one: https://www.ag-grid.com/angular-data-grid/filter-date/ . There are two major problems:

1. The positioning of controls - the date-picker goes behind the filter.
2. When date-picker handles a date selection event, the filter is closed.

I am using clarity @clr/angular version 12.0.8

How to reproduce

https://stackblitz.com/edit/clarity-light-theme-clr12-cds5-q7hhkh?file=src/app/date-filter.ts

Expected behavior

The date picker works fine when embedded in a dialog. I expect a similar behavior.

Versions

Clarity version:

• v12.x

Framework:

• Angular

Framework version:
Angular 12.1.3

Device:

• Type: [e.g. MacBook]
• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional notes

Add any other notes about the problem here.

ClrNavLevel closes on .nav-link click even on large screens

This is a bug report for the @clr Angular or UI versions of the design system.
For the web-component implementation of Clarity (@cds), visit vmware-clarity/core.

Describe the bug

When using the sidenav component with the [clr-nav-level]="2" directive, the sidenav will close even when using a desktop browser on the larger breakpoint. This is a change that I think was introduced with this commit: af6c44c. Prior to this, the sidenav would remain open after clicking nav items, and would only close when on small screens with the fly-out version of the menu.

The only way to get the sidenav to return then is to resize the viewport or refresh the page.

How to reproduce

Stackblitz reproduction: https://stackblitz.com/edit/clarity-light-theme-clr12-cds5-y6zxq4?file=src%2Fapp%2Fapp.component.html

clr-issue.mp4

Steps to reproduce the behavior:

Set up sidenav as in the Stackblitz demo:

<div class="main-container">
  <header class="header-2">
    <div class="branding">
      <a class="nav-link">
        <span class="title">Clarity</span>
      </a>
    </div>
    <div class="header-nav">
      <a class="active nav-link nav-text">Home</a>
    </div>
  </header>
  <div class="content-container">
    <nav class="sidenav" [clr-nav-level]="2">
      <ul class="nav-list">
        <a class="nav-link">Link 1</a>
        <a class="nav-link">Link 2</a>
        <a class="nav-link active">Link 3</a>
        <a class="nav-link">Link 4</a>
        <a class="nav-link">Link 5</a>
        <a class="nav-link">Link 6</a>
        <a class="nav-link">Link 7</a>
        <a class="nav-link">Link 8</a>
        <a class="nav-link active">Link 9</a>
        <a class="nav-link">Link 10</a>
      </ul>
    </nav>
    <div class="content-area">
      <h3>Content</h3>
    </div>
  </div>
</div>

Click any of the sidenav links and see that the sidenav closes.

Expected behavior

It should stay open on large screens and only close for mobile breakpoints. This is how it worked up until (I think) v12.0.14

Versions

Clarity version:

• v12.x
• v13.x
• Other:

Framework:

• Angular
• React
• Vue
• Other:

Framework version:
Angular 12

Device:

• Type: [Laptop]
• OS: [Win 10]
• Browser [Brave (Chromium)]
• Version [100]

PageDown keyboard can't be used on modal anymore to move the scrollbar down

Describe the bug
PageDown keyboard can't be used on modal anymore to move the scrollbar down

On contentOverflows and Modals if they got too long it was possible to press key 'PageDown' and then the scrollbar moved down.

How to reproduce:
Go to a modal window. Press PageDown key

Versions
Core: 5.7.1'

Clarity version:

v12.x
-> v13.2.1
Other:
Framework:

-> Angular
React
Vue
Other:
Framework version:
ie: Angular 11

Device:

Type: [Windows]
OS: [11]
Browser [edge]
Version [101.0.1210.53]

clr-combobox doesn't support name property while showing examples in the doc with it

This is a bug report for the @clr Angular or UI versions of the design system.
For the web-component implementation of Clarity (@cds), visit vmware-clarity/core.

Describe the bug

now looking at the doc of checkbox it shows that you can add name property to it

while looking at the source code it doesn't seem there is any input for a name

I'm not sure if the example or the code is wrong
and if it should have a name property, what is it for?

Expected behavior

for the docs and the code to be consistent

Versions

Clarity version:

• v12.x
• v13.x
• Other:

Framework:

• Angular
• React
• Vue
• Other:

Framework version:
Angular 12

Observe inconsistency with the node's selection rectangle size in the tree view with ellipsis for nodes text

This is a bug report for the @clr Angular or UI versions of the design system.

Prerequisites:

• We have a clr tree inside a div container with max-width set.
• Each node is represented by a html button which uses ellipsis for its text just to decrease the total width of the tree when we have deeply nested configurations.

Stackblitz.

Steps to reproduce the behaviour:

1. Create the tree with the described requirements
2. When you click or hover on each tree node then the selection rectangle does not reach the tree's right border. Also some
   strange horizontal scroll bars appear for part of the nodes.

I expect no scroll bars to appear per node, just only one for the whole tree because it exceeds the max size of its div container and also the selection rectangle to reach the tree's right border.

Clarity version:

• v12.x
• v13.x
• Other: 5

Framework:

• Angular
• React
• Vue
• Other:

Framework version:
Angular 11

Device:

• Type: MacBook pro
• OS: macOS
• Browser chrome
• Version 96

cds-icon trigger on dropdown alignment in with the title of the trigger

Describe the bug

Stackblitz example

The first dropdown shows how the icon is not aligned correctly with the label

The second one shows the workaround to accomplish alignment

How to reproduce

Just create a simple clr-dropdown with an icon on the button that triggers the dropdown

Expected behavior

The icon and label are aligned

Versions

Clarity version:

• v12.x
• v13.x
• Other:

Framework:

• Angular
• React
• Vue
• Other:

datepicker selected day resets to current day of month if user changes month or year

When you change the month or year of the datepicker, the selected date resets to the 15 instead of preserving the previously selected date. Currently, there is no workaround for this.

We need to determine what the desired behavior is so we know if this is a bug or not.

https://vmware.slack.com/archives/C0JF8D2LB/p1655204484003639

Dropdown content does not stick to the element when enlarging/making screen smaller...

1: Open a dropdown with content.

2: make the browser window very small...
then enlarge it again...

3: the arrow from the dropdown is to the right,
whilst the actual content is somewhere else on the screen.

expected: they stick together always.

Clarity version:

[ X ] v12.x
v13.x
Other:
Framework:

[ X ] Angular
React
Vue
Other:
Framework version:
Angular 12

Device:

OS: Windows
Browser Edge

Clarity tab has focus on a random tab when clicking on the overflow menu while having multiple tabs.

Describe the bug

Clarity tabs will be focused on a random tab when clicked on the overflow menu.

Currently having more then 12 tabs and 4 hidden.

This will occur only when clicking on the overflow menu.

How to reproduce

Click on the overflow menu and see how a random tab will be highlighted.

Steps to reproduce the behavior:

1. Go to 'A page with multiple tabs'
2. Click on 'The tab overflow menu'
3. See how a random tab is focused.

Expected behavior

When clicking on the overflow menu while having multiple tabs, no tab should be focused.

Versions

Core: 5.7.1'

Clarity version:

• v12.x
• v13.2.1
• Other:

Framework:

• Angular
• React
• Vue
• Other:

Framework version:
ie: Angular 11

Device:

• Type: [Windows]
• OS: [11]
• Browser [edge]
• Version [101.0.1210.53]

Additional notes

On the clarity website.

On my side.

1. This is when the overflow menu has not been clicked and the active tab is the first one.
   

2. When the overflow menu is opened notice how the focus goes to in this case the tab called "Issues" while the active tab is another one.
   

3. When clicking on the overflow menu once more, in order to close it, the focus will go to another tab while the active tab still another one.
   

Remove role="group" from clr-recursive-children

This is a bug report for the @clr Angular or UI versions of the design system.
For the web-component implementation of Clarity (@cds), visit vmware-clarity/core.

Describe the bug

There is an issue with clr-recursive-children having role="group" resulting in NVDA reading out levels incorrectly.

As Santina recommends, removing role="group" should fix the issue.

Versions

Clarity version:

• v12.x
• v13.x
• Other:

Framework:

• Angular
• React
• Vue
• Other:

Framework version:
ie: Angular 11

Device:

• Type: [e.g. MacBook]
• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional notes

⚠️ If role="group" is removed, we should check whether it's working properly in Safari + VO as well.

clr-alert only works with core icon sets

Discussed in #193

^{Originally posted by Shakiem June 24, 2022}
I just upgraded clr/angular to 13.3.1 from 1.3.9 and I am noticing that the component can only load icons from the core icon set with the clrAlertIcon attribute.

Is there some other setup required for this to work with all icons? I had no issues in 1.3.9 using icons from the technology set.

Below shows a test setup where I am displaying two app level alerts, one with an icon from the technology shapes and another with an icon from the core shapes. Only the core shape displays correctly.

Datagrid inside modal has incorrect initial columns width

Describe the bug

Datagrid inside modal has incorrect initial width of columns equal to zero.

How to reproduce

https://stackblitz.com/edit/clarity-light-theme-clr12-cds5-fherup?file=src/app/app.component.ts

Open modal and check columns width using browser DevTools.

Expected behavior

Width of columns should be correct.

Versions

Clarity version:

• v12.x
• v13.x
• Other:

Framework:

• Angular
• React
• Vue
• Other:

Framework version:

• Angular 11
• Angular 12
• Angular 13

Device:

• MacBook Pro
• Mac OS
• Chrome
• Latest

Additional notes

Related Issue
vmware-archive/clarity#3273

Popover Issue with Webcomponents and ShadowRoot

Describe the bug

I'm want to create an Angular app, which is deployed as Webcomponent. The created component uses the encapsulation mode 'ShadowDom'. The idea is that the webcomponent can be embedded on external websites without affecting the "original" website.

The Popover service (used by the datepicker) injects the popover content into the body element see here This is causing problems, because all CSS resources are only available in the Shadow DOM.

Is there any chance to use the Shadow DOM root instead of the document body the solve the issue?

Expected behavior

The popover should use the Shadow DOM root instead of the document body.

Versions

Clarity version:

• v13.x

Framework:

• Angular

Framework version:
_ie: Angular 12.2.16

Device:

• Type: Windows
• Browser: Chrome

chore: angular 14

Angular is now cutting v14 releases. To prepare for the 14 release @clr/angular will need a beta branch to start cutting v14 versions.

• update @clr/angular to @cds/core and @cds/angular v6 latest
• enable the core shim by default in @clr/angular this will fix/enable high contrast and other a11y fixes in @clr/angular
  • https://beta--core-demo.netlify.app/?path=/story/themes-clarity-ui--page
• Adjust the focus trap on ClrNavLevel to use the newly provided focus trap from @cds/core v6

Tabs in overflow are not activated when clicked on mobile

This is a bug report for the @clr Angular or UI versions of the design system.
For the web-component implementation of Clarity (@cds), visit vmware-clarity/core.

Describe the bug

When on mobile I am unable to click/touch the items in the overflow list, no event occurs. The overflow is working as it should when in browser phone simulator and on regular browser. However, on the phone or in the iOS xcode simulator nothing happens when clicking the items. Items are just highlighted and then it disappears without selecting the tab

How to reproduce

[Please provide a link to a reproduction scenario using one of the Clarity Stackblitz templates. Reports without a clear reproduction may not be prioritized until one is provided.](https://clarity-overflow-problem.stackblitz.io

Steps to reproduce the behavior:

1. Open on mobile device or iOS simulator
2. Click on '...'
3. Select an item..
4. .. nothing happens, no event)

Expected behavior

Tab should be showing its content

Versions

Clarity version:

• v3
• v4
• v5
• v12
• v13

Framework:

• Angular
• React
• Vue
• Other:

Framework version:
Angular 10, 11, 12, 13

Device:

• Mobile
• IOS
• Safari
• 13

Additional notes

Closed Issues from old repo:

• (vmware-archive/clarity#6046)
• (vmware-archive/clarity#5684)

SVG Download of Icon 404

Describe the bug

When downloading the vector suite at https://core.clarity.design/foundation/icons/shapes/, the contents are not up to date with what is displayed. For instance technology/pdf-file is missing from the download.

Additionally, attempting to click on pdf-file or any of the newer 5.0 vectors, and downloading it singularly, it downloads a *.svg file with the contents: 404: Not Found.

Reproduction steps

1. Go to https://core.clarity.design/foundation/icons/shapes/
2. Click Download SVG Icons button
3. Icons are missing.

OR

1. Go to https://core.clarity.design/foundation/icons/shapes/
2. Click "Shapes" tab.
3. Search for any new file since 5.0.0 (i.e. pdf-file)
4. Click on the icon
5. Click on SVG Icon download button.
6. An empty vector is downloaded with the contents: 404 Not Found

Expected behavior

The assets should remain up to date with what is released on the website and when a vector file is downloaded, it should contain the actual data instead of text stating: 404: Not Found

Additional context

This is for use by our UI/UX team to utilize in Adobe XD/Figma.

Responsive nav animation broken and sidenav close button missing in 13.1.x+

Describe the bug

When the browser window is narrow and responsive menus are visible (e.g. hamburger icon,) opening the hamburger menu should open with an ease-in animation and close with ease-out; however, there are two problems in 13.1.x+:

• There is no animation
  • When the window is resized, "something" resets such that animation works on the initial open but stops working thereafter until the next resize
• The close button is not visible if the sidenav is set with ClrNavLevel 1
  • The element exists but is not visible

How to reproduce

https://stackblitz.com/edit/clarity-light-theme-clr13-cds6-3a2dsz?file=package.json

Steps to reproduce the behavior:

1. Go to the stackblitz link and, in the right pane, open and close the hamburger menu a few times
2. When opening and closing, there is no ease animation
3. When open, the "X" close button is missing (only affects class="sidenav" [clr-nav-level]="1")

~13.2.0 behaves the same as ~13.1.0. ~13.0.0 does not exhibit this behavior.

Expected behavior

Responsive nav menus should open and close with appropriate animations. Close button should be visible for sidenav + ClrNavLevel = 1.

Versions

Clarity version:

• v12.x
• v13.x
• Other: 13.1.x, 13.2.x

Framework:

• Angular
• React
• Vue
• Other:

Framework version:

Angular 13

Device:

• Type: Desktop computer
• OS: Fedora 35
• Browser: Chrome, Firefox
• Version: Chrome 100.0.4896.88, Firefox 99.0

Filters and sorting blink once/twice when opening a page with it.

or some other solution that shows... notice you have a sorting/filtering ON.

other solution idea 2:
https://dribbble.com/shots/3723001-29-Focus

Disabling datagrid row selection not working with `*ngFor`

Describe the bug

We (NSX-ALB team) are setting:[clrDgSelectable]="false" for <clr-dg-row> as the snippet shown:

    <clr-dg-row
        *ngFor="let row of rows; index as i; trackBy: trackByRowName"
        [clrDgItem]="row"
        [clrDgSelectable]="false"
    >

However, the leading checkbox of a row in the UI is not grayed out for selection.

I found a similar bug which was given a workaround: vmware-archive/clarity#4993.
We’ve tried the workaround but the bug is still present. Has there been a known solution for this issue?

How to reproduce

Please check: https://stackblitz.com/edit/clarity-light-theme-clr13-cds6-hmw4an?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

Steps to reproduce the behavior:

1. Click on the link to enter the project.
2. Check app.component.html line 30 to see [clrDgSelectable] is set to false, save and look at the layout on the right side for checkboxes.
3. Go to app.component.html, comment out line 22 through line 26 and comment line 27 through line 31. This will bind [clrDgSelectable] to a function call which always returns false. Save and look at the layout on the right side for checkboxes.

Expected behavior

Under either case from the reproduction part, checkboxes are not disabled.

Versions

Clarity project:

ng-clarity

Clarity version:

• v5.x
• v6.x

Framework:

Angular

Framework version:
Angular 12

Device:

• Type: MacBook
• OS: MacOS
• Browser: Chrome

Datagrid select all and filter icons are misaligned with the header text when a header cell wraps on multiple lines

Describe the bug

Have a datagrid with multiple selection, a column with sort and filter and another column with a long header text (to span multiple lines). Then the select all checkbox and the filter icon remain to the top of the cells but the text and the sort icon are centered vertically.

How to reproduce

See the description. Can also be reproduced by editing the examples in the documentation to have more header text through the dev tools.

Expected behavior

I would expect they are either all centered or all aligned top.

Versions

Clarity version:

• v12.x
• v13.x
• Other:

Framework:

• Angular
• React
• Vue
• Other:

Framework version:
Angular 12, 13

Device:

Any

Additional notes

Improve Clarity Column Selector

Summary

Column customization in datagrids is a desired functionality by many customers. Currently Clarity provides such functionality through Column Selector, positioned in bottom left corner, yet many users don't recognize it as an actionable icon - some say it looks disabled, others don't even notice it.

Visually, Clarity Column Selector needs to be improved so that it looks like an action and gets noticed by users.

Use case

For large datagrids with many columns, customers need a way to manage the datagrid information that they're seeing. Many customers are unaware that such functionality exists and are frustrated that they cannot reduce the number of columns they're seeing.

User quotes:
"the column selector is less obvious, you know, it took me a while to notice it and start use it.."

"So the different columns that are available, it would be nice to be able to customize the view, have potentially more items or be able to reduce the number of columns."

"but as we add more information, that's available, the ability to show and hide columns could be useful."

"It's just, as you say, you've got different, different columns there. One thing is it, would it be possible at all to choose which columns are displayed"

"So again, I would like to be able to choose it as a field, to be obviously hidden or displayed. "

"So I think it would be nice to have, and then obviously give us the option of being able to select that as being viewable or not a column to appear or be hidden"

Stack-view focus outline not visible in Safari

This is a bug report for the @clr Angular or UI versions of the design system.
For the web-component implementation of Clarity (@cds), visit vmware-clarity/core.

Describe the bug

The focus outline, which can be observed on Chrome is not visible in Safari

How to reproduce

Steps to reproduce the behavior:

1. Go to https://angular.clarity.design/documentation/stack-view using Safari browser
2. Tab until you have to land on an expandable node
3. No focus outline can be seen. You can still hit enter to expand/collapse, to verify the focus is actually there.

Stepper: clarity errors aren't triggered in nested forms on continue

This is a bug report for the @clr Angular or UI versions of the design system.
For the web-component implementation of Clarity (@cds), visit vmware-clarity/core.

Describe the bug

• When using the angular stepper component
• and the current step has errors
• and the form has a child form
  If the user presses continue the clarity error messages will not be triggered for the child form

How to reproduce

https://stackblitz.com/edit/clarity-dark-theme-clr13-cds6-nhr9ph

Steps to reproduce the behavior:

1. create a component using the stepper connected to a form
2. create a control value accessor component with a form including clr-error messages for required inputs (which default to null)
3. connect the CVA component to the stepper form
4. press continue

Expected behavior

The errors should display for the inputs in the nested form

Versions

Clarity version:

• v12.x
• v13.x
• Other:

Framework:

• Angular
• React
• Vue
• Other:

Framework version:
Angular 12/13

Device:

• Type: Mac mini / macbook pro
• OS: Mac OS Monterey
• Browser: chrome
• Version: 100.0.4896.75

Patching a stepper's form control, makes the stepper to go to the first stepper panel

Describe the bug

When a form control of a stepper is patched, the stepper goes back to the first stepper panel

How to reproduce

->General steps

1. Create a stepper with at least two panels
2. Create a button in the second panel, which patches a stepper form control value
3. Now if the first stepper panel has any input, do not make any input, just click next
4. Click on the button created on step 2
5. The stepper goes back to the first step

->Stackblitz steps

1. Click next on first step, do not make any input
2. Click any patch button

https://stackblitz.com/edit/clarity-dark-theme-clr13-cds6-r4ca9a?file=src/app/app.component.ts

Expected behavior

The stepper should not go to the first step

Versions

Clarity version:

• v12.x
• [X ] v13.x
• Other:

Framework:

• [ X] Angular
• React
• Vue
• Other:

Framework version:
Angular 13

Device:
-Brave
-Chrome

Additional notes

I found a workarround for the issue, call this.yourRootForm.markAsDirty(); after form build. It's included on stackblitz example, uncomment on app.component.ts
I guess the solution is somehow related to dirtiness.
Also, this affects ngx-mask and other input mask libs under the same circunsamces

Missing Angular Theming in current docs

Describe the bug

A part of the documentation is missing.

How to reproduce

In previous documentation, it was possible to see how to use dark theme using Angular but this section is not in the current docs!

Previous docs
Current docs

Versions

Clarity version:

• v12.x
• v13.x
• Other:

Framework:

• Angular
• React
• Vue
• Other:

Multiselection combobox not showing properly on small devices

Describe the bug

Multiselection combobox overflow on small screen, making it difficult to use since arrow is not shown.
This is because clr-combobox-wrapper.multi min-width is set to 18rem

How to reproduce

https://stackblitz.com/edit/clarity-dark-theme-clr12-cds5-vltppw?file=src%2Fapp%2Fapp.component.html
There's a fix on app.component.css

Steps to reproduce the behavior:

1. Create a stepper
2. Create a multiselection combo box
3. Set a small viewport (example iPhoneSE 475x667)

Expected behavior

Multiselection combobox should not overflow

Versions

Clarity version:

• v12.x
• [ X] v13.x
• Other:

Framework:

• [ X] Angular
• React
• Vue
• Other:

Framework version:
Angular 13

Device:

• Browser [Brave/Chrome]

Additional notes

I write here the fix again
::ng-deep clr-combobox div.clr-combobox-wrapper.multi.clr-anchor {
min-width: unset !important;
}

By default

Where the problem lies

My solution, not sure if it is the best one i'm not used to css neither ui design

Hope this is usefull, it's my first bug report.

Core 6.0 causes big icons

Describe the bug

Using Clarity Core 6.0 causes icons in menus, buttons etc to be 20px instead of 16px

How to reproduce

Use Core 6.0 (instead of 5.x) and not using Core style sheets.

1. View min-height of icons in collapsed navigation

(v5) https://stackblitz.com/edit/clarity-v13-core-v5-icons
(v6) https://stackblitz.com/edit/clarity-v13-core-v6-icon

Expected behavior

Icons remain 16px with Core 6.0

Versions

Clarity version:

• v12.x
• v13.x
• Other:

Framework:

• Angular
• React
• Vue
• Other:

Framework version:
Angular 13

Additional notes

Including Core styles fixes the issue, but Angular apps should not need to include them. In the mean time we have downgraded to Core 5.7.2 in all our apps.

clr v12 text style on the clr-alert-warning alerts is different from all other alert styles

Describe the bug

As could also be seen on clarity official docs, v12 https://v12.clarity.design/documentation/alerts#examples
the text color on the clr-alert-warning alerts is different from all other alert styles

How to reproduce

Add an alert with warning and any other alert to see the difference - do nothing custom. Issue is also visible in docs examples _
https://v12.clarity.design/documentation/alerts#examples

Steps to reproduce the behavior:

1. Just add an alert with warning and observe text style

Expected behavior

The text style should match all other clr alerts'

Versions

Clarity version:

• [ X ] v12.x
• v13.x
• Other:

Framework:

• [ X ] Angular
• React
• Vue
• Other:

Framework version:
Angular 12

Device:

• Type: MacBook
• OS: iOS
• Browser chrome
• Version 102.0.5005.61

Additional notes

as suggested in slack channel, filing this bug

cds-icon documentation issue

This is a bug report for the @clr Angular or UI versions of the design system.
For the web-component implementation of Clarity (@cds), visit vmware-clarity/core.

Describe the bug

It seems the documentation for Icons on the clarity.design site is taking you to the older clr-icons rather than cds-icons.

How to reproduce

Steps to reproduce the behavior:

1. Go to https://clarity.design
2. Click on Icons
3. See the old clr-icons documentation

Expected behavior

I should be able to see the cds-icon documentation instead of the clr-icon documentation.

NPM: run start - can't find the project

The wrong project name is used inside angular.json file.

The repository is still private so can't push without requesting access, can't fork for the same reason. Here is a patch for my feature self so I could close this issue.

--- a/angular.json
+++ b/angular.json
@@ -72,21 +72,21 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "demo:build"
+            "browserTarget": "clr-demo:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "demo:build:production"
+              "browserTarget": "clr-demo:build:production"
             },
             "dark": {
-              "browserTarget": "demo:build:dark"
+              "browserTarget": "clr-demo:build:dark"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "demo:build"
+            "browserTarget": "clr-demo:build"
           }
         },
         "test": {

Particular Content Security Policy rules block some elements from appearing

Describe the bug

In corporate environments, it is common to have a strict Content Security Policy, such that base64 data: images will not load. This affects the Clarity spinner and caret. It also affects all elements depending on base64 as the image source.

How to reproduce

Steps to reproduce the behavior:

1. Go to https://stackblitz.com/edit/clarity-dark-theme-clr13-cds6-1dbscx?file=src/app/app.component.html
2. Check the code and preview, the spinner is not appearing, nor is caret on the select element since images are blocked.
3. Open the devtools > console, look for the error `Refused to load the image 'data:image... clarity-dark-theme...(file))

The console will have a lot of stuff because of Stackblitz but I will attach the screenshot of the error, so it's easier to find.

Expected behavior

The spinner should be visible.
The caret on the select element should be visible.

Versions

Clarity version:

• v12.x
• v13.x
• Other:

Framework:

• Angular
• React
• Vue
• Other:

Framework version:
Angular 13

Device:

• Type: Lenovo ThinkPad
• OS: Ubuntu
• Browser Chrome
• Version 102.0.5005.61 (Official Build) (64-bit)

Stepper rendering problems on Safari

Describe the bug

Changing stepper steps in Safari leads to severe rendering issues.

How to reproduce

Steps to reproduce the behavior:

1. Go to https://angular.clarity.design/documentation/stepper in Safari
2. Fill in fields
3. Click "Next" button
4. See error

Expected behavior

Versions

Clarity version:

• v12.x
• v13.x
• Other:

Framework:

• Angular
• React
• Vue
• Other:

Framework version:
ie: Angular 11

Device:

• Type: [e.g. MacBook]
• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional notes

The error only occurs in Safari on Mac. In Chrome all is okay. Zooming in/out on the screen also fixes the layout.

Checkbox Group Validation

Describe the bug

When validating the clarity angular checkbox group,
clarity error message visibility doesn't reflect the validation state

How to reproduce

https://stackblitz.com/edit/clarity-light-theme-clr13-cds6-ow8gvl?file=src/app/app.component.html|

Steps to reproduce the behavior:

1. create a clarity form with a checkbox group
2. add errors
3. add a validator for the group
4. check all boxes
5. uncheck any box but the last one
6. observe the error messages do not appear
7. uncheck the last one
8. see that error messages appear

Expected behavior

Error messages will appear when any one of the checkboxes are unchecked (for this validator)

Versions

Clarity version:

• v12.x
• v13.x
• Other:

Framework:

• Angular
• React
• Vue
• Other:

Framework version:
Angular 12 / 13

Device:

• Type: Macbook Pro
• OS: Monterey 12.3.1
• Browser Chrome
• Version 100.0.4896.75

Datagrid: Close icon in Datagrid pane should be grey, not blue

Describe the bug

The close button in the detail pain of a datagrid should be the same grey color as other interactions (like modal), not blue.

How to reproduce

https://angular.clarity.design/documentation/datagrid/detail-pane

1. Open a detail pane by clicking on one of the >> icons in the grid
2. Notice that the close icon is blue

Expected behavior

The icon should be grey

Versions

Clarity version:

• v12.x
• v13.x
• Other:

Separator Alignment off in DataGrid

Describe the bug

The vertical alignment of separators for header row and data rows differs by one pixel. Have a look at the attached screenshot.

How to reproduce

Steps to reproduce the behavior:

1. Go to Datagrid
2. Scroll down to grid and See error.

Expected behavior

Versions

Clarity version:

• v12.x
• v13.x
• Other:

Framework:

• Angular
• React
• Vue
• Other:

Framework version: Angular 12

Device:

• Type: MacBook
• OS: iOS
• Browser: chrome, safari

unit tests fail on Windows

29 unit tests fail on Windows, but work on Mac/Unix. This causes a full build to fail on Windows.

These are the tests that fail:

Form Layouts > Horizontal with Grid
Form Layouts > Compact with Grid
Form Layouts > Virtual Scroll

Datagrid: support re-arranging of columns in datagrid

Feature request to support re-arrangement of columns in datagrid.

ng add schematics not working

This is a bug report for the @clr Angular or UI versions of the design system.
For the web-component implementation of Clarity (@cds), visit vmware-clarity/core.

Describe the bug

schematics not working

How to reproduce

run ng add @clr/angular

Expected behavior

the command to work

Versions

Clarity version:

• v12.x
• v13.x
• Other:

Framework:

• Angular
• React
• Vue
• Other:

Framework version:
Angular 13

Device:

• Type: MacBook Pro
• OS: MacOS
• Version: 12.4

Additional notes

error logs

ℹ Using package manager: npm
✔ Found compatible package version: @clr/[email protected].
✔ Package information loaded.

The package @clr/[email protected] will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.
The package that you are trying to add does not support schematics. You can try using a different version of the package or contact the package author to add ng-add support.

Allow @clr/ui@12 to use @cds/core@6

Describe the bug

Currently in our project we use Clarity UI 12 with CDS Core 6 as we want to utilise the theming capabilities of Core 6 with the variables shim without upgrading Angular and the Clarity components. The issue is that we need to have two dependencies - @cds/core 5 and 6 because @clr/ui 12 has a peer dependency @cds/core 5 which we don't use.

Expected behavior

@clr/ui@12 should have a peer dependency @cds/core@>=5 since CDS Core is aiming to have backwards compatibility with older versions of @clr/ui.

Versions

Clarity version:

• v12.x
• v13.x
• Other:

Framework:

• Angular
• React
• Vue
• Other:

Framework version:
Angular 12

Device:
Any

The date range modal and the input of 'date' are not in line...

As one navigates to the modal the put in the FROM date...
after filling the from date the TO date can't be sooner then that from Date.
okay no problem, can be arranged and set with the modal click.

however... at that point I can paste in any text (date) and it can differ from the restrictions that are set in the modal section.

expected: they should be in line.

at entering the text date: "pasting a date should be checked against the settings set at the modal" so to speak.

Clarity version:

[ X ] v12.x
v13.x
Other:
Framework:

[ X ] Angular
React
Vue
Other:
Framework version:
Angular 12

Device:

OS: Windows
Browser Edge

Angular Wizard component shows vertical scroll bars

Angular Wizard component shows vertical scroll bars. The issue is reproducible by using link from the documentation: https://angular.clarity.design/documentation/wizards#examples. Seems to be reproducible in Windows environment only. Mac OSX works fine.

Windows (Chrome):

MacOSX (Chrome):

https://angular.clarity.design/documentation for v13 not working

This bug if for the website ONLY not the framework.

Describe the bug

When ever you go to https://angular.clarity.design/documentation and select the documentation for v13 you get 404.
I am assuming that clarity supports angular 13 and the 13 refers to angular 13

How to reproduce

Got to https://angular.clarity.design/documentation and click
Example

You should get 404
Result

disabled input text invisible on safari

Describe the bug

When an input box is disabled with in clrForm > clr-input-container , text in the input box is not shown in Safari browser.
Text is present but not visible.
Find the attached image for issue presentation. Please let me know if there is a workaround for the same or its fixed any update.

How to reproduce

https://stackblitz.com/edit/clarity-reactive-form-example-kss7i4?file=src%2Fapp%2Fapp.component.html

Expected behavior

input text should still be visible

Versions

Clarity version:

• v13.x

Framework:

• Angular

Framework version:
Angular 13

Datagrid Column Filter Positioning

This is a bug report for the @clr Angular or UI versions of the design system.
For the web-component implementation of Clarity (@cds), visit vmware-clarity/core.

Describe the bug

The primary issue is when the user opens a filter on the datagrid component, and then scrolls the page, or filters data and reverts to all, the filter box doesn't stay aligned to the top of the grid's column headers. The filter should stay static on the header, rather than scroll like a body-level modal.

How to reproduce

Link to Stackblitz: https://stackblitz.com/edit/node-hglxmm?file=README.md

Steps to reproduce the behavior:

1. Visit the above Stackblitz
2. Run the app
3. Scroll down the viewport until the datagrid header remains at the top of the viewport.
4. Filter the name column until only a couple of records are there.

This will cause the filter box to be detached and inside of the paragraph/list of steps instead of fixed on the datagrid as the content is filtered.

Additionally, you can also simply open the filter box and use your mouse wheel to scroll up and down the page and see the same behavior.

Expected behavior

It would be expected that the filter box stays statically fixed to the column header as content is filtered as well as when the page is scrolled. The filter box should not remain in a fixed position as the user scrolls causing it to detach from the grid.

Versions

Clarity version:

• v12.x
• v13.x
• Other:

Framework:

• Angular
• React
• Vue
• Other:

Framework version:
Angular 13.3.0

Device:

• Type: Dell Precision Laptop
• OS: Windows 10 Enterprise
• Browser: Chrome
• Version: 103.0.5060.53

css properties are getting overwritten when we use avi-data-grid inside avi-collection-data-grid.

All the below issues are related to this scenario

Issue-1:

Describe the bug:

There is no separator between Name and Checkbox in Header section of avi-data-grid

How to reproduce:

Steps to reproduce the behaviour:

1. Implement avi-data-grid inside each row of avi-collection-data-grid
2. Inside avi-data-grid you can observe there is no separator between checkbox and name

Expected behaviour:

Issue-2:

Describe the bug:

The vertical alignment of seperator in header section is changed.

How to reproduce:

Steps to reproduce the behaviour:

1. Implement avi-data-grid inside each row of avi-collection-data-grid
2. Inside avi-data-grid you can observe the alignment

Expected behaviour:

Issue-3:

Describe the bug:

The data inside avi-data-grid are not aligned at centre vertically.

How to reproduce:

Steps to reproduce the behaviour:

1. Implement avi-data-grid inside each row of avi-collection-data-grid
2. Inside avi-data-grid you can observe the data

Expected behaviour:

Issue-4:

Describe the bug:

Checkbox of rows of avi-data-grid are getting highlighted when we are just hovering over the rows of avi-collection-grid.

Screen.Recording.2022-05-11.at.4.32.15.PM.mov

How to reproduce:

Steps to reproduce the behaviour:

1. Implement the avi-collection-data-grid
2. Hover over the row of avi-collection-data-grid and you can observe that checkbox of rows of avi-data-grid are highlighted.

Expected behaviour:

1. When we hover over the row of avi-collection-data-grid checkbox of rows of avi-data-grid should not be highlighted.
2. They should get highlighted only when rows of avi-data-grid are hovered.