carbon-design-system / carbon-design-kit

A versioned, comprehensive kit of the Carbon Design System visual assets (components, iconography, color palettes, grids, templates).

Carbon Design Kit

The Carbon Design Kit is a living, breathing document that contains all of our visual assets (components, iconography, color palettes, grids, templates, responsive behavior, etc). This document evolves and changes as we collaborate with partners and service teams. All of the assets that live in the Design Kit can also be found on our Carbon Design System website.

📝 Change Log

Contains release notes on current and previous versions of the Carbon Design Kit.

• 8.x.x
• 1.0.4 and older

🔍 Accessibility

All of the designs within the Carbon Design Kit meet the WCAG 2.0 AA accessibility guidelines and are compliant with Section 508 standards. If you choose to customize these designs, please make sure they continue to meet these requirements.

📚 Getting Started

Designers

• The Carbon Design Kit now uses the new typeface IBM Plex. It is open sourced and free to download from the IBM GitHub repo

• Download the latest version of the Carbon Design Kit by clicking on the latest kit file in this repo (Carbon_Design-Kit_x.x.x.sketch) then on the next page click the download button or “View Raw”. (Note: downloading from the main repo page will download the entire repo including previous version)

• The Design Kit requires having the latest version of Sketch installed.

• Open the Design Kit file in Sketch

• Core visual styles, components, and templates are broken out into respective pages

• Use the components and core visual styles to build out your design

• Updates to the Design Kit will be posted in our change log, so check back frequently for changes!

Developers:

Our Carbon Components Getting Started guide has all the instructions you need to get up and running our code base.

For Carbon Data Visualizations please head over to this guide for instructions.

🌟 Contributing

Design

Follow the steps in our Contributing guidelines to contribute to the Carbon Design System.

Code

For instructions on contributing to our component library please read our contributing docs for Carbon Components.

💻 Workflow

Sketch Libraries

Sketch Libraries is a new Sketch feature that allows designers to share Symbols across documents and easily update to the latest symbol changes. Read the Sketch Libraries Overview wiki to learn more about how to use and implement Sketch Libraries in your workflow.

Plugins

The Carbon Design Kit now comes with the Sketch Palettes plugin which allows you to import Carbon specific palettes into your Sketch files. There are four Carbon palettes (a Carbon default palette and three data vis palettes) included with the Carbon Design Kit download. We also have a wiki of suggested Sketch plugins to help make your design workflow more efficient.

---

Copyright © 2016, 2017, 2018 IBM

carbon-design-kit's Issues

Interior left nav - Can't change which list item is selected without breaking from library

Trying to go library pure (as much as possible). Ran into a few problems trying to get the connected library component for the interior left nav add on working.

I can't change which item in the left nav is selected without breaking from the library.

I also can't add pieces for new line items if there are more than 4 and remove the last line items if there are less than 4.

kit version 8.1.0

Add license file to project

Detailed description

A license file should be added to the project and configured for the project so it's clear for users that want to take and utilize these resources.

Thumbnail missing in Add Library screen

Describe in detail the issue you're having. Please include whether or not this is part of Sketch Libraries or the larger Sketch Kit file.
just library

What version of the Carbon Design System Kit are you using -
9

Is this issue related to a specific component? If so please give the page, artboard, and layer/symbol name.
just the thumbnail

What did you expect to happen? What happened instead? What would you like to see changed?
i was having a bunch of crashes with Sketch and doubt this is related but that's why i noticed this.

Grid

Can you guys check the grid in the Sketch file please.
Its width - 1296 (not counting external gutters) can't produce 90px wide (12 columns) with 20px gutters in between them. Sketch struggles and puts some guides on half pixels (and some gutters are 19px), which makes snapping to grid hard.

1300px will produce equally sized gutters.
http://gridcalculator.dk/#/1300/12/20/0

Random Bugs

Components Page

• Filterable Dropdown > focus > does not have focus outline
• Dropdown > OpenNew Selection > should not have focus outline
• Pagination > scroll to top example missing the load more button

Video intro to using Carbon Sketch components

@antonmc commented on Tue Jun 06 2017

I'm quite new to Sketch - and I was able to make a few views in a day, so it wasn't bad, but I'm not sure I'm using it correctly. This may not be for everyone - but a 20 minute, no nonsense screencast overview of creating an app view with the Carbon template would be great.

For instance - I just copy and paste with it - is there a more integrated way of using the components on an artboard?

What's a typical flow? No more than 20 minutes - no personal intro, no system background - just looking over the shoulder of a designer making something with the sketch components.

---

@hellobrian commented on Tue Jun 06 2017

This is really good to hear. We've had other ideas for videos that were more dev focused but having intro content like this for designers using sketch sounds good too.

---

@joshblack commented on Fri Sep 22 2017

Can definitely help out with this if needed 😄 I've done a lot of screencasts over for Egghead.io (example)

V9 - Text of Tag components is not editable

Detailed description

The text of the tag components is not editable and the component itself can not be resized.
In the Carbon Design Kit sketch file all Tag elements and also their text layers are locked. And the width and height of the background is fixed.

What version of the Carbon Design System Kit are you using?
9.0.0

Is this issue related to a specific component? If so please give the page, artboard, and layer/symbol name.
Tags

What did you expect to happen? What happened instead? What would you like to see changed?
I expect to be able to edit the text and resize the tag to fit the text.

Add labels

library

Sketch Palette

Something in the Sketch Palette file is corrupted. Need to upload new version.

Recommend Sketch viewer for Windows

https://icons8.com/lunacy

Might be helpful for Windows users who need to view Sketch files.

You can zoom in using UI controls

And view parts of the artboard off canvas by holding down mouse wheel and dragging.

Updated Getting Started

The getting started section of the Sketch file could be updated.

One improvement could be the more tactile examples of using nested symbols. A step by step tutorial inside the sketch file that lets the user get hands-on and learn how to use our kit.

Validation symbol still uses Helvetica instead of Plex

@werdnanoslen commented on Thu May 10 2018

The Component/Select/Select/States/Validation symbol still uses Helvetica instead of Plex.

---

@werdnanoslen commented on Thu May 10 2018

Also I think the character spacing should not be 0.5 in Plex? Looks weird with it

v10 - Create a new sketch library for experimental components

As a designer, I can download an experimental sketch library and use it to play around with some of the new component designs

DESIGN

• create experimental component section in Sketch library
• confirm component designs are approved and copy to library

Remember to include:

• Cell behaviors
• Centering options (vertical, horizontal)
• Optical centering or actual centering
• Skeleton state

Scope: Derived from what exists in code. I.e. only components that are available for use.

Fonts link and required fonts other than Plex

Hi, in the designers section:
"The Carbon Design Kit now uses the new typeface IBM Plex. It is open sourced and free to download from the IBM GitHub repo"

The link to download Plex appears to be incorrect, I was able to find here instead: https://github.com/IBM/plex/releases

Also, when opening the Sketch library, it not only requires Plex, but I'm getting a missing font error on 'Helvetica Neue Bold IBM" that does not appear to be part of the Plex typeface library.

regards J.

No Global Header for Catalog

Catalog has it's own color and should have it's own header in the design kit

Adobe XD Kit Review

Description

As I wrap up my work on the Adobe XD Carbon Components kit, I thought it would be good to layout the components that I have currently so that we can review them. As far as possible, I have cross referenced both the kit from Sketch as well as the components from the website for consistency. Where there are consistency conflicts, I fall back onto what is available on the site.

💾 Download the kit: https://drive.google.com/file/d/1SFevPh1ALrlQOHYSFgUyA7raiyt-5uQT/view?usp=sharing

If you do not have Adobe XD but want to take a look at the kit, use the link below. It still requires an Adobe account because the dictators at Adobe said so.
https://xd.adobe.com/spec/1f560469-37bd-44ca-931b-c03dfdd80b55

If there is anything that you would like worked on, please add them to the To-do list or reply below.

Notes / To-do

Accordion

• N/A

Breadcrumb

• N/A

Button

• Include both Primary and Secondary buttons
• Remove Icons from Danger buttons

Checkbox

• Add indeterminate state for checkbox

Code Snippet

• Replace copy-icon with a proper symbol

Content Switcher

• Add Content Switcher with Icon

Data Table

• N/A

Date Picker

• Better formatting of the UI on the date picker

Dropdown

• Add multi-select dropdown
• Add Inline multi-select dropdown
• Add filter dropdown

File Uploader

• N/A

Form

• N/A

Link

• N/A

List

• N/A

Loading

• Use a better .svg for big loader
• Use a better .svg for small loader

Modal

• Add Passive Danger Modal
• Add Transactional Danger Modal

Notification

• N/A

Number Input

• N/A

Overflow Menu

• Better formatted according to https://codepen.io/team/carbon/full/MOEwjp/

Example from my Adobe Kit:

Pagination

• Add Pagination v1? (Will not bother if it is depreciated)

Progress Indicator

• N/A

Radio Button

• N/A

Search

• Add big search with options

Select

• Add Inline select

Slider

• N/A

Structured List

• Add multiple columns like how it appears on the site

Tabs

• N/A

Tag

• Better formatted according to https://codepen.io/team/carbon/full/GOWdob/

Example from my Adobe Kit:

Text input

• N/A

Tile

• N/A

Toggle

• N/A

Tooltip

• N/A

Notes

Here are some of the things that I have yet to achieve for this kit, either due to a lack of time or features on Adobe's part.

• Proper layer naming - At least for myself, I realised that this is not a key issue when navigating Adobe XD.

• Better "CSS" - I try to refer to the Carbon Components on CodePen/ Carbon Design Website for the most accurate padding and spacing of the components. This is an on-going process especially for some of the more complex components such as the Calendar.

• Reusable Colors & Symbols - Until Adobe releases a better way to maintain the Swatches and Symbols for Adobe XD, this will be quite a mess to maintain. Hopefully there will be a way to arrange the colors by shades eventually. In the interim, I aim to make sure that the colors across the entire kit is consistent.

• Icon Libraries - You will have to download them off the Carbon Design site for now

• Text Styles - Same with reusable colors and symbols, it's a nightmare to maintain

Other Updates

• Added z-depth layer sheet (06/03/18)
  
• Changed all of the red to #E0182D
• Added Interior Left Nav (06/03/18)
  
• Updated tags (06/04/18)
  Reduced the height of the tags from 30px -> 20px.

Update color palette file

• update #152934 to #152935
• update brand-02
• check ui-02

Symbols

Could you turn common elements into symbols (with constrains for correct resizing) please?

• text fields and text areas (and its specific instances like search bar etc)
• dropdowns (two sizes)
• check and radio boxes
• buttons
• tabs
  etc.

Craft vs. Sketch Libraries

Issue to look at the pros and cons of craft and Sketch libraries

V9 - Getting started page in 9.0.1 show version 9.0.0

Detailed description

I feel that the Getting started and What's new pages should reflect what has been changed, even though changes would be small bug fixes. Otherwise it is hard to keep track between versions.

Now v. 9.0.1 displays exactly the same information than v. 9.0.0.

What version of the Carbon Design System Kit are you using?
9.0.1

Lock height of components

Moved from carbon-components

---

antonmc commented on Jun 6
Maybe it is because I'm new to sketch, but I found that the components stretched whenever I changed the height of the artboard they were on.

I learned that there is a checkbox to keep height fixed, and learned to click that when resizing the artboard. I wonder if that should be defaulted for the Carbon components.

---

bsonefeld commented on Jun 7
Interesting find, @antonmc ! Could you post a screenshot or a GIF example of what's happening when you resize your artboard? Almost sounds like a Sketch bug to me, but in order to troubleshoot I want to make sure I understand the problem correctly :)

Requesting a Group Icon

Detailed description

Describe in detail the issue you're having. Please include whether or not this is part of Sketch Libraries or the larger Sketch Kit file.
This is a request for a new icon for a group of users.

What version of the Carbon Design System Kit are you using?
Carbon Design Kit - 8.1.0

Is this issue related to a specific component? If so please give the page, artboard, and layer/symbol name.
Style/Icons/User exists. Requesting Style/Icons/Group

What offering/product do you work on? Any pressing ship or release dates we should be aware of?
IBM Cloud Object Storage. Mid year would be great.

Add labels

Please choose the appropriate label(s) from our existing label list to ensure that your issue is properly categorized (i.e.use the libraries label for any issue relating to the Carbon Sketch Library). This will help us to better understand and address your issue.
Library
Icons

All icon symbol artboards should be equal size

Detailed description

Some icon overrides within components in Sketch design kit doesn't work properly. Take a Add-on/Card for example. There are two icons (restart and launch) in the component, which can be overrided if needed. However, for restart-icon overrides, only those few icons which artboard is 13x16px are offered and for launch-icon overrides, all the icons, which artboard is 16x16px are offered. See attached images.

What version of the Carbon Design System Kit are you using?

9.0.0

What did you expect to happen? What happened instead? What would you like to see changed?

In my opinion all icons should be available to be used as an override whenever there is an icon symbol included in the component. Sketch works so, that is looks up the artboards equal size and lets user select among those, so that's why all the icon symbol artboards should be same size.

Additional information

Bug fixes for 7.0.1

• 2. Grid System > About section: Typo in section with left nav. Example should read: "Example: Artboard width=1440px, Margins @ 5%; left nav width=200px *" (not 250)
• Update containers icon in global left nav
• Update "launch" icon
• Update read.me links
• Update Launch icon in Cards to match updated icon
• Add table symbol
• Add detail page header symbols
• Add new focus states?

Alisha Moore

Overview

Over the next sprint, as you are using the beta design kit + library sketch file, please document any bugs, frustrations, feedback, issues, etc. you have while using the kit. The items below list put a few of the things to keep an eye out for

• Misspellings (layers, components, placeholder text, symbols)
• Missing symbols
• Components not resizing properly or components that are not resizing at all
• Instances where you had to detach from the symbol because you needed to make a change that was not offered in the overrides panel
• Icon symbols not easily swapping out (getting resized weirdly)
• Shape/text/icon not aligned to the pixel grid or not sized to a whole pixel
• Inconsistent symbol handling (naming) and build structure (layer order)
• A whole component is not as granular (built out of smaller component units) as it could be

Form component missing from carbon-design-kit 8.1.0

Detailed description

I added version 8.1.0 of the Carbon Design Kit to Sketch. In the component listing, in Sketch, the Form component is missing. The website (http://carbondesignsystem.com/components/form/usage) lists the component as design and develop ready but it's not available in the sketch design kit.

What version of the Carbon Design System Kit are you using? 8.1.0

Is this issue related to a specific component? form

What did you expect to happen? What happened instead? What would you like to see changed?
Add the form component to the design kit.

Is this issue being filed based on a discrepancy between the website/code and the kit? If so what is the inconsistency? yes. website says the component is design read but the kit doesn't include it.

What offering/product do you work on? Any pressing ship or release dates we should be aware of?
IBM University Relations Awards Tool using Angular 5, Carbon, LoopBack, db2 on Cloud.

Steps to reproduce the issue

1. download design kit 8.1.0 from git
2. add design kit library to Sketch
3. Choose Insert --> Carbon Design Kit --> Component
4. See Form component is not listed

Additional information

• Screenshots or Sketch file links
• Notes

Add labels

Please choose the appropriate label(s) from our existing label list to ensure that your issue is properly categorized (i.e.use the libraries label for any issue relating to the Carbon Sketch Library). This will help us to better understand and address your issue.

licence clarity

It's not clear what I can do, legally, with the contents of this repository. Indeed, it's not clear who owns what, in particular the fonts contained in HelvNeueforIBM.zip. Some clarity would be useful.

Lauren Rice

Overview

Over the next sprint, as you are using the beta design kit + library sketch file, please document any bugs, frustrations, feedback, issues, etc. you have while using the kit. The items below list put a few of the things to keep an eye out for

• Misspellings (layers, components, placeholder text, symbols)
• Missing symbols
• Components not resizing properly or components that are not resizing at all
• Instances where you had to detach from the symbol because you needed to make a change that was not offered in the overrides panel
• Icon symbols not easily swapping out (getting resized weirdly)
• Shape/text/icon not aligned to the pixel grid or not sized to a whole pixel
• Inconsistent symbol handling (naming) and build structure (layer order)
• A whole component is not as granular (built out of smaller component units) as it could be

Detail Header - breadcrumb

version 8.1.0

Can't switch out the truncated option for a normal row item without breaking from the library.

In our situation we are only 2 deep currently residing on a Production Cluster page: Clusters / Production Cluster

I broke everything in order to accomplish the mock up below:

Also, our understanding is that the current page would be repeated in the breadcrumb in grey and not followed by a slash to show the current location - might be a conversation to have with Platform, but I think that is where they landed with their recent updates for the interior left nav and breadcrumb work.

Button Hover is incorrect color

Overview

In the 9.0.0 Carbon Design Kit and Library, the Primary Button hover is set to the incorrect color style. If you would like to fix this mistake before the next Carbon Kit release follow the steps below. If you have an questions about fixing this problem, please comment in this issue below.
Total Time to fix: One minute (or less)

Steps to correct

1. Go to finder and type in Carbon Design Kit.sketch and open it. Make sure you are opening the most recent version of the kit file, from release 9.0.0.

2. Go the Components Page > Controls Artboard >Button > then look for the Primary Button Hover ('circled' in the image with a red, dotted line).

   

3. Double click three times so that Sketch brings you tho the symbol pages of the file, to the Primary Button Hover library symbol.

   

4. Double click on the background so that layer Component/Button/Pieces/Background/Primary, hover'. Once that is selected double click again, that should bring you to symbol Component/Button/Pieces/Background/Primary, hover`.

   

5. Select the layer called Background and navigate to the Inspector List. Click the dropdown menu that says secondary and change it to Color / hover / primary

   

6. This should update the symbol in your kit and across all files where you've used this symbol (as long as you update the file from the Sketch notifications, see the Sketch Libraries wiki for those instructions).

   

V9 - Resizing of various symbols could be improved / fixed

Overview

It looks like certain constraints are missing / components have not been tested with resizing with different content etc. This makes it a bit difficult to use the sketch library without making my own modifications.

Detailed description

Although it's super helpful to have all of the sketch symbols, many of them do not resize correctly when using overrides, adding different content or resizing to fit a layout.

I assume this is just an oversight because there's obviously been a lot of work put in to creating them and documenting :)

What version of the Carbon Design System Kit are you using?
9.0.0

Additional information

What happens currently:

What should happen:

Also a similar issue with the Accordion:

Craft Release - Updates

• Ask to turn common elements into symbols with constrains for correct resizing:
  • text fields and text areas (and its specific instances like search bar etc)
  • Dropdown (two sizes)
  • check and radio boxes
  • buttons
  • tabs

Create .crl file

Need to create a color token .crl file.

Typo on Getting started text

Detailed description

Describe in detail the issue you're having. Please include whether or not this is part of Sketch Libraries or the larger Sketch Kit file.
There is a typo on the 2nd page of the larger Sketch Kit File. Under Library Symbols - Usage it says "Use Insert > Symbols > Carbond Design System" it should be saying "Use Insert > Symbols > Carbon Design System".

What version of the Carbon Design System Kit are you using?
Carbon Design Kit 9.0.0

Is this issue related to a specific component? If so please give the page, artboard, and layer/symbol name.
Page 1. Getting started

Steps to reproduce the issue

1. Step one
2. Step two
3. Step three
4. etc.

Additional information

• Screenshots or Sketch file links
• Notes

Add labels

Please choose the appropriate label(s) from our existing label list to ensure that your issue is properly categorized (i.e.use the libraries label for any issue relating to the Carbon Sketch Library). This will help us to better understand and address your issue.

7.1.1 Release

• make sure new component states match with prod (lists, slider)
• clean up symbols page with plug in - Symbol Organizer
• small ghost btn on hover is wrong height

Spencer Reynolds

Overview

Over the next sprint, as you are using the beta design kit + library sketch file, please document any bugs, frustrations, feedback, issues, etc. you have while using the kit. The items below list put a few of the things to keep an eye out for

• Misspellings (layers, components, placeholder text, symbols)
• Missing symbols
• Components not resizing properly or components that are not resizing at all
• Instances where you had to detach from the symbol because you needed to make a change that was not offered in the overrides panel
• Icon symbols not easily swapping out (getting resized weirdly)
• Shape/text/icon not aligned to the pixel grid or not sized to a whole pixel
• Inconsistent symbol handling (naming) and build structure (layer order)
• A whole component is not as granular (built out of smaller component units) as it could be

Debi Abiero Ndindjock

Overview

Over the next sprint, as you are using the beta design kit + library sketch file, please document any bugs, frustrations, feedback, issues, etc. you have while using the kit. The items below list put a few of the things to keep an eye out for

• Misspellings (layers, components, placeholder text, symbols)
• Missing symbols
• Components not resizing properly or components that are not resizing at all
• Instances where you had to detach from the symbol because you needed to make a change that was not offered in the overrides panel
• Icon symbols not easily swapping out (getting resized weirdly)
• Shape/text/icon not aligned to the pixel grid or not sized to a whole pixel
• Inconsistent symbol handling (naming) and build structure (layer order)
• A whole component is not as granular (built out of smaller component units) as it could be

Steven Raden

Overview

Over the next sprint, as you are using the beta design kit + library sketch file, please document any bugs, frustrations, feedback, issues, etc. you have while using the kit. The items below list put a few of the things to keep an eye out for

• Misspellings (layers, components, placeholder text, symbols)
• Missing symbols
• Components not resizing properly or components that are not resizing at all
• Instances where you had to detach from the symbol because you needed to make a change that was not offered in the overrides panel
• Icon symbols not easily swapping out (getting resized weirdly)
• Shape/text/icon not aligned to the pixel grid or not sized to a whole pixel
• Inconsistent symbol handling (naming) and build structure (layer order)
• A whole component is built from a collection of smaller units or symbols. Are there whole components that are not made up of any smaller units that should be, or not have enough smaller units making up the larger, whole component?

Update IBM Colors

Design kit currently displays IBM Colors 1.0. Supporting files and new palette can be found here: https://www.ibm.com/design/language/resources/color-library

User Testing :: Sketch 47 Libraries Kit

Looking to have 5-6 sponsor users to use the design kit + sketch 47 libraries. We have created a Carbon library and are looking for bugs, usage problems, frustrations, and how users are utilizing symbols. More official research plane to follow soon.

Add experimental color palette to the Sketch library

• As a designer, I can download the experimental sketch library and use it to explore and use the new color palette

Process

• Experimental colors proposed
• Experimental colors is evaluated from a design perspective
• Experimental color design spec is delivered through a Sketch file
• Would then require dev issue creation in https://github.com/carbon-design-system/carbon-themes (e.g. "Create Carbon color theme")

Categories for the component page of the Kit

Proposed Component Categories

01 Controls:

• Button
• Checkbox
• Content switcher?
• Overflow menu
• Radio Buttons
• Slider
• Toggle

02 Inputs:

show both field-01 and field-02?

• Date Picker
• Dropdown
• File uploader
• Forms
• Number input
• Search
• Select
• Text input

03 Content:

• Accordion
• Code snipper
• Data table?
• List
• Loading?
• Modal
• Notification
• Structured List
• Tags
• Tile
• Tooltip

04 Navigation:

• Breadcrumb
• Links
• Pagination
• Progress Indicator
• Tabs

05 Data table

(as its own category)

Small secondary button with icon is missing

Detailed description

Small secondary button with icon is missing. It shows up on , but I could not find it in the sketch file.

What version of the Carbon Design System Kit are you using?
9.0.0

Is this issue related to a specific component? If so please give the page, artboard, and layer/symbol name.
button

Add labels

library

Megan Baxter

Overview

Over the next sprint, as you are using the beta design kit + library sketch file, please document any bugs, frustrations, feedback, issues, etc. you have while using the kit. The items below list put a few of the things to keep an eye out for

• Misspellings (layers, components, placeholder text, symbols)
• Missing symbols
• Components not resizing properly or components that are not resizing at all
• Instances where you had to detach from the symbol because you needed to make a change that was not offered in the overrides panel
• Icon symbols not easily swapping out (getting resized weirdly)
• Shape/text/icon not aligned to the pixel grid or not sized to a whole pixel
• Inconsistent symbol handling (naming) and build structure (layer order)
• A whole component is not as granular (built out of smaller component units) as it could be

ui-02 and brand-03 hex codes are wrong

hex codes for ui-02 and ui-03 don't match whats in the code/on the website

This is what is currently on the website/in code

$brand-03: #41d6c3
$ui-02: #f4f7fb 

Wrong color on Small Ghost Button text

Detailed description

What version of the Carbon Design System Kit are you using?

Version 8.1

Is this issue related to a specific component? If so please give the page, artboard, and layer/symbol name.

Small Ghost Button

What did you expect to happen? What happened instead? What would you like to see changed?

I expected to see brand-01 as the text color, but it appears to be darker.

Is this issue being filed based on a discrepancy between the website/code and the kit? If so what is the inconsistency?

Yes, on the website the text color is brand-01.

Experimental Component - Select - Symbol

Design:

• Create + add symbol to experimental Carbon Design Kit
• Document all states of component in experimental design kit

Updates for 8.1.0

• Components > Slider: Change annotation text from "width can vary" to below:

  • Min-width: 12.5rem / 200px
  • Max-width: 40rem / 640px
    

• Components > Dropdowns - Add new variations to dropdowns

• Components > Data tables - Edit Cancel state on Batch actions in Tables (no underline on active, with underline appearing on hover/focus). THIS MATCHES COMPONENT INTERACTION (I forgot we changed this post designs phase)
  Is:
  
  Should be:
  

• Components > Data tables - change selected row opacity from 5 to 10%.

• Components > Buttons - Add Danger buttons to Buttons section

• Style > Color contrast - Helvetica is still used on the A and a indicators. Change to Plex. Low priority.
  

• Component > Tab - Fix padding between tab and bar. Should be 16px.

7.2.0 Release - Updates

• Remove corner radius on checkboxes
• remove softlayer logo from folder on repo
• Include PDF version with release
• Toggle with label
• Add in new icons
• New components
  • Data Tables
  • Tiles
  • Pagination
• Add Data Vis page
  • Color palette
  • Example graphs

Moving items to V8:

• add in more grid examples?
• check nested symbols and styles - quicker editing ???
• Dynamic icons

Update Layout Templates Page

The Layout Templates page the kit needs to be updated with the Library Symbols (once Sketch fixes the resizing bug)

An alternative design kit for opensource softwares like inkscape

Hi,
Good day team,
I don't have a sketch license, but I do use inkscape.org that uses vector files with .svg extension file.
I would like to know if, in near future, this team would consider exporting the carbon-design-kit sketch files to opensource formats that could be used in other operating systems like windows, linux and OSX without a sketch license.

Thanks!