@carbon/ibm-products 1.33.0 → 1.34.1
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +78 -145
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +4 -4
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +6 -142
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +3 -3
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +61 -143
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +4 -4
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +76 -143
- package/css/index.css.map +1 -1
- package/css/index.min.css +4 -4
- package/css/index.min.css.map +1 -1
- package/es/components/Datagrid/Datagrid/DatagridContent.js +1 -1
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +0 -1
- package/es/components/Datagrid/utils/getArgTypes.js +4 -0
- package/es/components/InlineEditV2/InlineEditV2.js +249 -0
- package/es/components/InlineEditV2/index.js +1 -0
- package/es/components/PageHeader/PageHeaderTitle.js +3 -1
- package/es/components/SidePanel/SidePanel.js +44 -51
- package/es/components/SidePanel/motion/variants.js +39 -0
- package/es/components/index.js +2 -1
- package/es/global/js/package-settings.js +2 -1
- package/es/global/js/utils/getBezierValues.js +20 -0
- package/es/global/js/utils/motionConstants.js +45 -0
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +1 -1
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +0 -1
- package/lib/components/Datagrid/utils/getArgTypes.js +4 -0
- package/lib/components/InlineEditV2/InlineEditV2.js +277 -0
- package/lib/components/InlineEditV2/index.js +13 -0
- package/lib/components/PageHeader/PageHeaderTitle.js +3 -1
- package/lib/components/SidePanel/SidePanel.js +45 -50
- package/lib/components/SidePanel/motion/variants.js +49 -0
- package/lib/components/index.js +9 -1
- package/lib/global/js/package-settings.js +2 -1
- package/lib/global/js/utils/getBezierValues.js +29 -0
- package/lib/global/js/utils/motionConstants.js +55 -0
- package/package.json +16 -14
- package/scss/components/Datagrid/_storybook-styles.scss +4 -0
- package/scss/components/InlineEditV2/_index.scss +10 -0
- package/scss/components/InlineEditV2/_inline-edit-v2.scss +81 -0
- package/scss/components/ModifiedTabs/_modified-tabs.scss +1 -1
- package/scss/components/PageHeader/_page-header.scss +4 -0
- package/scss/components/SidePanel/_side-panel.scss +0 -75
- package/scss/components/_index.scss +2 -0
@@ -0,0 +1,55 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.EASINGS = exports.DURATIONS = void 0;
|
7
|
+
|
8
|
+
var _getBezierValues = require("./getBezierValues");
|
9
|
+
|
10
|
+
var _motion = require("@carbon/motion");
|
11
|
+
|
12
|
+
/**
|
13
|
+
* Copyright IBM Corp. 2022, 2022
|
14
|
+
*
|
15
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
16
|
+
* LICENSE file in the root directory of this source tree.
|
17
|
+
*/
|
18
|
+
var cleanMotionValue = function cleanMotionValue(val) {
|
19
|
+
return parseInt(val) / 1000;
|
20
|
+
};
|
21
|
+
|
22
|
+
var DURATIONS = {
|
23
|
+
// Micro-interactions such as button and toggle
|
24
|
+
fast01: cleanMotionValue(_motion.fast01),
|
25
|
+
// '70ms'
|
26
|
+
// Micro-interactions such as fade
|
27
|
+
fast02: cleanMotionValue(_motion.fast02),
|
28
|
+
// '110ms'
|
29
|
+
// Micro-interactions, small expansion, short distance movements
|
30
|
+
moderate01: cleanMotionValue(_motion.moderate01),
|
31
|
+
// '150ms'
|
32
|
+
// Expansion, system communication, toast
|
33
|
+
moderate02: cleanMotionValue(_motion.moderate02),
|
34
|
+
// '240ms'
|
35
|
+
// Large expansion, important system notifications
|
36
|
+
slow01: cleanMotionValue(_motion.slow01),
|
37
|
+
// '400ms'
|
38
|
+
// Background dimming
|
39
|
+
slow02: cleanMotionValue(_motion.slow02) // '700ms'
|
40
|
+
|
41
|
+
};
|
42
|
+
exports.DURATIONS = DURATIONS;
|
43
|
+
var EASINGS = {
|
44
|
+
productive: {
|
45
|
+
entrance: (0, _getBezierValues.getBezierValues)('entrance', 'productive'),
|
46
|
+
standard: (0, _getBezierValues.getBezierValues)('standard', 'productive'),
|
47
|
+
exit: (0, _getBezierValues.getBezierValues)('exit', 'productive')
|
48
|
+
},
|
49
|
+
expressive: {
|
50
|
+
entrance: (0, _getBezierValues.getBezierValues)('entrance', 'expressive'),
|
51
|
+
standard: (0, _getBezierValues.getBezierValues)('standard', 'expressive'),
|
52
|
+
exit: (0, _getBezierValues.getBezierValues)('exit', 'expressive')
|
53
|
+
}
|
54
|
+
};
|
55
|
+
exports.EASINGS = EASINGS;
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@carbon/ibm-products",
|
3
3
|
"description": "Carbon for IBM Products",
|
4
|
-
"version": "1.
|
4
|
+
"version": "1.34.1",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -33,11 +33,12 @@
|
|
33
33
|
"access": "public"
|
34
34
|
},
|
35
35
|
"scripts": {
|
36
|
-
"build": "run-s clean build-first build-all",
|
36
|
+
"build": "run-s clean build-first build-all build-css-update-maps",
|
37
37
|
"build-all": "run-p 'build:*'",
|
38
38
|
"build-first": "copyfiles 'src/**/*.scss' scss -u 1",
|
39
39
|
"build:css-dev": "sass --style=expanded --load-path node_modules --load-path ../../node_modules scss:css",
|
40
40
|
"build:css-min": "sass --style=compressed --load-path node_modules --load-path ../../node_modules scss/index.scss:css/index.min.css scss/index-full-carbon.scss:css/index-full-carbon.min.css scss/index-without-carbon.scss:css/index-without-carbon.min.css scss/index-without-carbon-released-only.scss:css/index-without-carbon-released-only.min.css",
|
41
|
+
"build-css-update-maps": "node ../../scripts/updateSourceMaps.js",
|
41
42
|
"build:js-esm": "cross-env BABEL_ENV=esm yarn build:js:modules -d es",
|
42
43
|
"build:js-cjs": "cross-env BABEL_ENV=cjs yarn build:js:modules -d lib",
|
43
44
|
"build:js:modules": "babel src --ignore '**/__tests__','**/*.test.js','**/*.stories.js','src/utils/**/*'",
|
@@ -50,28 +51,29 @@
|
|
50
51
|
"upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$|^react-dnd|^namor)/'"
|
51
52
|
},
|
52
53
|
"devDependencies": {
|
53
|
-
"@babel/cli": "^7.
|
54
|
-
"@babel/core": "^7.19.
|
55
|
-
"babel-preset-ibm-cloud-cognitive": "^0.14.
|
54
|
+
"@babel/cli": "^7.19.3",
|
55
|
+
"@babel/core": "^7.19.3",
|
56
|
+
"babel-preset-ibm-cloud-cognitive": "^0.14.21",
|
56
57
|
"chalk": "^4.1.2",
|
57
58
|
"change-case": "^4.1.2",
|
58
59
|
"copyfiles": "^2.4.1",
|
59
60
|
"cross-env": "^7.0.3",
|
60
61
|
"fs-extra": "^10.1.0",
|
61
62
|
"glob": "^8.0.3",
|
62
|
-
"jest": "^29.
|
63
|
-
"jest-config-ibm-cloud-cognitive": "^0.24.
|
64
|
-
"jest-environment-jsdom": "^29.
|
63
|
+
"jest": "^29.1.2",
|
64
|
+
"jest-config-ibm-cloud-cognitive": "^0.24.7",
|
65
|
+
"jest-environment-jsdom": "^29.1.2",
|
65
66
|
"namor": "^1.1.2",
|
66
|
-
"npm-check-updates": "^16.
|
67
|
+
"npm-check-updates": "^16.3.4",
|
67
68
|
"npm-run-all": "^4.1.5",
|
68
69
|
"rimraf": "^3.0.2",
|
69
|
-
"sass": "^1.
|
70
|
-
"yargs": "^17.
|
70
|
+
"sass": "^1.55.0",
|
71
|
+
"yargs": "^17.6.0"
|
71
72
|
},
|
72
73
|
"dependencies": {
|
73
74
|
"@babel/runtime": "^7.19.0",
|
74
75
|
"@carbon/telemetry": "^0.1.0",
|
76
|
+
"framer-motion": "^6.5.1",
|
75
77
|
"immutability-helper": "^3.1.1",
|
76
78
|
"react-dnd": "^15.1.2",
|
77
79
|
"react-dnd-html5-backend": "^15.1.3",
|
@@ -87,11 +89,11 @@
|
|
87
89
|
"@carbon/motion": "^10.29.0",
|
88
90
|
"@carbon/themes": "^10.55.0",
|
89
91
|
"@carbon/type": "^10.45.0",
|
90
|
-
"carbon-components": "^10.58.
|
91
|
-
"carbon-components-react": "^7.59.
|
92
|
+
"carbon-components": "^10.58.4",
|
93
|
+
"carbon-components-react": "^7.59.4",
|
92
94
|
"carbon-icons": "^7.0.7",
|
93
95
|
"react": "^16.8.6 || ^17.0.1",
|
94
96
|
"react-dom": "^16.8.6 || ^17.0.1"
|
95
97
|
},
|
96
|
-
"gitHead": "
|
98
|
+
"gitHead": "0081b89c74c41c34d946066440d7698cd7254756"
|
97
99
|
}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
//
|
2
|
+
// Copyright IBM Corp. 2020, 2021
|
3
|
+
//
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
6
|
+
//
|
7
|
+
|
8
|
+
// An index file is most useful when you have multiple components
|
9
|
+
|
10
|
+
@import './inline-edit-v2';
|
@@ -0,0 +1,81 @@
|
|
1
|
+
//
|
2
|
+
// Copyright IBM Corp. 2020, 2021
|
3
|
+
//
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
6
|
+
//
|
7
|
+
|
8
|
+
// Standard imports.
|
9
|
+
@import '../../global/styles/project-settings';
|
10
|
+
@import 'carbon-components/scss/components/button/button';
|
11
|
+
@import 'carbon-components/scss/components/text-input/text-input';
|
12
|
+
|
13
|
+
@mixin inline-edit-v2 {
|
14
|
+
$block-class: #{$pkg-prefix}--inline-edit-v2;
|
15
|
+
$carbon-text-input: #{$carbon-prefix}--text-input;
|
16
|
+
|
17
|
+
.#{$block-class} {
|
18
|
+
display: flex;
|
19
|
+
align-items: center;
|
20
|
+
background: transparent;
|
21
|
+
cursor: pointer;
|
22
|
+
|
23
|
+
&-readonly {
|
24
|
+
cursor: not-allowed;
|
25
|
+
}
|
26
|
+
|
27
|
+
&:hover {
|
28
|
+
background: $hover-ui;
|
29
|
+
}
|
30
|
+
|
31
|
+
&:hover .#{$block-class}__btn-edit {
|
32
|
+
visibility: visible;
|
33
|
+
}
|
34
|
+
|
35
|
+
&__btn-edit {
|
36
|
+
visibility: hidden;
|
37
|
+
}
|
38
|
+
|
39
|
+
&-focused {
|
40
|
+
background: $hover-ui;
|
41
|
+
outline: 2px solid $focus;
|
42
|
+
}
|
43
|
+
|
44
|
+
&__text-input {
|
45
|
+
flex: 1;
|
46
|
+
}
|
47
|
+
|
48
|
+
&__warning-icon {
|
49
|
+
color: $support-01;
|
50
|
+
}
|
51
|
+
|
52
|
+
&__warning-text {
|
53
|
+
@include carbon--type-style('caption-01');
|
54
|
+
|
55
|
+
margin-top: $spacing-03;
|
56
|
+
color: $support-01;
|
57
|
+
}
|
58
|
+
}
|
59
|
+
|
60
|
+
// overrides
|
61
|
+
.#{$block-class}__text-input.#{$carbon-text-input} {
|
62
|
+
border: none;
|
63
|
+
background: transparent;
|
64
|
+
cursor: pointer;
|
65
|
+
outline: none;
|
66
|
+
}
|
67
|
+
|
68
|
+
.#{$block-class}-readonly .#{$block-class}__text-input.#{$carbon-text-input} {
|
69
|
+
color: $disabled-02;
|
70
|
+
cursor: not-allowed;
|
71
|
+
}
|
72
|
+
|
73
|
+
.#{$block-class}__text-input.#{$carbon-text-input}:focus,
|
74
|
+
.#{$block-class}__text-input.#{$carbon-text-input}:active {
|
75
|
+
outline: none;
|
76
|
+
}
|
77
|
+
}
|
78
|
+
|
79
|
+
@include exports('inline-edit-v2') {
|
80
|
+
@include inline-edit-v2;
|
81
|
+
}
|
@@ -32,8 +32,8 @@
|
|
32
32
|
height: 2.5rem;
|
33
33
|
padding: $spacing-04;
|
34
34
|
border: $spacing-01 solid transparent;
|
35
|
-
background-color: transparent;
|
36
35
|
border-radius: 0;
|
36
|
+
background-color: transparent;
|
37
37
|
cursor: pointer;
|
38
38
|
transition: background-color $duration--fast-02 motion(standard, productive);
|
39
39
|
// stylelint-disable-next-line max-nesting-depth
|
@@ -471,6 +471,10 @@ $right-section-alt-width: 100% - $left-section-alt-width;
|
|
471
471
|
vertical-align: middle;
|
472
472
|
}
|
473
473
|
|
474
|
+
.#{$block-class}__title-wrapper {
|
475
|
+
@include carbon--type-style('productive-heading-04');
|
476
|
+
}
|
477
|
+
|
474
478
|
.#{$block-class}__page-actions {
|
475
479
|
flex: 0 0 100%;
|
476
480
|
margin-top: $spacing-05;
|
@@ -24,49 +24,6 @@
|
|
24
24
|
$block-class: #{$pkg-prefix}--side-panel;
|
25
25
|
$action-set-block-class: #{$pkg-prefix}--action-set;
|
26
26
|
|
27
|
-
@mixin sidePanelEntranceRight($size: map-get($side-panel-sizes, md)) {
|
28
|
-
@keyframes side-panel-entrance-right {
|
29
|
-
0% {
|
30
|
-
opacity: 0;
|
31
|
-
// stylelint-disable-next-line carbon/layout-token-use
|
32
|
-
transform: translateX(#{$size}); // the size width of the side panel
|
33
|
-
}
|
34
|
-
|
35
|
-
100% {
|
36
|
-
opacity: 1;
|
37
|
-
transform: translateX(0);
|
38
|
-
}
|
39
|
-
}
|
40
|
-
}
|
41
|
-
|
42
|
-
@mixin sidePanelEntranceLeft($size: map-get($side-panel-sizes, md)) {
|
43
|
-
@keyframes side-panel-entrance-left {
|
44
|
-
0% {
|
45
|
-
opacity: 0;
|
46
|
-
// stylelint-disable-next-line carbon/layout-token-use
|
47
|
-
transform: translateX(-#{$size}); // the size width of the side panel
|
48
|
-
}
|
49
|
-
|
50
|
-
100% {
|
51
|
-
opacity: 1;
|
52
|
-
transform: translateX(0);
|
53
|
-
}
|
54
|
-
}
|
55
|
-
}
|
56
|
-
|
57
|
-
@mixin sidePanelEntrance(
|
58
|
-
$placement: 'right',
|
59
|
-
$size: map-get($side-panel-sizes, md)
|
60
|
-
) {
|
61
|
-
width: $size;
|
62
|
-
max-width: 100%;
|
63
|
-
@if $placement == right {
|
64
|
-
@include sidePanelEntranceRight($size);
|
65
|
-
} @else {
|
66
|
-
@include sidePanelEntranceLeft($size);
|
67
|
-
}
|
68
|
-
}
|
69
|
-
|
70
27
|
@mixin setPanelSize($size: map-get($side-panel-sizes, md)) {
|
71
28
|
width: $size;
|
72
29
|
max-width: 100%;
|
@@ -92,32 +49,6 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
|
|
92
49
|
}
|
93
50
|
|
94
51
|
@mixin side-panel {
|
95
|
-
@keyframes side-panel-exit-left {
|
96
|
-
0% {
|
97
|
-
opacity: 1;
|
98
|
-
transform: translateX(0);
|
99
|
-
}
|
100
|
-
|
101
|
-
100% {
|
102
|
-
opacity: 0;
|
103
|
-
// stylelint-disable-next-line carbon/layout-token-use
|
104
|
-
transform: translateX(calc(-1 * #{map-get($side-panel-sizes, md)}));
|
105
|
-
}
|
106
|
-
}
|
107
|
-
|
108
|
-
@keyframes side-panel-exit-right {
|
109
|
-
0% {
|
110
|
-
opacity: 1;
|
111
|
-
transform: translateX(0);
|
112
|
-
}
|
113
|
-
|
114
|
-
100% {
|
115
|
-
opacity: 0;
|
116
|
-
// stylelint-disable-next-line carbon/layout-token-use
|
117
|
-
transform: translateX(map-get($side-panel-sizes, md));
|
118
|
-
}
|
119
|
-
}
|
120
|
-
|
121
52
|
.#{$block-class}__container {
|
122
53
|
--#{$block-class}--subtitle-opacity: 1;
|
123
54
|
--#{$block-class}--title-container-height: 0;
|
@@ -137,7 +68,6 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
|
|
137
68
|
box-sizing: border-box;
|
138
69
|
background-color: $ui-01;
|
139
70
|
color: $text-01;
|
140
|
-
transition: transform $duration--moderate-02 carbon--motion(standard);
|
141
71
|
@each $size, $size_value in $side-panel-sizes {
|
142
72
|
&.#{$block-class}__container--#{$size} {
|
143
73
|
@include setPanelSize($size_value);
|
@@ -149,14 +79,10 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
|
|
149
79
|
}
|
150
80
|
}
|
151
81
|
&.#{$block-class}__container-right-placement.#{$block-class}__container--#{$size} {
|
152
|
-
@include sidePanelEntrance(right, $size_value);
|
153
|
-
|
154
82
|
right: 0;
|
155
83
|
border-left: 1px solid $decorative-01;
|
156
84
|
}
|
157
85
|
&.#{$block-class}__container-left-placement.#{$block-class}__container--#{$size} {
|
158
|
-
@include sidePanelEntrance(left, $size_value);
|
159
|
-
|
160
86
|
left: 0;
|
161
87
|
border-right: 1px solid $decorative-01;
|
162
88
|
}
|
@@ -519,7 +445,6 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
|
|
519
445
|
width: 100%;
|
520
446
|
height: 100%;
|
521
447
|
background-color: $overlay-01;
|
522
|
-
transition: background-color $duration--moderate-02 carbon--motion(standard);
|
523
448
|
}
|
524
449
|
}
|
525
450
|
|