@carbon/ibm-products 1.6.1 → 1.7.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 +119 -8
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +2 -2
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon.css +73 -7
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +2 -2
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +73 -7
- package/css/index.css.map +1 -1
- package/css/index.min.css +2 -2
- package/css/index.min.css.map +1 -1
- package/es/components/ActionSet/ActionSet.js +1 -1
- package/es/components/AddSelect/AddSelect.js +11 -5
- package/es/components/AddSelect/AddSelectBreadcrumbs.js +1 -1
- package/es/components/AddSelect/AddSelectList.js +4 -4
- package/es/components/AddSelect/AddSelectSidebar.js +37 -5
- package/es/components/ButtonMenu/ButtonMenu.js +1 -1
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +154 -0
- package/es/components/DataSpreadsheet/generateData.js +47 -0
- package/es/components/DataSpreadsheet/index.js +7 -0
- package/es/components/InlineEdit/InlineEdit.js +19 -22
- package/es/components/Tearsheet/TearsheetShell.js +3 -4
- package/es/components/index.js +2 -1
- package/es/global/js/package-settings.js +2 -1
- package/es/global/js/utils/getScrollbarWidth.js +14 -0
- package/lib/components/ActionSet/ActionSet.js +1 -1
- package/lib/components/AddSelect/AddSelect.js +11 -5
- package/lib/components/AddSelect/AddSelectBreadcrumbs.js +1 -1
- package/lib/components/AddSelect/AddSelectList.js +4 -4
- package/lib/components/AddSelect/AddSelectSidebar.js +37 -4
- package/lib/components/ButtonMenu/ButtonMenu.js +1 -1
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +171 -0
- package/lib/components/DataSpreadsheet/generateData.js +58 -0
- package/lib/components/DataSpreadsheet/index.js +13 -0
- package/lib/components/InlineEdit/InlineEdit.js +19 -22
- package/lib/components/Tearsheet/TearsheetShell.js +2 -3
- package/lib/components/index.js +9 -1
- package/lib/global/js/package-settings.js +2 -1
- package/lib/global/js/utils/getScrollbarWidth.js +23 -0
- package/package.json +11 -9
- package/scss/components/AddSelect/_add-select.scss +20 -0
- package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +79 -0
- package/scss/components/DataSpreadsheet/_index.scss +8 -0
- package/scss/components/DataSpreadsheet/_storybook-styles.scss +6 -0
- package/scss/components/InlineEdit/_inline-edit.scss +6 -4
- package/scss/components/_index.scss +1 -0
@@ -16677,6 +16677,16 @@ a.bx--side-nav__link--current::before {
|
|
16677
16677
|
margin-bottom: var(--cds-spacing-03, 0.5rem);
|
16678
16678
|
}
|
16679
16679
|
|
16680
|
+
.c4p--add-select .c4p--add-select__sidebar-item-remove-button:hover {
|
16681
|
+
background: var(--cds-disabled-02, #c6c6c6);
|
16682
|
+
}
|
16683
|
+
|
16684
|
+
.c4p--add-select .c4p--add-select__sidebar-accordion-title {
|
16685
|
+
display: flex;
|
16686
|
+
align-items: center;
|
16687
|
+
justify-content: space-between;
|
16688
|
+
}
|
16689
|
+
|
16680
16690
|
.c4p--add-select .c4p--tearsheet .c4p--tearsheet__influencer {
|
16681
16691
|
max-width: 29rem;
|
16682
16692
|
flex: 0 0 50%;
|
@@ -16705,6 +16715,13 @@ a.bx--side-nav__link--current::before {
|
|
16705
16715
|
cursor: pointer;
|
16706
16716
|
}
|
16707
16717
|
|
16718
|
+
.bx--accordion__item:hover .c4p--add-select__sidebar-accordion-title button {
|
16719
|
+
opacity: 1;
|
16720
|
+
}
|
16721
|
+
.bx--accordion__item .c4p--add-select__sidebar-accordion-title button {
|
16722
|
+
opacity: 0;
|
16723
|
+
}
|
16724
|
+
|
16708
16725
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
16709
16726
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
16710
16727
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
@@ -22831,6 +22848,7 @@ a.bx--side-nav__link--current::before {
|
|
22831
22848
|
background-color: var(--c4p--inline-edit--background-color);
|
22832
22849
|
cursor: text;
|
22833
22850
|
transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
|
22851
|
+
vertical-align: middle;
|
22834
22852
|
white-space: nowrap;
|
22835
22853
|
}
|
22836
22854
|
.c4p--inline-edit.c4p--inline-edit--light {
|
@@ -22847,22 +22865,22 @@ a.bx--side-nav__link--current::before {
|
|
22847
22865
|
--c4p--inline-edit--size: var(--cds-spacing-09, 3rem);
|
22848
22866
|
--c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
|
22849
22867
|
}
|
22850
|
-
.c4p--inline-edit.c4p--inline-edit--
|
22851
|
-
outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-
|
22868
|
+
.c4p--inline-edit.c4p--inline-edit--invalid {
|
22869
|
+
outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-support-01, #da1e28);
|
22852
22870
|
outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
|
22853
|
-
background-color: var(--cds-ui-01, #f4f4f4);
|
22854
22871
|
}
|
22855
22872
|
@media screen and (prefers-contrast) {
|
22856
|
-
.c4p--inline-edit.c4p--inline-edit--
|
22873
|
+
.c4p--inline-edit.c4p--inline-edit--invalid {
|
22857
22874
|
outline-style: dotted;
|
22858
22875
|
}
|
22859
22876
|
}
|
22860
|
-
.c4p--inline-edit
|
22861
|
-
outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-
|
22877
|
+
.c4p--inline-edit.c4p--inline-edit--editing {
|
22878
|
+
outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-focus, #0f62fe);
|
22862
22879
|
outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
|
22880
|
+
background-color: var(--cds-ui-01, #f4f4f4);
|
22863
22881
|
}
|
22864
22882
|
@media screen and (prefers-contrast) {
|
22865
|
-
.c4p--inline-edit
|
22883
|
+
.c4p--inline-edit.c4p--inline-edit--editing {
|
22866
22884
|
outline-style: dotted;
|
22867
22885
|
}
|
22868
22886
|
}
|
@@ -23030,6 +23048,54 @@ a.bx--side-nav__link--current::before {
|
|
23030
23048
|
color: var(--cds-support-error, #da1e28);
|
23031
23049
|
}
|
23032
23050
|
|
23051
|
+
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
23052
|
+
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
23053
|
+
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
23054
|
+
.c4p--data-spreadsheet {
|
23055
|
+
display: inline-block;
|
23056
|
+
border-spacing: 0;
|
23057
|
+
}
|
23058
|
+
.c4p--data-spreadsheet button.c4p--data-spreadsheet__td {
|
23059
|
+
margin: 0;
|
23060
|
+
background-color: transparent;
|
23061
|
+
}
|
23062
|
+
.c4p--data-spreadsheet .c4p--data-spreadsheet__tr :last-child .td {
|
23063
|
+
border-bottom: 0;
|
23064
|
+
}
|
23065
|
+
.c4p--data-spreadsheet .c4p--data-spreadsheet__th,
|
23066
|
+
.c4p--data-spreadsheet .c4p--data-spreadsheet__td {
|
23067
|
+
height: 2.25rem;
|
23068
|
+
padding: 0 var(--cds-spacing-03, 0.5rem);
|
23069
|
+
border: 0;
|
23070
|
+
margin: 0;
|
23071
|
+
color: var(--cds-text-01, #161616);
|
23072
|
+
}
|
23073
|
+
.c4p--data-spreadsheet .c4p--data-spreadsheet__th:last-child,
|
23074
|
+
.c4p--data-spreadsheet .c4p--data-spreadsheet__td:last-child {
|
23075
|
+
border-right: 1px solid var(--cds-text-03, #a8a8a8);
|
23076
|
+
}
|
23077
|
+
.c4p--data-spreadsheet .c4p--data-spreadsheet__th,
|
23078
|
+
.c4p--data-spreadsheet button.c4p--data-spreadsheet__td-th {
|
23079
|
+
border-right: 1px solid var(--cds-text-03, #a8a8a8);
|
23080
|
+
border-bottom: 1px solid var(--cds-text-03, #a8a8a8);
|
23081
|
+
background-color: var(--cds-ui-01, #f4f4f4);
|
23082
|
+
cursor: pointer;
|
23083
|
+
}
|
23084
|
+
.c4p--data-spreadsheet .c4p--data-spreadsheet__td {
|
23085
|
+
border-right: 1px solid var(--cds-ui-03, #e0e0e0);
|
23086
|
+
border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
|
23087
|
+
cursor: cell;
|
23088
|
+
text-align: left;
|
23089
|
+
}
|
23090
|
+
.c4p--data-spreadsheet .c4p--data-spreadsheet__th {
|
23091
|
+
font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
|
23092
|
+
font-weight: var(--cds-productive-heading-01-font-weight, 600);
|
23093
|
+
line-height: var(--cds-productive-heading-01-line-height, 1.28572);
|
23094
|
+
letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
|
23095
|
+
color: var(--cds-text-01, #161616);
|
23096
|
+
text-align: left;
|
23097
|
+
}
|
23098
|
+
|
23033
23099
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
23034
23100
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
23035
23101
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
@@ -25198,14 +25264,33 @@ li.bx--accordion__item--disabled:last-of-type {
|
|
25198
25264
|
color: var(--cds-text-secondary, #525252);
|
25199
25265
|
text-align: left;
|
25200
25266
|
text-decoration: none;
|
25201
|
-
transition: all
|
25267
|
+
transition: all 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
25202
25268
|
white-space: nowrap;
|
25203
25269
|
}
|
25270
|
+
.bx--content-switcher-btn::after {
|
25271
|
+
position: absolute;
|
25272
|
+
top: 0;
|
25273
|
+
left: 0;
|
25274
|
+
display: block;
|
25275
|
+
width: 100%;
|
25276
|
+
height: 100%;
|
25277
|
+
background-color: var(--cds-layer-selected-inverse, #161616);
|
25278
|
+
content: "";
|
25279
|
+
transform: scaleY(0);
|
25280
|
+
transform-origin: bottom;
|
25281
|
+
transition: all 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
25282
|
+
}
|
25283
|
+
.bx--content-switcher-btn:disabled::after {
|
25284
|
+
display: none;
|
25285
|
+
}
|
25204
25286
|
.bx--content-switcher-btn:focus {
|
25205
25287
|
z-index: 3;
|
25206
25288
|
border-color: var(--cds-focus, #0f62fe);
|
25207
25289
|
box-shadow: inset 0 0 0 2px var(--cds-focus, #0f62fe), inset 0 0 0 3px var(--cds-focus-inset, #ffffff);
|
25208
25290
|
}
|
25291
|
+
.bx--content-switcher-btn:focus::after {
|
25292
|
+
clip-path: inset(3px 3px 3px 3px);
|
25293
|
+
}
|
25209
25294
|
.bx--content-switcher-btn:hover {
|
25210
25295
|
color: var(--cds-text-primary, #161616);
|
25211
25296
|
cursor: pointer;
|
@@ -25289,6 +25374,7 @@ li.bx--accordion__item--disabled:last-of-type {
|
|
25289
25374
|
}
|
25290
25375
|
|
25291
25376
|
.bx--content-switcher__label {
|
25377
|
+
z-index: 1;
|
25292
25378
|
overflow: hidden;
|
25293
25379
|
max-width: 100%;
|
25294
25380
|
text-overflow: ellipsis;
|
@@ -25305,6 +25391,9 @@ li.bx--accordion__item--disabled:last-of-type {
|
|
25305
25391
|
background-color: var(--cds-layer-selected-inverse, #161616);
|
25306
25392
|
color: var(--cds-text-inverse, #ffffff);
|
25307
25393
|
}
|
25394
|
+
.bx--content-switcher-btn.bx--content-switcher--selected::after {
|
25395
|
+
transform: scaleY(1);
|
25396
|
+
}
|
25308
25397
|
.bx--content-switcher-btn.bx--content-switcher--selected:disabled {
|
25309
25398
|
background-color: var(--cds-layer-selected-disabled, #8d8d8d);
|
25310
25399
|
color: var(--cds-text-disabled, #c6c6c6);
|
@@ -25829,6 +25918,7 @@ li.bx--accordion__item--disabled:last-of-type {
|
|
25829
25918
|
.bx--table-toolbar--small,
|
25830
25919
|
.bx--table-toolbar--sm {
|
25831
25920
|
height: 2rem;
|
25921
|
+
min-height: 2rem;
|
25832
25922
|
}
|
25833
25923
|
.bx--table-toolbar--small .bx--toolbar-search-container-expandable,
|
25834
25924
|
.bx--table-toolbar--small .bx--toolbar-search-container-persistent,
|
@@ -25912,6 +26002,16 @@ li.bx--accordion__item--disabled:last-of-type {
|
|
25912
26002
|
outline-offset: -2px;
|
25913
26003
|
background-color: transparent;
|
25914
26004
|
}
|
26005
|
+
.bx--table-toolbar--small .bx--overflow-menu.bx--toolbar-action,
|
26006
|
+
.bx--table-toolbar--sm .bx--overflow-menu.bx--toolbar-action {
|
26007
|
+
width: 2rem;
|
26008
|
+
min-width: 2rem;
|
26009
|
+
height: 2rem;
|
26010
|
+
}
|
26011
|
+
.bx--table-toolbar--small .bx--toolbar-content,
|
26012
|
+
.bx--table-toolbar--sm .bx--toolbar-content {
|
26013
|
+
height: 2rem;
|
26014
|
+
}
|
25915
26015
|
|
25916
26016
|
.bx--search--disabled .bx--search-magnifier-icon:hover {
|
25917
26017
|
background-color: transparent;
|
@@ -25948,6 +26048,11 @@ li.bx--accordion__item--disabled:last-of-type {
|
|
25948
26048
|
height: 2rem;
|
25949
26049
|
}
|
25950
26050
|
|
26051
|
+
.bx--table-toolbar--small .bx--batch-summary,
|
26052
|
+
.bx--table-toolbar--sm .bx--batch-summary {
|
26053
|
+
min-height: 2rem;
|
26054
|
+
}
|
26055
|
+
|
25951
26056
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
25952
26057
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
25953
26058
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
@@ -32029,6 +32134,12 @@ span.bx--pagination__text {
|
|
32029
32134
|
color: transparent;
|
32030
32135
|
}
|
32031
32136
|
|
32137
|
+
.bx--text-area__label-wrapper {
|
32138
|
+
display: flex;
|
32139
|
+
width: 100%;
|
32140
|
+
justify-content: space-between;
|
32141
|
+
}
|
32142
|
+
|
32032
32143
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
32033
32144
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
32034
32145
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|