vmware-clarity / ng-clarity Goto Github PK
View Code? Open in Web Editor NEWClarity Angular is a scalable, accessible, customizable, open-source design system built for Angular.
Home Page: https://clarity.design
License: Other
Clarity Angular is a scalable, accessible, customizable, open-source design system built for Angular.
Home Page: https://clarity.design
License: Other
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
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.
Steps to reproduce the behavior:
select
element since images are blocked.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.
The spinner should be visible.
The caret on the select
element should be visible.
Clarity version:
Framework:
Framework version:
Angular 13
Device:
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.
schematics not working
run ng add @clr/angular
the command to work
Clarity version:
Framework:
Framework version:
Angular 13
Device:
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.
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+:
https://stackblitz.com/edit/clarity-light-theme-clr13-cds6-3a2dsz?file=package.json
Steps to reproduce the behavior:
class="sidenav" [clr-nav-level]="1"
)~13.2.0
behaves the same as ~13.1.0
. ~13.0.0
does not exhibit this behavior.
Responsive nav menus should open and close with appropriate animations. Close button should be visible for sidenav + ClrNavLevel = 1.
Clarity version:
Framework:
Framework version:
Angular 13
Device:
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": {
Changing stepper steps in Safari leads to severe rendering issues.
Steps to reproduce the behavior:
Clarity version:
Framework:
Framework version:
ie: Angular 11
Device:
The error only occurs in Safari on Mac. In Chrome all is okay. Zooming in/out on the screen also fixes the layout.
Feature request to support re-arrangement of columns in datagrid.
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.
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?
for the docs and the code to be consistent
Clarity version:
Framework:
Framework version:
Angular 12
Datagrid inside modal has incorrect initial width of columns equal to zero.
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.
Width of columns should be correct.
Clarity version:
Framework:
Framework version:
Device:
Related Issue
vmware-archive/clarity#3273
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
When a form control of a stepper is patched, the stepper goes back to the first stepper panel
->General steps
->Stackblitz steps
https://stackblitz.com/edit/clarity-dark-theme-clr13-cds6-r4ca9a?file=src/app/app.component.ts
The stepper should not go to the first step
Clarity version:
Framework:
Framework version:
Angular 13
Device:
-Brave
-Chrome
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
This bug if for the website ONLY not the framework.
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
Got to https://angular.clarity.design/documentation and click
Example
You should get 404
Result
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.
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.
Link to Stackblitz: https://stackblitz.com/edit/node-hglxmm?file=README.md
Steps to reproduce the behavior:
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.
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.
Clarity version:
Framework:
Framework version:
Angular 13.3.0
Device:
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.
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.
Stackblitz reproduction: https://stackblitz.com/edit/clarity-light-theme-clr12-cds5-y6zxq4?file=src%2Fapp%2Fapp.component.html
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.
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
Clarity version:
Framework:
Framework version:
Angular 12
Device:
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.
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
.
Stackblitz reproduction: https://stackblitz.com/edit/clarity-light-theme-clr13-cds6-fdb27g?file=src%2Fapp%2Fapp.module.ts
Steps to reproduce the behavior:
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)
The TypeError should not be generated on initialization of a clr-alert
component with the clrAlertClosed
binding to an initially true
value.
Clarity version:
Framework:
Framework version:
Angular 13
Device:
Validation of the array is likely the quick fix, but not triggering the close on initialization seems like the more appropriate fix.
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.
The focus outline, which can be observed on Chrome is not visible in Safari
Steps to reproduce the behavior:
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.
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.
Clarity version:
Framework:
Framework version:
ie: Angular 11
Device:
There is no separator between Name and Checkbox in Header section of avi-data-grid
Steps to reproduce the behaviour:
The vertical alignment of seperator in header section is changed.
Steps to reproduce the behaviour:
The data inside avi-data-grid are not aligned at centre vertically.
Steps to reproduce the behaviour:
Checkbox of rows of avi-data-grid are getting highlighted when we are just hovering over the rows of avi-collection-grid.
Steps to reproduce the behaviour:
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.
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
[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:
Tab should be showing its content
Clarity version:
Framework:
Framework version:
Angular 10, 11, 12, 13
Device:
Closed Issues from old repo:
When validating the clarity angular checkbox group,
clarity error message visibility doesn't reflect the validation state
https://stackblitz.com/edit/clarity-light-theme-clr13-cds6-ow8gvl?file=src/app/app.component.html|
Steps to reproduce the behavior:
Error messages will appear when any one of the checkboxes are unchecked (for this validator)
Clarity version:
Framework:
Framework version:
Angular 12 / 13
Device:
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.
https://stackblitz.com/edit/clarity-dark-theme-clr13-cds6-nhr9ph
Steps to reproduce the behavior:
The errors should display for the inputs in the nested form
Clarity version:
Framework:
Framework version:
Angular 12/13
Device:
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?
Steps to reproduce the behavior:
app.component.html
line 30 to see [clrDgSelectable]
is set to false
, save and look at the layout on the right side for checkboxes.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.Under either case from the reproduction part, checkboxes are not disabled.
Clarity project:
ng-clarity
Clarity version:
Framework:
Angular
Framework version:
Angular 12
Device:
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.
@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.
Clarity version:
Framework:
Framework version:
Angular 12
Device:
Any
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]
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.
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"
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.
See the description. Can also be reproduced by editing the examples in the documentation to have more header text through the dev tools.
I would expect they are either all centered or all aligned top.
Clarity version:
Framework:
Framework version:
Angular 12, 13
Device:
Any
A part of the documentation is missing.
In previous documentation, it was possible to see how to use dark theme using Angular but this section is not in the current docs!
Clarity version:
Framework:
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.
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.
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:
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
@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",
Framework:
Framework version:
ie: Angular 11
Device:
Add any other notes about the problem here.
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
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:
Multiselection combobox should not overflow
Clarity version:
Framework:
Framework version:
Angular 13
Device:
I write here the fix again
::ng-deep clr-combobox div.clr-combobox-wrapper.multi.clr-anchor {
min-width: unset !important;
}
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.
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.
It seems the documentation for Icons on the clarity.design site is taking you to the older clr-icons rather than cds-icons.
Steps to reproduce the behavior:
I should be able to see the cds-icon documentation instead of the clr-icon documentation.
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)
No error to be seen.
Clarity version:
Framework:
Framework version:
ie: Angular 12
Device:
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
This is a bug report for the @clr
Angular or UI versions of the design system.
Prerequisites:
Steps to reproduce the behaviour:
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:
Framework:
Framework version:
Angular 11
Device:
or some other solution that shows... notice you have a sorting/filtering ON.
other solution idea 2:
https://dribbble.com/shots/3723001-29-Focus
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.
The close button in the detail pain of a datagrid should be the same grey color as other interactions (like modal), not blue.
https://angular.clarity.design/documentation/datagrid/detail-pane
The icon should be grey
Clarity version:
The vertical alignment of separators for header row and data rows differs by one pixel. Have a look at the attached screenshot.
Steps to reproduce the behavior:
Clarity version:
Framework:
Framework version: Angular 12
Device:
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.
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:
I am using clarity @clr/angular version 12.0.8
https://stackblitz.com/edit/clarity-light-theme-clr12-cds5-q7hhkh?file=src/app/date-filter.ts
The date picker works fine when embedded in a dialog. I expect a similar behavior.
Clarity version:
Framework:
Framework version:
Angular 12.1.3
Device:
Add any other notes about the problem here.
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?
The popover should use the Shadow DOM root instead of the document body.
Clarity version:
Framework:
Framework version:
_ie: Angular 12.2.16
Device:
Angular is now cutting v14 releases. To prepare for the 14 release @clr/angular
will need a beta
branch to start cutting v14 versions.
@clr/angular
to @cds/core
and @cds/angular
v6 latest@clr/angular
this will fix/enable high contrast and other a11y fixes in @clr/angular
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.
Click on the overflow menu and see how a random tab will be highlighted.
Steps to reproduce the behavior:
When clicking on the overflow menu while having multiple tabs, no tab should be focused.
Core: 5.7.1'
Clarity version:
Framework:
Framework version:
ie: Angular 11
Device:
On my side.
This is when the overflow menu has not been clicked and the active tab is the first one.
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.
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.
The first dropdown shows how the icon is not aligned correctly with the label
The second one shows the workaround to accomplish alignment
Just create a simple clr-dropdown
with an icon on the button that triggers the dropdown
The icon and label are aligned
Clarity version:
Framework:
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
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.
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
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:
The text style should match all other clr alerts'
Clarity version:
Framework:
Framework version:
Angular 12
Device:
as suggested in slack channel, filing this bug
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
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.
https://stackblitz.com/edit/clarity-reactive-form-example-kss7i4?file=src%2Fapp%2Fapp.component.html
input text should still be visible
Clarity version:
Framework:
Framework version:
Angular 13
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.
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
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
This is for use by our UI/UX team to utilize in Adobe XD/Figma.
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.
Visit https://angular.clarity.design/documentation/header, and observe the following headers:
header .header-actions > .dropdown .dropdown-toggle.nav-text
Clarity version:
Framework:
Framework version:
Angular 12/13 (Same behavior on both, problem is with CSS)
Device:
Using Clarity Core 6.0 causes icons in menus, buttons etc to be 20px instead of 16px
Use Core 6.0 (instead of 5.x) and not using Core style sheets.
(v5) https://stackblitz.com/edit/clarity-v13-core-v5-icons
(v6) https://stackblitz.com/edit/clarity-v13-core-v6-icon
Icons remain 16px with Core 6.0
Clarity version:
Framework:
Framework version:
Angular 13
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.
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.
When typing in the filter box the actively focused element from the list may be filtered out and focus is getting lost
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:
Move the focus on the 1st matching item when filtering
Clarity version:
Framework:
Framework version:
ie: Angular 11
Device:
Add any other notes about the problem here.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.