It would be great to have an example demonstrating the use of Carbon Components
to build a web application using a standard server-side framework like ExpressJS or (even better) Kitura.

It would be very convenient to have an 'icon-font' made out of the carbon icons.

Hey I don't know if this is a quick fix or not but the interor-left-nav.html link reside within the table which could be a mistake?

😄 love the project!

Overview

Should be using 5.1.2

I'm using AngularJS and Carbon Datatable. I have already did part of code to init Datatable only when page is ready (when ng-repeat complete work).
if (scope.$last){ var dataTable = document.querySelector('[data-responsive-table]'); CarbonComponents.DataTable.init(dataTable); }

But now I want to know how to correctly refresh datatable when I did some operations with rows (add new, hide, remove). Currently after deleting rows - all DataTable becomes broken.

Here are some error messages:

Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.nn._toggleRowExpand 
Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.

When I'm trying to refreshRows manually by using ref to datatable and method tableref.refreshRows() I get next error:

Uncaught TypeError: e.zebraStripe is not a function(…)

I run into errors when calling the method.

I was testing your example code but it was not working for me.

Decided to look under the hood and data-invalid is only applicable to input and textarea elements in forms.scss and carbon-component.js.

I've fixed it on my end and hopefully you can add it on the future build.

The checkboxes within the data table look slightly off-center in Firefox.

Overview

In the Carbon Design System one or two of the "Layer Types" samples are mis-labeled. The card labeled "12 Sticky Nav" is actually getting the drop shadow styles of "24 Pop Out" (and vice-versa)... which is a bit confusing when trying to convey the "depth" of the various cards in order.

Should be a quick fix. I hope this is helpful.

Left navigation doesn't have overflow setup when it's larger than height of window and it also hides the expand/contract on the bottom when it's height isn't perfect. Attached image, can give visual demo if needed as well. Please contact Dale Hille on slack for if a demo is needed.

React is a rather popular web app framework (especially for 'single-page' web apps).
It would be great if you provided a React version of the components library.

I am trying to use carbon component "overflow menu" I am not getting pop up when i click on it.
have copied code for same from carbon design site and included css for same.
have included the carbon component “overflow-menu” with attribute 'data-overflow-menu'and
also included CarbonComponents.OverflowMenu.init() in my controller
I have included the carbon-components.min.js. still Overflow menu is not working

To check if there is certain issue with controller, I removed scopped variable from html page and
disabled controller for this html page, Still pop up for overflow menu not coming.

Overview

When I look at the Grid overview page, I understand the concepts, but I don't know how to put it into practice. How do I implement a grid in my UI?

Feature: Grid
  As a developer
  I want to know how to implement grids
  So that I can make use of them

Overview

Many elements in Carbon, onClick get an outline that's by default shown by W3C standards, but really need to and are removed by any reputable design framework using:

* {
   outline: none;
}

That's a title, not at all necessary.

That checkbox is already highlighted, so really no justification as to why that outline is needed.

On an input, somewhat makes sense, but still is not really helpful since the blinking typing indicator already indicates that your focus right now is on that input.

Even onFocus, we're seeing this behaviour, which is actually very confusing since the focus of the app is really on the other highlighted tab, but the focus of the DOM is on the outlined tab.

Overview

I do not know your reporting format, but I will do my best to follow it

I opened this site for the first time. I am using the screen reader NVDA 2017.1 / Firefox 52.02. When I got to the menu, I toggled the un-labeled button to close the menu. However, while it was visually hidden the entire menu, including the collapse sub-sections, were still announced and still tab-stops.

Feature: Hide the menu from screen reader users when they toggle button to hide the menu.
  As an NVDA user…
  I want to reduce audio clutter by dismissing the menu…
  So that I can get to the content of the site.

  Scenario: Attempting to the use the site for the first time
    Given that I am an NVDA user,
    When I select the unlabeled toggle to close the navigation menu,
    Then I should no longer have the menu in my tab order for the page.

Other

There are many issues in that menu alone. I gave up even trying to get further into the site since there are no headings on the initial page and there are no landmarks. I am not filing bugs for all those. This design system needs a proper accessibility audit.

Edited to add specific items per #4 (comment)

1. The navigation menu is not in a <nav> element (which can be used to hook state information via ARIA as well as act as a landmark navigation point — see item 7).
2. <button class="side-nav__toggle-btn"> (the button to collapse the menu) has no accessible name; it is announced as "button".
3. When activated, the state of the menu is not conveyed (aria-expanded might be a fit) regardless of whether it is collapsed or not.
4. When collapsed, the menu is still in tab order. The style hiding it is transform: translateX(-100%);. display:none; would hide it from AT and keyboard use (though the toggle button would have to move out of that container).
5. Sub-menus are never removed from focus order, whether the parent navigation item is collapsed or the entire menu is. This is because they are only hidden via an inline max-height: 0px;. I understand that animation effects are desired here, but those can still be achieved accessibly.
6. There are no headings on the page, so a screen reader user cannot just jump into the page content. For example, you could replace all the <div>s around individual letters of the branding with an <h1> and still retain your visual design, perhaps using ARIA so it gets announced as words instead of letters. As another example, <p class="overview-page__tile--heading">Carbon design kit</p> should be <h2 class="overview-page__tile--heading">Carbon design kit</h2>
7. There are no landmarks on the page, so a screen reader user cannot just jump into the page content nor other parts. For example, <section class="overview-page"> should probably be <main class="overview-page">. <div class="side-nav__footer"> should probably be <footer class="side-nav__footer">. <div class="side-nav"> as <nav class="side-nav"> (excluding the footer).

I'm using the dropdown component in a scenario where one option navigates to a new page, while the other opens a modal window. I've set data-dropdown-type="navigation". However, I've noticed if I select the option that opens the modal, then close the modal, that option is removed from the dropdown list.

I took a quite peek at the dropdown.js source, and I'm wondering if it makes sense to add this logic on line 156, or if you have any other suggestions.

      if (this.element.dataset.dropdownType !== 'navigation') {
        itemToSelect.classList.add(this.options.classSelected);
      }

Overview

Update all HTML files to use inline SVG.

While there's a description of Grids in the Style section I can't find any information on how to use the grid in the components section. Can you add this information please?

Currently, the heading tags (h1 ... h6) are being used to style a page to be visually correct without regard to html structure, causing a situation where the html structure is broken.

h1. Page Title
  h2. Missing
    h3. Missing
      h4. h2 styled as h4
h1. h2 styled as h1
h1. h2 styled as h1
  h2. h3 styled as h2

If new classes, such as bx--heading--1, were added a h2 tag could be style like an h1 tag, but remain an h2 element allowing for proper HTML structure.

h1. Page Title
  h2. .bx--heading--4
  h2. .bx--heading--1
  h2. .bx--heading--1
    h3. .bx--heading--2

I noticed the left and right border/outline is missing when hovering over the first table row.

Overview

While developing our application we have been asked to generate some graphing data. We need to be able to generate some bar graphs and circle graphs in bluemix and it would make sence to have a standard IBM Bluemix type of graph that we should all use.

Convert this issue to an Epic if there are multiple Scenarios.
Each Scenario should be it's own issue that belongs to this Epic.

{{ long description }}

Feature: {{feature}}
  As a {{persona}}
  I want {{need}}
  So that {{rationale}}

  Scenario: {{scenario}}
    Given {{thing}}
    When {{action}}
    Then {{result}}

Other

{{ Other notes here about this User Story that does not fit within Feature or Scenario }}

Have you guys considered adding "Floating action buttons" similar to https://material.io/guidelines/components/buttons-floating-action-button.html# , I find it very useful under many circumstances especially for the responsive UI sites.

Left navigation doesn't have overflow setup when it's larger than height of window and it also hides the expand/contract on the bottom when it's height isn't perfect. Attached image, can give visual demo if needed as well. Please contact Dale Hille on IBM slack for if a demo is needed.

interior-left-nav-.scss is missing @import '../../globals/scss/css--reset';, which causes the following error when imported by itself:

Error: no mixin named reset

Backtrace:
	node_modules/carbon-components/scss/components/interior-left-nav/interior-left-nav.scss:14, in mixin `@content`
	node_modules/carbon-components/scss/globals/scss/_import-once.scss:12, in mixin `exports`
	node_modules/carbon-components/scss/components/interior-left-nav/interior-left-nav.scss:12

I tried to move from bluemix to carbon components.
It does not fair well

1. in ver 6:<body class="bx--global-light-ui" ---> bx--body

2. ver 6: app.sccs would import many things (at least in the app i got from atlas), and now
   @import '../../../node_modules/carbon-components/scss/globals/scss/styles';
   It is important to document how to use the code, and how to migrate to it

3. There needs to be a central file, which takes an item from ver6, like button and shows it in ver 7.
   because ver6 used and now you use button and different names for styles.

There needs to be one html file which shows differences examples

I will update with more scenarios as I do more work.

Overview

On the detail page header with tabs page, the tabs in INACTIVE state are white. HOVER state makes them light blue.

Thanks!

I apologize if this is not the correct place to ask about features, but I did not see another place on the carbon site to do so.

Are there plans to package up the components as React components or to provide any documentation for integrating these components with a React application? I really like the component library and would like to us in a React-based project. Thanks!

The heading tags (<h1> - <h6>) are used to establish a hierarchy of content on a page that can be utilized by screen readers to form page structure. https://www.w3.org/WAI/tutorials/page-structure/headings/

With the default stylings from _css--body attached to the above tags currently a page's visuals can change drastically when restructuring the headings to be semantic. Furthermore, MDN recommends not using heading tags to change font size, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements.

Should the heading tags be changed so they just reset the elements default styles and then classes be created, heading--1, heading--2, heading--* to allow the appropriate stylings be attached to any element?

Overview

I am using carbon-components for a project. I find the CSS really over-verbose and unweildly. Let's look at this example of a transactional modal:

  <div class="bx--modal-container">
    <div class="bx--modal-header">
      <h4 class="bx--modal-header__label">Label (Optional)</h4>
      <h2 class="bx--modal-header__heading">Modal Title</h2>
      <button class="bx--modal-close" type="button" data-modal-close>
        <svg class="bx--modal-close__icon">
          <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--close"></use>
        </svg>
      </button>
    </div>

    <div class="bx--modal-content">
      <p>Modal text description</p>
    </div>

    <div class="bx--modal-footer">
      <button class="bx--btn bx--btn--secondary" type="button" data-modal-close>Cancel</button>
      <button class="bx--btn bx--btn--primary" type="button" data-modal-primary-focus>Save</button>
    </div>
  </div>
</div>

There is a class for almost every element, when an element can easily be inferred by the structure. For example, instead of have three nested classes: bx--modal > bx--modal--container > bx--modal-header, there could be the one class on the top level element, and use .bx--modal > div to select the modal-container and a <header> element selected by .bx--modal header. An overly verbose css class system is very unnecessary and clutters the HTML making it difficult to read.

The button is another example of over-verbose and redundant information:

<button class="bx--btn bx--btn--primary" type="button" disabled>Primary button</button>

We know it is a button element, so why do we need a bx-btn class? Perhaps if we want to make our button bluemix-ey just make a bx class for the button. And look, we have another class with btn in it... bx--btn--primary! This makes it very difficult for a developer to remember, and to see clearly what is happening in a big html template. The above can be easily achievable like so:

<button class="bx primary" type="button" disabled>Primary button</button>

using these CSS selectors: button.bx, button.bx.primary.

I know all of this style is throughout the whole application. But I think there is a lot of mileage on utilising CSS more effectively by removing the amount of classes needed to implement the components, and rely more on structure and selectors that can work on multiple classes.

Feature: cleaner HTML needed
  As a developer
  I want fewer CSS classes to use in HTML
  So that I can developer faster, and have more maintainable code