UNPKG

carbon-components

Version:

The Carbon Design System is IBM’s open-source design system for products and experiences.

www.carbondesignsystem.com

carbon-design-system/carbon

94 lines (84 loc) • 9.74 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
## Data Table ### HTML Aside from using new icons from the [`carbon-elements`](https://github.com/IBM/carbon-elements) package, there are several structural changes and new selectors in the Data Table component. Please see the new structure below and reference the [data table page](https://next.carbondesignsystem.com/components/data-table/code) in our site to copy the specified new markup. React and other framework variants should reflect the changes automatically. **Things to note**: - All `-v2`'s in selectors have been removed - All SVG icons have changed to new icons. - Structural changes and new selectors in the table title. See structure below and SCSS section for more details. - Structural changes and new selectors in the table toolbar. See structure below and SCSS section for more details. - Toolbar overflow menu now uses the overflow menu component `<ul>` markup instead of just `button.bx--batch-actions` - `bx—search` container in toolbar no longer has the `bx--search—light` class - Batch action buttons no longer have `bx--btn—ghost` class - New markup/selector involving expandable features includes a `div.bx--child-row-inner-container` as a wrapper for content within the child row `td`. - New markup/selectors involving sortable features include an additional icon `bx--table-sort__icon-unsorted` for non-sorted state, and a new class for sortable data table `bx--data-table—-sort`. - New selectors `bx—table-column-checkbox` and `bx—table-column-menu` for checkbox and overflow menu `td`'s and `th`'s. - New selector for `li` within a row overflow menu `bx--table-row--menu-option`. See SCSS section for more details. **New Structure**: ```bash bx--data-table-container ├── bx--data-table-header │ ├── bx--data-table-header__title │ └── bx--data-table-header__description ├── bx--table-toolbar │ ├── bx--batch-actions │ │ ├── bx--batch-action-list │ │ └── bx--batch-summary │ │ └── bx--batch-summary__para │ └── bx--toolbar-content │ ├── bx--toolbar-search-container-expandable (bx--toolbar-search-container-persistent) │ ├── bx--overflow-menu bx--toolbar-action │ └── bx--btn--primary └── bx--data-table ├── thead └── tbody pagination ``` ### Selectors | Category | v9 | v10 | Notes | | --------------------------- | -------------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------ | | **Table container** | `.bx--data-table-v2-container` | `.bx--data-table-container` | :eyes: Changed | | **Table header** | `.bx--data-table-v2-header` | `.bx--data-table-header` | :eyes: Changed; Also, now a container class on a `div` instead of an `h4` | | | - | `.bx--data-table-header__title` | :sparkles: New | | | - | `.bx--data-table-header__description` | :sparkles: New | | **Toolbar** | `bx--toolbar-search-container` | `bx--toolbar-search-container-expandable` | :sparkles: New; Default is expandable search | | | - | `bx--toolbar-search-container-persistent` | :sparkles: New; Optional persistent search | | **Data Table** | `.bx--data-table-v2--no-border` | - | :skull: Removed | | | `.bx--data-table-v2--static` | `.bx--data-table--static` | :eyes: Changed | | | `.bx--data-table-v2--selected` | `.bx--data-table--selected` | :eyes: Changed | | | `.bx--data-table-v2--zebra` | `.bx--data-table--zebra` | :eyes: Changed | | | - | `.bx--data-table—-sort` | :sparkles: New | | | `.bx--data-table-v2—-small` | `.bx--data-table—-small` | :eyes: Changed | | | `.bx--data-table-v2—-compact` | `.bx--data-table—-compact` | :eyes: Changed | | | `.bx--data-table-v2—-tall` | `.bx--data-table—-tall` | :eyes: Changed | | | `.bx--data-table-v2--compact` | `.bx--data-table--compact` | :eyes: Changed | | | `.bx--data-table-v2--short` | `.bx--data-table--short` | :eyes: Changed | | | `.bx--data-table-v2--tall` | `.bx--data-table--tall` | :eyes: Changed | | **Table Rows** | `.bx--parent-row-v2` | `.bx--parent-row` | :eyes: Changed | | | `.bx--expandable-row-v2` | `.bx--expandable-row` | :eyes: Changed | | | `.bx--expandable-row--hidden-v2` | `.bx--expandable-row--hidden` | :eyes: Changed | | | `.bx--expandable-row--hover-v2` | `.bx--expandable-row--hover` | :eyes: Changed | | **Table Columns** | - | `.bx—table-column-checkbox` | :sparkles: New; Used in `th`'s and `td`'s with checkbox. | | | - | `.bx—table-column-menu` | :sparkles: New; Used in `td`'s with overflow menu | | | `.bx—table-expand-v2` | `.bx—table-expand` | :eyes: Changed | | | - | `.bx--child-row-inner-container` | :sparkles: New; Container inside expand child row `td`, allows for motion animation | | **Buttons, Icons and more** | `bx--table-sort-v2` | `bx--table-sort` | :eyes: Changed | | | `bx--table-sort-v2__icon` | `bx--table-sort__icon` | :eyes: Changed | | | - | `.bx--table-sort__icon-unsorted` | :sparkles: New | | | `bx--table-expand-v2__button` | `bx--table-expand__button` | :eyes: Changed | | | `bx--table-expand-v2__svg` | `bx--table-expand__svg` | :eyes: Changed | | | - | `bx--table-row--menu-option` | :sparkles: New; Additional class added to `li.bx--overflow-menu-options__option` in table row overflow menus |