carbon-design-system / carbon-components-angular Goto Github PK
View Code? Open in Web Editor NEWAn Angular implementation of the Carbon Design System for IBM.
Home Page: https://angular.carbondesignsystem.com
License: Apache License 2.0
An Angular implementation of the Carbon Design System for IBM.
Home Page: https://angular.carbondesignsystem.com
License: Apache License 2.0
carbon-components-angular provides a pill component but there is no styling for it. It renders as below. We need to use this component in our product though so we need it to be styled properly.
Is this a feature request (new component, new icon), a bug, or a general issue? Feature request
Is this issue related to a specific component? Yes
What did you expect to happen? What happened instead? What would you like to see changed? New styling available for the Pill component
What browser are you working in? All supported browsers
What version of the Carbon Design System are you using? Latest
What offering/product do you work on? Any pressing ship or release dates we should be aware of? IBM Assess
table--lg
, I see it has been carbon styled since the v1.5.0 release by PR #24.A the table component to a page, when rendering it has no styling.
So currently we're using the ibm
prefix for our component & directive names.
I understand the reservations of using carbon
or cds
for now (internal discussion), but I think we should ideate more on this.
Feel free to present your ideas as well
Vanilla Carbon components highlight selected lines in the table.
Carbon Angular doesn't.
Is this a feature request (new component, new icon), a bug, or a general issue?
General issue
Is this issue related to a specific component?
Table/DataTable
Observable in storybooks and carbon vanilla site.
Hello,
Would it be possible to help giving a little guide on how I can use the ?
Are all icons listed at http://www.carbondesignsystem.com/style/iconography/library supported ?
I'm only able to successfully use <ibm-static-icon>
so far, but it seems the icons are limited ?
Thanks.
The selection column is too wide. The issue is readily reproducible in the Storybook.
Is this a feature request (new component, new icon), a bug, or a general issue? Bug
Is this issue related to a specific component? Table
What did you expect to happen? What happened instead? What would you like to see changed? Selection column is only wide enough to accommodate the checkbox
What browser are you working in? Chrome
What version of the Carbon Design System are you using? Reproducible in latest storybook
What offering/product do you work on? Any pressing ship or release dates we should be aware of? Assess
Navigate to Navigate to this sample: https://angular.carbondesignsystem.com/?knob-size=md&knob-showSelectionColumn=true&knob-striped=true&selectedKind=Table&selectedStory=default&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybooks%2Fstorybook-addon-knobs
We've discussed this before internally.
With carbon products though I think we're able to use Google Analytics in the demos?
I can setup the accounts...
Describe in detail the issue you're having.
Looking at the modal dialog to help with accessibility issues. Looks it help us with our tabbing order and focus. However I noticed that when I do the zoom 200% test the content of the dialog are not visible.
Is this a feature request (new component, new icon), a bug, or a general issue?
Zoom accessibility issues.
Is this issue related to a specific component?
modal
What offering/product do you work on? Any pressing ship or release dates we should be aware of?
IBM Watson Recruitment, Accessibility deadline of Dec 10, 2018.
HTML and styles: http://www.carbondesignsystem.com/components/form/code
Usage: http://www.carbondesignsystem.com/components/form/usage
It's not clear to me what advantages can be added with this, apart from making a shell and providing styling to items. Thoughts?
Building on #47, it may be useful to provide common layouts via components and/or directives.
For example, a form could look like
<ibm-form
(submit)="onSubmit($event)">
<ibm-text>label text</ibm-text>
<ibm-text>label text</ibm-text>
</ibm-form>
Where ibm-form
automatically wires up the validation reporting and provides submit buttons/etc
Other examples would be a grid layout manager, an optimized list view, a content pager, or even a full dashboard generator based on components following a few standard interfaces.
I propose layout.module
for this, we'll also need to find some samples of real world usage and pull out the common patterns and create some fairly well defined usage guidelines.
Is this a feature request (new component, new icon), a bug, or a general issue?
The Carbon Overflow menu is an integral part of my project. Would it be possible to implement it?
http://www.carbondesignsystem.com/components/overflow-menu/usage
Create and publish some initial release with the current Carbon (cloud style) look and feel.
TODO:
Calendar component exists already but needs to be updated to use Carbon styles and needs to be combined with a date picker (that doesn't exist yet).
Doing one without the other won't be very useful so we group them in one issue.
HTML and styles: http://www.carbondesignsystem.com/components/date-picker/code
Usage: http://www.carbondesignsystem.com/components/date-picker/usage
Add new breadcrumb module containing breadcrumb component and breadcrumb item directive
Detailed description
Enhancement request to add Angular component versions of the Carbon breadcrumb and breadcrumb item.
Is this a feature request (new component, new icon), a bug, or a general issue? Feature request
Is this issue related to a specific component? No
What did you expect to happen? What happened instead? What would you like to see changed? New components added
What browser are you working in? All supported browsers
What version of the Carbon Design System are you using? Latest
What offering/product do you work on? Any pressing ship or release dates we should be aware of? IBM Assess
Here's an og:image
I created that we can use:
<meta property="og:title" content="Carbon Components Angular">
<meta property="og:description" content="An Angular implementation of the Carbon Design System for IBM.">
<meta property="og:image" content="https://angular.carbondesignsystem.com/thumbnail.jpg">
<meta property="og:url" content="https://angular.carbondesignsystem.com">
<meta name="twitter:title" content="Carbon Components Angular">
<meta name="twitter:description" content="An Angular implementation of the Carbon Design System for IBM.">
<meta name="twitter:image" content="https://angular.carbondesignsystem.com/thumbnail.jpg">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="shortcut icon" href="favicon.ico" />
master
branch failed. π¨I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.
You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. Iβm sure you can resolve this πͺ.
Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.
Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master
branch. You can also manually restart the failed CI job that runs semantic-release.
If you are not sure how to resolve this, here is some links that can help you:
If those donβt help, or if this issue is reporting something you think isnβt right, you can always ask the humans behind semantic-release.
The npm token configured in the NPM_TOKEN
environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/
.
If you are using Two-Factor Authentication, make configure the auth-only
level is supported. semantic-release cannot publish with the default auth-and-writes
level.
Please make sure to set the NPM_TOKEN
environment variable in your CI with the exact value of the npm token.
Good luck with your project β¨
Your semantic-release bot π¦π
Describe in detail the issue you're having.
I have a Table component that may happen to have no data to show and I handle that no data case with the following code:
<ibm-table [model]="myModel"></ibm-table>
<div *ngIf="myData.length === 0" class="bx--tile">No data.</div>
As you can see there's a gap between the table headers and the no data block because the table still creates an empty row with no cells which pushes the no data block lower. It would be nice to have an embedded mechanism to the no data situation, for example an input field noDataMessage="No data"
(or noDataTemplate
) which will be showed automatically when the model contains no data. It should look like a complete component and not cut at the header bottom like it is right now.
Is this a feature request (new component, new icon), a bug, or a general issue?
Feature request
Is this issue related to a specific component?
Table
This behavior can been seen in both my project and the library storybook:
It is caused by having an additional column automatically added by the table component itself:
<th [ngStyle]="{'width': scrollbarWidth + 'px', 'padding': 0, 'border': 0}">
<!--
Scrollbar pushes body to the left so this header column is added to push
the title bar the same amount and keep the header and body columns aligned.
-->
</th>
Tab Accessibility Support
Describe in detail the issue you're having.
Looking at the tab widget to help meet our accessibility requirement. I see the left/ right arrows partially work. Per the guideline (https://www.w3.org/TR/wai-aria-practices/#tabpanel):
Left Arrow: moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab. Optionally, activates the newly focused tab (See note below).
Right Arrow: Moves focus to the next tab. If focus is on the last tab element, moves focus to the first tab. Optionally, activates the newly focused tab (See note below).
I've played with the widget in the storybook, I'm not seeing the arrows do the additional navigation for going to the first or last tab (in bold above).
Also I noticed the space bar does not activate the tab either. Per guideline:
Space or Enter: Activates the tab if it was not activated automatically on focus.
Is this a feature request (new component, new icon), a bug, or a general issue?
accessibility enhancement
Is this issue related to a specific component?
Tabs
What offering/product do you work on? Any pressing ship or release dates we should be aware of?
IBM Watson Recruitment, Accessibility deadline of Dec 10, 2018.
Describe in detail the issue you're having.
Components should be sorted alphabetically after the first one "Welcome"
https://angular.carbondesignsystem.com/
We are starting to use the Carbon Grid layout in our code and have been experimenting with create Angular components to abstract away the details.
Currently you would add markup like this to your template:
<div class="bx--grid">
<div class="bx--row">
<div class="bx--offset-xs-2 bx--col-xs-10 bx--col-md-5">Some content here</div>
</div>
</div>
This is rather verbose and difficult to write so we have created some components that reduces this to the following:
<ibm-grid>
<ibm-row>
<ibm-column offset="{xs:2}" col="{xs:10, md:5}">Some content here</ibm-column>
</ibm-row>
</ibm-grid>
For the case where no breakpoint needs to be specified could look like this:
<ibm-grid>
<ibm-row>
<ibm-column offset="2" col="2">Some content here</ibm-column>
</ibm-row>
</ibm-grid>
This would only work if we don't need to support break points and no break points at the same time. Not sure if this will always be the case.
So we wanted to get your feedback on this approach and your guidance on the best way to proceed.
Enhancement request to add Angular component versions of the Carbon tile and clickable tile components. Clickable tiles should support being disabled.
Is this a feature request (new component, new icon), a bug, or a general issue? Feature request
Is this issue related to a specific component? No
What did you expect to happen? What happened instead? What would you like to see changed? New components added
What browser are you working in? All supported browsers
What version of the Carbon Design System are you using? Latest
What offering/product do you work on? Any pressing ship or release dates we should be aware of? IBM Assess
Describe in detail the issue you're having.
Looking at using the overflow menu as we are having accessibility issues. Are there plans to add the keyboard accessible function to the menu?
Per the guideline: (https://www.w3.org/TR/wai-aria-practices/#menubutton and https://www.w3.org/TR/wai-aria-practices/#menu)
We need support for the enter, space, arrows, end and home. The enter/space open the menu and then you follow the menubar guidelines for arrows.
Also I noticed while using the Storybook i cannot tab to get focus on the menu to able to use the menu with keyboard only.
Is this a feature request (new component, new icon), a bug, or a general issue?
General accessibility issue with overflow menus.
Is this issue related to a specific component?
Overflow menu
What offering/product do you work on? Any pressing ship or release dates we should be aware of?
IBM Watson Recruitment, Accessibility deadline of Dec 10, 2018.
dialog placeholder and modal placeholder do effectively the same thing ... they should be combined into a single service and component
Right now checkbox/toggle/etc are hidden in a forms module ... they should be lifted up into separate modules per component.
master
branch failed. π¨I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.
You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. Iβm sure you can resolve this πͺ.
Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.
Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master
branch. You can also manually restart the failed CI job that runs semantic-release.
If you are not sure how to resolve this, here is some links that can help you:
If those donβt help, or if this issue is reporting something you think isnβt right, you can always ask the humans behind semantic-release.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
Good luck with your project β¨
Your semantic-release bot π¦π
I'm wondering why UI component library at this level handling its own i18n texts and moreover dictating which i18n library to use ? Aren't i18n texts and which i18n library to use are completely for the top level application to provide and decide instead, and this library itself should stay agnostic ?
References and comparisons :
Thank You
Tables/Grid/DataTable Accessibility Support
Describe in detail the issue you're having.
We are trying to meet accessibility guidelines in regards to the keyboard navigation on data tables/grids.
Per the guidelines, https://www.w3.org/TR/wai-aria-practices/#grid, we should be able to focus on individual cells. We are hoping to use this widget library to help meet those requirements. What is outlook for getting keyboard support for the table or adding a grid widget ?
Is this a feature request (new component, new icon), a bug, or a general issue?
General accessibility issue with tables.
Is this issue related to a specific component?
Tables
What offering/product do you work on? Any pressing ship or release dates we should be aware of?
IBM Watson Recruitment, Accessibility deadline of Dec 10, 2018.
There are some violations in the components currently.
Keep in mind:
DAP throws many false violations in there, and some violations are caused by the storybook templates.
Describe in detail the issue you're having.
In https://github.com/IBM/carbon-components-angular/blob/master/src/banner/toast.component.ts
bx--toast-notification__close-button
doesn't have a click listener like https://github.com/IBM/carbon-components-angular/blob/master/src/banner/banner.component.ts does.
Is this a feature request (new component, new icon), a bug, or a general issue?
bug
Is this issue related to a specific component?
Toast notifications
Describe in detail the issue you're having.
Listed Output type of Combobox selected is ListItem
Actual Output type of Combobox selected is {item: ListItem}
Is this a feature request (new component, new icon), a bug, or a general issue?
Bug
Is this issue related to a specific component?
Combobox
What version of the Carbon Design System are you using?
Latest
Line 445 shows the DropdownList emitting an Object of type {item: ListBox}.
https://github.com/IBM/carbon-components-angular/blob/master/src/combobox/combobox.component.ts
Line 268 shows the ComboBox emitting this object as a ListBox.
Describe in detail the issue you're having.
I'm seeing ERROR TypeError: Cannot read property 'length' of undefined at TableModel.set [as data] (table-model.class.js:82)
in the console when I execute the following code:
ngOnInit() {
this.myModel = new TableModel();
this.myModel.data = [];
this.myModel.header = [
new TableHeaderItem({ data: 'My column name' }),
];
}
I traced down the problem and it looks like the data is not checked for null
, undefined
or []
values and it fails with an Exception.
What did you expect to happen? What happened instead? What would you like to see changed?
I think it should gracefully convert any falsy input as to no data is provided.
What browser are you working in?
Chrome
What version of the Carbon Design System are you using?
"carbon-components": "9.8.5",
"carbon-components-angular": "^1.6.0",
Based on some discussion.
selector: [ibmButton]
provides bx--btn
(maybe bx--btn--primary
too?) by default
Should have an @Input
to toggle between the different button types (@Input() type
)
Possibly also export as a component?
Describe in detail the issue you're having.
Is this a feature request (new component, new icon), a bug, or a general issue?
Is this issue related to a specific component?
What did you expect to happen? What happened instead? What would you like to see changed?
What browser are you working in?
What version of the Carbon Design System are you using?
What offering/product do you work on? Any pressing ship or release dates we should be aware of?
Table with overflow menu
storyDescribe in detail the issue you're having.
The overflow menu icon disappears in the Table storybook as soon as the mouse moves to select an option.
For comparison, (Carbon's Data Table)[http://www.carbondesignsystem.com/components/data-table/code] keeps the overflow icon visible while browsing the menu.
Is this a feature request (new component, new icon), a bug, or a general issue?
Bug
Is this issue related to a specific component?
Table
Can you deploy the project storybook somewhere after every build so we can see the latest version code running? One option is to use GutHub pages using this tool: https://github.com/storybooks/storybook-deployer
src/input/input.directive.ts
needs documentation
http://www.carbondesignsystem.com/components/toggle/code
Ideally, it would be created by changing the size input on the existing one.
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.