@carbon/ibm-products 2.28.1 → 2.29.0-alpha.10
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +224 -15
- 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 +40 -8
- 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 +224 -15
- 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 +188 -8
- 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/APIKeyModal/APIKeyModal.d.ts +2 -1
- package/es/components/APIKeyModal/APIKeyModal.js +13 -9
- package/es/components/APIKeyModal/APIKeyModal.types.d.ts +206 -0
- package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +2 -0
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.d.ts +1 -2
- package/es/components/Datagrid/useInitialColumnSort.d.ts +1 -0
- package/es/components/Datagrid/useInitialColumnSort.js +42 -0
- package/es/components/Datagrid/useSortableColumns.d.ts +4 -0
- package/es/components/Datagrid/useSortableColumns.js +16 -16
- package/es/components/DescriptionList/DescriptionList.d.ts +42 -0
- package/es/components/DescriptionList/DescriptionList.js +88 -0
- package/es/components/DescriptionList/constants.d.ts +6 -0
- package/es/components/DescriptionList/constants.js +16 -0
- package/es/components/DescriptionList/index.d.ts +1 -0
- package/es/components/EmptyStates/EmptyStateContent.d.ts +1 -287
- package/es/components/HTTPErrors/HTTPErrorContent.d.ts +1 -293
- package/es/components/StatusIndicator/StatusIndicator.d.ts +5 -0
- package/es/components/StatusIndicator/StatusIndicator.js +100 -0
- package/es/components/StatusIndicator/StatusIndicatorStep.d.ts +5 -0
- package/es/components/StatusIndicator/index.d.ts +2 -0
- package/es/components/index.d.ts +2 -0
- package/es/global/js/package-settings.d.ts +3 -0
- package/es/global/js/package-settings.js +3 -0
- package/es/index.js +2 -0
- package/es/settings.d.ts +3 -0
- package/lib/components/APIKeyModal/APIKeyModal.d.ts +2 -1
- package/lib/components/APIKeyModal/APIKeyModal.js +13 -9
- package/lib/components/APIKeyModal/APIKeyModal.types.d.ts +206 -0
- package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +2 -0
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.d.ts +1 -2
- package/lib/components/Datagrid/useInitialColumnSort.d.ts +1 -0
- package/lib/components/Datagrid/useInitialColumnSort.js +46 -0
- package/lib/components/Datagrid/useSortableColumns.d.ts +4 -0
- package/lib/components/Datagrid/useSortableColumns.js +16 -15
- package/lib/components/DescriptionList/DescriptionList.d.ts +42 -0
- package/lib/components/DescriptionList/DescriptionList.js +95 -0
- package/lib/components/DescriptionList/constants.d.ts +6 -0
- package/lib/components/DescriptionList/constants.js +20 -0
- package/lib/components/DescriptionList/index.d.ts +1 -0
- package/lib/components/EmptyStates/EmptyStateContent.d.ts +1 -287
- package/lib/components/HTTPErrors/HTTPErrorContent.d.ts +1 -293
- package/lib/components/StatusIndicator/StatusIndicator.d.ts +5 -0
- package/lib/components/StatusIndicator/StatusIndicator.js +107 -0
- package/lib/components/StatusIndicator/StatusIndicatorStep.d.ts +5 -0
- package/lib/components/StatusIndicator/index.d.ts +2 -0
- package/lib/components/index.d.ts +2 -0
- package/lib/global/js/package-settings.d.ts +3 -0
- package/lib/global/js/package-settings.js +3 -0
- package/lib/index.js +10 -0
- package/lib/settings.d.ts +3 -0
- package/package.json +2 -2
- package/scss/components/DescriptionList/_carbon-imports.scss +9 -0
- package/scss/components/DescriptionList/_description-list.scss +103 -0
- package/scss/components/DescriptionList/_index-with-carbon.scss +9 -0
- package/scss/components/DescriptionList/_index.scss +8 -0
- package/scss/components/SidePanel/_side-panel.scss +6 -1
- package/scss/components/StatusIndicator/_carbon-imports.scss +12 -0
- package/scss/components/StatusIndicator/_index-with-carbon.scss +9 -0
- package/scss/components/StatusIndicator/_index.scss +8 -0
- package/scss/components/StatusIndicator/_status-indicator.scss +93 -0
- package/scss/components/Tearsheet/_tearsheet.scss +41 -15
- package/scss/components/_index-with-carbon.scss +2 -0
- package/scss/components/_index.scss +2 -0
package/css/index.css
CHANGED
@@ -7435,11 +7435,17 @@ a.cds--overflow-menu-options__btn::before {
|
|
7435
7435
|
height: 2.5rem;
|
7436
7436
|
}
|
7437
7437
|
.c4p--side-panel .c4p--side-panel__slug-and-close {
|
7438
|
-
position:
|
7438
|
+
position: fixed;
|
7439
7439
|
z-index: 10; /* must be higher than title container border bottom */
|
7440
7440
|
top: 0;
|
7441
7441
|
right: 0;
|
7442
7442
|
display: flex;
|
7443
|
+
/* stylelint-disable-next-line max-nesting-depth */
|
7444
|
+
}
|
7445
|
+
@media (prefers-reduced-motion) {
|
7446
|
+
.c4p--side-panel .c4p--side-panel__slug-and-close {
|
7447
|
+
position: absolute;
|
7448
|
+
}
|
7443
7449
|
}
|
7444
7450
|
.c4p--side-panel .c4p--side-panel__actions-container {
|
7445
7451
|
position: sticky;
|
@@ -7565,13 +7571,33 @@ a.cds--overflow-menu-options__btn::before {
|
|
7565
7571
|
}
|
7566
7572
|
|
7567
7573
|
.c4p--tearsheet.c4p--tearsheet {
|
7574
|
+
--overlay-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
|
7575
|
+
--overlay-opacity: 1;
|
7568
7576
|
z-index: 9001;
|
7569
7577
|
align-items: flex-end;
|
7570
7578
|
color: var(--cds-text-primary, #161616);
|
7571
|
-
transition: visibility 0s linear 240ms
|
7579
|
+
transition: visibility 0s linear 240ms;
|
7572
7580
|
--c4p--tearsheet--stacking-scale-factor-single: 0.95;
|
7573
7581
|
--c4p--tearsheet--stacking-scale-factor-double: 0.9;
|
7574
7582
|
}
|
7583
|
+
.c4p--tearsheet.c4p--tearsheet::before {
|
7584
|
+
position: absolute;
|
7585
|
+
display: block;
|
7586
|
+
background: var(--overlay-color);
|
7587
|
+
content: "";
|
7588
|
+
inset: 0;
|
7589
|
+
opacity: var(--overlay-opacity);
|
7590
|
+
transition: background-color 240ms cubic-bezier(0.4, 0.14, 1, 1), opacity 240ms cubic-bezier(0.4, 0.14, 1, 1);
|
7591
|
+
}
|
7592
|
+
@media (prefers-reduced-motion: reduce) {
|
7593
|
+
.c4p--tearsheet.c4p--tearsheet::before {
|
7594
|
+
transition: none;
|
7595
|
+
}
|
7596
|
+
}
|
7597
|
+
.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet {
|
7598
|
+
/* tearsheet uses --overlay-color and --overlay-opacity in ::before */
|
7599
|
+
background: initial;
|
7600
|
+
}
|
7575
7601
|
.c4p--tearsheet.is-visible {
|
7576
7602
|
z-index: 9000;
|
7577
7603
|
align-items: flex-end;
|
@@ -7583,19 +7609,19 @@ a.cds--overflow-menu-options__btn::before {
|
|
7583
7609
|
}
|
7584
7610
|
}
|
7585
7611
|
.c4p--tearsheet.c4p--tearsheet--stacked-1-of-2 {
|
7612
|
+
--overlay-opacity: 0.67;
|
7586
7613
|
z-index: 8999;
|
7587
|
-
background-color: rgba(22, 22, 22, 0.33);
|
7588
7614
|
}
|
7589
7615
|
.c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 {
|
7616
|
+
--overlay-opacity: 0.22;
|
7590
7617
|
z-index: 8998;
|
7591
|
-
background-color: rgba(22, 22, 22, 0.11);
|
7592
7618
|
}
|
7593
7619
|
.c4p--tearsheet.c4p--tearsheet--stacked-2-of-3 {
|
7620
|
+
--overlay-opacity: 0.5;
|
7594
7621
|
z-index: 8999;
|
7595
|
-
background-color: rgba(22, 22, 22, 0.25);
|
7596
7622
|
}
|
7597
7623
|
.c4p--tearsheet.c4p--tearsheet--stacked-2-of-2, .c4p--tearsheet.c4p--tearsheet--stacked-3-of-3 {
|
7598
|
-
|
7624
|
+
--overlay-opacity: 0.5;
|
7599
7625
|
}
|
7600
7626
|
.c4p--tearsheet .c4p--tearsheet__container {
|
7601
7627
|
top: auto;
|
@@ -7708,10 +7734,12 @@ a.cds--overflow-menu-options__btn::before {
|
|
7708
7734
|
padding: 1.5rem 2rem 0;
|
7709
7735
|
}
|
7710
7736
|
.c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon, .c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__header.c4p--tearsheet__header {
|
7711
|
-
padding-
|
7737
|
+
padding-inline-end: 5rem;
|
7712
7738
|
}
|
7713
7739
|
.c4p--tearsheet.c4p--tearsheet--wide.c4p--tearsheet--has-slug .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon {
|
7714
|
-
|
7740
|
+
/* spacing 11 plus additional space for slug/close */
|
7741
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
7742
|
+
padding-inline-end: calc(8rem);
|
7715
7743
|
}
|
7716
7744
|
.c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header-description {
|
7717
7745
|
max-width: 80%;
|
@@ -7806,6 +7834,10 @@ a.cds--overflow-menu-options__btn::before {
|
|
7806
7834
|
.c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__buttons {
|
7807
7835
|
background: var(--cds-background, #ffffff);
|
7808
7836
|
}
|
7837
|
+
.c4p--tearsheet.c4p--tearsheet--has-slug {
|
7838
|
+
/* stylelint-disable-next-line carbon/theme-token-use */
|
7839
|
+
--overlay-color: var(--cds-ai-overlay, rgba(0, 17, 65, 0.5));
|
7840
|
+
}
|
7809
7841
|
.c4p--tearsheet.c4p--tearsheet--has-slug:not(.c4p--tearsheet--has-close) .cds--slug {
|
7810
7842
|
inset-inline-end: 0;
|
7811
7843
|
}
|
@@ -35678,6 +35710,78 @@ a.cds--side-nav__link--current::before {
|
|
35678
35710
|
white-space: nowrap;
|
35679
35711
|
}
|
35680
35712
|
|
35713
|
+
.c4p--description-list .cds--structured-list {
|
35714
|
+
margin-bottom: 2rem;
|
35715
|
+
}
|
35716
|
+
|
35717
|
+
.c4p--description-list .c4p--description-list__body .c4p--description-list__row {
|
35718
|
+
border-block-end-width: 0;
|
35719
|
+
border-block-start-width: 0;
|
35720
|
+
}
|
35721
|
+
|
35722
|
+
.c4p--description-list .cds--structured-list .c4p--description-list__body .c4p--description-list__row:first-child {
|
35723
|
+
border-block-start-width: 0;
|
35724
|
+
}
|
35725
|
+
|
35726
|
+
.c4p--description-list .cds--structured-list .c4p--description-list__body .c4p--description-list__row:last-child {
|
35727
|
+
border-block-end-width: 0;
|
35728
|
+
}
|
35729
|
+
|
35730
|
+
.c4p--description-list--bordered .c4p--description-list__body .c4p--description-list__row {
|
35731
|
+
border-block-start-width: 1px;
|
35732
|
+
}
|
35733
|
+
|
35734
|
+
.c4p--description-list .c4p--description-list__body .c4p--description-list__cell {
|
35735
|
+
font-size: var(--cds-body-01-font-size, 0.875rem);
|
35736
|
+
font-weight: var(--cds-body-01-font-weight, 400);
|
35737
|
+
line-height: var(--cds-body-01-line-height, 1.42857);
|
35738
|
+
letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
|
35739
|
+
padding: 0.5rem 1.5rem 0.5rem 0.5rem;
|
35740
|
+
}
|
35741
|
+
|
35742
|
+
.c4p--description-list .c4p--description-list__body .c4p--description-list__cell:first-of-type {
|
35743
|
+
width: 1%;
|
35744
|
+
padding-left: 0;
|
35745
|
+
white-space: nowrap;
|
35746
|
+
}
|
35747
|
+
|
35748
|
+
.c4p--description-list .c4p--description-list__body .c4p--description-list__cell:last-of-type {
|
35749
|
+
padding-right: 0;
|
35750
|
+
color: var(--cds-text-primary, #161616);
|
35751
|
+
}
|
35752
|
+
|
35753
|
+
.c4p--description-list .c4p--description-list__body .c4p--description-list__row:first-of-type > .c4p--description-list__cell {
|
35754
|
+
padding-top: 0;
|
35755
|
+
}
|
35756
|
+
|
35757
|
+
.c4p--description-list .c4p--description-list__body .c4p--description-list__row:last-of-type > .c4p--description-list__cell {
|
35758
|
+
padding-bottom: 0;
|
35759
|
+
}
|
35760
|
+
|
35761
|
+
.c4p--description-list .c4p--description-list__body .c4p--description-list__cell ul {
|
35762
|
+
list-style: none;
|
35763
|
+
}
|
35764
|
+
|
35765
|
+
.c4p--description-list .c4p--description-list__body .c4p--description-list__cell ul > li {
|
35766
|
+
margin-bottom: 0.5rem;
|
35767
|
+
}
|
35768
|
+
|
35769
|
+
.c4p--description-list--lg .c4p--description-list__body .c4p--description-list__cell {
|
35770
|
+
padding: 1rem 1.5rem 1rem 1rem;
|
35771
|
+
}
|
35772
|
+
|
35773
|
+
.c4p--description-list--sm .c4p--description-list__body .c4p--description-list__cell {
|
35774
|
+
padding: 0.25rem 1.5rem 0.25rem 0.25rem;
|
35775
|
+
}
|
35776
|
+
|
35777
|
+
.c4p--description-list--xs .c4p--description-list__body .c4p--description-list__cell {
|
35778
|
+
padding: 0.25rem;
|
35779
|
+
}
|
35780
|
+
|
35781
|
+
.c4p--description-list .cds--structured-list-row--focused-within {
|
35782
|
+
outline: none;
|
35783
|
+
}
|
35784
|
+
|
35681
35785
|
.c4p--full-page-error {
|
35682
35786
|
height: inherit;
|
35683
35787
|
}
|
@@ -35958,4 +36062,80 @@ a.cds--side-nav__link--current::before {
|
|
35958
36062
|
height: 1.5rem;
|
35959
36063
|
}
|
35960
36064
|
|
36065
|
+
/* stylelint-disable carbon/layout-token-use */
|
36066
|
+
/* stylelint-disable function-no-unknown */
|
36067
|
+
.c4p--status-indicator__title {
|
36068
|
+
font-size: var(--cds-heading-02-font-size, 1rem);
|
36069
|
+
font-weight: var(--cds-heading-02-font-weight, 600);
|
36070
|
+
line-height: var(--cds-heading-02-line-height, 1.5);
|
36071
|
+
letter-spacing: var(--cds-heading-02-letter-spacing, 0);
|
36072
|
+
margin-bottom: 0.25rem;
|
36073
|
+
}
|
36074
|
+
|
36075
|
+
.c4p--status-indicator-step__details {
|
36076
|
+
display: flex;
|
36077
|
+
min-height: 2rem;
|
36078
|
+
align-items: center;
|
36079
|
+
}
|
36080
|
+
|
36081
|
+
.c4p--status-indicator-step__icon {
|
36082
|
+
position: relative;
|
36083
|
+
display: flex;
|
36084
|
+
width: 1.5rem;
|
36085
|
+
}
|
36086
|
+
|
36087
|
+
.c4p--status-indicator-step__text {
|
36088
|
+
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
36089
|
+
font-weight: var(--cds-body-compact-01-font-weight, 400);
|
36090
|
+
line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
36091
|
+
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
36092
|
+
color: var(--cds-text-primary, #161616);
|
36093
|
+
}
|
36094
|
+
|
36095
|
+
.c4p--status-indicator .c4p--status-indicator__button {
|
36096
|
+
align-items: center;
|
36097
|
+
margin-top: 0.125rem;
|
36098
|
+
margin-left: 0.5rem;
|
36099
|
+
}
|
36100
|
+
|
36101
|
+
.c4p--status-indicator .c4p--status-indicator__button:not([disabled]) svg {
|
36102
|
+
margin-left: 0.5rem;
|
36103
|
+
fill: currentColor;
|
36104
|
+
}
|
36105
|
+
|
36106
|
+
.c4p--status-indicator-step--inactive .c4p--status-indicator-step__text {
|
36107
|
+
color: var(--cds-text-secondary, #525252);
|
36108
|
+
}
|
36109
|
+
|
36110
|
+
.c4p--status-indicator-step--inactive svg {
|
36111
|
+
fill: var(--cds-icon-primary, #161616);
|
36112
|
+
}
|
36113
|
+
|
36114
|
+
.c4p--status-indicator-step--active .c4p--status-indicator-step__icon {
|
36115
|
+
margin-right: 0;
|
36116
|
+
}
|
36117
|
+
|
36118
|
+
.c4p--status-indicator-step--active .cds--inline-loading__animation {
|
36119
|
+
margin-right: 0.4375rem;
|
36120
|
+
}
|
36121
|
+
|
36122
|
+
.c4p--status-indicator-step--error svg {
|
36123
|
+
fill: var(--cds-support-error, #da1e28);
|
36124
|
+
}
|
36125
|
+
|
36126
|
+
.c4p--status-indicator-step--finished svg {
|
36127
|
+
fill: var(--cds-support-success, #24a148);
|
36128
|
+
}
|
36129
|
+
|
36130
|
+
.c4p--status-indicator-step__error-message {
|
36131
|
+
font-size: var(--cds-label-01-font-size, 0.75rem);
|
36132
|
+
font-weight: var(--cds-label-01-font-weight, 400);
|
36133
|
+
line-height: var(--cds-label-01-line-height, 1.33333);
|
36134
|
+
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
|
36135
|
+
margin-top: -0.125rem;
|
36136
|
+
margin-bottom: 0.375rem;
|
36137
|
+
margin-left: 1.5rem;
|
36138
|
+
color: var(--cds-text-error, #da1e28);
|
36139
|
+
}
|
36140
|
+
|
35961
36141
|
/*# sourceMappingURL=index.css.map */
|