@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.
Files changed (47) hide show
  1. package/css/index-full-carbon.css +119 -8
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +2 -2
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon.css +73 -7
  6. package/css/index-without-carbon.css.map +1 -1
  7. package/css/index-without-carbon.min.css +2 -2
  8. package/css/index-without-carbon.min.css.map +1 -1
  9. package/css/index.css +73 -7
  10. package/css/index.css.map +1 -1
  11. package/css/index.min.css +2 -2
  12. package/css/index.min.css.map +1 -1
  13. package/es/components/ActionSet/ActionSet.js +1 -1
  14. package/es/components/AddSelect/AddSelect.js +11 -5
  15. package/es/components/AddSelect/AddSelectBreadcrumbs.js +1 -1
  16. package/es/components/AddSelect/AddSelectList.js +4 -4
  17. package/es/components/AddSelect/AddSelectSidebar.js +37 -5
  18. package/es/components/ButtonMenu/ButtonMenu.js +1 -1
  19. package/es/components/DataSpreadsheet/DataSpreadsheet.js +154 -0
  20. package/es/components/DataSpreadsheet/generateData.js +47 -0
  21. package/es/components/DataSpreadsheet/index.js +7 -0
  22. package/es/components/InlineEdit/InlineEdit.js +19 -22
  23. package/es/components/Tearsheet/TearsheetShell.js +3 -4
  24. package/es/components/index.js +2 -1
  25. package/es/global/js/package-settings.js +2 -1
  26. package/es/global/js/utils/getScrollbarWidth.js +14 -0
  27. package/lib/components/ActionSet/ActionSet.js +1 -1
  28. package/lib/components/AddSelect/AddSelect.js +11 -5
  29. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +1 -1
  30. package/lib/components/AddSelect/AddSelectList.js +4 -4
  31. package/lib/components/AddSelect/AddSelectSidebar.js +37 -4
  32. package/lib/components/ButtonMenu/ButtonMenu.js +1 -1
  33. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +171 -0
  34. package/lib/components/DataSpreadsheet/generateData.js +58 -0
  35. package/lib/components/DataSpreadsheet/index.js +13 -0
  36. package/lib/components/InlineEdit/InlineEdit.js +19 -22
  37. package/lib/components/Tearsheet/TearsheetShell.js +2 -3
  38. package/lib/components/index.js +9 -1
  39. package/lib/global/js/package-settings.js +2 -1
  40. package/lib/global/js/utils/getScrollbarWidth.js +23 -0
  41. package/package.json +11 -9
  42. package/scss/components/AddSelect/_add-select.scss +20 -0
  43. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +79 -0
  44. package/scss/components/DataSpreadsheet/_index.scss +8 -0
  45. package/scss/components/DataSpreadsheet/_storybook-styles.scss +6 -0
  46. package/scss/components/InlineEdit/_inline-edit.scss +6 -4
  47. 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--editing {
22851
- outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-focus, #0f62fe);
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--editing {
22873
+ .c4p--inline-edit.c4p--inline-edit--invalid {
22857
22874
  outline-style: dotted;
22858
22875
  }
22859
22876
  }
22860
- .c4p--inline-edit .c4p--inline-edit--invalid {
22861
- outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-support-01, #da1e28);
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 .c4p--inline-edit--invalid {
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 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
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 */