carbon-design-system / carbon-components-angular Goto Github PK

Currently we're using travis-ci.com (which is used for enterprise and paid solutions).

Open-source projects should be on travis-ci.org.

Steps:

1. Activate repo on travis-ci.org
2. Move env. vars. over
3. Update git branch settings

Be sure to also update this as well:

HTML and styles: http://www.carbondesignsystem.com/components/search/code
Usage: http://www.carbondesignsystem.com/components/search/usage

HTML and style: http://www.carbondesignsystem.com/components/loading/code
Usage: http://www.carbondesignsystem.com/components/loading/usage
Styling: http://www.carbondesignsystem.com/components/loading/style

The outlines show up for both tooltip examples. What is the reasoning there?

Detailed description

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.

Steps to reproduce the issue

1. Using the StoryBook, zoom out to 225% (use ctrl ++).

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?

HTML and style: http://www.carbondesignsystem.com/components/progress-indicator/code
Usage: http://www.carbondesignsystem.com/components/progress-indicator/usage

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...

src/input/input.directive.ts needs documentation

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.

Right now checkbox/toggle/etc are hidden in a forms module ... they should be lifted up into separate modules per component.

HTML and styles: http://www.carbondesignsystem.com/components/slider/code
Usage: http://www.carbondesignsystem.com/components/slider/usage

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

Steps to reproduce the issue

https://github.com/IBM/carbon-components-angular/blob/master/src/dropdown/list/dropdown-list.component.ts

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.

🚨 The automated release from the 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:

• Usage documentation
• Frequently Asked Questions
• Support channels

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.

Missing 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 📦🚀

Steps to reproduce the issue

1. Go to https://github.com/IBM/carbon-components-angular#resources
2. Click on the "I18n Tooling" link
3. You'll see a "Page not found"

Title line template: Selection column is too wide

Detailed description

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

Steps to reproduce the issue

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

Additional information

HTML and style: http://www.carbondesignsystem.com/components/code-snippet/code
Usage: http://www.carbondesignsystem.com/components/code-snippet/usage

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.

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.

Add new tiles module contain basic and clickable tile components

Detailed description

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

Create and publish some initial release with the current Carbon (cloud style) look and feel.

TODO:

• forms
  • labels
  • text fields
  • checkboxes
  • toggles
  • select
  • button
  • input
• dropdown
• combobox
• modal
• dialog
  • overflow menu
  • tooltip
  • definition tooltip
• calendar
  • base calendar
  • date picker
• banners
  • notification
  • toast
• icon
• table
• tabs
• buttons

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

Detailed description

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", 

HTML and styles: http://www.carbondesignsystem.com/components/structured-list/code
Usage: http://www.carbondesignsystem.com/components/structured-list/usage

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" />

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

v1.50 Table is not carbon styled

Table is rendered with neutrino classes, e.g. table--lg, I see it has been carbon styled since the v1.5.0 release by PR #24.

It would be great if you could release a patch version?

Steps to reproduce the issue

A the table component to a page, when rendering it has no styling.

dialog placeholder and modal placeholder do effectively the same thing ... they should be combined into a single service and component

Can you deploy the storybook somewhere so we can see the latest code running

Detailed description

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

Detailed description

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

Steps to reproduce the issue

Observable in storybooks and carbon vanilla site.

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.

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

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

http://www.carbondesignsystem.com/components/toggle/code

Ideally, it would be created by changing the size input on the existing one.

HTML and styles: http://www.carbondesignsystem.com/components/file-uploader/code
Usage: http://www.carbondesignsystem.com/components/file-uploader/usage

Detailed description

Describe in detail the issue you're having.

Components should be sorted alphabetically after the first one "Welcome"
https://angular.carbondesignsystem.com/

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.

https://www.ibm.com/able/dynamic-assessment-plug-in.html

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>

🚨 The automated release from the 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:

• Usage documentation
• Frequently Asked Questions
• Support channels

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.

Invalid npm token.

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 📦🚀

Detailed description

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

HTML and styles: http://www.carbondesignsystem.com/components/inline-loading/code
Usage: http://www.carbondesignsystem.com/components/inline-loading/usage

Just as a reference, this is what I've started with in charts:

Question about how to support the Carbon Grid layout using Angular componentry?

Detailed description

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.

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

Tables/Grid/DataTable Accessibility Support

Detailed description

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.

Detailed description

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?

Steps to reproduce the issue

• Take the sample from this PR #67
• Run the storybook and open the Table with overflow menu story
• Click in last column to display the overflow menu
• Expect the overflow menu to display in last column but displays in the first column

Additional information

Detailed description

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.

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 :

• https://github.com/angular-ui/bootstrap
• https://github.com/valor-software/ngx-bootstrap

Thank You

Detailed description

Describe 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

Detailed description

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