@carbon/ibm-products 1.9.0 → 1.10.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.
- package/css/index-full-carbon.css +123 -5628
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +4 -4
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +45 -3424
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +3 -3
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +91 -3894
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +4 -4
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +91 -3895
- package/css/index.css.map +1 -1
- package/css/index.min.css +4 -4
- package/css/index.min.css.map +1 -1
- package/es/components/AddSelect/AddSelect.js +11 -6
- package/es/components/AddSelect/AddSelectColumn.js +44 -7
- package/es/components/ButtonMenu/ButtonMenu.js +1 -1
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +316 -133
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +113 -69
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +22 -5
- package/es/components/DataSpreadsheet/checkActiveHeaderCell.js +34 -0
- package/es/components/DataSpreadsheet/createActiveCellFn.js +3 -1
- package/es/components/InlineEdit/InlineEdit.js +11 -21
- package/es/components/OptionsTile/OptionsTile.js +11 -1
- package/es/components/PageHeader/PageHeader.js +48 -40
- package/es/components/PageHeader/PageHeaderUtils.js +3 -7
- package/es/components/TagSet/TagSet.js +12 -3
- package/es/components/UserProfileImage/UserProfileImage.js +2 -1
- package/lib/components/AddSelect/AddSelect.js +11 -6
- package/lib/components/AddSelect/AddSelectColumn.js +55 -13
- package/lib/components/ButtonMenu/ButtonMenu.js +1 -1
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +317 -134
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +112 -70
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +24 -5
- package/lib/components/DataSpreadsheet/checkActiveHeaderCell.js +45 -0
- package/lib/components/DataSpreadsheet/createActiveCellFn.js +3 -1
- package/lib/components/InlineEdit/InlineEdit.js +10 -20
- package/lib/components/OptionsTile/OptionsTile.js +11 -1
- package/lib/components/PageHeader/PageHeader.js +47 -40
- package/lib/components/PageHeader/PageHeaderUtils.js +3 -7
- package/lib/components/TagSet/TagSet.js +13 -3
- package/lib/components/UserProfileImage/UserProfileImage.js +2 -1
- package/package.json +14 -14
- package/scss/components/AddSelect/_add-select.scss +27 -14
- package/scss/components/CreateInfluencer/_create-influencer.scss +2 -0
- package/scss/components/CreateModal/_create-modal.scss +1 -0
- package/scss/components/CreateTearsheet/_create-tearsheet.scss +1 -0
- package/scss/components/CreateTearsheetNarrow/_create-tearsheet-narrow.scss +1 -0
- package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +12 -7
- package/scss/components/InlineEdit/_inline-edit.scss +20 -11
- package/scss/components/InlineEdit/_storybook-styles.scss +1 -0
- package/scss/components/LoadingBar/_loading-bar.scss +13 -0
- package/scss/components/NotificationsPanel/_notifications-panel.scss +3 -0
- package/scss/components/PageHeader/_page-header.scss +2 -0
- package/scss/components/SidePanel/_side-panel.scss +11 -4
- package/scss/components/StatusIcon/_status-icon.scss +1 -0
- package/scss/components/UserProfileImage/_user-profile-image.scss +9 -0
- package/scss/components/WebTerminal/_web-terminal.scss +2 -0
|
@@ -23,41 +23,49 @@ $loading-bar__small-height: 4px;
|
|
|
23
23
|
left: 0;
|
|
24
24
|
width: 0%;
|
|
25
25
|
}
|
|
26
|
+
|
|
26
27
|
20% {
|
|
27
28
|
right: auto;
|
|
28
29
|
left: 0;
|
|
29
30
|
width: 100%;
|
|
30
31
|
}
|
|
32
|
+
|
|
31
33
|
28% {
|
|
32
34
|
right: 0;
|
|
33
35
|
left: auto;
|
|
34
36
|
width: 100%;
|
|
35
37
|
}
|
|
38
|
+
|
|
36
39
|
51% {
|
|
37
40
|
right: 0;
|
|
38
41
|
left: auto;
|
|
39
42
|
width: 0%;
|
|
40
43
|
}
|
|
44
|
+
|
|
41
45
|
58% {
|
|
42
46
|
right: 0;
|
|
43
47
|
left: auto;
|
|
44
48
|
width: 0%;
|
|
45
49
|
}
|
|
50
|
+
|
|
46
51
|
82% {
|
|
47
52
|
right: 0;
|
|
48
53
|
left: auto;
|
|
49
54
|
width: 100%;
|
|
50
55
|
}
|
|
56
|
+
|
|
51
57
|
83% {
|
|
52
58
|
right: auto;
|
|
53
59
|
left: 0;
|
|
54
60
|
width: 100%;
|
|
55
61
|
}
|
|
62
|
+
|
|
56
63
|
96% {
|
|
57
64
|
right: auto;
|
|
58
65
|
left: 0;
|
|
59
66
|
width: 0%;
|
|
60
67
|
}
|
|
68
|
+
|
|
61
69
|
100% {
|
|
62
70
|
right: auto;
|
|
63
71
|
left: 0;
|
|
@@ -71,6 +79,7 @@ $loading-bar__small-height: 4px;
|
|
|
71
79
|
left: 0;
|
|
72
80
|
width: 0%;
|
|
73
81
|
}
|
|
82
|
+
|
|
74
83
|
100% {
|
|
75
84
|
right: auto;
|
|
76
85
|
left: 0;
|
|
@@ -84,11 +93,13 @@ $loading-bar__small-height: 4px;
|
|
|
84
93
|
left: 0;
|
|
85
94
|
width: 0%;
|
|
86
95
|
}
|
|
96
|
+
|
|
87
97
|
92% {
|
|
88
98
|
right: auto;
|
|
89
99
|
left: 0;
|
|
90
100
|
width: 100%;
|
|
91
101
|
}
|
|
102
|
+
|
|
92
103
|
100% {
|
|
93
104
|
right: auto;
|
|
94
105
|
left: 0;
|
|
@@ -100,9 +111,11 @@ $loading-bar__small-height: 4px;
|
|
|
100
111
|
0% {
|
|
101
112
|
opacity: 1;
|
|
102
113
|
}
|
|
114
|
+
|
|
103
115
|
92% {
|
|
104
116
|
opacity: 1;
|
|
105
117
|
}
|
|
118
|
+
|
|
106
119
|
100% {
|
|
107
120
|
display: none;
|
|
108
121
|
opacity: 0;
|
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
// stylelint-disable-next-line carbon/layout-token-use
|
|
27
27
|
transform: translateY(-38.5rem); // the height of the notification panel
|
|
28
28
|
}
|
|
29
|
+
|
|
29
30
|
100% {
|
|
30
31
|
opacity: 1;
|
|
31
32
|
transform: translateY(0);
|
|
@@ -37,6 +38,7 @@
|
|
|
37
38
|
opacity: 1;
|
|
38
39
|
transform: translateY(0);
|
|
39
40
|
}
|
|
41
|
+
|
|
40
42
|
100% {
|
|
41
43
|
opacity: 0;
|
|
42
44
|
// stylelint-disable-next-line carbon/layout-token-use
|
|
@@ -204,6 +206,7 @@
|
|
|
204
206
|
padding: 0;
|
|
205
207
|
color: $text-01;
|
|
206
208
|
opacity: 0;
|
|
209
|
+
|
|
207
210
|
&:hover,
|
|
208
211
|
&:focus {
|
|
209
212
|
opacity: 1;
|
|
@@ -41,6 +41,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
|
|
|
41
41
|
from {
|
|
42
42
|
background-color: var(--from-color);
|
|
43
43
|
}
|
|
44
|
+
|
|
44
45
|
to {
|
|
45
46
|
background-color: var(--to-color);
|
|
46
47
|
}
|
|
@@ -50,6 +51,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
|
|
|
50
51
|
background-color: var(--from-color);
|
|
51
52
|
box-shadow: 0 1px 0 var(--from-color);
|
|
52
53
|
}
|
|
54
|
+
|
|
53
55
|
to {
|
|
54
56
|
background-color: var(--to-color);
|
|
55
57
|
box-shadow: 0 1px 0 var(--to-color-shadow);
|
|
@@ -31,6 +31,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
|
|
|
31
31
|
// stylelint-disable-next-line carbon/layout-token-use
|
|
32
32
|
transform: translateX(#{$size}); // the size width of the side panel
|
|
33
33
|
}
|
|
34
|
+
|
|
34
35
|
100% {
|
|
35
36
|
opacity: 1;
|
|
36
37
|
transform: translateX(0);
|
|
@@ -45,6 +46,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
|
|
|
45
46
|
// stylelint-disable-next-line carbon/layout-token-use
|
|
46
47
|
transform: translateX(-#{$size}); // the size width of the side panel
|
|
47
48
|
}
|
|
49
|
+
|
|
48
50
|
100% {
|
|
49
51
|
opacity: 1;
|
|
50
52
|
transform: translateX(0);
|
|
@@ -56,8 +58,8 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
|
|
|
56
58
|
$placement: 'right',
|
|
57
59
|
$size: map-get($side-panel-sizes, md)
|
|
58
60
|
) {
|
|
59
|
-
|
|
60
|
-
max-width:
|
|
61
|
+
width: $size;
|
|
62
|
+
max-width: 100%;
|
|
61
63
|
@if $placement == right {
|
|
62
64
|
@include sidePanelEntranceRight($size);
|
|
63
65
|
} @else {
|
|
@@ -66,8 +68,8 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
|
|
|
66
68
|
}
|
|
67
69
|
|
|
68
70
|
@mixin setPanelSize($size: map-get($side-panel-sizes, md)) {
|
|
69
|
-
|
|
70
|
-
max-width:
|
|
71
|
+
width: $size;
|
|
72
|
+
max-width: 100%;
|
|
71
73
|
}
|
|
72
74
|
|
|
73
75
|
@mixin setDividerStyles() {
|
|
@@ -95,6 +97,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
|
|
|
95
97
|
opacity: 1;
|
|
96
98
|
transform: translateX(0);
|
|
97
99
|
}
|
|
100
|
+
|
|
98
101
|
100% {
|
|
99
102
|
opacity: 0;
|
|
100
103
|
// stylelint-disable-next-line carbon/layout-token-use
|
|
@@ -107,6 +110,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
|
|
|
107
110
|
opacity: 1;
|
|
108
111
|
transform: translateX(0);
|
|
109
112
|
}
|
|
113
|
+
|
|
110
114
|
100% {
|
|
111
115
|
opacity: 0;
|
|
112
116
|
// stylelint-disable-next-line carbon/layout-token-use
|
|
@@ -183,6 +187,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
|
|
|
183
187
|
);
|
|
184
188
|
padding: $spacing-05 $spacing-05 $spacing-03 $spacing-05;
|
|
185
189
|
background-color: $ui-01;
|
|
190
|
+
|
|
186
191
|
&::before {
|
|
187
192
|
@include setDividerStyles();
|
|
188
193
|
}
|
|
@@ -457,6 +462,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
|
|
|
457
462
|
0% {
|
|
458
463
|
opacity: 0;
|
|
459
464
|
}
|
|
465
|
+
|
|
460
466
|
100% {
|
|
461
467
|
opacity: 1;
|
|
462
468
|
}
|
|
@@ -466,6 +472,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
|
|
|
466
472
|
0% {
|
|
467
473
|
opacity: 1;
|
|
468
474
|
}
|
|
475
|
+
|
|
469
476
|
100% {
|
|
470
477
|
opacity: 0;
|
|
471
478
|
}
|
|
@@ -66,6 +66,15 @@ $theme-keys: map-keys($themes);
|
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
+
.#{$carbon-prefix}--tooltip__trigger.#{$block-class}__tooltip {
|
|
70
|
+
&:hover,
|
|
71
|
+
&:focus {
|
|
72
|
+
svg {
|
|
73
|
+
fill: $ui-01;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
69
78
|
.#{$block-class} {
|
|
70
79
|
display: flex;
|
|
71
80
|
flex-direction: column;
|
|
@@ -10,6 +10,7 @@ $block-class: #{$pkg-prefix}--web-terminal;
|
|
|
10
10
|
// stylelint-disable-next-line carbon/layout-token-use
|
|
11
11
|
transform: translateX(#{$web-terminal-width});
|
|
12
12
|
}
|
|
13
|
+
|
|
13
14
|
100% {
|
|
14
15
|
opacity: 1;
|
|
15
16
|
transform: translateX(0);
|
|
@@ -21,6 +22,7 @@ $block-class: #{$pkg-prefix}--web-terminal;
|
|
|
21
22
|
opacity: 1;
|
|
22
23
|
transform: translateX(0);
|
|
23
24
|
}
|
|
25
|
+
|
|
24
26
|
100% {
|
|
25
27
|
opacity: 0;
|
|
26
28
|
// stylelint-disable-next-line carbon/layout-token-use
|