@atlaskit/jql-editor 4.0.6 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/jql-editor
 
+## 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.0", _jqlEditorCommon.ANALYTICS_CHANNEL);
 };

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

@@ -5,13 +5,17 @@ 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"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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
@@ -45,30 +49,37 @@ var getEditorInputVerticalPadding = function getEditorInputVerticalPadding(isCom
   return isCompact ? 3 : 7;
 };
 var editorInputHorizontalPadding = 6;
-var EditorViewContainer = exports.EditorViewContainer = _styled.default.div({
+var EditorViewContainer = exports.EditorViewContainer = _styled.default.div(_objectSpread(_objectSpread({
   backgroundColor: "var(--ds-background-input, ".concat(_colors.N10, ")"),
   borderStyle: 'solid',
-  borderWidth: '2px',
-  borderColor: "var(--ds-border, ".concat(_colors.N40, ")"),
-  borderRadius: "var(--ds-border-radius-100, 3px)",
+  borderWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.a11y-jira-team.fix-border-contrast-for-jql-editor-textarea_vy0qk') ? "var(--ds-border-width, 1px)" : '2px',
+  borderColor: (0, _platformFeatureFlags.getBooleanFF)('platform.a11y-jira-team.fix-border-contrast-for-jql-editor-textarea_vy0qk') ? "var(--ds-border-input, ".concat(_colors.N100, ")") : "var(--ds-border, ".concat(_colors.N40, ")"),
+  borderRadius: "var(--ds-border-radius-100, 3px)"
+}, (0, _platformFeatureFlags.getBooleanFF)('platform.a11y-jira-team.fix-border-contrast-for-jql-editor-textarea_vy0qk') ? {
+  padding: "var(--ds-border-width, 1px)"
+} : {}), {}, {
   boxSizing: 'border-box',
   color: "var(--ds-text, ".concat(_colors.N900, ")"),
   display: 'flex',
   overflow: 'auto',
   transition: 'background-color 0.2s ease-in-out, border-color 0.2s ease-in-out'
+}), function (props) {
+  return props.editorViewIsInvalid && (0, _react.css)(_objectSpread({
+    borderColor: "var(--ds-border-danger, ".concat(_colors.R400, ")")
+  }, (0, _platformFeatureFlags.getBooleanFF)('platform.a11y-jira-team.fix-border-contrast-for-jql-editor-textarea_vy0qk') ? {
+    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)({
+  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((0, _platformFeatureFlags.getBooleanFF)('platform.a11y-jira-team.fix-border-contrast-for-jql-editor-textarea_vy0qk') ? _colors.B200 : _colors.B100, ")")
+  }, (0, _platformFeatureFlags.getBooleanFF)('platform.a11y-jira-team.fix-border-contrast-for-jql-editor-textarea_vy0qk') ? {
+    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.0", ANALYTICS_CHANNEL);
 };

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

@@ -1,6 +1,7 @@
 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 { getBooleanFF } from '@atlaskit/platform-feature-flags';
+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';
@@ -75,23 +76,33 @@ const editorInputHorizontalPadding = 6;
 export const EditorViewContainer = styled.div({
   backgroundColor: `var(--ds-background-input, ${N10})`,
   borderStyle: 'solid',
-  borderWidth: '2px',
-  borderColor: `var(--ds-border, ${N40})`,
+  borderWidth: getBooleanFF('platform.a11y-jira-team.fix-border-contrast-for-jql-editor-textarea_vy0qk') ? "var(--ds-border-width, 1px)" : '2px',
+  borderColor: getBooleanFF('platform.a11y-jira-team.fix-border-contrast-for-jql-editor-textarea_vy0qk') ? `var(--ds-border-input, ${N100})` : `var(--ds-border, ${N40})`,
   borderRadius: "var(--ds-border-radius-100, 3px)",
+  // add 1px padding to keep the same overall height & width after border reduced from 2px to 1px
+  ...(getBooleanFF('platform.a11y-jira-team.fix-border-contrast-for-jql-editor-textarea_vy0qk') ? {
+    padding: "var(--ds-border-width, 1px)"
+  } : {}),
   boxSizing: 'border-box',
   color: `var(--ds-text, ${N900})`,
   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.editorViewIsInvalid && css({
+  borderColor: `var(--ds-border-danger, ${R400})`,
+  ...(getBooleanFF('platform.a11y-jira-team.fix-border-contrast-for-jql-editor-textarea_vy0qk') ? {
+    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, ${getBooleanFF('platform.a11y-jira-team.fix-border-contrast-for-jql-editor-textarea_vy0qk') ? B200 : B100})`,
+  ...(getBooleanFF('platform.a11y-jira-team.fix-border-contrast-for-jql-editor-textarea_vy0qk') ? {
+    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.0", ANALYTICS_CHANNEL);
 };

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

@@ -1,8 +1,12 @@
+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 { getBooleanFF } from '@atlaskit/platform-feature-flags';
+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';
@@ -40,30 +44,37 @@ var getEditorInputVerticalPadding = function getEditorInputVerticalPadding(isCom
   return isCompact ? 3 : 7;
 };
 var editorInputHorizontalPadding = 6;
-export var EditorViewContainer = styled.div({
+export var EditorViewContainer = styled.div(_objectSpread(_objectSpread({
   backgroundColor: "var(--ds-background-input, ".concat(N10, ")"),
   borderStyle: 'solid',
-  borderWidth: '2px',
-  borderColor: "var(--ds-border, ".concat(N40, ")"),
-  borderRadius: "var(--ds-border-radius-100, 3px)",
+  borderWidth: getBooleanFF('platform.a11y-jira-team.fix-border-contrast-for-jql-editor-textarea_vy0qk') ? "var(--ds-border-width, 1px)" : '2px',
+  borderColor: getBooleanFF('platform.a11y-jira-team.fix-border-contrast-for-jql-editor-textarea_vy0qk') ? "var(--ds-border-input, ".concat(N100, ")") : "var(--ds-border, ".concat(N40, ")"),
+  borderRadius: "var(--ds-border-radius-100, 3px)"
+}, getBooleanFF('platform.a11y-jira-team.fix-border-contrast-for-jql-editor-textarea_vy0qk') ? {
+  padding: "var(--ds-border-width, 1px)"
+} : {}), {}, {
   boxSizing: 'border-box',
   color: "var(--ds-text, ".concat(N900, ")"),
   display: 'flex',
   overflow: 'auto',
   transition: 'background-color 0.2s ease-in-out, border-color 0.2s ease-in-out'
+}), function (props) {
+  return props.editorViewIsInvalid && css(_objectSpread({
+    borderColor: "var(--ds-border-danger, ".concat(R400, ")")
+  }, getBooleanFF('platform.a11y-jira-team.fix-border-contrast-for-jql-editor-textarea_vy0qk') ? {
+    boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, ".concat(R400, ")"))
+  } : {}));
 }, function (props) {
-  return props.editorViewHasFocus ? css({
+  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(getBooleanFF('platform.a11y-jira-team.fix-border-contrast-for-jql-editor-textarea_vy0qk') ? B200 : B100, ")")
+  }, getBooleanFF('platform.a11y-jira-team.fix-border-contrast-for-jql-editor-textarea_vy0qk') ? {
+    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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/jql-editor",
-  "version": "4.0.6",
+  "version": "4.1.0",
   "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"
 }