@carbon/ibm-products 1.51.0 → 1.53.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (70) hide show
  1. package/README.md +10 -5
  2. package/css/index-full-carbon.css +89 -64
  3. package/css/index-full-carbon.css.map +1 -1
  4. package/css/index-full-carbon.min.css +1 -1
  5. package/css/index-full-carbon.min.css.map +1 -1
  6. package/css/index-without-carbon.css +89 -64
  7. package/css/index-without-carbon.css.map +1 -1
  8. package/css/index-without-carbon.min.css +1 -1
  9. package/css/index-without-carbon.min.css.map +1 -1
  10. package/css/index.css +89 -64
  11. package/css/index.css.map +1 -1
  12. package/css/index.min.css +1 -1
  13. package/css/index.min.css.map +1 -1
  14. package/es/components/AboutModal/AboutModal.js +3 -4
  15. package/es/components/ActionBar/ActionBar.js +9 -18
  16. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +8 -13
  17. package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +7 -11
  18. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +5 -5
  19. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +3 -4
  20. package/es/components/Datagrid/index.js +1 -0
  21. package/es/components/Datagrid/useActionsColumn.js +10 -7
  22. package/es/components/Datagrid/useCustomizeColumns.js +5 -1
  23. package/es/components/Datagrid/useEditableCell.js +12 -0
  24. package/es/components/Datagrid/useExpandedRow.js +11 -7
  25. package/es/components/Datagrid/useFiltering.js +11 -8
  26. package/es/components/Datagrid/useInlineEdit.js +17 -8
  27. package/es/components/Datagrid/useNestedRows.js +10 -6
  28. package/es/components/ExampleComponent/ExampleComponent.js +32 -4
  29. package/es/components/ExampleComponent/useExample.js +49 -0
  30. package/es/components/InlineEditV1/InlineEditV1.js +3 -1
  31. package/es/components/NonLinearReading/NonLinearReading.js +7 -7
  32. package/es/components/PageHeader/PageHeader.js +28 -31
  33. package/es/components/SidePanel/SidePanel.js +25 -26
  34. package/es/components/TagSet/TagSet.js +5 -7
  35. package/es/components/Tearsheet/TearsheetShell.js +4 -6
  36. package/es/components/index.js +1 -1
  37. package/es/global/js/hooks/useResizeObserver.js +74 -0
  38. package/es/global/js/package-settings.js +34 -4
  39. package/es/global/js/utils/test-helper.js +34 -3
  40. package/es/settings.js +26 -30
  41. package/lib/components/AboutModal/AboutModal.js +3 -4
  42. package/lib/components/ActionBar/ActionBar.js +9 -18
  43. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +8 -13
  44. package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +7 -11
  45. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +4 -4
  46. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +3 -4
  47. package/lib/components/Datagrid/index.js +7 -0
  48. package/lib/components/Datagrid/useActionsColumn.js +7 -1
  49. package/lib/components/Datagrid/useCustomizeColumns.js +4 -0
  50. package/lib/components/Datagrid/useEditableCell.js +20 -0
  51. package/lib/components/Datagrid/useExpandedRow.js +4 -0
  52. package/lib/components/Datagrid/useFiltering.js +4 -0
  53. package/lib/components/Datagrid/useInlineEdit.js +19 -8
  54. package/lib/components/Datagrid/useNestedRows.js +9 -6
  55. package/lib/components/ExampleComponent/ExampleComponent.js +35 -4
  56. package/lib/components/ExampleComponent/useExample.js +58 -0
  57. package/lib/components/InlineEditV1/InlineEditV1.js +3 -1
  58. package/lib/components/NonLinearReading/NonLinearReading.js +6 -6
  59. package/lib/components/PageHeader/PageHeader.js +28 -31
  60. package/lib/components/SidePanel/SidePanel.js +25 -26
  61. package/lib/components/TagSet/TagSet.js +5 -7
  62. package/lib/components/Tearsheet/TearsheetShell.js +4 -6
  63. package/lib/components/index.js +6 -0
  64. package/lib/global/js/hooks/useResizeObserver.js +83 -0
  65. package/lib/global/js/package-settings.js +33 -3
  66. package/lib/global/js/utils/test-helper.js +37 -5
  67. package/lib/settings.js +26 -30
  68. package/package.json +2 -3
  69. package/scss/components/NonLinearReading/_non-linear-reading.scss +76 -67
  70. package/scss/components/NonLinearReading/_storybook-styles.scss +16 -0
package/css/index.css CHANGED
@@ -23134,45 +23134,70 @@ th.c4p--datagrid__select-all-toggle-on.button {
23134
23134
  opacity: 1;
23135
23135
  }
23136
23136
  }
23137
- .c4p--non-linear-reading__term-light--closed {
23138
- padding: 0.0625rem var(--cds-spacing-03, 0.5rem) 0.0625rem var(--cds-spacing-03, 0.5rem);
23139
- border: none;
23137
+ .c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-closed {
23138
+ height: 1.25rem;
23139
+ padding-top: 0;
23140
+ padding-right: 0.1875rem;
23141
+ border-width: 0.0625rem;
23142
+ border-style: solid;
23140
23143
  border-radius: var(--cds-spacing-04, 0.75rem);
23141
- background-color: var(--cds-interactive-02, #393939);
23142
23144
  white-space: nowrap;
23143
- background-color: var(--cds-interactive-02, #393939);
23144
- color: var(--cds-inverse-01, #ffffff);
23145
+ border-color: var(--cds-interactive-03, #0f62fe);
23146
+ background-color: transparent;
23147
+ color: var(--cds-interactive-03, #0f62fe);
23145
23148
  }
23146
- .c4p--non-linear-reading__term-light--closed:hover {
23147
- background-color: var(--cds-hover-secondary, #4c4c4c);
23149
+ .c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-closed:hover {
23148
23150
  cursor: pointer;
23149
23151
  }
23150
- .c4p--non-linear-reading__term-light--closed:hover {
23151
- background-color: var(--cds-hover-secondary, #4c4c4c);
23152
+ .c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-closed svg {
23153
+ margin: 0.0625rem 0 0 0;
23154
+ vertical-align: text-top;
23152
23155
  }
23153
- .c4p--non-linear-reading__term-light--open {
23154
- padding: 0.0625rem var(--cds-spacing-03, 0.5rem) 0.0625rem var(--cds-spacing-03, 0.5rem);
23155
- border: none;
23156
+ .c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-closed:hover {
23157
+ background-color: var(--cds-interactive-03, #0f62fe);
23158
+ color: var(--cds-inverse-01, #ffffff);
23159
+ }
23160
+ .c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-open {
23161
+ height: 1.25rem;
23162
+ padding-top: 0;
23163
+ padding-right: 0.1875rem;
23164
+ border-width: 0.0625rem;
23165
+ border-style: solid;
23156
23166
  border-radius: var(--cds-spacing-04, 0.75rem);
23157
- background-color: var(--cds-interactive-02, #393939);
23158
23167
  white-space: nowrap;
23159
- padding-right: 0;
23160
- background-color: #e8daff;
23161
- color: var(--cds-text-01, #161616);
23168
+ border-color: var(--cds-interactive-03, #0f62fe);
23169
+ background-color: var(--cds-interactive-03, #0f62fe);
23170
+ color: var(--cds-inverse-01, #ffffff);
23162
23171
  }
23163
- .c4p--non-linear-reading__term-light--open:hover {
23164
- background-color: var(--cds-hover-secondary, #4c4c4c);
23172
+ .c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-open:hover {
23165
23173
  cursor: pointer;
23166
23174
  }
23167
- .c4p--non-linear-reading__term-light--open svg {
23168
- padding-top: 0.0625rem;
23169
- margin: 0 var(--cds-spacing-02, 0.25rem) 0 var(--cds-spacing-01, 0.125rem);
23175
+ .c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-open svg {
23176
+ margin: 0.0625rem 0 0 0;
23170
23177
  vertical-align: text-top;
23171
23178
  }
23172
- .c4p--non-linear-reading__term-light--open:hover {
23173
- background-color: #dcc7ff;
23179
+ .c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-open svg {
23180
+ transform: rotate(180deg);
23174
23181
  }
23175
- .c4p--non-linear-reading__term-dark--closed {
23182
+ .c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-open:hover {
23183
+ background-color: transparent;
23184
+ color: var(--cds-interactive-03, #0f62fe);
23185
+ }
23186
+ .c4p--non-linear-reading__light .c4p--non-linear-reading__body {
23187
+ font-size: var(--cds-body-long-01-font-size, 0.875rem);
23188
+ font-weight: var(--cds-body-long-01-font-weight, 400);
23189
+ line-height: var(--cds-body-long-01-line-height, 1.42857);
23190
+ letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
23191
+ display: block;
23192
+ padding: var(--cds-spacing-03, 0.5rem) var(--cds-spacing-04, 0.75rem);
23193
+ border-left-width: 0.078125rem;
23194
+ border-left-style: solid;
23195
+ margin: var(--cds-spacing-02, 0.25rem) 0;
23196
+ animation: fade 600ms;
23197
+ border-left-color: var(--cds-text-01, #161616);
23198
+ }
23199
+
23200
+ .c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-closed {
23176
23201
  --cds-interactive-01: #0f62fe;
23177
23202
  --cds-interactive-02: #6f6f6f;
23178
23203
  --cds-interactive-03: #ffffff;
@@ -23593,22 +23618,29 @@ th.c4p--datagrid__select-all-toggle-on.button {
23593
23618
  --cds-size-2XLarge: 5rem;
23594
23619
  --cds-icon-size-01: 1rem;
23595
23620
  --cds-icon-size-02: 1.25rem;
23596
- padding: 0.0625rem var(--cds-spacing-03, 0.5rem) 0.0625rem var(--cds-spacing-03, 0.5rem);
23597
- border: none;
23621
+ height: 1.25rem;
23622
+ padding-top: 0;
23623
+ padding-right: 0.1875rem;
23624
+ border-width: 0.0625rem;
23625
+ border-style: solid;
23598
23626
  border-radius: var(--cds-spacing-04, 0.75rem);
23599
- background-color: var(--cds-interactive-02, #393939);
23600
23627
  white-space: nowrap;
23601
- background-color: var(--cds-interactive-02, #393939);
23602
- color: var(--cds-text-04, #ffffff);
23628
+ border-color: var(--cds-icon-03, #ffffff);
23629
+ background-color: transparent;
23630
+ color: var(--cds-text-01, #161616);
23603
23631
  }
23604
- .c4p--non-linear-reading__term-dark--closed:hover {
23605
- background-color: var(--cds-hover-secondary, #4c4c4c);
23632
+ .c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-closed:hover {
23606
23633
  cursor: pointer;
23607
23634
  }
23608
- .c4p--non-linear-reading__term-dark--closed:hover {
23609
- background-color: var(--cds-hover-secondary, #4c4c4c);
23635
+ .c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-closed svg {
23636
+ margin: 0.0625rem 0 0 0;
23637
+ vertical-align: text-top;
23610
23638
  }
23611
- .c4p--non-linear-reading__term-dark--open {
23639
+ .c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-closed:hover {
23640
+ background-color: var(--cds-icon-03, #ffffff);
23641
+ color: var(--cds-inverse-01, #ffffff);
23642
+ }
23643
+ .c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-open {
23612
23644
  --cds-interactive-01: #0f62fe;
23613
23645
  --cds-interactive-02: #6f6f6f;
23614
23646
  --cds-interactive-03: #ffffff;
@@ -24029,42 +24061,32 @@ th.c4p--datagrid__select-all-toggle-on.button {
24029
24061
  --cds-size-2XLarge: 5rem;
24030
24062
  --cds-icon-size-01: 1rem;
24031
24063
  --cds-icon-size-02: 1.25rem;
24032
- padding: 0.0625rem var(--cds-spacing-03, 0.5rem) 0.0625rem var(--cds-spacing-03, 0.5rem);
24033
- border: none;
24064
+ height: 1.25rem;
24065
+ padding-top: 0;
24066
+ padding-right: 0.1875rem;
24067
+ border-width: 0.0625rem;
24068
+ border-style: solid;
24034
24069
  border-radius: var(--cds-spacing-04, 0.75rem);
24035
- background-color: var(--cds-interactive-02, #393939);
24036
24070
  white-space: nowrap;
24037
- padding-right: 0;
24038
- background-color: #491d8b;
24039
- color: var(--cds-text-04, #ffffff);
24071
+ border-color: var(--cds-icon-03, #ffffff);
24072
+ background-color: var(--cds-icon-03, #ffffff);
24073
+ color: var(--cds-inverse-01, #ffffff);
24040
24074
  }
24041
- .c4p--non-linear-reading__term-dark--open:hover {
24042
- background-color: var(--cds-hover-secondary, #4c4c4c);
24075
+ .c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-open:hover {
24043
24076
  cursor: pointer;
24044
24077
  }
24045
- .c4p--non-linear-reading__term-dark--open svg {
24046
- padding-top: 0.0625rem;
24047
- margin: 0 var(--cds-spacing-02, 0.25rem) 0 var(--cds-spacing-01, 0.125rem);
24078
+ .c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-open svg {
24079
+ margin: 0.0625rem 0 0 0;
24048
24080
  vertical-align: text-top;
24049
24081
  }
24050
- .c4p--non-linear-reading__term-dark--open:hover {
24051
- background-color: #7f3ae7;
24082
+ .c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-open svg {
24083
+ transform: rotate(180deg);
24052
24084
  }
24053
- .c4p--non-linear-reading--body-light {
24054
- font-size: var(--cds-body-long-01-font-size, 0.875rem);
24055
- font-weight: var(--cds-body-long-01-font-weight, 400);
24056
- line-height: var(--cds-body-long-01-line-height, 1.42857);
24057
- letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
24058
- display: block;
24059
- padding: var(--cds-spacing-03, 0.5rem) var(--cds-spacing-04, 0.75rem);
24060
- border-left-width: 0.078125rem;
24061
- border-left-style: solid;
24062
- margin: var(--cds-spacing-02, 0.25rem) 0;
24063
- animation: fade 600ms;
24064
- border-left-color: #6929c4;
24065
- color: #6929c4;
24085
+ .c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-open:hover {
24086
+ background-color: transparent;
24087
+ color: var(--cds-text-01, #161616);
24066
24088
  }
24067
- .c4p--non-linear-reading--body-dark {
24089
+ .c4p--non-linear-reading__dark .c4p--non-linear-reading__body {
24068
24090
  --cds-interactive-01: #0f62fe;
24069
24091
  --cds-interactive-02: #6f6f6f;
24070
24092
  --cds-interactive-03: #ffffff;
@@ -24495,8 +24517,11 @@ th.c4p--datagrid__select-all-toggle-on.button {
24495
24517
  border-left-style: solid;
24496
24518
  margin: var(--cds-spacing-02, 0.25rem) 0;
24497
24519
  animation: fade 600ms;
24498
- border-left-color: #d4bbff;
24499
- color: #d4bbff;
24520
+ border-left-color: var(--cds-text-01, #161616);
24521
+ color: var(--cds-text-01, #161616);
24522
+ }
24523
+ .c4p--non-linear-reading__dark .c4p--non-linear-reading__body a {
24524
+ color: var(--cds-link-01, #0f62fe);
24500
24525
  }
24501
24526
 
24502
24527
  /*# sourceMappingURL=index.css.map */