@carbon/ibm-products 2.28.0 → 2.29.0-alpha.10
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +226 -17
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +41 -9
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +226 -17
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +189 -9
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/APIKeyModal/APIKeyModal.d.ts +2 -1
- package/es/components/APIKeyModal/APIKeyModal.js +13 -9
- package/es/components/APIKeyModal/APIKeyModal.types.d.ts +206 -0
- package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +2 -0
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.d.ts +1 -2
- package/es/components/Datagrid/useInitialColumnSort.d.ts +1 -0
- package/es/components/Datagrid/useInitialColumnSort.js +42 -0
- package/es/components/Datagrid/useSortableColumns.d.ts +4 -0
- package/es/components/Datagrid/useSortableColumns.js +16 -16
- package/es/components/DescriptionList/DescriptionList.d.ts +42 -0
- package/es/components/DescriptionList/DescriptionList.js +88 -0
- package/es/components/DescriptionList/constants.d.ts +6 -0
- package/es/components/DescriptionList/constants.js +16 -0
- package/es/components/DescriptionList/index.d.ts +1 -0
- package/es/components/EmptyStates/EmptyStateContent.d.ts +1 -287
- package/es/components/HTTPErrors/HTTPErrorContent.d.ts +1 -293
- package/es/components/StatusIndicator/StatusIndicator.d.ts +5 -0
- package/es/components/StatusIndicator/StatusIndicator.js +100 -0
- package/es/components/StatusIndicator/StatusIndicatorStep.d.ts +5 -0
- package/es/components/StatusIndicator/index.d.ts +2 -0
- package/es/components/index.d.ts +2 -0
- package/es/global/js/package-settings.d.ts +3 -0
- package/es/global/js/package-settings.js +3 -0
- package/es/index.js +2 -0
- package/es/settings.d.ts +3 -0
- package/lib/components/APIKeyModal/APIKeyModal.d.ts +2 -1
- package/lib/components/APIKeyModal/APIKeyModal.js +13 -9
- package/lib/components/APIKeyModal/APIKeyModal.types.d.ts +206 -0
- package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +2 -0
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.d.ts +1 -2
- package/lib/components/Datagrid/useInitialColumnSort.d.ts +1 -0
- package/lib/components/Datagrid/useInitialColumnSort.js +46 -0
- package/lib/components/Datagrid/useSortableColumns.d.ts +4 -0
- package/lib/components/Datagrid/useSortableColumns.js +16 -15
- package/lib/components/DescriptionList/DescriptionList.d.ts +42 -0
- package/lib/components/DescriptionList/DescriptionList.js +95 -0
- package/lib/components/DescriptionList/constants.d.ts +6 -0
- package/lib/components/DescriptionList/constants.js +20 -0
- package/lib/components/DescriptionList/index.d.ts +1 -0
- package/lib/components/EmptyStates/EmptyStateContent.d.ts +1 -287
- package/lib/components/HTTPErrors/HTTPErrorContent.d.ts +1 -293
- package/lib/components/StatusIndicator/StatusIndicator.d.ts +5 -0
- package/lib/components/StatusIndicator/StatusIndicator.js +107 -0
- package/lib/components/StatusIndicator/StatusIndicatorStep.d.ts +5 -0
- package/lib/components/StatusIndicator/index.d.ts +2 -0
- package/lib/components/index.d.ts +2 -0
- package/lib/global/js/package-settings.d.ts +3 -0
- package/lib/global/js/package-settings.js +3 -0
- package/lib/index.js +10 -0
- package/lib/settings.d.ts +3 -0
- package/package.json +3 -3
- package/scss/components/DescriptionList/_carbon-imports.scss +9 -0
- package/scss/components/DescriptionList/_description-list.scss +103 -0
- package/scss/components/DescriptionList/_index-with-carbon.scss +9 -0
- package/scss/components/DescriptionList/_index.scss +8 -0
- package/scss/components/SidePanel/_side-panel.scss +6 -1
- package/scss/components/StatusIndicator/_carbon-imports.scss +12 -0
- package/scss/components/StatusIndicator/_index-with-carbon.scss +9 -0
- package/scss/components/StatusIndicator/_index.scss +8 -0
- package/scss/components/StatusIndicator/_status-indicator.scss +93 -0
- package/scss/components/Tearsheet/_tearsheet.scss +42 -16
- package/scss/components/_index-with-carbon.scss +2 -0
- package/scss/components/_index.scss +2 -0
@@ -0,0 +1,103 @@
|
|
1
|
+
//
|
2
|
+
// Copyright IBM Corp. 2024, 2024
|
3
|
+
//
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
6
|
+
//
|
7
|
+
|
8
|
+
// Standard imports.
|
9
|
+
@use '../../global/styles/project-settings' as c4p-settings;
|
10
|
+
@use '../../global/styles/mixins';
|
11
|
+
@use '@carbon/styles/scss/spacing' as *;
|
12
|
+
@use '@carbon/react/scss/type' as *;
|
13
|
+
@use '@carbon/react/scss/theme' as *;
|
14
|
+
|
15
|
+
// The block part of our conventional BEM class names (blockClass__E--M).
|
16
|
+
$block-class: #{c4p-settings.$pkg-prefix}--description-list;
|
17
|
+
$carbon-block-class: #{c4p-settings.$carbon-prefix}--structured-list;
|
18
|
+
|
19
|
+
.#{$block-class} .#{$carbon-block-class} {
|
20
|
+
margin-bottom: $spacing-07;
|
21
|
+
}
|
22
|
+
|
23
|
+
// ROW /////////////////////////
|
24
|
+
.#{$block-class} .#{$block-class}__body .#{$block-class}__row {
|
25
|
+
border-block-end-width: 0;
|
26
|
+
border-block-start-width: 0;
|
27
|
+
}
|
28
|
+
|
29
|
+
.#{$block-class}
|
30
|
+
.#{$carbon-block-class}
|
31
|
+
.#{$block-class}__body
|
32
|
+
.#{$block-class}__row:first-child {
|
33
|
+
border-block-start-width: 0;
|
34
|
+
}
|
35
|
+
.#{$block-class}
|
36
|
+
.#{$carbon-block-class}
|
37
|
+
.#{$block-class}__body
|
38
|
+
.#{$block-class}__row:last-child {
|
39
|
+
border-block-end-width: 0;
|
40
|
+
}
|
41
|
+
|
42
|
+
.#{$block-class}--bordered .#{$block-class}__body .#{$block-class}__row {
|
43
|
+
border-block-start-width: 1px;
|
44
|
+
}
|
45
|
+
|
46
|
+
// CELL /////////////////////////
|
47
|
+
.#{$block-class} .#{$block-class}__body .#{$block-class}__cell {
|
48
|
+
@include type-style('body-01');
|
49
|
+
|
50
|
+
padding: $spacing-03 $spacing-06 $spacing-03 $spacing-03;
|
51
|
+
}
|
52
|
+
|
53
|
+
.#{$block-class} .#{$block-class}__body .#{$block-class}__cell:first-of-type {
|
54
|
+
width: 1%;
|
55
|
+
padding-left: 0;
|
56
|
+
white-space: nowrap;
|
57
|
+
}
|
58
|
+
|
59
|
+
.#{$block-class} .#{$block-class}__body .#{$block-class}__cell:last-of-type {
|
60
|
+
padding-right: 0;
|
61
|
+
color: $text-primary;
|
62
|
+
}
|
63
|
+
|
64
|
+
.#{$block-class}
|
65
|
+
.#{$block-class}__body
|
66
|
+
.#{$block-class}__row:first-of-type
|
67
|
+
> .#{$block-class}__cell {
|
68
|
+
padding-top: 0;
|
69
|
+
}
|
70
|
+
|
71
|
+
.#{$block-class}
|
72
|
+
.#{$block-class}__body
|
73
|
+
.#{$block-class}__row:last-of-type
|
74
|
+
> .#{$block-class}__cell {
|
75
|
+
padding-bottom: 0;
|
76
|
+
}
|
77
|
+
|
78
|
+
.#{$block-class} .#{$block-class}__body .#{$block-class}__cell ul {
|
79
|
+
list-style: none;
|
80
|
+
}
|
81
|
+
|
82
|
+
.#{$block-class} .#{$block-class}__body .#{$block-class}__cell ul > li {
|
83
|
+
margin-bottom: $spacing-03;
|
84
|
+
}
|
85
|
+
|
86
|
+
// LG SIZE /////////////////////////
|
87
|
+
.#{$block-class}--lg .#{$block-class}__body .#{$block-class}__cell {
|
88
|
+
padding: $spacing-05 $spacing-06 $spacing-05 $spacing-05;
|
89
|
+
}
|
90
|
+
|
91
|
+
// SM SIZE /////////////////////////
|
92
|
+
.#{$block-class}--sm .#{$block-class}__body .#{$block-class}__cell {
|
93
|
+
padding: $spacing-02 $spacing-06 $spacing-02 $spacing-02;
|
94
|
+
}
|
95
|
+
|
96
|
+
// XS SIZE /////////////////////////
|
97
|
+
.#{$block-class}--xs .#{$block-class}__body .#{$block-class}__cell {
|
98
|
+
padding: $spacing-02;
|
99
|
+
}
|
100
|
+
|
101
|
+
.#{$block-class} .#{$carbon-block-class}-row--focused-within {
|
102
|
+
outline: none;
|
103
|
+
}
|
@@ -356,11 +356,16 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
|
|
356
356
|
}
|
357
357
|
|
358
358
|
.#{$block-class}__slug-and-close {
|
359
|
-
position:
|
359
|
+
position: fixed;
|
360
360
|
z-index: 10; /* must be higher than title container border bottom */
|
361
361
|
top: 0;
|
362
362
|
right: 0;
|
363
363
|
display: flex;
|
364
|
+
|
365
|
+
/* stylelint-disable-next-line max-nesting-depth */
|
366
|
+
@media (prefers-reduced-motion) {
|
367
|
+
position: absolute;
|
368
|
+
}
|
364
369
|
}
|
365
370
|
|
366
371
|
.#{$block-class}__actions-container {
|
@@ -0,0 +1,12 @@
|
|
1
|
+
//
|
2
|
+
// Copyright IBM Corp. 2024, 2024
|
3
|
+
//
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
6
|
+
//
|
7
|
+
|
8
|
+
// Import any Carbon component styles used from StatusIndicator in this file.
|
9
|
+
// StatusIndicator uses the following Carbon components:
|
10
|
+
// InlineLoading, Button
|
11
|
+
@use '@carbon/react/scss/components/inline-loading';
|
12
|
+
@use '@carbon/react/scss/components/button';
|
@@ -0,0 +1,93 @@
|
|
1
|
+
//
|
2
|
+
// Copyright IBM Corp. 2024, 2024
|
3
|
+
//
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
6
|
+
//
|
7
|
+
|
8
|
+
/* stylelint-disable carbon/layout-token-use */
|
9
|
+
/* stylelint-disable function-no-unknown */
|
10
|
+
|
11
|
+
// Standard imports.
|
12
|
+
@use '../../global/styles/project-settings' as c4p-settings;
|
13
|
+
@use '../../global/styles/mixins';
|
14
|
+
|
15
|
+
// Other Carbon settings if needed
|
16
|
+
@use '@carbon/layout/scss/convert' as *;
|
17
|
+
@use '@carbon/styles/scss/type' as *;
|
18
|
+
@use '@carbon/styles/scss/spacing' as *;
|
19
|
+
@use '@carbon/styles/scss/theme' as *;
|
20
|
+
@use '@carbon/styles/scss/themes';
|
21
|
+
@use '@carbon/styles/scss/type';
|
22
|
+
|
23
|
+
// The block part of our conventional BEM class names (blockClass__E--M).
|
24
|
+
$block-class: #{c4p-settings.$pkg-prefix}--status-indicator;
|
25
|
+
$block-class-step: #{c4p-settings.$pkg-prefix}--status-indicator-step;
|
26
|
+
|
27
|
+
// Default styling
|
28
|
+
.#{$block-class}__title {
|
29
|
+
@include type-style('heading-02');
|
30
|
+
|
31
|
+
margin-bottom: $spacing-02;
|
32
|
+
}
|
33
|
+
.#{$block-class-step}__details {
|
34
|
+
display: flex;
|
35
|
+
min-height: $spacing-07;
|
36
|
+
align-items: center;
|
37
|
+
}
|
38
|
+
.#{$block-class-step}__icon {
|
39
|
+
position: relative;
|
40
|
+
display: flex;
|
41
|
+
width: $spacing-06;
|
42
|
+
}
|
43
|
+
.#{$block-class-step}__text {
|
44
|
+
@include type-style('body-compact-01');
|
45
|
+
|
46
|
+
color: $text-primary;
|
47
|
+
}
|
48
|
+
.#{$block-class} .#{$block-class}__button {
|
49
|
+
align-items: center;
|
50
|
+
margin-top: $spacing-01;
|
51
|
+
margin-left: $spacing-03;
|
52
|
+
}
|
53
|
+
.#{$block-class} .#{$block-class}__button:not([disabled]) svg {
|
54
|
+
margin-left: $spacing-03;
|
55
|
+
fill: currentColor;
|
56
|
+
}
|
57
|
+
|
58
|
+
// Text
|
59
|
+
.#{$block-class-step}--inactive .#{$block-class-step}__text {
|
60
|
+
color: $text-secondary;
|
61
|
+
}
|
62
|
+
.#{$block-class-step}--inactive svg {
|
63
|
+
fill: $icon-primary;
|
64
|
+
}
|
65
|
+
|
66
|
+
// Icons
|
67
|
+
//
|
68
|
+
// Override <InlineLoading's> large margins.
|
69
|
+
.#{$block-class-step}--active .#{$block-class-step}__icon {
|
70
|
+
margin-right: 0;
|
71
|
+
}
|
72
|
+
.#{$block-class-step}--active
|
73
|
+
.#{c4p-settings.$carbon-prefix}--inline-loading__animation {
|
74
|
+
margin-right: to-rem(7px);
|
75
|
+
}
|
76
|
+
// /Override
|
77
|
+
//
|
78
|
+
.#{$block-class-step}--error svg {
|
79
|
+
fill: $support-error;
|
80
|
+
}
|
81
|
+
.#{$block-class-step}--finished svg {
|
82
|
+
fill: $support-success;
|
83
|
+
}
|
84
|
+
|
85
|
+
// Error message
|
86
|
+
.#{$block-class-step}__error-message {
|
87
|
+
@include type-style('label-01');
|
88
|
+
|
89
|
+
margin-top: to-rem(-2px);
|
90
|
+
margin-bottom: to-rem(6px);
|
91
|
+
margin-left: $spacing-06;
|
92
|
+
color: $text-error;
|
93
|
+
}
|
@@ -23,19 +23,39 @@
|
|
23
23
|
$block-class: #{$pkg-prefix}--tearsheet;
|
24
24
|
|
25
25
|
// stylelint-disable-next-line carbon/theme-token-use
|
26
|
-
$overlay-color: $gray-100;
|
27
|
-
|
28
26
|
$motion-duration: $duration-moderate-02;
|
29
27
|
|
30
28
|
@include block-wrap($block-class) {
|
31
29
|
&.#{$block-class} {
|
30
|
+
--overlay-color: #{$overlay};
|
31
|
+
--overlay-opacity: 1;
|
32
|
+
|
33
|
+
&::before {
|
34
|
+
position: absolute;
|
35
|
+
display: block;
|
36
|
+
background: var(--overlay-color);
|
37
|
+
content: '';
|
38
|
+
inset: 0;
|
39
|
+
opacity: var(--overlay-opacity);
|
40
|
+
|
41
|
+
transition: background-color $motion-duration motion(exit, expressive),
|
42
|
+
opacity $motion-duration motion(exit, expressive);
|
43
|
+
|
44
|
+
@media (prefers-reduced-motion: reduce) {
|
45
|
+
transition: none;
|
46
|
+
}
|
47
|
+
}
|
48
|
+
|
49
|
+
&.#{$block-class}.#{$block-class} {
|
50
|
+
/* tearsheet uses --overlay-color and --overlay-opacity in ::before */
|
51
|
+
background: initial;
|
52
|
+
}
|
53
|
+
|
32
54
|
z-index: utilities.z('modal') + 1;
|
33
55
|
align-items: flex-end;
|
34
56
|
color: $text-primary;
|
35
57
|
// stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
|
36
|
-
transition: visibility 0s linear $motion-duration
|
37
|
-
background-color $motion-duration motion(exit, expressive),
|
38
|
-
opacity $motion-duration motion(exit, expressive);
|
58
|
+
transition: visibility 0s linear $motion-duration;
|
39
59
|
--#{$block-class}--stacking-scale-factor-single: 0.95;
|
40
60
|
--#{$block-class}--stacking-scale-factor-double: 0.9;
|
41
61
|
}
|
@@ -53,27 +73,26 @@ $motion-duration: $duration-moderate-02;
|
|
53
73
|
}
|
54
74
|
|
55
75
|
&.#{$block-class}--stacked-1-of-2 {
|
76
|
+
--overlay-opacity: 0.67;
|
77
|
+
|
56
78
|
z-index: utilities.z('modal') - 1;
|
57
|
-
// stylelint-disable-next-line carbon/theme-token-use
|
58
|
-
background-color: rgba($overlay-color, 0.33);
|
59
79
|
}
|
60
80
|
|
61
81
|
&.#{$block-class}--stacked-1-of-3 {
|
82
|
+
--overlay-opacity: 0.22;
|
83
|
+
|
62
84
|
z-index: utilities.z('modal') - 2;
|
63
|
-
// stylelint-disable-next-line carbon/theme-token-use
|
64
|
-
background-color: rgba($overlay-color, 0.11);
|
65
85
|
}
|
66
86
|
|
67
87
|
&.#{$block-class}--stacked-2-of-3 {
|
88
|
+
--overlay-opacity: 0.5;
|
89
|
+
|
68
90
|
z-index: utilities.z('modal') - 1;
|
69
|
-
// stylelint-disable-next-line carbon/theme-token-use
|
70
|
-
background-color: rgba($overlay-color, 0.25);
|
71
91
|
}
|
72
92
|
|
73
93
|
&.#{$block-class}--stacked-2-of-2,
|
74
94
|
&.#{$block-class}--stacked-3-of-3 {
|
75
|
-
|
76
|
-
background-color: rgba($overlay-color, 0.25);
|
95
|
+
--overlay-opacity: 0.5;
|
77
96
|
}
|
78
97
|
|
79
98
|
.#{$block-class}__container {
|
@@ -238,12 +257,14 @@ $motion-duration: $duration-moderate-02;
|
|
238
257
|
&.#{$block-class}--wide
|
239
258
|
.#{$block-class}__header.#{$block-class}__header--with-close-icon,
|
240
259
|
&.#{$block-class}--has-slug .#{$block-class}__header.#{$block-class}__header {
|
241
|
-
padding-
|
260
|
+
padding-inline-end: $spacing-11;
|
242
261
|
}
|
243
262
|
|
244
263
|
&.#{$block-class}--wide.#{$block-class}--has-slug
|
245
264
|
.#{$block-class}__header.#{$block-class}__header--with-close-icon {
|
246
|
-
|
265
|
+
/* spacing 11 plus additional space for slug/close */
|
266
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
267
|
+
padding-inline-end: calc(#{$spacing-11 + $spacing-09});
|
247
268
|
}
|
248
269
|
|
249
270
|
&.#{$block-class}--narrow .#{$block-class}__header-description {
|
@@ -311,7 +332,7 @@ $motion-duration: $duration-moderate-02;
|
|
311
332
|
flex-grow: 1;
|
312
333
|
}
|
313
334
|
|
314
|
-
&.#{$block-class}--has-slug .#{$block-class}
|
335
|
+
&.#{$block-class}--has-slug .#{$block-class}__content {
|
315
336
|
@include utilities.callout-gradient('default', 0);
|
316
337
|
|
317
338
|
box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
|
@@ -367,6 +388,11 @@ $motion-duration: $duration-moderate-02;
|
|
367
388
|
background: $background;
|
368
389
|
}
|
369
390
|
|
391
|
+
&.#{$block-class}--has-slug {
|
392
|
+
/* stylelint-disable-next-line carbon/theme-token-use */
|
393
|
+
--overlay-color: #{$ai-overlay};
|
394
|
+
}
|
395
|
+
|
370
396
|
&.#{$block-class}--has-slug:not(.#{$block-class}--has-close)
|
371
397
|
.#{$carbon-prefix}--slug {
|
372
398
|
inset-inline-end: 0;
|
@@ -60,7 +60,9 @@
|
|
60
60
|
@use './CoachmarkOverlayElements/index-with-carbon' as *;
|
61
61
|
@use './CoachmarkStack/index-with-carbon' as *;
|
62
62
|
@use './DelimitedList/index-with-carbon' as *;
|
63
|
+
@use './DescriptionList/index-with-carbon' as *;
|
63
64
|
@use './FullPageError/index-with-carbon' as *;
|
64
65
|
@use './SearchBar/index-with-carbon' as *;
|
65
66
|
@use './StringFormatter/index-with-carbon' as *;
|
66
67
|
@use './UserAvatar/index-with-carbon' as *;
|
68
|
+
@use './StatusIndicator/index-with-carbon' as *;
|
@@ -68,7 +68,9 @@
|
|
68
68
|
@use './InterstitialScreenView';
|
69
69
|
@use './InterstitialScreenViewModule';
|
70
70
|
@use './DelimitedList';
|
71
|
+
@use './DescriptionList';
|
71
72
|
@use './FullPageError';
|
72
73
|
@use './SearchBar';
|
73
74
|
@use './StringFormatter';
|
74
75
|
@use './UserAvatar';
|
76
|
+
@use './StatusIndicator';
|