@atlaskit/jql-editor 4.0.6 → 4.1.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/jql-editor
 
+## 4.1.1
+
+### Patch Changes
+
+- [#92100](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92100) [`9dea2099d7d5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9dea2099d7d5) - Fix module-level FF evaluation
+
+## 4.1.0
+
+### Minor Changes
+
+- [#89393](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/89393) [`a15c11c0b011`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a15c11c0b011) - [ux] We are testing a fix for JQL editor textarea that reduces the border width from 2px to 1px and uses a darker color to meet 3:1 color contrast ratio. If this fix is successful, it will be available in a later release.
+
 ## 4.0.6
 
 ### Patch Changes

package/dist/cjs/analytics/util.js

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", {
 exports.useJqlEditorAnalytics = void 0;
 var _jqlEditorCommon = require("@atlaskit/jql-editor-common");
 var useJqlEditorAnalytics = exports.useJqlEditorAnalytics = function useJqlEditorAnalytics(analyticsSource) {
-  return (0, _jqlEditorCommon.useJqlPackageAnalytics)(analyticsSource, "@atlaskit/jql-editor", "4.0.6", _jqlEditorCommon.ANALYTICS_CHANNEL);
+  return (0, _jqlEditorCommon.useJqlPackageAnalytics)(analyticsSource, "@atlaskit/jql-editor", "4.1.1", _jqlEditorCommon.ANALYTICS_CHANNEL);
 };

package/dist/cjs/ui/jql-editor-layout/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.JQLEditorReadOnly = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useEditorTheme = require("../../hooks/use-editor-theme");
 var _splitTextByNewLine = require("../../utils/split-text-by-new-line");
 var _readOnlyControlsContent = require("../jql-editor-controls-content/read-only-controls-content");
@@ -37,6 +38,7 @@ var JQLEditorLayout = function JQLEditorLayout(props) {
   }, /*#__PURE__*/_react.default.createElement(_styled.EditorViewContainer, {
     editorViewHasFocus: editorViewHasFocus,
     editorViewIsInvalid: editorViewIsInvalid,
+    isBorderContrastFixEnabled: (0, _platformFeatureFlags.getBooleanFF)('platform.a11y-jira-team.fix-border-contrast-for-jql-editor-textarea_vy0qk') ? true : false,
     ref: onEditorViewContainerRef,
     onScroll: onEditorViewContainerScroll
   }, /*#__PURE__*/_react.default.createElement(_styled.LineNumberToolbar, {
@@ -70,7 +72,9 @@ var JQLEditorReadOnlyWithoutTheme = function JQLEditorReadOnlyWithoutTheme(_ref)
     isCompact = _useEditorThemeContex2.isCompact;
   var blocks = (0, _splitTextByNewLine.splitTextByNewLine)(query);
   var lineNumbersVisible = blocks.length > 1;
-  return /*#__PURE__*/_react.default.createElement(_styled.EditorMain, null, /*#__PURE__*/_react.default.createElement(_styled.ReadOnlyEditorViewContainer, null, /*#__PURE__*/_react.default.createElement(_styled.LineNumberToolbar, {
+  return /*#__PURE__*/_react.default.createElement(_styled.EditorMain, null, /*#__PURE__*/_react.default.createElement(_styled.ReadOnlyEditorViewContainer, {
+    isBorderContrastFixEnabled: (0, _platformFeatureFlags.getBooleanFF)('platform.a11y-jira-team.fix-border-contrast-for-jql-editor-textarea_vy0qk') ? true : false
+  }, /*#__PURE__*/_react.default.createElement(_styled.LineNumberToolbar, {
     lineNumbersVisible: lineNumbersVisible
   }), /*#__PURE__*/_react.default.createElement(_styled.ReadOnlyEditorView, {
     "data-testid": "jql-editor-read-only",

package/dist/cjs/ui/jql-editor-layout/styled.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ReadOnlyEditorViewContainer = exports.ReadOnlyEditorView = exports.LineNumberToolbar = exports.EditorViewContainer = exports.EditorView = exports.EditorMain = exports.EditorFooter = exports.EditorControls = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
@@ -12,6 +13,8 @@ var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _constants2 = require("../../plugins/validation-tooltip/constants");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+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; }
+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; }
 var fadeIn = (0, _react.keyframes)({
   from: {
     opacity: 0
@@ -57,18 +60,28 @@ var EditorViewContainer = exports.EditorViewContainer = _styled.default.div({
   overflow: 'auto',
   transition: 'background-color 0.2s ease-in-out, border-color 0.2s ease-in-out'
 }, function (props) {
-  return props.editorViewHasFocus ? (0, _react.css)({
+  return props.isBorderContrastFixEnabled && (0, _react.css)({
+    borderWidth: "var(--ds-border-width, 1px)",
+    borderColor: "var(--ds-border-input, ".concat(_colors.N100, ")"),
+    padding: "var(--ds-border-width, 1px)"
+  });
+}, function (props) {
+  return props.editorViewIsInvalid && (0, _react.css)(_objectSpread({
+    borderColor: "var(--ds-border-danger, ".concat(_colors.R400, ")")
+  }, props.isBorderContrastFixEnabled ? {
+    boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, ".concat(_colors.R400, ")"))
+  } : {}));
+}, function (props) {
+  return props.editorViewHasFocus ? (0, _react.css)(_objectSpread({
     backgroundColor: "var(--ds-surface, ".concat(_colors.N0, ")"),
-    borderColor: "var(--ds-border-focused, ".concat(_colors.B100, ")")
-  }) : (0, _react.css)({
+    borderColor: "var(--ds-border-focused, ".concat(props.isBorderContrastFixEnabled ? _colors.B200 : _colors.B100, ")")
+  }, props.isBorderContrastFixEnabled ? {
+    boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(_colors.B200, ")"))
+  } : {})) : (0, _react.css)({
     ':hover': {
       backgroundColor: "var(--ds-background-input-hovered, ".concat(_colors.N30, ")")
     }
   });
-}, function (props) {
-  return props.editorViewIsInvalid && (0, _react.css)({
-    borderColor: "var(--ds-border-danger, ".concat(_colors.R400, ")")
-  });
 });
 var ReadOnlyEditorViewContainer = exports.ReadOnlyEditorViewContainer = (0, _styled.default)(EditorViewContainer)({
   backgroundColor: "var(--ds-background-disabled, ".concat(_colors.N30, ")"),

package/dist/es2019/analytics/util.js

@@ -1,4 +1,4 @@
 import { ANALYTICS_CHANNEL, useJqlPackageAnalytics } from '@atlaskit/jql-editor-common';
 export const useJqlEditorAnalytics = analyticsSource => {
-  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "4.0.6", ANALYTICS_CHANNEL);
+  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "4.1.1", ANALYTICS_CHANNEL);
 };

package/dist/es2019/ui/jql-editor-layout/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { EditorThemeContext, useEditorTheme, useEditorThemeContext } from '../../hooks/use-editor-theme';
 import { splitTextByNewLine } from '../../utils/split-text-by-new-line';
 // eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
@@ -32,6 +33,7 @@ const JQLEditorLayout = props => {
   }, /*#__PURE__*/React.createElement(EditorViewContainer, {
     editorViewHasFocus: editorViewHasFocus,
     editorViewIsInvalid: editorViewIsInvalid,
+    isBorderContrastFixEnabled: getBooleanFF('platform.a11y-jira-team.fix-border-contrast-for-jql-editor-textarea_vy0qk') ? true : false,
     ref: onEditorViewContainerRef,
     onScroll: onEditorViewContainerScroll
   }, /*#__PURE__*/React.createElement(LineNumberToolbar, {
@@ -67,7 +69,9 @@ const JQLEditorReadOnlyWithoutTheme = ({
   } = useEditorThemeContext();
   const blocks = splitTextByNewLine(query);
   const lineNumbersVisible = blocks.length > 1;
-  return /*#__PURE__*/React.createElement(EditorMain, null, /*#__PURE__*/React.createElement(ReadOnlyEditorViewContainer, null, /*#__PURE__*/React.createElement(LineNumberToolbar, {
+  return /*#__PURE__*/React.createElement(EditorMain, null, /*#__PURE__*/React.createElement(ReadOnlyEditorViewContainer, {
+    isBorderContrastFixEnabled: getBooleanFF('platform.a11y-jira-team.fix-border-contrast-for-jql-editor-textarea_vy0qk') ? true : false
+  }, /*#__PURE__*/React.createElement(LineNumberToolbar, {
     lineNumbersVisible: lineNumbersVisible
   }), /*#__PURE__*/React.createElement(ReadOnlyEditorView, {
     "data-testid": "jql-editor-read-only",

package/dist/es2019/ui/jql-editor-layout/styled.js

@@ -1,6 +1,6 @@
 import { css, keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
-import { B100, B300, G300, N0, N10, N100, N30, N40, N700, N800, N900, P400, R400 } from '@atlaskit/theme/colors';
+import { B100, B200, B300, G300, N0, N10, N100, N30, N40, N700, N800, N900, P400, R400 } from '@atlaskit/theme/colors';
 import { codeFontFamily, fontFamily, fontSize,
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 gridSize, layers } from '@atlaskit/theme/constants';
@@ -83,15 +83,25 @@ export const EditorViewContainer = styled.div({
   display: 'flex',
   overflow: 'auto',
   transition: 'background-color 0.2s ease-in-out, border-color 0.2s ease-in-out'
-}, props => props.editorViewHasFocus ? css({
+}, props => props.isBorderContrastFixEnabled && css({
+  borderWidth: "var(--ds-border-width, 1px)",
+  borderColor: `var(--ds-border-input, ${N100})`,
+  padding: "var(--ds-border-width, 1px)"
+}), props => props.editorViewIsInvalid && css({
+  borderColor: `var(--ds-border-danger, ${R400})`,
+  ...(props.isBorderContrastFixEnabled ? {
+    boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${`var(--ds-border-danger, ${R400})`}`
+  } : {})
+}), props => props.editorViewHasFocus ? css({
   backgroundColor: `var(--ds-surface, ${N0})`,
-  borderColor: `var(--ds-border-focused, ${B100})`
+  borderColor: `var(--ds-border-focused, ${props.isBorderContrastFixEnabled ? B200 : B100})`,
+  ...(props.isBorderContrastFixEnabled ? {
+    boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${`var(--ds-border-focused, ${B200})`}`
+  } : {})
 }) : css({
   ':hover': {
     backgroundColor: `var(--ds-background-input-hovered, ${N30})`
   }
-}), props => props.editorViewIsInvalid && css({
-  borderColor: `var(--ds-border-danger, ${R400})`
 }));
 export const ReadOnlyEditorViewContainer = styled(EditorViewContainer)({
   backgroundColor: `var(--ds-background-disabled, ${N30})`,

package/dist/esm/analytics/util.js

@@ -1,4 +1,4 @@
 import { ANALYTICS_CHANNEL, useJqlPackageAnalytics } from '@atlaskit/jql-editor-common';
 export var useJqlEditorAnalytics = function useJqlEditorAnalytics(analyticsSource) {
-  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "4.0.6", ANALYTICS_CHANNEL);
+  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "4.1.1", ANALYTICS_CHANNEL);
 };

package/dist/esm/ui/jql-editor-layout/index.js

@@ -1,6 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["isSearch", "isCompact"];
 import React from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { EditorThemeContext, useEditorTheme, useEditorThemeContext } from '../../hooks/use-editor-theme';
 import { splitTextByNewLine } from '../../utils/split-text-by-new-line';
 // eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
@@ -31,6 +32,7 @@ var JQLEditorLayout = function JQLEditorLayout(props) {
   }, /*#__PURE__*/React.createElement(EditorViewContainer, {
     editorViewHasFocus: editorViewHasFocus,
     editorViewIsInvalid: editorViewIsInvalid,
+    isBorderContrastFixEnabled: getBooleanFF('platform.a11y-jira-team.fix-border-contrast-for-jql-editor-textarea_vy0qk') ? true : false,
     ref: onEditorViewContainerRef,
     onScroll: onEditorViewContainerScroll
   }, /*#__PURE__*/React.createElement(LineNumberToolbar, {
@@ -64,7 +66,9 @@ var JQLEditorReadOnlyWithoutTheme = function JQLEditorReadOnlyWithoutTheme(_ref)
     isCompact = _useEditorThemeContex2.isCompact;
   var blocks = splitTextByNewLine(query);
   var lineNumbersVisible = blocks.length > 1;
-  return /*#__PURE__*/React.createElement(EditorMain, null, /*#__PURE__*/React.createElement(ReadOnlyEditorViewContainer, null, /*#__PURE__*/React.createElement(LineNumberToolbar, {
+  return /*#__PURE__*/React.createElement(EditorMain, null, /*#__PURE__*/React.createElement(ReadOnlyEditorViewContainer, {
+    isBorderContrastFixEnabled: getBooleanFF('platform.a11y-jira-team.fix-border-contrast-for-jql-editor-textarea_vy0qk') ? true : false
+  }, /*#__PURE__*/React.createElement(LineNumberToolbar, {
     lineNumbersVisible: lineNumbersVisible
   }), /*#__PURE__*/React.createElement(ReadOnlyEditorView, {
     "data-testid": "jql-editor-read-only",

package/dist/esm/ui/jql-editor-layout/styled.js

@@ -1,8 +1,11 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+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; }
+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; }
 import { css, keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
-import { B100, B300, G300, N0, N10, N100, N30, N40, N700, N800, N900, P400, R400 } from '@atlaskit/theme/colors';
+import { B100, B200, B300, G300, N0, N10, N100, N30, N40, N700, N800, N900, P400, R400 } from '@atlaskit/theme/colors';
 import { codeFontFamily, fontFamily, fontSize,
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 gridSize, layers } from '@atlaskit/theme/constants';
@@ -52,18 +55,28 @@ export var EditorViewContainer = styled.div({
   overflow: 'auto',
   transition: 'background-color 0.2s ease-in-out, border-color 0.2s ease-in-out'
 }, function (props) {
-  return props.editorViewHasFocus ? css({
+  return props.isBorderContrastFixEnabled && css({
+    borderWidth: "var(--ds-border-width, 1px)",
+    borderColor: "var(--ds-border-input, ".concat(N100, ")"),
+    padding: "var(--ds-border-width, 1px)"
+  });
+}, function (props) {
+  return props.editorViewIsInvalid && css(_objectSpread({
+    borderColor: "var(--ds-border-danger, ".concat(R400, ")")
+  }, props.isBorderContrastFixEnabled ? {
+    boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, ".concat(R400, ")"))
+  } : {}));
+}, function (props) {
+  return props.editorViewHasFocus ? css(_objectSpread({
     backgroundColor: "var(--ds-surface, ".concat(N0, ")"),
-    borderColor: "var(--ds-border-focused, ".concat(B100, ")")
-  }) : css({
+    borderColor: "var(--ds-border-focused, ".concat(props.isBorderContrastFixEnabled ? B200 : B100, ")")
+  }, props.isBorderContrastFixEnabled ? {
+    boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(B200, ")"))
+  } : {})) : css({
     ':hover': {
       backgroundColor: "var(--ds-background-input-hovered, ".concat(N30, ")")
     }
   });
-}, function (props) {
-  return props.editorViewIsInvalid && css({
-    borderColor: "var(--ds-border-danger, ".concat(R400, ")")
-  });
 });
 export var ReadOnlyEditorViewContainer = styled(EditorViewContainer)({
   backgroundColor: "var(--ds-background-disabled, ".concat(N30, ")"),

package/dist/types/ui/jql-editor-layout/styled.d.ts

@@ -10,6 +10,7 @@ export declare const EditorFooter: import("@emotion/styled").StyledComponent<{
 type EditorViewContainerProps = {
     editorViewHasFocus?: boolean;
     editorViewIsInvalid?: boolean;
+    isBorderContrastFixEnabled: boolean;
 };
 export declare const EditorViewContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;

package/dist/types-ts4.5/ui/jql-editor-layout/styled.d.ts

@@ -10,6 +10,7 @@ export declare const EditorFooter: import("@emotion/styled").StyledComponent<{
 type EditorViewContainerProps = {
     editorViewHasFocus?: boolean;
     editorViewIsInvalid?: boolean;
+    isBorderContrastFixEnabled: boolean;
 };
 export declare const EditorViewContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/jql-editor",
-  "version": "4.0.6",
+  "version": "4.1.1",
   "description": "This package allows consumers to render an advanced JQL editor component to enable autocomplete-assisted authoring and validation of JQL queries.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -47,6 +47,7 @@
     "@atlaskit/jql-autocomplete": "^2.0.0",
     "@atlaskit/jql-editor-common": "^2.0.0",
     "@atlaskit/jql-parser": "^2.0.0",
+    "@atlaskit/platform-feature-flags": "^0.2.4",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.7.0",
     "@atlaskit/tokens": "^1.43.0",
@@ -76,6 +77,7 @@
     "@atlaskit/jql-editor-autocomplete-rest": "^2.0.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
+    "@atlassian/feature-flags-test-utils": "*",
     "@storybook/addon-actions": "^5.2.5",
     "@storybook/addon-knobs": "^5.3.18",
     "@testing-library/jest-dom": "^5.16.5",
@@ -123,5 +125,10 @@
       ]
     }
   },
+  "platform-feature-flags": {
+    "platform.a11y-jira-team.fix-border-contrast-for-jql-editor-textarea_vy0qk": {
+      "type": "boolean"
+    }
+  },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
 }