Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@rocketsoftware/carbon-components-react

carbon-design-system167Apache-2.02.2.0

React components for Carbon.

react, carbon, carbon-components, ibm, carbon-design-system, components

readme

@rocketsoftware/carbon-components-react

A collection of Carbon Components built with React.

If you're new to React.js or Carbon, check out our guide to help get you up and running.

Getting started

To install carbon-components-react in your project, you will need to run the following command using npm:

npm install -S carbon-components carbon-components-react carbon-icons

If you prefer Yarn, use the following command instead:

yarn add carbon-components carbon-components-react carbon-icons

If you want to try out carbon-components-react, you can also use CodeSandbox.

Edit carbon-components-react

Usage

import { Button } from 'carbon-components-react';

function MyComponent() {
  return <Button>Example usage</Button>;
}

For more information about each component, check out our Storybook. For guides on getting started, head on over to our Website or check out our Tutorial

:books: Documentation

📚 Examples

If you're looking for more examples on how to use carbon-components-react, we have some examples that you can check out:

🙌 Contributing

We're always looking for contributors to help us fix bugs, build new features, or help us improve the project documentation. If you're interested, definitely check out our Contributing Guide! 👀

📝 License

Licensed under the Apache 2.0 License.

changelog

0.0.0 (2019-11-05)

Bug Fixes

  • button: check for disabled state before rendering as anchor (#4480) (341e3e3)
  • button: sm button height (#26) (fcee0c8)
  • components: update heading-01 to productive-heading-01 (#4399) (817dd55)
  • copy-button: replace copy button with one for code snippet (#4517) (f530510), closes #3208
  • data-table: expanded row border styles (#4459) (7e300cb)
  • data-table: expanded row styles (#23) (d624fa3)
  • data-table: select all behavior (#4430) (3835900)
  • data-table: select all logic (#22) (f53d2d8)
  • data-table: update import in TableSelectRow (eca5f9b)
  • DataTable: add the missing isSortable property (#4497) (80b1de1)
  • date-picker: disable mobile UI (#4443) (ad98531), closes #4420
  • dropdown: use theme token for text color (#4473) (f8bf516), closes #4323
  • FilterableMultiSelect: move invalid icon location to match listbox (#4419) (0efc5da)
  • inline-loading: shrink spinner radius (#4382) (18ed97e), closes #3040
  • link: use body-short-01 type token (#4407) (92c8459)
  • list: correct list alignment and numbering (#4485) (ac7fe05)
  • loading: adds label and aria so loading state is read by screenreaders (#4457) (f372713)
  • modal: enable clicks outside modal focus trap (#25) (cf3d4fe)
  • modal: update focus trap dependency (#24) (2896420)
  • notification: change box-shadow to border (#4299) (150cd2b)
  • notification: remove height and width set on close icon, update vanilla close icon size (#4439) (8b04235)
  • Pagination: prevent default form submission (#4462) (287e089)
  • select: remove transition on background-color to avoid jumping in Firefox (#4466) (ed19d2f)
  • skeleton: update labels & attributes for Checkbox, NumberInput, Select, Slider, TextArea, and TextInput (#4307) (d99c3d9)
  • skeleton-components: convert Breadcrumb, Fileuploader, ProgressIndicator, RadioButton, Tabs, and Tag skeletons to function declarations (#4484) (1c830b2)
  • tooltip: focus management with non-interactive elements (#4268) (86e76f6)
  • ui-shell: omit passing isSideNavExpanded prop to Link component (#4349) (902ff25), closes #4348 #4348
  • updates role to tab and moves aria-selected to li (#4451) (9c354fa)

Features

  • button-group: button group component (#29) (ebf4f78)
  • code-snippet: add light styles for all variations and update storybook knobs (#4342) (d6498e9)
  • dropdown: add show selected modifier to Vanilla (#4406) (cc43056)
  • OverflowMenu: add light prop (#4347) (a158a2c)
  • split-button: size prop and associated styles (#27) (4894447)
  • tab: introduce fixed variant (#4431) (2811a2c), closes #1329
  • table-toolbar: add required a11y props & prop type docs, spread rest of props, update stories (#4486) (03f6f75)
  • tour: tour react component (#28) (e6a1054)
  • type: add font-family rule to code type tokens (#4440) (9582635)

0.0.0 (2019-10-22)

Bug Fixes

  • accordion: change skeleton buttons to spans for a11y (#4273) (5d8dee8)
  • accordion: disable focus on collapsed accordion item content (#4320) (cad9e46)
  • breadcrumb-skeleton: use span elements to remove DAP violation (#4226) (190819b)
  • button: incorrect focus color for tertiary button on dark themes (#4216) (78aa5ff)
  • button: remove outline on disabled tertiary and ghost buttons (#4165) (e973965)
  • checkbox: update checkbox and radio button position logic (#4193) (e1a4a31)
  • checkbox: update reset mixin, apply reset mixin to checkbox styles (#4146) (43d7494)
  • code-snippet: set multi-line snippet overflow-x to auto (#4360) (302f040)
  • combo-box: address DAP violations (#4201) (febda85)
  • copy-button: add aria-label for the copy button (#4296) (173d51f)
  • data-table: added border to expanded row (#19) (19a5def)
  • data-table: ensure data table actions are hidden when no rows are selected (#4157) (f17d18e)
  • datepicker: add top offset to fix vertical icon alignment IE11 (#4235) (0c05b81)
  • DatePicker: add missing openCalendar click handler function (#4325) (ac0bfd6)
  • DatePicker: fix wrong dropdown position in range mode (#4133) (a14614e), closes flatpickr/flatpickr#1944
  • DatePicker: make appendTo back working (#4215) (4f6a383), closes #4158
  • Dropdown: resolve DAP violations (#4260) (ccbe7a8)
  • FileUploader: move role attribute to valid element (#4209) (198ccb0)
  • icons: add indeterminate checkbox icon (#4195) (42d1e19)
  • icons-angular: build improvements (#3798) (f686f05)
  • list-box: replace value attribute selectors (#3411) (1c5d33a)
  • ListBoxSelection: disallow clearSelection when disabled (#4148) (3c83c22)
  • modal: find primary focus element for selectorPrimaryFocus (#4172) (f7c4b99), closes #4088
  • Modal-story: disable focusTrap to allow storybook button (#4311) (8a618cd)
  • number-input: update how errorId is applied for aria-labelledby (#4295) (aa98ed6)
  • overflow-menu: update trigger's hover color (#4270) (1865b93)
  • OverflowMenu: prevent page scroll on menu navigation and selection (#4336) (e08d4dc)
  • pagination: update flex:1 and update top offset to fix IE11 (#4315) (53daf3c)
  • Pagination: dont reset page to 1 for pageSizes (#4239) (325f168)
  • ProgressIndicator: remove role attribute from checkmark svg (#4255) (dcff64c)
  • react: prevent default when handling react tooltip mouse events (#4196) (7761438)
  • search: remove role attr and label from skeleton (#4272) (0136897)
  • search: resolves DAP violations (#4286) (eaf1435)
  • search,textarea: update placeholder-colors mixin with accessible text color (#4281) (76cce51)
  • select: apply text color to focussed select for firefox (#4343) (838ce90)
  • sketch: update based on theme changes (#4274) (7d7eedd)
  • slider: use mono font face for start and end values, remove input border for disabled state (#4147) (13b62a6)
  • Slider: use lighter hue for focused and active slider colors (#4214) (e2239db)
  • storybook: add missing param for theme mixin (60e5450)
  • table-toolbar-search: unique id passed to search should be a string (#4159) (3c79258)
  • TableSelectRow: apply checkbox column class (#4167) (fa40005)
  • tag: fix for dark theme (#4119) (abc2ee6), closes #4022
  • tag: prevent focused close button icon from shrunk (#4290) (8c8a825), closes #4289
  • toggle: add top offset to fix vertical text alignment IE11 (#4213) (3aa5bfd)
  • tooltip: remove reset mixin from tooltip mixin (#4247) (a4cf889)
  • TooltipDefinition: set outline on focus (#4258) (6fbab24)
  • ui-shell: change the way to generate unique ID (#4291) (38ce4f6), closes #4288
  • UIShell: replace "javascript:void(0)" href value in HeaderMenu (#4354) (24e2a21)

Features

0.0.8 (2019-10-07)

Bug Fixes

  • react: rever devDep packages (99b6478)
  • react: wrong mixin call in storybook (22766c7)

Features

  • floating-menu: more robust floating menu offset (09b882e)
  • ui-shell: right panel state management (#13) (2466884)

0.0.7 (2019-09-23)

Bug Fixes

  • filtered data select all only selects filtered data (139ceb6)
  • indeterminate unselect all fixed (fb0345b)
  • DataTable: added edge case to cover filter with 0 matching results (9eb6b7a)
  • DataTable: batchactions onCancel now passes correct params (e8e5dac)
  • DataTable: updated documentation (748686a)
  • FileUploader: fixed settings import statements (#8) (aab024f)
  • inline-notification: improved list behavior (#9) (03a28e3)

Features

  • card: adding in initial version of card component (3900e64)
  • Resource header component (#6) (865260f)
  • themes: added Rocket mixin (#7) (8087cc1)

0.0.5 (2019-08-26)

0.0.4 (2019-08-16)

Bug Fixes

  • final change to vendor style script (446da52)
  • lerna config (370369e)
  • minor change to pkg.json (10a76b5)
  • more updates (7d51269)
  • package updates (19b4deb)
  • script wasnt excludng carbon-components (bd5a5a7)
  • updated e2e tests (b0680c3)
  • updated e2e tests (c8fc34e)
  • modal: removed 75% width constraint and added right padding of 3rem (0bce879)
  • updated test import (7dbd8bf)
  • updated vendor files in components (6b352a8)
  • updating artifacts (716bc22)
  • vendor files are properly copied now (312f1a9)

0.0.0 (2019-10-07)

Bug Fixes

  • components: make sure font weight is loaded (#4160) (f73d62a)
  • react: rever devDep packages (99b6478)
  • react: wrong mixin call in storybook (22766c7)

Features

  • floating-menu: more robust floating menu offset (09b882e)
  • toggle: add aria-label and label text props to skeletons (#4204) (fef8eb9)
  • ui-shell: right panel state management (#13) (2466884)

0.0.7 (2019-09-23)

Bug Fixes

  • filtered data select all only selects filtered data (139ceb6)
  • indeterminate unselect all fixed (fb0345b)
  • DataTable: added edge case to cover filter with 0 matching results (9eb6b7a)
  • DataTable: batchactions onCancel now passes correct params (e8e5dac)
  • DataTable: updated documentation (748686a)
  • FileUploader: fixed settings import statements (#8) (aab024f)
  • inline-notification: improved list behavior (#9) (03a28e3)

Features

  • card: adding in initial version of card component (3900e64)
  • Resource header component (#6) (865260f)
  • themes: added Rocket mixin (#7) (8087cc1)

0.0.5 (2019-08-26)

0.0.4 (2019-08-16)

Bug Fixes

  • final change to vendor style script (446da52)
  • lerna config (370369e)
  • minor change to pkg.json (10a76b5)
  • more updates (7d51269)
  • package updates (19b4deb)
  • script wasnt excludng carbon-components (bd5a5a7)
  • updated e2e tests (b0680c3)
  • updated e2e tests (c8fc34e)
  • modal: removed 75% width constraint and added right padding of 3rem (0bce879)
  • updated test import (7dbd8bf)
  • updated vendor files in components (6b352a8)
  • updating artifacts (716bc22)
  • vendor files are properly copied now (312f1a9)

0.0.0 (2019-09-23)

Bug Fixes

Features

  • card: adding in initial version of card component (3900e64)
  • colors: update colors to match V2 palette (#3957) (ed202f8)
  • data-table: add sticky header to React data table (#3876) (9b8a461)
  • file-uploader: add drop and drop file uploader (#3873) (0074e22)
  • link: introduce inline variant (#3859) (f167fd6), closes #3228
  • react-hooks: add useDebounce and useThrottle (#3993) (04934f2)
  • themes: added Rocket mixin (#7) (8087cc1)
  • tokens: add danger, text05, update text02 (#3962) (36113ce)
  • TooltipDefinition: support custom trigger element class names (#3995) (59d0e3c)
  • TooltipIcon: auto generate default IDs (#3954) (a18e734)
  • ui-shell: add alternative behaviours (#3990) (a537961)
  • add Carbon theme switcher to React storybook (#3989) (9f2894f)
  • Resource header component (#6) (865260f)

0.0.0 (2019-09-10)

Bug Fixes

  • filtered data select all only selects filtered data (139ceb6)
  • indeterminate unselect all fixed (fb0345b)
  • DataTable: added edge case to cover filter with 0 matching results (9eb6b7a)
  • DataTable: batchactions onCancel now passes correct params (e8e5dac)
  • DataTable: updated documentation (748686a)
  • dropdown: restore space bar and enter key item selection (#3926) (fc22773)
  • notification: fix low contrast markup (#3899) (95e02b9), closes #2927
  • skeleton: disable motion if prefers-reduced-motion is true (#3905) (d9aede1)
  • TableToolbarAction: adds forwardRef so focus management works as expected (#3918) (6dcabd4)

Features

  • FileUploader: add drag and drop file uploader (#3872) (8a4fae7)
  • floating-menu: add focus wrap element to components (#3652) (34d1fdd)
  • react-hooks: add react-hooks (#3896) (87e99d6)
  • TooltipIcon: port vanilla WCAG 2.1 fixes (#3842) (aeacad4)

0.0.5 (2019-08-26)

0.0.4 (2019-08-16)

Bug Fixes

  • final change to vendor style script (446da52)
  • lerna config (370369e)
  • minor change to pkg.json (10a76b5)
  • more updates (7d51269)
  • package updates (19b4deb)
  • script wasnt excludng carbon-components (bd5a5a7)
  • updated e2e tests (b0680c3)
  • updated e2e tests (c8fc34e)
  • modal: removed 75% width constraint and added right padding of 3rem (0bce879)
  • updated test import (7dbd8bf)
  • updated vendor files in components (6b352a8)
  • updating artifacts (716bc22)
  • vendor files are properly copied now (312f1a9)

0.0.0 (2019-08-26)

Sync with upstream

10.5.0 (2019-08-14)

0.0.0 (2019-08-16)

Synced with v10.5.0

Bug Fixes

  • modal: removed 75% width constraint and added right padding of 3rem (0bce879)