@atlaskit/inline-edit 15.6.9 → 15.6.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/dist/cjs/inline-edit.js +1 -1
- package/dist/cjs/internal/read-view.compiled.css +1 -1
- package/dist/cjs/internal/read-view.js +1 -5
- package/dist/es2019/inline-edit.js +1 -1
- package/dist/es2019/internal/read-view.compiled.css +1 -1
- package/dist/es2019/internal/read-view.js +1 -2
- package/dist/esm/inline-edit.js +1 -1
- package/dist/esm/internal/read-view.compiled.css +1 -1
- package/dist/esm/internal/read-view.js +1 -5
- package/inline-edit.docs.tsx +45 -4
- package/package.json +9 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/inline-edit
|
|
2
2
|
|
|
3
|
+
## 15.6.11
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 15.6.10
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`7aef1e49e90ea`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7aef1e49e90ea) -
|
|
14
|
+
Removes redundant fallback color values via @atlaskit/theme
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
3
17
|
## 15.6.9
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
package/dist/cjs/inline-edit.js
CHANGED
|
@@ -29,7 +29,7 @@ var fieldStyles = null;
|
|
|
29
29
|
var analyticsAttributes = {
|
|
30
30
|
componentName: 'inlineEdit',
|
|
31
31
|
packageName: "@atlaskit/inline-edit",
|
|
32
|
-
packageVersion: "
|
|
32
|
+
packageVersion: "15.6.10"
|
|
33
33
|
};
|
|
34
34
|
var InnerInlineEdit = function InnerInlineEdit(props) {
|
|
35
35
|
var _props$startWithEditV = props.startWithEditViewOpen,
|
|
@@ -32,4 +32,4 @@
|
|
|
32
32
|
._y4tize3t{padding-inline-end:var(--ds-space-0,0)}._128midpf:focus-visible{outline-width:0}
|
|
33
33
|
._mizu1r31:focus-visible{outline-color:currentColor}
|
|
34
34
|
._ra3xglyw:focus-visible{outline-style:none}
|
|
35
|
-
.
|
|
35
|
+
._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
|
|
@@ -11,7 +11,6 @@ var _runtime = require("@compiled/react/runtime");
|
|
|
11
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
12
12
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
13
13
|
var _compiled = require("@atlaskit/primitives/compiled");
|
|
14
|
-
var _colors = require("@atlaskit/theme/colors");
|
|
15
14
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
16
15
|
var readViewContainerStyles = null;
|
|
17
16
|
var editButtonStyles = {
|
|
@@ -69,10 +68,7 @@ var ReadView = function ReadView(_ref) {
|
|
|
69
68
|
startY.current = e.clientY;
|
|
70
69
|
},
|
|
71
70
|
"data-read-view-fit-container-width": readViewFitContainerWidth,
|
|
72
|
-
className: (0, _runtime.ax)(["_2rkofajl _v564thzt _1h6d1j28 _1dqonqa1 _189e1dm9 _1e0c1o8l _vchhusvi _1bsb1wug _p12f1osq
|
|
73
|
-
style: {
|
|
74
|
-
"--_1y60f1n": (0, _runtime.ix)("var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"))
|
|
75
|
-
}
|
|
71
|
+
className: (0, _runtime.ax)(["_2rkofajl _v564thzt _1h6d1j28 _1dqonqa1 _189e1dm9 _1e0c1o8l _vchhusvi _1bsb1wug _p12f1osq _irr31dpa", readViewFitContainerWidth && "_1bsb1osq", (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && "_2rko1qi0"])
|
|
76
72
|
}, readView()));
|
|
77
73
|
};
|
|
78
74
|
|
|
@@ -32,4 +32,4 @@
|
|
|
32
32
|
._y4tize3t{padding-inline-end:var(--ds-space-0,0)}._128midpf:focus-visible{outline-width:0}
|
|
33
33
|
._mizu1r31:focus-visible{outline-color:currentColor}
|
|
34
34
|
._ra3xglyw:focus-visible{outline-style:none}
|
|
35
|
-
.
|
|
35
|
+
._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
|
|
@@ -4,7 +4,6 @@ import { ax, ix } from "@compiled/react/runtime";
|
|
|
4
4
|
import React, { useRef } from 'react';
|
|
5
5
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
6
|
import { Pressable } from '@atlaskit/primitives/compiled';
|
|
7
|
-
import { N30 } from '@atlaskit/theme/colors';
|
|
8
7
|
const readViewContainerStyles = null;
|
|
9
8
|
const editButtonStyles = {
|
|
10
9
|
root: "_12ji1r31 _1qu2glyw _12y3idpf _189eidpf _1dqoglyw _1h6d1j28 _1e0c1ule _1pfhze3t _12l2ze3t _6rthze3t _ahbqze3t _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _r06hglyw _bfhk1j28 _vwz4kb7n _1xp41v1w _14lydkaa _1j8znqa1 _mizu1r31 _ra3xglyw _128midpf"
|
|
@@ -62,7 +61,7 @@ const ReadView = ({
|
|
|
62
61
|
startY.current = e.clientY;
|
|
63
62
|
},
|
|
64
63
|
"data-read-view-fit-container-width": readViewFitContainerWidth,
|
|
65
|
-
className: ax(["_2rkofajl _v564thzt _1h6d1j28 _1dqonqa1 _189e1dm9 _1e0c1o8l _vchhusvi _1bsb1wug _p12f1osq
|
|
64
|
+
className: ax(["_2rkofajl _v564thzt _1h6d1j28 _1dqonqa1 _189e1dm9 _1e0c1o8l _vchhusvi _1bsb1wug _p12f1osq _irr31dpa", readViewFitContainerWidth && "_1bsb1osq", fg('platform-dst-shape-theme-default') && "_2rko1qi0"])
|
|
66
65
|
}, readView()));
|
|
67
66
|
};
|
|
68
67
|
|
package/dist/esm/inline-edit.js
CHANGED
|
@@ -20,7 +20,7 @@ var fieldStyles = null;
|
|
|
20
20
|
var analyticsAttributes = {
|
|
21
21
|
componentName: 'inlineEdit',
|
|
22
22
|
packageName: "@atlaskit/inline-edit",
|
|
23
|
-
packageVersion: "
|
|
23
|
+
packageVersion: "15.6.10"
|
|
24
24
|
};
|
|
25
25
|
var InnerInlineEdit = function InnerInlineEdit(props) {
|
|
26
26
|
var _props$startWithEditV = props.startWithEditViewOpen,
|
|
@@ -32,4 +32,4 @@
|
|
|
32
32
|
._y4tize3t{padding-inline-end:var(--ds-space-0,0)}._128midpf:focus-visible{outline-width:0}
|
|
33
33
|
._mizu1r31:focus-visible{outline-color:currentColor}
|
|
34
34
|
._ra3xglyw:focus-visible{outline-style:none}
|
|
35
|
-
.
|
|
35
|
+
._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
|
|
@@ -4,7 +4,6 @@ import { ax, ix } from "@compiled/react/runtime";
|
|
|
4
4
|
import React, { useRef } from 'react';
|
|
5
5
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
6
|
import { Pressable } from '@atlaskit/primitives/compiled';
|
|
7
|
-
import { N30 } from '@atlaskit/theme/colors';
|
|
8
7
|
var readViewContainerStyles = null;
|
|
9
8
|
var editButtonStyles = {
|
|
10
9
|
root: "_12ji1r31 _1qu2glyw _12y3idpf _189eidpf _1dqoglyw _1h6d1j28 _1e0c1ule _1pfhze3t _12l2ze3t _6rthze3t _ahbqze3t _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _r06hglyw _bfhk1j28 _vwz4kb7n _1xp41v1w _14lydkaa _1j8znqa1 _mizu1r31 _ra3xglyw _128midpf"
|
|
@@ -61,10 +60,7 @@ var ReadView = function ReadView(_ref) {
|
|
|
61
60
|
startY.current = e.clientY;
|
|
62
61
|
},
|
|
63
62
|
"data-read-view-fit-container-width": readViewFitContainerWidth,
|
|
64
|
-
className: ax(["_2rkofajl _v564thzt _1h6d1j28 _1dqonqa1 _189e1dm9 _1e0c1o8l _vchhusvi _1bsb1wug _p12f1osq
|
|
65
|
-
style: {
|
|
66
|
-
"--_1y60f1n": ix("var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"))
|
|
67
|
-
}
|
|
63
|
+
className: ax(["_2rkofajl _v564thzt _1h6d1j28 _1dqonqa1 _189e1dm9 _1e0c1o8l _vchhusvi _1bsb1wug _p12f1osq _irr31dpa", readViewFitContainerWidth && "_1bsb1osq", fg('platform-dst-shape-theme-default') && "_2rko1qi0"])
|
|
68
64
|
}, readView()));
|
|
69
65
|
};
|
|
70
66
|
|
package/inline-edit.docs.tsx
CHANGED
|
@@ -5,7 +5,8 @@ import type { ComponentStructuredContentSource } from '@atlassian/structured-doc
|
|
|
5
5
|
const documentation: ComponentStructuredContentSource[] = [
|
|
6
6
|
{
|
|
7
7
|
name: 'InlineEdit',
|
|
8
|
-
description:
|
|
8
|
+
description:
|
|
9
|
+
'An inline edit displays a custom input component that switches between reading and editing on the same page.',
|
|
9
10
|
status: 'general-availability',
|
|
10
11
|
import: {
|
|
11
12
|
name: 'InlineEdit',
|
|
@@ -15,10 +16,9 @@ const documentation: ComponentStructuredContentSource[] = [
|
|
|
15
16
|
packageJson: require('./package.json'),
|
|
16
17
|
},
|
|
17
18
|
usageGuidelines: [
|
|
18
|
-
'Use
|
|
19
|
+
'Use when you need custom input components or layout',
|
|
20
|
+
'Use InlineEditableTextfield for standard text field use cases',
|
|
19
21
|
'Provide clear edit state indicators',
|
|
20
|
-
'Handle save and cancel actions',
|
|
21
|
-
'Consider validation requirements',
|
|
22
22
|
],
|
|
23
23
|
contentGuidelines: [
|
|
24
24
|
'Use clear, descriptive text content',
|
|
@@ -42,6 +42,47 @@ const documentation: ComponentStructuredContentSource[] = [
|
|
|
42
42
|
keywords: ['inline', 'edit', 'editable', 'text', 'input'],
|
|
43
43
|
categories: ['form'],
|
|
44
44
|
},
|
|
45
|
+
{
|
|
46
|
+
name: 'InlineEditableTextfield',
|
|
47
|
+
description:
|
|
48
|
+
'An inline editable text field displays a text field that switches between reading and editing on the same page.',
|
|
49
|
+
status: 'general-availability',
|
|
50
|
+
import: {
|
|
51
|
+
name: 'InlineEditableTextfield',
|
|
52
|
+
package: '@atlaskit/inline-edit',
|
|
53
|
+
type: 'named',
|
|
54
|
+
packagePath: path.resolve(__dirname),
|
|
55
|
+
packageJson: require('./package.json'),
|
|
56
|
+
},
|
|
57
|
+
usageGuidelines: [
|
|
58
|
+
'Use for existing content in a text field that may need tweaking',
|
|
59
|
+
'Use where multiple items on a page can be edited at once',
|
|
60
|
+
"Don't use if the main function of the screen is editing—use a text area instead",
|
|
61
|
+
'Use InlineEdit when you need custom input components',
|
|
62
|
+
],
|
|
63
|
+
contentGuidelines: [
|
|
64
|
+
'Use concise, sentence case labels',
|
|
65
|
+
'Customise placeholder text for empty state',
|
|
66
|
+
'Keep labels descriptive of the field',
|
|
67
|
+
],
|
|
68
|
+
accessibilityGuidelines: [
|
|
69
|
+
'Ensure proper focus management between read and edit states',
|
|
70
|
+
'Provide clear save/cancel controls',
|
|
71
|
+
'Use appropriate ARIA attributes',
|
|
72
|
+
],
|
|
73
|
+
examples: [
|
|
74
|
+
{
|
|
75
|
+
name: 'Inline Editable Textfield',
|
|
76
|
+
description: 'InlineEditableTextfield example',
|
|
77
|
+
source: path.resolve(
|
|
78
|
+
__dirname,
|
|
79
|
+
'./examples/constellation/inline-editable-textfield-default.tsx',
|
|
80
|
+
),
|
|
81
|
+
},
|
|
82
|
+
],
|
|
83
|
+
keywords: ['inline', 'edit', 'editable', 'textfield', 'text', 'input'],
|
|
84
|
+
categories: ['form'],
|
|
85
|
+
},
|
|
45
86
|
];
|
|
46
87
|
|
|
47
88
|
export default documentation;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/inline-edit",
|
|
3
|
-
"version": "15.6.
|
|
3
|
+
"version": "15.6.11",
|
|
4
4
|
"description": "An inline edit displays a custom input component that switches between reading and editing on the same page.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -33,17 +33,17 @@
|
|
|
33
33
|
}
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@atlaskit/analytics-next": "^11.
|
|
36
|
+
"@atlaskit/analytics-next": "^11.2.0",
|
|
37
37
|
"@atlaskit/button": "^23.10.0",
|
|
38
38
|
"@atlaskit/css": "^0.19.0",
|
|
39
|
-
"@atlaskit/form": "^15.
|
|
40
|
-
"@atlaskit/icon": "^
|
|
39
|
+
"@atlaskit/form": "^15.5.0",
|
|
40
|
+
"@atlaskit/icon": "^34.0.0",
|
|
41
41
|
"@atlaskit/inline-dialog": "^18.0.0",
|
|
42
42
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
43
|
-
"@atlaskit/primitives": "^18.
|
|
43
|
+
"@atlaskit/primitives": "^18.1.0",
|
|
44
44
|
"@atlaskit/textfield": "^8.2.0",
|
|
45
45
|
"@atlaskit/theme": "^22.0.0",
|
|
46
|
-
"@atlaskit/tokens": "^11.
|
|
46
|
+
"@atlaskit/tokens": "^11.4.0",
|
|
47
47
|
"@atlaskit/visually-hidden": "^3.0.0",
|
|
48
48
|
"@babel/runtime": "^7.0.0",
|
|
49
49
|
"@compiled/react": "^0.20.0"
|
|
@@ -54,13 +54,13 @@
|
|
|
54
54
|
"devDependencies": {
|
|
55
55
|
"@af/accessibility-testing": "workspace:^",
|
|
56
56
|
"@af/integration-testing": "workspace:^",
|
|
57
|
-
"@atlaskit/datetime-picker": "^17.
|
|
57
|
+
"@atlaskit/datetime-picker": "^17.6.0",
|
|
58
58
|
"@atlaskit/docs": "^11.7.0",
|
|
59
59
|
"@atlaskit/heading": "^5.3.0",
|
|
60
60
|
"@atlaskit/link": "^3.3.0",
|
|
61
61
|
"@atlaskit/section-message": "^8.12.0",
|
|
62
|
-
"@atlaskit/select": "^21.
|
|
63
|
-
"@atlaskit/tag": "^14.
|
|
62
|
+
"@atlaskit/select": "^21.10.0",
|
|
63
|
+
"@atlaskit/tag": "^14.6.0",
|
|
64
64
|
"@atlaskit/tag-group": "^12.0.0",
|
|
65
65
|
"@atlaskit/textarea": "^8.2.0",
|
|
66
66
|
"@atlassian/ssr-tests": "workspace:^",
|