@carbon/ibm-products 1.8.0 → 1.9.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +82 -9
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +3 -3
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +1 -2
- 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 +82 -9
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +3 -3
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +82 -9
- package/css/index.css.map +1 -1
- package/css/index.min.css +3 -3
- package/css/index.min.css.map +1 -1
- package/es/components/AddSelect/AddSelect.js +104 -16
- package/es/components/AddSelect/AddSelectBreadcrumbs.js +4 -4
- package/es/components/AddSelect/AddSelectColumn.js +21 -0
- package/es/components/AddSelect/AddSelectList.js +67 -8
- package/es/components/AddSelect/AddSelectSidebar.js +7 -1
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +42 -2
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +194 -10
- package/es/components/DataSpreadsheet/createActiveCellFn.js +1 -1
- package/es/components/DataSpreadsheet/createCellSelectionArea.js +45 -0
- package/es/components/InlineEdit/InlineEdit.js +23 -13
- package/es/global/js/utils/DisplayBox.js +31 -0
- package/es/global/js/utils/deepCloneObject.js +26 -0
- package/lib/components/AddSelect/AddSelect.js +102 -15
- package/lib/components/AddSelect/AddSelectBreadcrumbs.js +2 -3
- package/lib/components/AddSelect/AddSelectColumn.js +37 -0
- package/lib/components/AddSelect/AddSelectList.js +65 -8
- package/lib/components/AddSelect/AddSelectSidebar.js +7 -1
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +42 -2
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +198 -10
- package/lib/components/DataSpreadsheet/createActiveCellFn.js +1 -1
- package/lib/components/DataSpreadsheet/createCellSelectionArea.js +56 -0
- package/lib/components/InlineEdit/InlineEdit.js +23 -13
- package/lib/global/js/utils/DisplayBox.js +46 -0
- package/lib/global/js/utils/deepCloneObject.js +37 -0
- package/package.json +8 -8
- package/scss/components/ActionBar/_storybook-styles.scss +8 -0
- package/scss/components/ActionSet/_storybook-styles.scss +1 -3
- package/scss/components/AddSelect/_add-select.scss +58 -2
- package/scss/components/BreadcrumbWithOverflow/_storybook-styles.scss +8 -0
- package/scss/components/ButtonSetWithOverflow/_storybook-styles.scss +8 -0
- package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +18 -0
- package/scss/components/InlineEdit/_inline-edit.scss +11 -4
- package/scss/components/InlineEdit/_storybook-styles.scss +1 -0
- package/scss/components/TagSet/_storybook-styles.scss +8 -0
- package/scss/components/Tearsheet/_tearsheet.scss +1 -2
- package/scss/global/styles/_display-box.scss +62 -0
@@ -13936,8 +13936,7 @@ a.bx--side-nav__link--current::before {
|
|
13936
13936
|
margin: 0;
|
13937
13937
|
}
|
13938
13938
|
.c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header--with-close-icon {
|
13939
|
-
padding-right: var(--cds-spacing-
|
13940
|
-
margin-right: var(--cds-spacing-09, 3rem);
|
13939
|
+
padding-right: var(--cds-spacing-10, 4rem);
|
13941
13940
|
}
|
13942
13941
|
.c4p--tearsheet .c4p--tearsheet__header-content {
|
13943
13942
|
display: flex;
|
@@ -16641,6 +16640,18 @@ a.bx--side-nav__link--current::before {
|
|
16641
16640
|
align-items: center;
|
16642
16641
|
justify-content: space-between;
|
16643
16642
|
}
|
16643
|
+
.c4p--add-select__selections-cell-title {
|
16644
|
+
display: block;
|
16645
|
+
color: var(--cds-text-01, #161616);
|
16646
|
+
}
|
16647
|
+
.c4p--add-select__selections-cell-subtitle {
|
16648
|
+
font-size: var(--cds-label-01-font-size, 0.75rem);
|
16649
|
+
font-weight: var(--cds-label-01-font-weight, 400);
|
16650
|
+
line-height: var(--cds-label-01-line-height, 1.33333);
|
16651
|
+
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
|
16652
|
+
display: block;
|
16653
|
+
color: var(--cds-text-02, #525252);
|
16654
|
+
}
|
16644
16655
|
|
16645
16656
|
.c4p--add-select__sidebar-header {
|
16646
16657
|
display: flex;
|
@@ -16658,6 +16669,17 @@ a.bx--side-nav__link--current::before {
|
|
16658
16669
|
margin-right: var(--cds-spacing-03, 0.5rem);
|
16659
16670
|
}
|
16660
16671
|
|
16672
|
+
.c4p--add-select__sidebar-selected-item-title {
|
16673
|
+
color: var(--cds-text-01, #161616);
|
16674
|
+
}
|
16675
|
+
.c4p--add-select__sidebar-selected-item-subtitle {
|
16676
|
+
font-size: var(--cds-label-01-font-size, 0.75rem);
|
16677
|
+
font-weight: var(--cds-label-01-font-weight, 400);
|
16678
|
+
line-height: var(--cds-label-01-line-height, 1.33333);
|
16679
|
+
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
|
16680
|
+
color: var(--cds-text-02, #525252);
|
16681
|
+
}
|
16682
|
+
|
16661
16683
|
.c4p--add-select__sidebar-body {
|
16662
16684
|
padding: var(--cds-spacing-05, 1rem);
|
16663
16685
|
}
|
@@ -16667,6 +16689,8 @@ a.bx--side-nav__link--current::before {
|
|
16667
16689
|
font-weight: var(--cds-label-01-font-weight, 400);
|
16668
16690
|
line-height: var(--cds-label-01-line-height, 1.33333);
|
16669
16691
|
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
|
16692
|
+
margin-bottom: var(--cds-spacing-03, 0.5rem);
|
16693
|
+
color: var(--cds-text-02, #525252);
|
16670
16694
|
}
|
16671
16695
|
|
16672
16696
|
.c4p--add-select .c4p--add-select__sidebar-item-body {
|
@@ -16674,7 +16698,7 @@ a.bx--side-nav__link--current::before {
|
|
16674
16698
|
font-weight: var(--cds-body-long-01-font-weight, 400);
|
16675
16699
|
line-height: var(--cds-body-long-01-line-height, 1.42857);
|
16676
16700
|
letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
|
16677
|
-
margin-bottom: var(--cds-spacing-
|
16701
|
+
margin-bottom: var(--cds-spacing-05, 1rem);
|
16678
16702
|
}
|
16679
16703
|
|
16680
16704
|
.c4p--add-select .c4p--add-select__sidebar-item-remove-button:hover {
|
@@ -16687,11 +16711,29 @@ a.bx--side-nav__link--current::before {
|
|
16687
16711
|
justify-content: space-between;
|
16688
16712
|
}
|
16689
16713
|
|
16714
|
+
.c4p--add-select__columns {
|
16715
|
+
display: flex;
|
16716
|
+
flex-direction: row;
|
16717
|
+
}
|
16718
|
+
|
16719
|
+
.c4p--add-select__columns .c4p--add-select__selections-cell {
|
16720
|
+
padding: 0 var(--cds-spacing-05, 1rem) !important;
|
16721
|
+
}
|
16722
|
+
|
16723
|
+
.c4p--add-select__column {
|
16724
|
+
padding: var(--cds-spacing-05, 1rem);
|
16725
|
+
border-right: var(--cds-ui-03, #e0e0e0);
|
16726
|
+
}
|
16727
|
+
|
16690
16728
|
.c4p--add-select .c4p--tearsheet .c4p--tearsheet__influencer {
|
16691
16729
|
max-width: 29rem;
|
16692
16730
|
flex: 0 0 50%;
|
16693
16731
|
}
|
16694
16732
|
|
16733
|
+
.c4p--add-select .c4p--tearsheet__header-description {
|
16734
|
+
color: var(--cds-text-02, #525252);
|
16735
|
+
}
|
16736
|
+
|
16695
16737
|
.c4p--add-select .c4p--add-select__items-label {
|
16696
16738
|
font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
|
16697
16739
|
font-weight: var(--cds-productive-heading-01-font-weight, 600);
|
@@ -16707,6 +16749,10 @@ a.bx--side-nav__link--current::before {
|
|
16707
16749
|
padding-bottom: var(--cds-spacing-05, 1rem);
|
16708
16750
|
}
|
16709
16751
|
|
16752
|
+
.c4p--add-select .bx--radio-button__appearance {
|
16753
|
+
margin: 0 var(--cds-spacing-05, 1rem) 0 0;
|
16754
|
+
}
|
16755
|
+
|
16710
16756
|
.c4p--add-select .bx--radio-button-wrapper .bx--radio-button__label {
|
16711
16757
|
justify-content: left;
|
16712
16758
|
}
|
@@ -16715,13 +16761,17 @@ a.bx--side-nav__link--current::before {
|
|
16715
16761
|
cursor: pointer;
|
16716
16762
|
}
|
16717
16763
|
|
16718
|
-
.bx--accordion__item:hover .c4p--add-select__sidebar-accordion-title button {
|
16764
|
+
.c4p--add-select .bx--accordion__item:hover .c4p--add-select__sidebar-accordion-title button {
|
16719
16765
|
opacity: 1;
|
16720
16766
|
}
|
16721
|
-
.bx--accordion__item .c4p--add-select__sidebar-accordion-title button {
|
16767
|
+
.c4p--add-select .bx--accordion__item .c4p--add-select__sidebar-accordion-title button {
|
16722
16768
|
opacity: 0;
|
16723
16769
|
}
|
16724
16770
|
|
16771
|
+
.c4p--add-select .bx--checkbox-label-text {
|
16772
|
+
padding-left: var(--cds-spacing-05, 1rem);
|
16773
|
+
}
|
16774
|
+
|
16725
16775
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
16726
16776
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
16727
16777
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
@@ -22892,11 +22942,16 @@ a.bx--side-nav__link--current::before {
|
|
22892
22942
|
box-shadow: initial;
|
22893
22943
|
outline: initial;
|
22894
22944
|
}
|
22895
|
-
|
22896
|
-
|
22897
|
-
|
22945
|
+
@media (hover: hover) {
|
22946
|
+
.c4p--inline-edit .c4p--inline-edit__edit {
|
22947
|
+
opacity: 0;
|
22948
|
+
transition: opacity 70ms cubic-bezier(0, 0, 0.38, 0.9);
|
22949
|
+
}
|
22950
|
+
.c4p--inline-edit:hover .c4p--inline-edit__edit {
|
22951
|
+
opacity: 1;
|
22952
|
+
}
|
22898
22953
|
}
|
22899
|
-
.c4p--inline-edit
|
22954
|
+
.c4p--inline-edit .c4p--inline-edit__edit--always-visible {
|
22900
22955
|
opacity: 1;
|
22901
22956
|
}
|
22902
22957
|
.c4p--inline-edit .c4p--inline-edit__validation-icon {
|
@@ -22985,6 +23040,7 @@ a.bx--side-nav__link--current::before {
|
|
22985
23040
|
}
|
22986
23041
|
.c4p--data-spreadsheet .c4p--data-spreadsheet__active-cell--highlight {
|
22987
23042
|
position: absolute;
|
23043
|
+
z-index: 2;
|
22988
23044
|
border: var(--cds-spacing-01, 0.125rem) solid var(--cds-interactive-01, #0f62fe);
|
22989
23045
|
background-color: transparent;
|
22990
23046
|
}
|
@@ -22992,6 +23048,23 @@ a.bx--side-nav__link--current::before {
|
|
22992
23048
|
border: var(--cds-spacing-01, 0.125rem) solid var(--cds-interactive-01, #0f62fe);
|
22993
23049
|
outline: 0;
|
22994
23050
|
}
|
23051
|
+
.c4p--data-spreadsheet .c4p--data-spreadsheet__selection-area--element {
|
23052
|
+
position: absolute;
|
23053
|
+
z-index: 2;
|
23054
|
+
border: 1px solid var(--cds-interactive-01, #0f62fe);
|
23055
|
+
pointer-events: none;
|
23056
|
+
}
|
23057
|
+
.c4p--data-spreadsheet .c4p--data-spreadsheet__selection-area--element::before {
|
23058
|
+
position: absolute;
|
23059
|
+
top: 0;
|
23060
|
+
left: 0;
|
23061
|
+
display: block;
|
23062
|
+
width: 100%;
|
23063
|
+
height: 100%;
|
23064
|
+
background-color: var(--cds-interactive-01, #0f62fe);
|
23065
|
+
content: "";
|
23066
|
+
opacity: 0.25;
|
23067
|
+
}
|
22995
23068
|
|
22996
23069
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
22997
23070
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|