@carbon/ibm-products 2.15.2 → 2.17.0-alpha.8
Sign up to get free protection for your applications and to get access to all the features.
- package/css/config-dev.css +3 -0
- package/css/config-dev.css.map +1 -0
- package/css/index-full-carbon.css +195 -1
- 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-released-only.css +1852 -38
- 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 +195 -1
- 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 +5 -1
- 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/Datagrid/Datagrid/DatagridContent.js +12 -9
- package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +3 -3
- package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +36 -22
- package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +12 -11
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +7 -3
- package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +24 -13
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +2 -2
- package/es/components/Datagrid/Datagrid/addons/stateReducer.js +50 -14
- package/es/components/Datagrid/Datagrid.docs-page.js +4 -4
- package/es/components/Datagrid/Datagrid.stories/StickyActionsColumnStory.js +1 -1
- package/es/components/Datagrid/useActionsColumn.js +1 -4
- package/es/components/Datagrid/useDatagrid.js +5 -1
- package/es/components/Datagrid/useFlexResize.js +19 -9
- package/es/components/Datagrid/useInfiniteScroll.js +1 -5
- package/es/components/Datagrid/useOnRowClick.js +6 -7
- package/es/components/Datagrid/useSelectRows.js +8 -5
- package/es/components/Datagrid/useSortableColumns.js +5 -7
- package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +2 -1
- package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +2 -1
- package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +2 -1
- package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +2 -1
- package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +2 -1
- package/es/components/EmptyStates/assets/ErrorIllustration.js +5 -3
- package/es/components/EmptyStates/assets/NoDataIllustration.js +5 -3
- package/es/components/EmptyStates/assets/NoTagsIllustration.js +5 -3
- package/es/components/EmptyStates/assets/NotFoundIllustration.js +5 -3
- package/es/components/EmptyStates/assets/NotificationsIllustration.js +5 -3
- package/es/components/EmptyStates/assets/UnauthorizedIllustration.js +5 -3
- package/es/components/InlineTip/InlineTip.docs-page.js +13 -0
- package/es/components/InlineTip/InlineTip.js +217 -0
- package/es/components/InlineTip/InlineTipButton.js +53 -0
- package/es/components/InlineTip/InlineTipLink.js +57 -0
- package/es/components/InlineTip/index.js +10 -0
- package/es/components/InlineTip/utils.js +36 -0
- package/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.docs-page.js +11 -0
- package/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js +140 -0
- package/es/components/SteppedAnimatedMedia/assets/index.js +4 -0
- package/es/components/SteppedAnimatedMedia/index.js +8 -0
- package/es/global/js/package-settings.js +3 -4
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +12 -9
- package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +3 -3
- package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +41 -29
- package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +11 -11
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +7 -3
- package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +23 -12
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +2 -2
- package/lib/components/Datagrid/Datagrid/addons/stateReducer.js +51 -15
- package/lib/components/Datagrid/Datagrid.docs-page.js +4 -4
- package/lib/components/Datagrid/Datagrid.stories/StickyActionsColumnStory.js +1 -1
- package/lib/components/Datagrid/useActionsColumn.js +1 -7
- package/lib/components/Datagrid/useDatagrid.js +5 -1
- package/lib/components/Datagrid/useFlexResize.js +19 -9
- package/lib/components/Datagrid/useInfiniteScroll.js +0 -4
- package/lib/components/Datagrid/useOnRowClick.js +6 -7
- package/lib/components/Datagrid/useSelectRows.js +8 -5
- package/lib/components/Datagrid/useSortableColumns.js +5 -7
- package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +2 -1
- package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +2 -1
- package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +2 -1
- package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +2 -1
- package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +2 -1
- package/lib/components/EmptyStates/assets/ErrorIllustration.js +5 -3
- package/lib/components/EmptyStates/assets/NoDataIllustration.js +5 -3
- package/lib/components/EmptyStates/assets/NoTagsIllustration.js +5 -3
- package/lib/components/EmptyStates/assets/NotFoundIllustration.js +5 -3
- package/lib/components/EmptyStates/assets/NotificationsIllustration.js +5 -3
- package/lib/components/EmptyStates/assets/UnauthorizedIllustration.js +5 -3
- package/lib/components/InlineTip/InlineTip.docs-page.js +23 -0
- package/lib/components/InlineTip/InlineTip.js +224 -0
- package/lib/components/InlineTip/InlineTipButton.js +57 -0
- package/lib/components/InlineTip/InlineTipLink.js +61 -0
- package/lib/components/InlineTip/index.js +26 -0
- package/lib/components/InlineTip/utils.js +43 -0
- package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.docs-page.js +21 -0
- package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js +148 -0
- package/lib/components/SteppedAnimatedMedia/assets/index.js +9 -0
- package/lib/components/SteppedAnimatedMedia/index.js +12 -0
- package/lib/global/js/package-settings.js +3 -4
- package/package.json +6 -7
- package/scss/components/Datagrid/styles/_datagrid.scss +5 -0
- package/scss/components/{TooltipTrigger/_storybook-styles.scss → InlineTip/_index.scss} +2 -0
- package/scss/components/InlineTip/_inline-tip.scss +229 -0
- package/scss/components/SidePanel/_side-panel.scss +1 -4
- package/scss/components/_index-released-only-with-carbon.scss +1 -0
- package/scss/components/_index-released-only.scss +1 -0
- package/scss/components/_index.scss +1 -0
- package/scss/config-dev.scss +3 -0
- package/scss/components/APIKeyModal/_storybook-styles.scss +0 -35
- package/scss/components/AboutModal/_storybook-styles.scss +0 -29
- package/scss/components/ActionBar/_storybook-styles.scss +0 -8
- package/scss/components/ActionSet/_storybook-styles.scss +0 -36
- package/scss/components/AddSelect/_storybook-styles.scss +0 -6
- package/scss/components/BreadcrumbWithOverflow/_storybook-styles.scss +0 -8
- package/scss/components/ButtonMenu/_storybook-styles.scss +0 -6
- package/scss/components/ButtonSetWithOverflow/_storybook-styles.scss +0 -8
- package/scss/components/Card/_storybook-styles.scss +0 -12
- package/scss/components/Cascade/_storybook-styles.scss +0 -34
- package/scss/components/Checklist/_storybook-styles.scss +0 -13
- package/scss/components/CreateFullPage/_storybook-styles.scss +0 -67
- package/scss/components/CreateModal/_storybook-styles.scss +0 -54
- package/scss/components/CreateSidePanel/_storybook-styles.scss +0 -32
- package/scss/components/CreateTearsheet/_storybook-styles.scss +0 -56
- package/scss/components/CreateTearsheetNarrow/_storybook-styles.scss +0 -27
- package/scss/components/DataSpreadsheet/_storybook-styles.scss +0 -17
- package/scss/components/Datagrid/_storybook-styles.scss +0 -157
- package/scss/components/EditFullPage/_storybook-styles.scss +0 -10
- package/scss/components/EditInPlace/_storybook-styles.scss +0 -15
- package/scss/components/EditSidePanel/_storybook-styles.scss +0 -32
- package/scss/components/EditTearsheet/_storybook-styles.scss +0 -59
- package/scss/components/EditTearsheetNarrow/_storybook-styles.scss +0 -10
- package/scss/components/EditUpdateCards/_storybook-styles.scss +0 -55
- package/scss/components/EmptyStates/_storybook-styles.scss +0 -6
- package/scss/components/ExampleComponent/_storybook-styles.scss +0 -6
- package/scss/components/ExportModal/_storybook-styles.scss +0 -6
- package/scss/components/ExpressiveCard/_storybook-styles.scss +0 -26
- package/scss/components/FilterSummary/_storybook-styles.scss +0 -16
- package/scss/components/ImportModal/_storybook-styles.scss +0 -6
- package/scss/components/MultiAddSelect/_storybook-styles.scss +0 -6
- package/scss/components/NotificationsPanel/_storybook-styles.scss +0 -23
- package/scss/components/OptionsTile/_storybook-styles.scss +0 -29
- package/scss/components/PageHeader/_storybook-styles.scss +0 -90
- package/scss/components/ProductiveCard/_storybook-styles.scss +0 -23
- package/scss/components/RemoveModal/_storybook-styles.scss +0 -6
- package/scss/components/Saving/_storybook-styles.scss +0 -12
- package/scss/components/SidePanel/_storybook-styles.scss +0 -52
- package/scss/components/SingleAddSelect/_storybook-styles.scss +0 -6
- package/scss/components/StatusIcon/_storybook-styles.scss +0 -6
- package/scss/components/TagSet/_storybook-styles.scss +0 -8
- package/scss/components/Tearsheet/_storybook-styles.scss +0 -25
- package/scss/components/UserProfileImage/_storybook.scss +0 -6
- package/scss/components/WebTerminal/_storybook-styles.scss +0 -46
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"config-dev.css"}
|
@@ -4242,7 +4242,6 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
4242
4242
|
position: sticky;
|
4243
4243
|
z-index: 4;
|
4244
4244
|
top: 0;
|
4245
|
-
height: calc(var(--c4p--side-panel--title-container-height) - var(--c4p--side-panel--label-text-height));
|
4246
4245
|
padding: 1rem 1rem 0.5rem 1rem;
|
4247
4246
|
background-color: var(--cds-layer-01, #f4f4f4);
|
4248
4247
|
/* stylelint-disable-next-line max-nesting-depth */
|
@@ -4303,6 +4302,7 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
4303
4302
|
-webkit-line-clamp: 2;
|
4304
4303
|
position: inherit;
|
4305
4304
|
z-index: 4;
|
4305
|
+
margin-bottom: calc(-1 * var(--c4p--side-panel--label-text-height));
|
4306
4306
|
background-color: var(--cds-layer-01, #f4f4f4);
|
4307
4307
|
opacity: var(--c4p--side-panel--subtitle-opacity);
|
4308
4308
|
transform: translateY(var(--c4p--side-panel--title-y-position));
|
@@ -11406,6 +11406,10 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
11406
11406
|
background-color: var(--cds-background-selected-hover, rgba(141, 141, 141, 0.32));
|
11407
11407
|
}
|
11408
11408
|
|
11409
|
+
.c4p--datagrid__grid-container table.c4p--datagrid__table-simple.cds--data-table.c4p--datagrid__table-is-resizing {
|
11410
|
+
overflow-y: hidden;
|
11411
|
+
}
|
11412
|
+
|
11409
11413
|
.c4p--datagrid__resizableColumn.c4p--datagrid__isResizing .c4p--datagrid__resizer {
|
11410
11414
|
border-right: 0.125rem solid var(--cds-button-secondary-hover, #474747);
|
11411
11415
|
}
|
@@ -16026,6 +16030,196 @@ a.cds--side-nav__link--current::before {
|
|
16026
16030
|
border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
|
16027
16031
|
}
|
16028
16032
|
|
16033
|
+
/**
|
16034
|
+
* The InlineTip specifically is theme-agnostic, and so we have to
|
16035
|
+
* use color tokens to keep the colors static instead of theme tokens
|
16036
|
+
* that will change depending on the selected theme.
|
16037
|
+
*
|
16038
|
+
* We are triggering a *large* amount of linting errors.
|
16039
|
+
* So, we're using the following "disable" rules for the entire file
|
16040
|
+
* instead of many individual rules.
|
16041
|
+
*/
|
16042
|
+
/* stylelint-disable carbon/layout-token-use */
|
16043
|
+
/* stylelint-disable carbon/theme-token-use */
|
16044
|
+
/* stylelint-disable declaration-no-important */
|
16045
|
+
/* stylelint-disable function-no-unknown */
|
16046
|
+
/* stylelint-disable max-nesting-depth */
|
16047
|
+
.c4p--inline-tip {
|
16048
|
+
position: relative;
|
16049
|
+
display: flex;
|
16050
|
+
background: linear-gradient(90deg, #001d6c 0%, #6929c4 100%);
|
16051
|
+
}
|
16052
|
+
|
16053
|
+
.c4p--inline-tip__wide {
|
16054
|
+
padding: 1rem 4rem 1rem 3rem;
|
16055
|
+
}
|
16056
|
+
|
16057
|
+
.c4p--inline-tip__wide.c4p--inline-tip__has-media {
|
16058
|
+
padding-right: 3rem;
|
16059
|
+
}
|
16060
|
+
|
16061
|
+
.c4p--inline-tip__wide.c4p--inline-tip__has-media .c4p--inline-tip__media {
|
16062
|
+
padding-left: 4rem;
|
16063
|
+
}
|
16064
|
+
|
16065
|
+
.c4p--inline-tip__wide.c4p--inline-tip__has-media .c4p--inline-tip__media img {
|
16066
|
+
display: block;
|
16067
|
+
height: 7.375rem;
|
16068
|
+
}
|
16069
|
+
|
16070
|
+
.c4p--inline-tip__wide.c4p--inline-tip__has-media .c4p--inline-tip__media svg {
|
16071
|
+
width: calc(7.375rem * 2) !important;
|
16072
|
+
height: 7.375rem !important;
|
16073
|
+
}
|
16074
|
+
|
16075
|
+
.c4p--inline-tip__narrow {
|
16076
|
+
flex-direction: column-reverse;
|
16077
|
+
padding: 3.25rem 2rem 1rem 1rem;
|
16078
|
+
}
|
16079
|
+
|
16080
|
+
.c4p--inline-tip__narrow.c4p--inline-tip__has-media {
|
16081
|
+
padding-top: 2rem;
|
16082
|
+
padding-right: 1rem;
|
16083
|
+
}
|
16084
|
+
|
16085
|
+
.c4p--inline-tip__narrow.c4p--inline-tip__has-media .c4p--inline-tip__media {
|
16086
|
+
padding-bottom: 1rem;
|
16087
|
+
}
|
16088
|
+
.c4p--inline-tip__narrow.c4p--inline-tip__has-media .c4p--inline-tip__media img {
|
16089
|
+
width: 100%;
|
16090
|
+
}
|
16091
|
+
|
16092
|
+
.c4p--inline-tip__narrow.c4p--inline-tip__has-media .c4p--inline-tip__content {
|
16093
|
+
padding-right: 1rem;
|
16094
|
+
}
|
16095
|
+
|
16096
|
+
.c4p--inline-tip__narrow.c4p--inline-tip__has-media .c4p--inline-tip__footer {
|
16097
|
+
justify-content: space-between;
|
16098
|
+
}
|
16099
|
+
|
16100
|
+
.c4p--inline-tip__narrow.c4p--inline-tip__has-media .c4p--inline-tip__footer .c4p--inline-tip__close-btn {
|
16101
|
+
margin-right: -1rem;
|
16102
|
+
}
|
16103
|
+
|
16104
|
+
.c4p--inline-tip a {
|
16105
|
+
color: #a6c8ff;
|
16106
|
+
}
|
16107
|
+
.c4p--inline-tip a:visited, .c4p--inline-tip a:hover, .c4p--inline-tip a:visited:hover {
|
16108
|
+
color: #a6c8ff;
|
16109
|
+
}
|
16110
|
+
|
16111
|
+
.c4p--inline-tip__title {
|
16112
|
+
font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
|
16113
|
+
font-weight: var(--cds-productive-heading-01-font-weight, 600);
|
16114
|
+
line-height: var(--cds-productive-heading-01-line-height, 1.28572);
|
16115
|
+
letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
|
16116
|
+
color: #ffffff;
|
16117
|
+
}
|
16118
|
+
|
16119
|
+
.c4p--inline-tip__body {
|
16120
|
+
font-size: var(--cds-body-short-01-font-size, 0.875rem);
|
16121
|
+
font-weight: var(--cds-body-short-01-font-weight, 400);
|
16122
|
+
line-height: var(--cds-body-short-01-line-height, 1.28572);
|
16123
|
+
letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
|
16124
|
+
color: #f4f4f4;
|
16125
|
+
}
|
16126
|
+
|
16127
|
+
.c4p--inline-tip__body p {
|
16128
|
+
font-size: var(--cds-body-short-01-font-size, 0.875rem);
|
16129
|
+
font-weight: var(--cds-body-short-01-font-weight, 400);
|
16130
|
+
line-height: var(--cds-body-short-01-line-height, 1.28572);
|
16131
|
+
letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
|
16132
|
+
margin-bottom: 0.5rem;
|
16133
|
+
font-size: inherit;
|
16134
|
+
line-height: inherit;
|
16135
|
+
}
|
16136
|
+
.c4p--inline-tip__body p:last-of-type {
|
16137
|
+
margin-bottom: 0;
|
16138
|
+
}
|
16139
|
+
|
16140
|
+
.c4p--inline-tip__body .c4p--inline-tip__secondary-btn {
|
16141
|
+
margin-top: 0.5rem;
|
16142
|
+
}
|
16143
|
+
|
16144
|
+
.c4p--inline-tip__body .c4p--inline-tip__secondary-btn .c4p--inline-tip__button {
|
16145
|
+
margin-left: -1rem;
|
16146
|
+
color: #a6c8ff;
|
16147
|
+
}
|
16148
|
+
.c4p--inline-tip__body .c4p--inline-tip__secondary-btn .c4p--inline-tip__button:active, .c4p--inline-tip__body .c4p--inline-tip__secondary-btn .c4p--inline-tip__button:hover {
|
16149
|
+
background-color: #7f3ae7;
|
16150
|
+
color: #f4f4f4;
|
16151
|
+
}
|
16152
|
+
|
16153
|
+
.c4p--inline-tip__footer {
|
16154
|
+
display: flex;
|
16155
|
+
padding-top: 1rem;
|
16156
|
+
}
|
16157
|
+
.c4p--inline-tip__footer:empty {
|
16158
|
+
display: none;
|
16159
|
+
}
|
16160
|
+
|
16161
|
+
.c4p--inline-tip__preview-text {
|
16162
|
+
display: -webkit-box;
|
16163
|
+
overflow: hidden;
|
16164
|
+
-webkit-box-orient: vertical;
|
16165
|
+
-webkit-line-clamp: 1;
|
16166
|
+
}
|
16167
|
+
|
16168
|
+
.c4p--inline-tip__icon-idea {
|
16169
|
+
position: absolute;
|
16170
|
+
width: 1.25rem;
|
16171
|
+
color: #ffffff;
|
16172
|
+
inset: 1rem 0 0 1rem;
|
16173
|
+
}
|
16174
|
+
|
16175
|
+
.c4p--inline-tip__close-icon-wrapper {
|
16176
|
+
position: absolute;
|
16177
|
+
top: 0;
|
16178
|
+
right: 0;
|
16179
|
+
}
|
16180
|
+
|
16181
|
+
.c4p--inline-tip .c4p--inline-tip__close-icon {
|
16182
|
+
padding: 0.375rem 0 0 0;
|
16183
|
+
block-size: 2rem;
|
16184
|
+
color: #ffffff;
|
16185
|
+
inline-size: 2rem;
|
16186
|
+
min-block-size: 2rem;
|
16187
|
+
}
|
16188
|
+
.c4p--inline-tip .c4p--inline-tip__close-icon:active, .c4p--inline-tip .c4p--inline-tip__close-icon:hover {
|
16189
|
+
background-color: #7f3ae7;
|
16190
|
+
color: var(--cds-text-primary, #161616);
|
16191
|
+
}
|
16192
|
+
.c4p--inline-tip .c4p--inline-tip__close-icon path {
|
16193
|
+
margin: 0;
|
16194
|
+
fill: #ffffff;
|
16195
|
+
}
|
16196
|
+
|
16197
|
+
.c4p--inline-tip .c4p--inline-tip__toggle-btn {
|
16198
|
+
border: none;
|
16199
|
+
margin: 0 1rem 0 -1rem;
|
16200
|
+
color: #a6c8ff;
|
16201
|
+
}
|
16202
|
+
.c4p--inline-tip .c4p--inline-tip__toggle-btn:hover {
|
16203
|
+
background-color: #7c3dd6;
|
16204
|
+
color: #f4f4f4;
|
16205
|
+
}
|
16206
|
+
|
16207
|
+
.c4p--inline-tip .c4p--inline-tip__close-btn {
|
16208
|
+
border: 0.0625rem solid #ffffff;
|
16209
|
+
color: #ffffff;
|
16210
|
+
}
|
16211
|
+
.c4p--inline-tip .c4p--inline-tip__close-btn:active, .c4p--inline-tip .c4p--inline-tip__close-btn:hover {
|
16212
|
+
background-color: #f4f4f4;
|
16213
|
+
color: #161616;
|
16214
|
+
}
|
16215
|
+
.c4p--inline-tip .c4p--inline-tip__close-btn svg {
|
16216
|
+
position: absolute;
|
16217
|
+
right: 1rem;
|
16218
|
+
width: 1rem;
|
16219
|
+
height: 1rem;
|
16220
|
+
flex-shrink: 0;
|
16221
|
+
}
|
16222
|
+
|
16029
16223
|
html,
|
16030
16224
|
body,
|
16031
16225
|
div,
|