@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.
- package/README.md +10 -5
- package/css/index-full-carbon.css +89 -64
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon.css +89 -64
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +89 -64
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/AboutModal/AboutModal.js +3 -4
- package/es/components/ActionBar/ActionBar.js +9 -18
- package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +8 -13
- package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +7 -11
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +5 -5
- package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +3 -4
- package/es/components/Datagrid/index.js +1 -0
- package/es/components/Datagrid/useActionsColumn.js +10 -7
- package/es/components/Datagrid/useCustomizeColumns.js +5 -1
- package/es/components/Datagrid/useEditableCell.js +12 -0
- package/es/components/Datagrid/useExpandedRow.js +11 -7
- package/es/components/Datagrid/useFiltering.js +11 -8
- package/es/components/Datagrid/useInlineEdit.js +17 -8
- package/es/components/Datagrid/useNestedRows.js +10 -6
- package/es/components/ExampleComponent/ExampleComponent.js +32 -4
- package/es/components/ExampleComponent/useExample.js +49 -0
- package/es/components/InlineEditV1/InlineEditV1.js +3 -1
- package/es/components/NonLinearReading/NonLinearReading.js +7 -7
- package/es/components/PageHeader/PageHeader.js +28 -31
- package/es/components/SidePanel/SidePanel.js +25 -26
- package/es/components/TagSet/TagSet.js +5 -7
- package/es/components/Tearsheet/TearsheetShell.js +4 -6
- package/es/components/index.js +1 -1
- package/es/global/js/hooks/useResizeObserver.js +74 -0
- package/es/global/js/package-settings.js +34 -4
- package/es/global/js/utils/test-helper.js +34 -3
- package/es/settings.js +26 -30
- package/lib/components/AboutModal/AboutModal.js +3 -4
- package/lib/components/ActionBar/ActionBar.js +9 -18
- package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +8 -13
- package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +7 -11
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +4 -4
- package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +3 -4
- package/lib/components/Datagrid/index.js +7 -0
- package/lib/components/Datagrid/useActionsColumn.js +7 -1
- package/lib/components/Datagrid/useCustomizeColumns.js +4 -0
- package/lib/components/Datagrid/useEditableCell.js +20 -0
- package/lib/components/Datagrid/useExpandedRow.js +4 -0
- package/lib/components/Datagrid/useFiltering.js +4 -0
- package/lib/components/Datagrid/useInlineEdit.js +19 -8
- package/lib/components/Datagrid/useNestedRows.js +9 -6
- package/lib/components/ExampleComponent/ExampleComponent.js +35 -4
- package/lib/components/ExampleComponent/useExample.js +58 -0
- package/lib/components/InlineEditV1/InlineEditV1.js +3 -1
- package/lib/components/NonLinearReading/NonLinearReading.js +6 -6
- package/lib/components/PageHeader/PageHeader.js +28 -31
- package/lib/components/SidePanel/SidePanel.js +25 -26
- package/lib/components/TagSet/TagSet.js +5 -7
- package/lib/components/Tearsheet/TearsheetShell.js +4 -6
- package/lib/components/index.js +6 -0
- package/lib/global/js/hooks/useResizeObserver.js +83 -0
- package/lib/global/js/package-settings.js +33 -3
- package/lib/global/js/utils/test-helper.js +37 -5
- package/lib/settings.js +26 -30
- package/package.json +2 -3
- package/scss/components/NonLinearReading/_non-linear-reading.scss +76 -67
- 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-
|
23138
|
-
|
23139
|
-
|
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
|
-
|
23144
|
-
color:
|
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-
|
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-
|
23151
|
-
|
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-
|
23154
|
-
|
23155
|
-
|
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
|
-
|
23160
|
-
background-color: #
|
23161
|
-
color: var(--cds-
|
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-
|
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-
|
23168
|
-
|
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-
|
23173
|
-
|
23179
|
+
.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-open svg {
|
23180
|
+
transform: rotate(180deg);
|
23174
23181
|
}
|
23175
|
-
.c4p--non-linear-
|
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
|
-
|
23597
|
-
|
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
|
-
|
23602
|
-
color:
|
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-
|
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-
|
23609
|
-
|
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-
|
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
|
-
|
24033
|
-
|
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
|
-
|
24038
|
-
background-color: #
|
24039
|
-
color: var(--cds-
|
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-
|
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-
|
24046
|
-
|
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-
|
24051
|
-
|
24082
|
+
.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-open svg {
|
24083
|
+
transform: rotate(180deg);
|
24052
24084
|
}
|
24053
|
-
.c4p--non-linear-
|
24054
|
-
|
24055
|
-
|
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-
|
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: #
|
24499
|
-
color: #
|
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 */
|