@carbon/ibm-products 1.6.0 → 1.6.1
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +110 -30
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +7 -1
- package/css/index-full-carbon.min.css.map +1 -0
- package/css/index-without-carbon-released-only.css +2 -0
- 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 -0
- package/css/index-without-carbon.css +110 -30
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +7 -1
- package/css/index-without-carbon.min.css.map +1 -0
- package/css/index.css +110 -30
- package/css/index.css.map +1 -1
- package/css/index.min.css +7 -1
- package/css/index.min.css.map +1 -0
- package/es/components/AddSelect/AddSelect.js +4 -3
- package/es/components/AddSelect/AddSelectList.js +2 -2
- package/es/components/AddSelect/AddSelectSidebar.js +41 -9
- package/es/components/EmptyStates/EmptyState.js +1 -1
- package/es/components/EmptyStates/EmptyStateContent.js +2 -2
- package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +1 -1
- package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +1 -1
- package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +1 -1
- package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +1 -1
- package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +1 -1
- package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +1 -1
- package/es/components/InlineEdit/InlineEdit.js +51 -27
- package/es/components/PageHeader/PageHeader.js +2 -2
- package/lib/components/AddSelect/AddSelect.js +4 -3
- package/lib/components/AddSelect/AddSelectList.js +2 -2
- package/lib/components/AddSelect/AddSelectSidebar.js +40 -14
- package/lib/components/EmptyStates/EmptyState.js +1 -1
- package/lib/components/EmptyStates/EmptyStateContent.js +2 -2
- package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +1 -1
- package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +1 -1
- package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +1 -1
- package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +1 -1
- package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +1 -1
- package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +1 -1
- package/lib/components/InlineEdit/InlineEdit.js +50 -26
- package/lib/components/PageHeader/PageHeader.js +2 -2
- package/package.json +12 -12
- package/scss/components/AddSelect/_add-select.scss +15 -5
- package/scss/components/CancelableTextEdit/_storybook-styles.scss +0 -7
- package/scss/components/CreateTearsheetNarrow/_storybook-styles.scss +0 -6
- package/scss/components/EditSidePanel/_storybook-styles.scss +0 -8
- package/scss/components/InlineEdit/_inline-edit.scss +104 -29
- package/scss/components/InlineEdit/_storybook-styles.scss +1 -8
- package/scss/components/LoadingBar/_storybook-styles.scss +0 -5
- package/scss/components/OptionsTile/_storybook-styles.scss +0 -7
- package/scss/components/PageHeader/_page-header.scss +3 -0
- package/scss/components/StatusIcon/_status-icon.scss +4 -4
- package/scss/components/UserProfileImage/_user-profile-image.scss +2 -2
@@ -16642,26 +16642,41 @@ a.bx--side-nav__link--current::before {
|
|
16642
16642
|
justify-content: space-between;
|
16643
16643
|
}
|
16644
16644
|
|
16645
|
-
.c4p--add-
|
16645
|
+
.c4p--add-select__sidebar-header {
|
16646
16646
|
display: flex;
|
16647
16647
|
padding: var(--cds-spacing-06, 1.5rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-03, 0.5rem) var(--cds-spacing-05, 1rem);
|
16648
16648
|
border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
|
16649
16649
|
}
|
16650
|
-
.c4p--add-
|
16650
|
+
.c4p--add-select__sidebar-header .c4p--add-select__sidebar-title {
|
16651
16651
|
font-size: var(--cds-productive-heading-02-font-size, 1rem);
|
16652
16652
|
font-weight: var(--cds-productive-heading-02-font-weight, 600);
|
16653
16653
|
line-height: var(--cds-productive-heading-02-line-height, 1.375);
|
16654
16654
|
letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
|
16655
16655
|
}
|
16656
16656
|
|
16657
|
-
.c4p--add-
|
16657
|
+
.c4p--add-select__sidebar-title {
|
16658
16658
|
margin-right: var(--cds-spacing-03, 0.5rem);
|
16659
16659
|
}
|
16660
16660
|
|
16661
|
-
.c4p--add-
|
16661
|
+
.c4p--add-select__sidebar-body {
|
16662
16662
|
padding: var(--cds-spacing-05, 1rem);
|
16663
16663
|
}
|
16664
16664
|
|
16665
|
+
.c4p--add-select .c4p--add-select__sidebar-item-header {
|
16666
|
+
font-size: var(--cds-label-01-font-size, 0.75rem);
|
16667
|
+
font-weight: var(--cds-label-01-font-weight, 400);
|
16668
|
+
line-height: var(--cds-label-01-line-height, 1.33333);
|
16669
|
+
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
|
16670
|
+
}
|
16671
|
+
|
16672
|
+
.c4p--add-select .c4p--add-select__sidebar-item-body {
|
16673
|
+
font-size: var(--cds-body-long-01-font-size, 0.875rem);
|
16674
|
+
font-weight: var(--cds-body-long-01-font-weight, 400);
|
16675
|
+
line-height: var(--cds-body-long-01-line-height, 1.42857);
|
16676
|
+
letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
|
16677
|
+
margin-bottom: var(--cds-spacing-03, 0.5rem);
|
16678
|
+
}
|
16679
|
+
|
16665
16680
|
.c4p--add-select .c4p--tearsheet .c4p--tearsheet__influencer {
|
16666
16681
|
max-width: 29rem;
|
16667
16682
|
flex: 0 0 50%;
|
@@ -19462,6 +19477,8 @@ a.bx--side-nav__link--current::before {
|
|
19462
19477
|
.c4p--page-header .c4p--page-header__title--editable {
|
19463
19478
|
display: flex;
|
19464
19479
|
overflow: visible;
|
19480
|
+
margin-top: calc(-1 * var(--cds-spacing-01, 0.125rem));
|
19481
|
+
margin-left: calc(-1 * var(--cds-spacing-05, 1rem));
|
19465
19482
|
}
|
19466
19483
|
.c4p--page-header .c4p--page-header__title-skeleton {
|
19467
19484
|
height: var(--cds-spacing-07, 2rem);
|
@@ -22808,7 +22825,7 @@ a.bx--side-nav__link--current::before {
|
|
22808
22825
|
--c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
|
22809
22826
|
--c4p--inline-edit--background-color: var(--cds-ui-01, #f4f4f4);
|
22810
22827
|
position: relative;
|
22811
|
-
display: inline-
|
22828
|
+
display: inline-block;
|
22812
22829
|
max-width: 100%;
|
22813
22830
|
height: var(--c4p--inline-edit--size);
|
22814
22831
|
background-color: var(--c4p--inline-edit--background-color);
|
@@ -22850,34 +22867,72 @@ a.bx--side-nav__link--current::before {
|
|
22850
22867
|
}
|
22851
22868
|
}
|
22852
22869
|
.c4p--inline-edit .c4p--inline-edit__input {
|
22853
|
-
display:
|
22870
|
+
display: inline-block;
|
22854
22871
|
overflow: hidden;
|
22855
|
-
|
22856
|
-
|
22857
|
-
|
22858
|
-
|
22859
|
-
margin-right: calc(2 * var(--c4p--inline-edit--size));
|
22872
|
+
min-width: calc(100% - 3 * var(--c4p--inline-edit--size) - var(--cds-spacing-05, 1rem));
|
22873
|
+
max-width: calc(100% - 3 * var(--c4p--inline-edit--size) - var(--cds-spacing-05, 1rem));
|
22874
|
+
min-height: var(--c4p--inline-edit--size);
|
22875
|
+
margin-right: calc(3 * var(--c4p--inline-edit--size));
|
22860
22876
|
margin-left: var(--cds-spacing-05, 1rem);
|
22877
|
+
line-height: var(--c4p--inline-edit--size);
|
22861
22878
|
}
|
22862
22879
|
.c4p--inline-edit .c4p--inline-edit__input:focus {
|
22863
22880
|
outline: none;
|
22864
22881
|
}
|
22865
|
-
.c4p--inline-edit .c4p--inline-
|
22882
|
+
.c4p--inline-edit .c4p--inline-edit__input::after {
|
22866
22883
|
position: absolute;
|
22867
|
-
|
22884
|
+
top: 0;
|
22885
|
+
left: 0;
|
22886
|
+
display: block;
|
22887
|
+
margin-left: var(--cds-spacing-05, 1rem);
|
22888
|
+
color: var(--cds-text-05, #6f6f6f);
|
22889
|
+
content: attr(data-placeholder);
|
22890
|
+
opacity: 0;
|
22891
|
+
}
|
22892
|
+
.c4p--inline-edit .c4p--inline-edit__ellipsis {
|
22893
|
+
display: inline-block;
|
22894
|
+
overflow: hidden;
|
22895
|
+
width: 0;
|
22896
|
+
height: var(--c4p--inline-edit--size);
|
22897
|
+
line-height: var(--c4p--inline-edit--size);
|
22898
|
+
opacity: 0;
|
22899
|
+
pointer-events: none;
|
22900
|
+
transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
22901
|
+
}
|
22902
|
+
.c4p--inline-edit.c4p--inline-edit--overflows:not(.c4p--inline-edit--editing) .c4p--inline-edit__ellipsis {
|
22903
|
+
width: initial;
|
22904
|
+
opacity: 1;
|
22868
22905
|
}
|
22869
|
-
.c4p--inline-edit .c4p--inline-
|
22906
|
+
.c4p--inline-edit .c4p--inline-edit__disabled-cover {
|
22907
|
+
position: absolute;
|
22908
|
+
top: 0;
|
22909
|
+
left: 0;
|
22910
|
+
width: 100%;
|
22911
|
+
height: 100%;
|
22912
|
+
pointer-events: none;
|
22913
|
+
}
|
22914
|
+
.c4p--inline-edit.c4p--inline-edit--disabled .c4p--inline-edit__disabled-cover {
|
22915
|
+
cursor: not-allowed;
|
22916
|
+
pointer-events: all;
|
22917
|
+
}
|
22918
|
+
.c4p--inline-edit .c4p--inline-edit__input--empty::after {
|
22919
|
+
opacity: 1;
|
22920
|
+
transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
22921
|
+
}
|
22922
|
+
.c4p--inline-edit .c4p--inline-edit__after-input-elements {
|
22870
22923
|
position: absolute;
|
22871
22924
|
top: 0;
|
22872
22925
|
right: 0;
|
22873
|
-
|
22926
|
+
display: flex;
|
22927
|
+
width: calc(3 * var(--c4p--inline-edit--size));
|
22874
22928
|
height: 100%;
|
22929
|
+
justify-content: space-between;
|
22875
22930
|
cursor: text;
|
22876
22931
|
}
|
22877
|
-
.c4p--inline-edit .c4p--inline-
|
22932
|
+
.c4p--inline-edit .c4p--inline-edit__toolbar--animation {
|
22878
22933
|
clip-path: polygon(0 0, -100vw 0, -100vw -100vh, 100vw -100vh, 100vw 0, 100% 0, 100% 100%, 100vw 100%, 100vw 100vh, -100vw 100vh, -100vw 100%, 0 100%);
|
22879
22934
|
}
|
22880
|
-
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-
|
22935
|
+
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar::after {
|
22881
22936
|
position: absolute;
|
22882
22937
|
top: 0;
|
22883
22938
|
left: 0;
|
@@ -22891,11 +22946,14 @@ a.bx--side-nav__link--current::before {
|
|
22891
22946
|
pointer-events: none;
|
22892
22947
|
}
|
22893
22948
|
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel {
|
22949
|
+
display: inline-flex;
|
22894
22950
|
width: var(--c4p--inline-edit--size);
|
22895
22951
|
height: 100%;
|
22896
22952
|
min-height: initial;
|
22897
22953
|
max-height: var(--c4p--inline-edit--size);
|
22898
|
-
padding: calc(
|
22954
|
+
padding: calc(
|
22955
|
+
0.5 * (var(--c4p--inline-edit--size) - var(--c4p--inline-edit--icon-size)) - var(--cds-spacing-01, 0.125rem)
|
22956
|
+
);
|
22899
22957
|
border: 2px solid transparent;
|
22900
22958
|
}
|
22901
22959
|
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:hover, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:hover {
|
@@ -22915,26 +22973,23 @@ a.bx--side-nav__link--current::before {
|
|
22915
22973
|
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save[disabled], .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel[disabled] {
|
22916
22974
|
border-color: transparent;
|
22917
22975
|
}
|
22918
|
-
.c4p--inline-edit .c4p--inline-
|
22919
|
-
margin-
|
22920
|
-
|
22921
|
-
.c4p--inline-edit .c4p--inline-edit__controls--animation .c4p--inline-edit__cancel {
|
22922
|
-
margin-left: var(--c4p--inline-edit--size);
|
22923
|
-
transition: margin-left 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
22976
|
+
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save {
|
22977
|
+
margin-right: calc(-1 * var(--c4p--inline-edit--size));
|
22978
|
+
transition: margin-right 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
22924
22979
|
}
|
22925
|
-
.c4p--inline-edit .c4p--inline-
|
22926
|
-
margin-
|
22980
|
+
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--saveable .c4p--inline-edit__save {
|
22981
|
+
margin-right: 0;
|
22927
22982
|
}
|
22928
22983
|
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit {
|
22984
|
+
display: inline-flex;
|
22929
22985
|
width: var(--c4p--inline-edit--size);
|
22930
22986
|
height: 100%;
|
22931
22987
|
min-height: initial;
|
22932
22988
|
max-height: var(--c4p--inline-edit--size);
|
22933
|
-
padding: calc(
|
22989
|
+
padding: calc(
|
22990
|
+
0.5 * (var(--c4p--inline-edit--size) - var(--c4p--inline-edit--icon-size)) - var(--cds-spacing-01, 0.125rem)
|
22991
|
+
);
|
22934
22992
|
border: 2px solid transparent;
|
22935
|
-
position: absolute;
|
22936
|
-
top: 0;
|
22937
|
-
right: 0;
|
22938
22993
|
}
|
22939
22994
|
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:hover, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:active, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:focus {
|
22940
22995
|
border-color: transparent;
|
@@ -22949,6 +23004,31 @@ a.bx--side-nav__link--current::before {
|
|
22949
23004
|
.c4p--inline-edit:hover .c4p--inline-edit__edit--hover-visible {
|
22950
23005
|
opacity: 1;
|
22951
23006
|
}
|
23007
|
+
.c4p--inline-edit .c4p--inline-edit__validation-icon {
|
23008
|
+
display: inline-flex;
|
23009
|
+
width: var(--c4p--inline-edit--size);
|
23010
|
+
height: 100%;
|
23011
|
+
min-height: initial;
|
23012
|
+
max-height: var(--c4p--inline-edit--size);
|
23013
|
+
padding: calc(
|
23014
|
+
0.5 * (var(--c4p--inline-edit--size) - var(--c4p--inline-edit--icon-size)) - var(--cds-spacing-01, 0.125rem)
|
23015
|
+
);
|
23016
|
+
border: 2px solid transparent;
|
23017
|
+
}
|
23018
|
+
.c4p--inline-edit.c4p--inline-edit--warn .c4p--inline-edit__validation-icon {
|
23019
|
+
color: var(--cds-support-warning, #f1c21b);
|
23020
|
+
}
|
23021
|
+
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-icon {
|
23022
|
+
color: var(--cds-support-error, #da1e28);
|
23023
|
+
}
|
23024
|
+
.c4p--inline-edit .c4p--inline-edit__validation-text {
|
23025
|
+
display: block;
|
23026
|
+
overflow: visible;
|
23027
|
+
margin-left: var(--cds-spacing-05, 1rem);
|
23028
|
+
}
|
23029
|
+
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-text {
|
23030
|
+
color: var(--cds-support-error, #da1e28);
|
23031
|
+
}
|
22952
23032
|
|
22953
23033
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
22954
23034
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|