@carbon/ibm-products 2.1.3 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/css/index-full-carbon.css +188 -188
  2. package/css/index-full-carbon.min.css +4 -4
  3. package/css/index-full-carbon.min.css.map +1 -1
  4. package/css/index-without-carbon-released-only.css +144 -144
  5. package/css/index-without-carbon-released-only.min.css +2 -2
  6. package/css/index-without-carbon-released-only.min.css.map +1 -1
  7. package/css/index-without-carbon.css +188 -188
  8. package/css/index-without-carbon.min.css +4 -4
  9. package/css/index-without-carbon.min.css.map +1 -1
  10. package/css/index.css +172 -172
  11. package/css/index.min.css +3 -3
  12. package/css/index.min.css.map +1 -1
  13. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +22 -8
  14. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +2 -1
  15. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js +13 -0
  16. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +4 -20
  17. package/es/components/Datagrid/index.js +2 -1
  18. package/es/components/Datagrid/utils/DatagridActions.js +7 -7
  19. package/es/components/index.js +1 -1
  20. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +22 -8
  21. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +8 -1
  22. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js +20 -0
  23. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +4 -20
  24. package/lib/components/Datagrid/index.js +8 -1
  25. package/lib/components/Datagrid/utils/DatagridActions.js +46 -46
  26. package/lib/components/index.js +6 -0
  27. package/package.json +2 -2
  28. package/scss/components/AddSelect/_add-select.scss +6 -6
  29. package/scss/components/CreateFullPage/_create-full-page.scss +3 -3
  30. package/scss/components/CreateModal/_create-modal.scss +3 -3
  31. package/scss/components/CreateSidePanel/_create-side-panel.scss +4 -4
  32. package/scss/components/CreateTearsheet/_create-tearsheet.scss +2 -2
  33. package/scss/components/CreateTearsheet/_storybook-styles.scss +1 -1
  34. package/scss/components/CreateTearsheetNarrow/_create-tearsheet-narrow.scss +2 -2
  35. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +5 -5
  36. package/scss/components/Datagrid/_storybook-styles.scss +2 -2
  37. package/scss/components/EditSidePanel/_edit-side-panel.scss +2 -2
  38. package/scss/components/EditTearsheet/_edit-tearsheet.scss +2 -2
  39. package/scss/components/EditTearsheet/_storybook-styles.scss +1 -1
  40. package/scss/components/ImportModal/_import-modal.scss +1 -1
  41. package/scss/components/NotificationsPanel/_notifications-panel.scss +2 -2
  42. package/scss/components/OptionsTile/_storybook-styles.scss +1 -1
  43. package/scss/components/PageHeader/_page-header.scss +4 -4
  44. package/scss/components/Saving/_saving.scss +1 -1
  45. package/scss/components/SidePanel/_side-panel.scss +3 -3
  46. package/scss/components/TagSet/_tag-set.scss +1 -1
  47. package/scss/components/Tearsheet/_tearsheet.scss +2 -2
  48. package/scss/components/UserProfileImage/_user-profile-image.scss +2 -2
@@ -56,7 +56,7 @@ $header-cell-background: $layer-accent-01;
56
56
 
57
57
  .#{$block-class}__th,
58
58
  .#{$block-class}__td {
59
- @include type.type-style('body-short-01');
59
+ @include type.type-style('body-compact-01');
60
60
 
61
61
  width: 100%;
62
62
  height: 100%;
@@ -117,13 +117,13 @@ $header-cell-background: $layer-accent-01;
117
117
  text-align: left;
118
118
  }
119
119
  .#{$block-class}__th {
120
- @include type.type-style('productive-heading-01');
120
+ @include type.type-style('heading-compact-01');
121
121
 
122
122
  color: $text-primary;
123
123
  text-align: left;
124
124
  }
125
125
  .#{$block-class}__cell-editor {
126
- @include type.type-style('body-short-01');
126
+ @include type.type-style('body-compact-01');
127
127
  @include utilities.focus-outline('reset');
128
128
 
129
129
  position: absolute;
@@ -151,7 +151,7 @@ $header-cell-background: $layer-accent-01;
151
151
  }
152
152
  }
153
153
  .#{$block-class}__cell-editor-ruler {
154
- @include type.type-style('body-short-01');
154
+ @include type.type-style('body-compact-01');
155
155
 
156
156
  position: absolute;
157
157
  overflow: hidden;
@@ -167,7 +167,7 @@ $header-cell-background: $layer-accent-01;
167
167
  }
168
168
  }
169
169
  .#{$block-class}__active-cell--highlight {
170
- @include type.type-style('body-short-01');
170
+ @include type.type-style('body-compact-01');
171
171
  @include set-body-borders();
172
172
 
173
173
  position: absolute;
@@ -66,13 +66,13 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
66
66
  }
67
67
 
68
68
  .#{$block-class}__side-panel-value {
69
- @include type.type-style('body-short-01');
69
+ @include type.type-style('body-compact-01');
70
70
 
71
71
  padding-left: $spacing-03;
72
72
  }
73
73
 
74
74
  .#{$block-class}__side-panel-section-header {
75
- @include type.type-style('productive-heading-01');
75
+ @include type.type-style('heading-compact-01');
76
76
 
77
77
  padding-bottom: $spacing-02;
78
78
  }
@@ -32,13 +32,13 @@ $side-panel-block-class: #{c4p-settings.$pkg-prefix}--side-panel;
32
32
  }
33
33
 
34
34
  .#{$block-class}__form-title-text {
35
- @include type.type-style('productive-heading-02');
35
+ @include type.type-style('heading-compact-02');
36
36
 
37
37
  padding-bottom: $spacing-03;
38
38
  }
39
39
 
40
40
  .#{$block-class}__form-description-text {
41
- @include type.type-style('body-long-01');
41
+ @include type.type-style('body-01');
42
42
  }
43
43
 
44
44
  &.#{$side-panel-block-class}
@@ -115,14 +115,14 @@ $tearsheet-fieldset-class: #{c4p-settings.$pkg-prefix}--tearsheet-edit__form--fi
115
115
 
116
116
  .#{$block-class} .#{$block-class}__section--subtitle,
117
117
  .#{$block-class} .#{$block-class}__form--subtitle {
118
- @include type.type-style('productive-heading-01');
118
+ @include type.type-style('heading-compact-01');
119
119
 
120
120
  margin-bottom: $spacing-03;
121
121
  }
122
122
 
123
123
  .#{$block-class} .#{$block-class}__section--description,
124
124
  .#{$block-class} .#{$block-class}__form--description {
125
- @include type.type-style('body-long-01');
125
+ @include type.type-style('body-01');
126
126
 
127
127
  margin-bottom: $spacing-06;
128
128
  }
@@ -16,7 +16,7 @@
16
16
  $preview-block-class: #{c4p-settings.$pkg-prefix}--tearsheet-edit-multi-form;
17
17
 
18
18
  .#{$preview-block-class}__description {
19
- @include type.type-style('body-short-01');
19
+ @include type.type-style('body-compact-01');
20
20
 
21
21
  padding-bottom: $spacing-04;
22
22
  }
@@ -55,7 +55,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--import-modal;
55
55
  .#{$block-class} .#{$block-class}__file-drop-header,
56
56
  .#{$block-class} .#{$block-class}__label {
57
57
  margin-bottom: $spacing-03;
58
- @include type.type-style('productive-heading-01');
58
+ @include type.type-style('heading-compact-01');
59
59
  }
60
60
 
61
61
  .#{$block-class}__helper-text {
@@ -82,7 +82,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
82
82
  color: $text-primary;
83
83
  }
84
84
  .#{$block-class}__header {
85
- @include type.type-style('productive-heading-01');
85
+ @include type.type-style('heading-compact-01');
86
86
 
87
87
  margin: 0;
88
88
  }
@@ -252,7 +252,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
252
252
  justify-content: center;
253
253
  margin-top: $spacing-13;
254
254
  .#{c4p-settings.$pkg-prefix}-subtext {
255
- @include type.type-style('body-short-01');
255
+ @include type.type-style('body-compact-01');
256
256
  }
257
257
  }
258
258
  .#{$block-class}__main-section {
@@ -18,7 +18,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--options-tile;
18
18
  }
19
19
 
20
20
  .#{$block-class}__content p {
21
- @include type.type-style('body-long-01');
21
+ @include type.type-style('body-01');
22
22
 
23
23
  margin-bottom: $spacing-06;
24
24
  }
@@ -431,7 +431,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
431
431
  }
432
432
 
433
433
  .#{$block-class}__title {
434
- @include type.type-style('productive-heading-04');
434
+ @include type.type-style('heading-04');
435
435
 
436
436
  min-height: $spacing-08;
437
437
  overflow-x: hidden;
@@ -538,11 +538,11 @@ $right-section-alt-width: 100% - $left-section-alt-width;
538
538
  }
539
539
 
540
540
  .#{$block-class}__subtitle {
541
- @include type.type-style('body-long-01');
541
+ @include type.type-style('body-01');
542
542
  }
543
543
 
544
544
  .#{$block-class}__available-row {
545
- @include type.type-style('body-long-01');
545
+ @include type.type-style('body-01');
546
546
 
547
547
  margin-top: $spacing-03;
548
548
 
@@ -557,7 +557,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
557
557
 
558
558
  .#{$block-class}__available-row * {
559
559
  // default content of available row to body-long-01
560
- @include type.type-style('body-long-01');
560
+ @include type.type-style('body-01');
561
561
  }
562
562
 
563
563
  .#{$block-class}__navigation-row {
@@ -26,7 +26,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--saving;
26
26
  }
27
27
 
28
28
  .#{$block-class}__text {
29
- @include type.type-style('body-short-01');
29
+ @include type.type-style('body-compact-01');
30
30
  }
31
31
 
32
32
  .#{$block-class}__buttons {
@@ -164,7 +164,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
164
164
  );
165
165
  }
166
166
  .#{$block-class}__title-text {
167
- @include type.type-style('productive-heading-03');
167
+ @include type.type-style('heading-03');
168
168
  @include setCommonTitleStyles();
169
169
 
170
170
  position: inherit;
@@ -184,7 +184,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
184
184
  white-space: nowrap;
185
185
  }
186
186
  .#{$block-class}__collapsed-title-text {
187
- @include type.type-style('productive-heading-02');
187
+ @include type.type-style('heading-compact-02');
188
188
  @include setCommonTitleStyles();
189
189
 
190
190
  position: absolute;
@@ -194,7 +194,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
194
194
  transform: translateY(var(--#{$block-class}--collapsed-title-y-position));
195
195
  }
196
196
  .#{$block-class}__subtitle-text {
197
- @include type.type-style('body-short-01');
197
+ @include type.type-style('body-compact-01');
198
198
 
199
199
  overflow: hidden;
200
200
  padding: 0 $spacing-09 $spacing-05 $spacing-05;
@@ -145,7 +145,7 @@ $block-class-modal: #{$_block-class}-modal;
145
145
 
146
146
  .#{$block-class-overflow}__tag-item,
147
147
  .#{$block-class-overflow}__tag-item .#{$carbon-prefix}--tag {
148
- @include type.type-style('body-short-01');
148
+ @include type.type-style('body-compact-01');
149
149
 
150
150
  display: block;
151
151
  overflow: hidden;
@@ -183,7 +183,7 @@ $motion-duration: $duration-moderate-02;
183
183
 
184
184
  &.#{$block-class}--wide
185
185
  .#{$carbon-prefix}--modal-header__heading.#{$block-class}__heading {
186
- @include type.type-style('productive-heading-04');
186
+ @include type.type-style('heading-04');
187
187
  }
188
188
 
189
189
  .#{$block-class}__header-description {
@@ -191,7 +191,7 @@ $motion-duration: $duration-moderate-02;
191
191
  overflow: hidden;
192
192
  max-width: 100%;
193
193
  margin-top: $spacing-05;
194
- @include type.type-style('body-short-01');
194
+ @include type.type-style('body-compact-01');
195
195
 
196
196
  -webkit-box-orient: vertical;
197
197
  -webkit-line-clamp: 2;
@@ -128,12 +128,12 @@ $theme-keys: map-keys($themes);
128
128
 
129
129
  .#{$block-class}--xl {
130
130
  @include size('xl');
131
- @include type.type-style('productive-heading-04');
131
+ @include type.type-style('heading-04');
132
132
  }
133
133
 
134
134
  .#{$block-class}--lg {
135
135
  @include size('lg');
136
- @include type.type-style('body-short-01');
136
+ @include type.type-style('body-compact-01');
137
137
  }
138
138
 
139
139
  .#{$block-class}--md {