carbon-design-system / carbon Goto Github PK
View Code? Open in Web Editor NEWA design system built by IBM
Home Page: https://www.carbondesignsystem.com
License: Apache License 2.0
A design system built by IBM
Home Page: https://www.carbondesignsystem.com
License: Apache License 2.0
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.
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 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.
Thanks!
I tried to move from bluemix to carbon components.
It does not fair well
in ver 6:<body class="bx--global-light-ui" ---> bx--body
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
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.
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.
Should be using 5.1.2
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);
}
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.
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 notes here about this User Story that does not fit within Feature
or Scenario
}}
On the detail page header with tabs page, the tabs in INACTIVE state are white. HOVER state makes them light blue.
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
Update all HTML files to use inline SVG.
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(…)
It would be very convenient to have an 'icon-font' made out of the carbon icons.
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?
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.
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?
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
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!
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.
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 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.
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.
<nav>
element (which can be used to hook state information via ARIA as well as act as a landmark navigation point — see item 7).<button class="side-nav__toggle-btn">
(the button to collapse the menu) has no accessible name; it is announced as "button".aria-expanded
might be a fit) regardless of whether it is collapsed or not.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).max-height: 0px;
. I understand that animation effects are desired here, but those can still be achieved accessibly.<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>
<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).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.