@atlaskit/jql-editor 4.2.3 → 4.3.0

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 CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/jql-editor
2
2
 
3
+ ## 4.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#100746](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100746)
8
+ [`8a7f333f8ce6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8a7f333f8ce6) -
9
+ This cleans up feature flag references for the increased border contrast changes in JQL editor,
10
+ making them fully available for all users.
11
+
3
12
  ## 4.2.3
4
13
 
5
14
  ### Patch Changes
@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.useJqlEditorAnalytics = void 0;
7
7
  var _jqlEditorCommon = require("@atlaskit/jql-editor-common");
8
8
  var useJqlEditorAnalytics = exports.useJqlEditorAnalytics = function useJqlEditorAnalytics(analyticsSource) {
9
- return (0, _jqlEditorCommon.useJqlPackageAnalytics)(analyticsSource, "@atlaskit/jql-editor", "4.2.3", _jqlEditorCommon.ANALYTICS_CHANNEL);
9
+ return (0, _jqlEditorCommon.useJqlPackageAnalytics)(analyticsSource, "@atlaskit/jql-editor", "4.3.0", _jqlEditorCommon.ANALYTICS_CHANNEL);
10
10
  };
@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.default = exports.JQLEditorReadOnly = void 0;
8
8
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
9
9
  var _react = _interopRequireDefault(require("react"));
10
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
11
10
  var _useEditorTheme = require("../../hooks/use-editor-theme");
12
11
  var _splitTextByNewLine = require("../../utils/split-text-by-new-line");
13
12
  var _readOnlyControlsContent = require("../jql-editor-controls-content/read-only-controls-content");
@@ -38,7 +37,6 @@ var JQLEditorLayout = function JQLEditorLayout(props) {
38
37
  }, /*#__PURE__*/_react.default.createElement(_styled.EditorViewContainer, {
39
38
  editorViewHasFocus: editorViewHasFocus,
40
39
  editorViewIsInvalid: editorViewIsInvalid,
41
- isBorderContrastFixEnabled: (0, _platformFeatureFlags.getBooleanFF)('platform.a11y-jira-team.fix-border-contrast-for-jql-editor-textarea_vy0qk') ? true : false,
42
40
  ref: onEditorViewContainerRef,
43
41
  onScroll: onEditorViewContainerScroll
44
42
  }, /*#__PURE__*/_react.default.createElement(_styled.LineNumberToolbar, {
@@ -72,9 +70,7 @@ var JQLEditorReadOnlyWithoutTheme = function JQLEditorReadOnlyWithoutTheme(_ref)
72
70
  isCompact = _useEditorThemeContex2.isCompact;
73
71
  var blocks = (0, _splitTextByNewLine.splitTextByNewLine)(query);
74
72
  var lineNumbersVisible = blocks.length > 1;
75
- return /*#__PURE__*/_react.default.createElement(_styled.EditorMain, null, /*#__PURE__*/_react.default.createElement(_styled.ReadOnlyEditorViewContainer, {
76
- isBorderContrastFixEnabled: (0, _platformFeatureFlags.getBooleanFF)('platform.a11y-jira-team.fix-border-contrast-for-jql-editor-textarea_vy0qk') ? true : false
77
- }, /*#__PURE__*/_react.default.createElement(_styled.LineNumberToolbar, {
73
+ return /*#__PURE__*/_react.default.createElement(_styled.EditorMain, null, /*#__PURE__*/_react.default.createElement(_styled.ReadOnlyEditorViewContainer, null, /*#__PURE__*/_react.default.createElement(_styled.LineNumberToolbar, {
78
74
  lineNumbersVisible: lineNumbersVisible
79
75
  }), /*#__PURE__*/_react.default.createElement(_styled.ReadOnlyEditorView, {
80
76
  "data-testid": "jql-editor-read-only",
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.ReadOnlyEditorViewContainer = exports.ReadOnlyEditorView = exports.LineNumberToolbar = exports.EditorViewContainer = exports.EditorView = exports.EditorMain = exports.EditorFooter = exports.EditorControls = void 0;
8
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
10
9
  var _react = require("@emotion/react");
11
10
  var _styled = _interopRequireDefault(require("@emotion/styled"));
@@ -13,8 +12,6 @@ var _colors = require("@atlaskit/theme/colors");
13
12
  var _constants = require("@atlaskit/theme/constants");
14
13
  var _constants2 = require("../../plugins/validation-tooltip/constants");
15
14
  var _templateObject, _templateObject2, _templateObject3, _templateObject4;
16
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
17
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
18
15
  var fadeIn = (0, _react.keyframes)({
19
16
  from: {
20
17
  opacity: 0
@@ -51,33 +48,26 @@ var editorInputHorizontalPadding = 6;
51
48
  var EditorViewContainer = exports.EditorViewContainer = _styled.default.div({
52
49
  backgroundColor: "var(--ds-background-input, ".concat(_colors.N10, ")"),
53
50
  borderStyle: 'solid',
54
- borderWidth: '2px',
55
- borderColor: "var(--ds-border, ".concat(_colors.N40, ")"),
51
+ borderWidth: "var(--ds-border-width, 1px)",
52
+ borderColor: "var(--ds-border-input, ".concat(_colors.N100, ")"),
56
53
  borderRadius: "var(--ds-border-radius-100, 3px)",
54
+ padding: "var(--ds-border-width, 1px)",
57
55
  boxSizing: 'border-box',
58
56
  color: "var(--ds-text, ".concat(_colors.N900, ")"),
59
57
  display: 'flex',
60
58
  overflow: 'auto',
61
59
  transition: 'background-color 0.2s ease-in-out, border-color 0.2s ease-in-out'
62
60
  }, function (props) {
63
- return props.isBorderContrastFixEnabled && (0, _react.css)({
64
- borderWidth: "var(--ds-border-width, 1px)",
65
- borderColor: "var(--ds-border-input, ".concat(_colors.N100, ")"),
66
- padding: "var(--ds-border-width, 1px)"
67
- });
68
- }, function (props) {
69
- return props.editorViewIsInvalid && (0, _react.css)(_objectSpread({
70
- borderColor: "var(--ds-border-danger, ".concat(_colors.R400, ")")
71
- }, props.isBorderContrastFixEnabled ? {
61
+ return props.editorViewIsInvalid && (0, _react.css)({
62
+ borderColor: "var(--ds-border-danger, ".concat(_colors.R400, ")"),
72
63
  boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, ".concat(_colors.R400, ")"))
73
- } : {}));
64
+ });
74
65
  }, function (props) {
75
- return props.editorViewHasFocus ? (0, _react.css)(_objectSpread({
66
+ return props.editorViewHasFocus ? (0, _react.css)({
76
67
  backgroundColor: "var(--ds-surface, ".concat(_colors.N0, ")"),
77
- borderColor: "var(--ds-border-focused, ".concat(props.isBorderContrastFixEnabled ? _colors.B200 : _colors.B100, ")")
78
- }, props.isBorderContrastFixEnabled ? {
68
+ borderColor: "var(--ds-border-focused, ".concat(_colors.B200, ")"),
79
69
  boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(_colors.B200, ")"))
80
- } : {})) : (0, _react.css)({
70
+ }) : (0, _react.css)({
81
71
  ':hover': {
82
72
  backgroundColor: "var(--ds-background-input-hovered, ".concat(_colors.N30, ")")
83
73
  }
@@ -104,7 +94,7 @@ var LineNumberToolbar = exports.LineNumberToolbar = _styled.default.div({
104
94
  * The main div which the Prosemirror editor will be rendered into.
105
95
  */
106
96
  // eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression -- needs manual remediation
107
- var EditorView = exports.EditorView = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n counter-reset: lineNumber;\n flex-grow: 1;\n\n transition: height 250ms cubic-bezier(0.15, 1, 0.3, 1),\n max-height 250ms cubic-bezier(0.15, 1, 0.3, 1);\n max-height: ", "px;\n\n line-height: ", ";\n font-family: ", ";\n word-break: break-word;\n overflow-wrap: anywhere;\n white-space: pre-wrap;\n\n &[data-expanded] {\n height: ", "px;\n max-height: ", "px;\n }\n\n .ProseMirror {\n color: ", ";\n padding: ", "px\n ", "px;\n\n &:focus {\n outline: none;\n }\n\n .mark-token-keyword {\n color: ", ";\n }\n\n .mark-token-field {\n color: ", ";\n }\n\n .mark-token-operator {\n color: ", ";\n }\n\n .mark-token-error {\n color: ", ";\n text-decoration: wavy underline;\n text-decoration-thickness: 1px;\n text-decoration-skip-ink: none;\n }\n }\n\n p {\n margin: 0;\n counter-increment: lineNumber;\n position: relative;\n\n /* Show the current line number before each paragraph block. */\n\n &::before {\n content: counter(lineNumber);\n color: ", ";\n font-size: 10px;\n line-height: ", ";\n padding: 0 ", " 0 ", ";\n position: absolute;\n box-sizing: border-box;\n /* Shift the line number tag 100% (plus 8px padding) to the left to position it inside the LineNumberToolbar */\n transform: translateX(calc(-100% - ", "));\n\n /* We can fit 3 digits before ellipses. This is not very responsive but saves us having to add expensive width\n recalculation logic to the LineNumberToolbar for a scenario that *should* never happen. */\n max-width: 30px;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n\n ", "\n }\n }\n"])), function (props) {
97
+ var EditorView = exports.EditorView = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n counter-reset: lineNumber;\n flex-grow: 1;\n\n transition:\n height 250ms cubic-bezier(0.15, 1, 0.3, 1),\n max-height 250ms cubic-bezier(0.15, 1, 0.3, 1);\n max-height: ", "px;\n\n line-height: ", ";\n font-family: ", ";\n word-break: break-word;\n overflow-wrap: anywhere;\n white-space: pre-wrap;\n\n &[data-expanded] {\n height: ", "px;\n max-height: ", "px;\n }\n\n .ProseMirror {\n color: ", ";\n padding: ", "px\n ", "px;\n\n &:focus {\n outline: none;\n }\n\n .mark-token-keyword {\n color: ", ";\n }\n\n .mark-token-field {\n color: ", ";\n }\n\n .mark-token-operator {\n color: ", ";\n }\n\n .mark-token-error {\n color: ", ";\n text-decoration: wavy underline;\n text-decoration-thickness: 1px;\n text-decoration-skip-ink: none;\n }\n }\n\n p {\n margin: 0;\n counter-increment: lineNumber;\n position: relative;\n\n /* Show the current line number before each paragraph block. */\n\n &::before {\n content: counter(lineNumber);\n color: ", ";\n font-size: 10px;\n line-height: ", ";\n padding: 0 ", " 0 ", ";\n position: absolute;\n box-sizing: border-box;\n /* Shift the line number tag 100% (plus 8px padding) to the left to position it inside the LineNumberToolbar */\n transform: translateX(calc(-100% - ", "));\n\n /* We can fit 3 digits before ellipses. This is not very responsive but saves us having to add expensive width\n recalculation logic to the LineNumberToolbar for a scenario that *should* never happen. */\n max-width: 30px;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n\n ", "\n }\n }\n"])), function (props) {
108
98
  return rowHeight * props.defaultMaxRows + getEditorInputVerticalPadding(props.isCompact) * 2;
109
99
  }, rowHeight / (0, _constants.fontSize)(), (0, _constants.codeFontFamily)(), function (props) {
110
100
  return rowHeight * props.expandedRows + getEditorInputVerticalPadding(props.isCompact) * 2;
@@ -1,4 +1,4 @@
1
1
  import { ANALYTICS_CHANNEL, useJqlPackageAnalytics } from '@atlaskit/jql-editor-common';
2
2
  export const useJqlEditorAnalytics = analyticsSource => {
3
- return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "4.2.3", ANALYTICS_CHANNEL);
3
+ return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "4.3.0", ANALYTICS_CHANNEL);
4
4
  };
@@ -1,5 +1,4 @@
1
1
  import React from 'react';
2
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
3
2
  import { EditorThemeContext, useEditorTheme, useEditorThemeContext } from '../../hooks/use-editor-theme';
4
3
  import { splitTextByNewLine } from '../../utils/split-text-by-new-line';
5
4
  // eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
@@ -33,7 +32,6 @@ const JQLEditorLayout = props => {
33
32
  }, /*#__PURE__*/React.createElement(EditorViewContainer, {
34
33
  editorViewHasFocus: editorViewHasFocus,
35
34
  editorViewIsInvalid: editorViewIsInvalid,
36
- isBorderContrastFixEnabled: getBooleanFF('platform.a11y-jira-team.fix-border-contrast-for-jql-editor-textarea_vy0qk') ? true : false,
37
35
  ref: onEditorViewContainerRef,
38
36
  onScroll: onEditorViewContainerScroll
39
37
  }, /*#__PURE__*/React.createElement(LineNumberToolbar, {
@@ -69,9 +67,7 @@ const JQLEditorReadOnlyWithoutTheme = ({
69
67
  } = useEditorThemeContext();
70
68
  const blocks = splitTextByNewLine(query);
71
69
  const lineNumbersVisible = blocks.length > 1;
72
- return /*#__PURE__*/React.createElement(EditorMain, null, /*#__PURE__*/React.createElement(ReadOnlyEditorViewContainer, {
73
- isBorderContrastFixEnabled: getBooleanFF('platform.a11y-jira-team.fix-border-contrast-for-jql-editor-textarea_vy0qk') ? true : false
74
- }, /*#__PURE__*/React.createElement(LineNumberToolbar, {
70
+ return /*#__PURE__*/React.createElement(EditorMain, null, /*#__PURE__*/React.createElement(ReadOnlyEditorViewContainer, null, /*#__PURE__*/React.createElement(LineNumberToolbar, {
75
71
  lineNumbersVisible: lineNumbersVisible
76
72
  }), /*#__PURE__*/React.createElement(ReadOnlyEditorView, {
77
73
  "data-testid": "jql-editor-read-only",
@@ -1,6 +1,6 @@
1
1
  import { css, keyframes } from '@emotion/react';
2
2
  import styled from '@emotion/styled';
3
- import { B100, B200, B300, G300, N0, N10, N100, N30, N40, N700, N800, N900, P400, R400 } from '@atlaskit/theme/colors';
3
+ import { B200, B300, G300, N0, N10, N100, N30, N700, N800, N900, P400, R400 } from '@atlaskit/theme/colors';
4
4
  import { codeFontFamily, fontFamily, fontSize,
5
5
  // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
6
6
  gridSize, layers } from '@atlaskit/theme/constants';
@@ -75,29 +75,22 @@ const editorInputHorizontalPadding = 6;
75
75
  export const EditorViewContainer = styled.div({
76
76
  backgroundColor: `var(--ds-background-input, ${N10})`,
77
77
  borderStyle: 'solid',
78
- borderWidth: '2px',
79
- borderColor: `var(--ds-border, ${N40})`,
78
+ borderWidth: "var(--ds-border-width, 1px)",
79
+ borderColor: `var(--ds-border-input, ${N100})`,
80
80
  borderRadius: "var(--ds-border-radius-100, 3px)",
81
+ padding: "var(--ds-border-width, 1px)",
81
82
  boxSizing: 'border-box',
82
83
  color: `var(--ds-text, ${N900})`,
83
84
  display: 'flex',
84
85
  overflow: 'auto',
85
86
  transition: 'background-color 0.2s ease-in-out, border-color 0.2s ease-in-out'
86
- }, props => props.isBorderContrastFixEnabled && css({
87
- borderWidth: "var(--ds-border-width, 1px)",
88
- borderColor: `var(--ds-border-input, ${N100})`,
89
- padding: "var(--ds-border-width, 1px)"
90
- }), props => props.editorViewIsInvalid && css({
87
+ }, props => props.editorViewIsInvalid && css({
91
88
  borderColor: `var(--ds-border-danger, ${R400})`,
92
- ...(props.isBorderContrastFixEnabled ? {
93
- boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${`var(--ds-border-danger, ${R400})`}`
94
- } : {})
89
+ boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${`var(--ds-border-danger, ${R400})`}`
95
90
  }), props => props.editorViewHasFocus ? css({
96
91
  backgroundColor: `var(--ds-surface, ${N0})`,
97
- borderColor: `var(--ds-border-focused, ${props.isBorderContrastFixEnabled ? B200 : B100})`,
98
- ...(props.isBorderContrastFixEnabled ? {
99
- boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${`var(--ds-border-focused, ${B200})`}`
100
- } : {})
92
+ borderColor: `var(--ds-border-focused, ${B200})`,
93
+ boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${`var(--ds-border-focused, ${B200})`}`
101
94
  }) : css({
102
95
  ':hover': {
103
96
  backgroundColor: `var(--ds-background-input-hovered, ${N30})`
@@ -126,7 +119,8 @@ export const EditorView = styled.div`
126
119
  counter-reset: lineNumber;
127
120
  flex-grow: 1;
128
121
 
129
- transition: height 250ms cubic-bezier(0.15, 1, 0.3, 1),
122
+ transition:
123
+ height 250ms cubic-bezier(0.15, 1, 0.3, 1),
130
124
  max-height 250ms cubic-bezier(0.15, 1, 0.3, 1);
131
125
  max-height: ${props => rowHeight * props.defaultMaxRows + getEditorInputVerticalPadding(props.isCompact) * 2}px;
132
126
 
@@ -1,4 +1,4 @@
1
1
  import { ANALYTICS_CHANNEL, useJqlPackageAnalytics } from '@atlaskit/jql-editor-common';
2
2
  export var useJqlEditorAnalytics = function useJqlEditorAnalytics(analyticsSource) {
3
- return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "4.2.3", ANALYTICS_CHANNEL);
3
+ return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "4.3.0", ANALYTICS_CHANNEL);
4
4
  };
@@ -1,7 +1,6 @@
1
1
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
2
2
  var _excluded = ["isSearch", "isCompact"];
3
3
  import React from 'react';
4
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
5
4
  import { EditorThemeContext, useEditorTheme, useEditorThemeContext } from '../../hooks/use-editor-theme';
6
5
  import { splitTextByNewLine } from '../../utils/split-text-by-new-line';
7
6
  // eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
@@ -32,7 +31,6 @@ var JQLEditorLayout = function JQLEditorLayout(props) {
32
31
  }, /*#__PURE__*/React.createElement(EditorViewContainer, {
33
32
  editorViewHasFocus: editorViewHasFocus,
34
33
  editorViewIsInvalid: editorViewIsInvalid,
35
- isBorderContrastFixEnabled: getBooleanFF('platform.a11y-jira-team.fix-border-contrast-for-jql-editor-textarea_vy0qk') ? true : false,
36
34
  ref: onEditorViewContainerRef,
37
35
  onScroll: onEditorViewContainerScroll
38
36
  }, /*#__PURE__*/React.createElement(LineNumberToolbar, {
@@ -66,9 +64,7 @@ var JQLEditorReadOnlyWithoutTheme = function JQLEditorReadOnlyWithoutTheme(_ref)
66
64
  isCompact = _useEditorThemeContex2.isCompact;
67
65
  var blocks = splitTextByNewLine(query);
68
66
  var lineNumbersVisible = blocks.length > 1;
69
- return /*#__PURE__*/React.createElement(EditorMain, null, /*#__PURE__*/React.createElement(ReadOnlyEditorViewContainer, {
70
- isBorderContrastFixEnabled: getBooleanFF('platform.a11y-jira-team.fix-border-contrast-for-jql-editor-textarea_vy0qk') ? true : false
71
- }, /*#__PURE__*/React.createElement(LineNumberToolbar, {
67
+ return /*#__PURE__*/React.createElement(EditorMain, null, /*#__PURE__*/React.createElement(ReadOnlyEditorViewContainer, null, /*#__PURE__*/React.createElement(LineNumberToolbar, {
72
68
  lineNumbersVisible: lineNumbersVisible
73
69
  }), /*#__PURE__*/React.createElement(ReadOnlyEditorView, {
74
70
  "data-testid": "jql-editor-read-only",
@@ -1,11 +1,8 @@
1
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
3
2
  var _templateObject, _templateObject2, _templateObject3, _templateObject4;
4
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
5
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
6
3
  import { css, keyframes } from '@emotion/react';
7
4
  import styled from '@emotion/styled';
8
- import { B100, B200, B300, G300, N0, N10, N100, N30, N40, N700, N800, N900, P400, R400 } from '@atlaskit/theme/colors';
5
+ import { B200, B300, G300, N0, N10, N100, N30, N700, N800, N900, P400, R400 } from '@atlaskit/theme/colors';
9
6
  import { codeFontFamily, fontFamily, fontSize,
10
7
  // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
11
8
  gridSize, layers } from '@atlaskit/theme/constants';
@@ -46,33 +43,26 @@ var editorInputHorizontalPadding = 6;
46
43
  export var EditorViewContainer = styled.div({
47
44
  backgroundColor: "var(--ds-background-input, ".concat(N10, ")"),
48
45
  borderStyle: 'solid',
49
- borderWidth: '2px',
50
- borderColor: "var(--ds-border, ".concat(N40, ")"),
46
+ borderWidth: "var(--ds-border-width, 1px)",
47
+ borderColor: "var(--ds-border-input, ".concat(N100, ")"),
51
48
  borderRadius: "var(--ds-border-radius-100, 3px)",
49
+ padding: "var(--ds-border-width, 1px)",
52
50
  boxSizing: 'border-box',
53
51
  color: "var(--ds-text, ".concat(N900, ")"),
54
52
  display: 'flex',
55
53
  overflow: 'auto',
56
54
  transition: 'background-color 0.2s ease-in-out, border-color 0.2s ease-in-out'
57
55
  }, function (props) {
58
- return props.isBorderContrastFixEnabled && css({
59
- borderWidth: "var(--ds-border-width, 1px)",
60
- borderColor: "var(--ds-border-input, ".concat(N100, ")"),
61
- padding: "var(--ds-border-width, 1px)"
62
- });
63
- }, function (props) {
64
- return props.editorViewIsInvalid && css(_objectSpread({
65
- borderColor: "var(--ds-border-danger, ".concat(R400, ")")
66
- }, props.isBorderContrastFixEnabled ? {
56
+ return props.editorViewIsInvalid && css({
57
+ borderColor: "var(--ds-border-danger, ".concat(R400, ")"),
67
58
  boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, ".concat(R400, ")"))
68
- } : {}));
59
+ });
69
60
  }, function (props) {
70
- return props.editorViewHasFocus ? css(_objectSpread({
61
+ return props.editorViewHasFocus ? css({
71
62
  backgroundColor: "var(--ds-surface, ".concat(N0, ")"),
72
- borderColor: "var(--ds-border-focused, ".concat(props.isBorderContrastFixEnabled ? B200 : B100, ")")
73
- }, props.isBorderContrastFixEnabled ? {
63
+ borderColor: "var(--ds-border-focused, ".concat(B200, ")"),
74
64
  boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(B200, ")"))
75
- } : {})) : css({
65
+ }) : css({
76
66
  ':hover': {
77
67
  backgroundColor: "var(--ds-background-input-hovered, ".concat(N30, ")")
78
68
  }
@@ -99,7 +89,7 @@ export var LineNumberToolbar = styled.div({
99
89
  * The main div which the Prosemirror editor will be rendered into.
100
90
  */
101
91
  // eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression -- needs manual remediation
102
- export var EditorView = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n counter-reset: lineNumber;\n flex-grow: 1;\n\n transition: height 250ms cubic-bezier(0.15, 1, 0.3, 1),\n max-height 250ms cubic-bezier(0.15, 1, 0.3, 1);\n max-height: ", "px;\n\n line-height: ", ";\n font-family: ", ";\n word-break: break-word;\n overflow-wrap: anywhere;\n white-space: pre-wrap;\n\n &[data-expanded] {\n height: ", "px;\n max-height: ", "px;\n }\n\n .ProseMirror {\n color: ", ";\n padding: ", "px\n ", "px;\n\n &:focus {\n outline: none;\n }\n\n .mark-token-keyword {\n color: ", ";\n }\n\n .mark-token-field {\n color: ", ";\n }\n\n .mark-token-operator {\n color: ", ";\n }\n\n .mark-token-error {\n color: ", ";\n text-decoration: wavy underline;\n text-decoration-thickness: 1px;\n text-decoration-skip-ink: none;\n }\n }\n\n p {\n margin: 0;\n counter-increment: lineNumber;\n position: relative;\n\n /* Show the current line number before each paragraph block. */\n\n &::before {\n content: counter(lineNumber);\n color: ", ";\n font-size: 10px;\n line-height: ", ";\n padding: 0 ", " 0 ", ";\n position: absolute;\n box-sizing: border-box;\n /* Shift the line number tag 100% (plus 8px padding) to the left to position it inside the LineNumberToolbar */\n transform: translateX(calc(-100% - ", "));\n\n /* We can fit 3 digits before ellipses. This is not very responsive but saves us having to add expensive width\n recalculation logic to the LineNumberToolbar for a scenario that *should* never happen. */\n max-width: 30px;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n\n ", "\n }\n }\n"])), function (props) {
92
+ export var EditorView = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n counter-reset: lineNumber;\n flex-grow: 1;\n\n transition:\n height 250ms cubic-bezier(0.15, 1, 0.3, 1),\n max-height 250ms cubic-bezier(0.15, 1, 0.3, 1);\n max-height: ", "px;\n\n line-height: ", ";\n font-family: ", ";\n word-break: break-word;\n overflow-wrap: anywhere;\n white-space: pre-wrap;\n\n &[data-expanded] {\n height: ", "px;\n max-height: ", "px;\n }\n\n .ProseMirror {\n color: ", ";\n padding: ", "px\n ", "px;\n\n &:focus {\n outline: none;\n }\n\n .mark-token-keyword {\n color: ", ";\n }\n\n .mark-token-field {\n color: ", ";\n }\n\n .mark-token-operator {\n color: ", ";\n }\n\n .mark-token-error {\n color: ", ";\n text-decoration: wavy underline;\n text-decoration-thickness: 1px;\n text-decoration-skip-ink: none;\n }\n }\n\n p {\n margin: 0;\n counter-increment: lineNumber;\n position: relative;\n\n /* Show the current line number before each paragraph block. */\n\n &::before {\n content: counter(lineNumber);\n color: ", ";\n font-size: 10px;\n line-height: ", ";\n padding: 0 ", " 0 ", ";\n position: absolute;\n box-sizing: border-box;\n /* Shift the line number tag 100% (plus 8px padding) to the left to position it inside the LineNumberToolbar */\n transform: translateX(calc(-100% - ", "));\n\n /* We can fit 3 digits before ellipses. This is not very responsive but saves us having to add expensive width\n recalculation logic to the LineNumberToolbar for a scenario that *should* never happen. */\n max-width: 30px;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n\n ", "\n }\n }\n"])), function (props) {
103
93
  return rowHeight * props.defaultMaxRows + getEditorInputVerticalPadding(props.isCompact) * 2;
104
94
  }, rowHeight / fontSize(), codeFontFamily(), function (props) {
105
95
  return rowHeight * props.expandedRows + getEditorInputVerticalPadding(props.isCompact) * 2;
@@ -10,7 +10,6 @@ export declare const EditorFooter: import("@emotion/styled").StyledComponent<{
10
10
  type EditorViewContainerProps = {
11
11
  editorViewHasFocus?: boolean;
12
12
  editorViewIsInvalid?: boolean;
13
- isBorderContrastFixEnabled: boolean;
14
13
  };
15
14
  export declare const EditorViewContainer: import("@emotion/styled").StyledComponent<{
16
15
  theme?: import("@emotion/react").Theme | undefined;
@@ -10,7 +10,6 @@ export declare const EditorFooter: import("@emotion/styled").StyledComponent<{
10
10
  type EditorViewContainerProps = {
11
11
  editorViewHasFocus?: boolean;
12
12
  editorViewIsInvalid?: boolean;
13
- isBorderContrastFixEnabled: boolean;
14
13
  };
15
14
  export declare const EditorViewContainer: import("@emotion/styled").StyledComponent<{
16
15
  theme?: import("@emotion/react").Theme | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/jql-editor",
3
- "version": "4.2.3",
3
+ "version": "4.3.0",
4
4
  "description": "This package allows consumers to render an advanced JQL editor component to enable autocomplete-assisted authoring and validation of JQL queries.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -41,17 +41,16 @@
41
41
  "@atlaskit/avatar": "^21.8.0",
42
42
  "@atlaskit/button": "^17.14.0",
43
43
  "@atlaskit/editor-prosemirror": "4.0.1",
44
- "@atlaskit/form": "^10.0.0",
45
- "@atlaskit/icon": "^22.1.0",
44
+ "@atlaskit/form": "^10.1.0",
45
+ "@atlaskit/icon": "^22.2.0",
46
46
  "@atlaskit/jql-ast": "^3.2.0",
47
47
  "@atlaskit/jql-autocomplete": "^2.0.0",
48
48
  "@atlaskit/jql-editor-common": "^2.0.0",
49
49
  "@atlaskit/jql-parser": "^2.0.0",
50
- "@atlaskit/platform-feature-flags": "^0.2.4",
51
50
  "@atlaskit/spinner": "^16.1.0",
52
51
  "@atlaskit/theme": "^12.8.0",
53
- "@atlaskit/tokens": "^1.47.0",
54
- "@atlaskit/tooltip": "^18.3.0",
52
+ "@atlaskit/tokens": "^1.48.0",
53
+ "@atlaskit/tooltip": "^18.4.0",
55
54
  "@babel/runtime": "^7.0.0",
56
55
  "@emotion/react": "^11.7.1",
57
56
  "@emotion/styled": "^11.0.0",
@@ -77,7 +76,6 @@
77
76
  "@atlaskit/jql-editor-autocomplete-rest": "^2.0.0",
78
77
  "@atlaskit/visual-regression": "*",
79
78
  "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
80
- "@atlassian/feature-flags-test-utils": "*",
81
79
  "@storybook/addon-actions": "^5.2.5",
82
80
  "@storybook/addon-knobs": "^5.3.18",
83
81
  "@testing-library/jest-dom": "^5.16.5",
@@ -125,10 +123,5 @@
125
123
  ]
126
124
  }
127
125
  },
128
- "platform-feature-flags": {
129
- "platform.a11y-jira-team.fix-border-contrast-for-jql-editor-textarea_vy0qk": {
130
- "type": "boolean"
131
- }
132
- },
133
126
  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
134
127
  }