@atlaskit/task-decision 17.6.3 → 17.7.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/task-decision
 
+## 17.7.0
+
+### Minor Changes
+
+- [`8c026385eb8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8c026385eb8) - [ux] ED-17434: Update TaskItem to match @atlaskit/checkbox and update to support design tokens and match spacing from bullet and numbered lists.
+
+## 17.6.4
+
+### Patch Changes
+
+- [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
+
 ## 17.6.3
 
 ### Patch Changes

package/dist/cjs/components/DecisionList.js

@@ -13,7 +13,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
-var _listStyle = _interopRequireDefault(require("./listStyle"));
+var _styles = require("./styles");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -40,7 +40,7 @@ var DecisionList = /*#__PURE__*/function (_PureComponent) {
       // The value of `data-decision-local-id` should be discarded upon paste, with a
       // a new uuid generated by the editor for the cloned content.
       return (0, _react2.jsx)("ol", {
-        css: _listStyle.default,
+        css: _styles.listStyles,
         "data-decision-list-local-id": "",
         "data-node-type": "decisionList"
       }, _react.default.Children.map(children, function (child, idx) {

package/dist/cjs/components/Item.js

@@ -14,55 +14,10 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _components = require("@atlaskit/theme/components");
-var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
+var _styles = require("./styles");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-var contentStyle = (0, _react2.css)({
-  margin: 0,
-  wordWrap: 'break-word',
-  minWidth: 0,
-  flex: '1 1 auto'
-});
-var taskStyles = (0, _react2.css)({
-  display: 'flex',
-  flexDirection: 'row',
-  padding: '6px 3px',
-  position: 'relative'
-});
-var decisionStyles = function decisionStyles(theme) {
-  return (0, _react2.css)({
-    display: 'flex',
-    flexDirection: 'row',
-    margin: "var(--ds-space-100, 8px)".concat(" 0 0 0"),
-    padding: "var(--ds-space-100, 8px)",
-    paddingLeft: "var(--ds-space-150, 12px)",
-    borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
-    backgroundColor: (0, _components.themed)({
-      light: "var(--ds-background-neutral, ".concat(_colors.N20A, ")"),
-      dark: "var(--ds-background-neutral, ".concat(_colors.DN50, ")")
-    })({
-      theme: theme
-    }),
-    position: 'relative',
-    '.decision-item': {
-      cursor: 'initial'
-    }
-  });
-};
-var placeHolderStyles = function placeHolderStyles(offset) {
-  return (0, _react2.css)({
-    margin: "0 0 0 ".concat(offset, "px"),
-    position: 'absolute',
-    color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
-    pointerEvents: 'none',
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    maxWidth: 'calc(100% - 50px)'
-  });
-};
 var Item = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Item, _PureComponent);
   var _super = _createSuper(Item);
@@ -87,7 +42,7 @@ var Item = /*#__PURE__*/function (_PureComponent) {
       var offset = (0, _constants.gridSize)() * (itemType === 'TASK' ? 3 : 3.5);
       return (0, _react2.jsx)("span", {
         "data-component": "placeholder",
-        css: placeHolderStyles(offset),
+        css: (0, _styles.placeholderStyles)(offset),
         contentEditable: false
       }, placeholder);
     }
@@ -104,20 +59,20 @@ var Item = /*#__PURE__*/function (_PureComponent) {
         theme = _this$props2.theme;
       if (itemType === 'TASK') {
         return (0, _react2.jsx)("div", {
-          css: taskStyles,
+          css: _styles.taskStyles,
           id: "".concat(checkBoxId, "-wrapper")
         }, icon, this.renderPlaceholder(), (0, _react2.jsx)("div", (0, _extends2.default)({
           "data-component": "content",
-          css: contentStyle,
+          css: _styles.contentStyles,
           ref: contentRef
         }, dataAttributes), children));
       } else if (itemType === 'DECISION') {
         return (0, _react2.jsx)("div", {
-          css: decisionStyles(theme),
+          css: (0, _styles.decisionStyles)(theme),
           "data-decision-wrapper": "true"
         }, icon, this.renderPlaceholder(), (0, _react2.jsx)("div", (0, _extends2.default)({
           "data-component": "content",
-          css: contentStyle,
+          css: _styles.contentStyles,
           ref: contentRef
         }, dataAttributes), children));
       }

package/dist/cjs/components/TaskItem.js

@@ -6,47 +6,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
+var _checkbox = _interopRequireDefault(require("@atlaskit/icon/glyph/checkbox"));
 var _Item = _interopRequireDefault(require("./Item"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _analytics = require("../analytics");
 var _components = require("@atlaskit/theme/components");
-var _colors = require("@atlaskit/theme/colors");
-var _templateObject, _templateObject2;
-/** @jsx jsx */
+var _styles = require("./styles");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/** @jsx jsx */
+
 var taskCount = 0;
 var getCheckBoxId = function getCheckBoxId(localId) {
   return "".concat(localId, "-").concat(taskCount++);
 };
-var checkboxStyles = function checkboxStyles(isRenderer) {
-  return function (theme) {
-    return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    flex: 0 0 16px;\n    width: 16px;\n    height: 16px;\n    position: relative;\n    align-self: start;\n    margin: ", " ", " 0 0;\n\n    & > input[type='checkbox'] {\n      width: 16px;\n      height: 16px;\n      z-index: 1;\n      cursor: pointer;\n      position: absolute;\n      outline: none;\n      margin: 0;\n      opacity: 0;\n      left: 0;\n      top: 50%;\n      transform: translateY(-50%);\n\n      + div {\n        box-sizing: border-box;\n        display: inline;\n        width: 100%;\n        cursor: pointer;\n\n        &::after {\n          background: ", ";\n          background-size: 16px;\n          border-radius: 3px;\n          border-style: solid;\n          border-width: 1px;\n          border-color: ", ";\n          box-sizing: border-box;\n          content: '';\n          height: 16px;\n          left: 50%;\n          position: absolute;\n          transition: border-color 0.2s ease-in-out;\n          top: 8px;\n          width: 16px;\n          transform: translate(-50%, -50%);\n        }\n      }\n      ", "\n\n      &:not([disabled]):hover + div::after {\n        background: ", ";\n        transition: border 0.2s ease-in-out;\n      }\n      &[disabled] + div {\n        opacity: 0.5;\n        cursor: default;\n      }\n      &:checked {\n        + div::after {\n          background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDA1MkNDIj48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)\n            no-repeat 0 0;\n          background-size: 16px;\n          border: 0;\n          border-color: transparent;\n        }\n        &:not([disabled]):hover + div::after {\n          background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDc0N0E2Ij48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)\n            no-repeat 0 0;\n          background-size: 16px;\n        }\n      }\n    }\n  "])), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", (0, _components.themed)({
-      light: "var(--ds-background-input, ".concat(_colors.N0, ")"),
-      dark: "var(--ds-background-input, ".concat(_colors.DN100, ")")
-    })({
-      theme: theme
-    }), (0, _components.themed)({
-      light: "var(--ds-border, ".concat(_colors.N90, ")"),
-      dark: "var(--ds-border, ".concat(_colors.DN200, ")")
-    })({
-      theme: theme
-    }), isRenderer ? (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n            &:focus-visible + div:after {\n              outline: 2px solid\n                ", ";\n            }\n          "])), (0, _components.themed)({
-      light: "var(--ds-border-focused, ".concat(_colors.B300, ")"),
-      dark: "var(--ds-border-focused, ".concat(_colors.B75, ")")
-    })({
-      theme: theme
-    })) : '', (0, _components.themed)({
-      light: "var(--ds-background-input, ".concat(_colors.N30, ")"),
-      dark: "var(--ds-background-input, ".concat(_colors.B75, ")")
-    })({
-      theme: theme
-    }));
-  };
-};
 var TaskItem = function TaskItem(props) {
   var appearance = props.appearance,
     isDone = props.isDone,
@@ -91,7 +66,7 @@ var TaskItem = function TaskItem(props) {
     };
   }, [handleOnChange]);
   var icon = (0, _react2.jsx)("span", {
-    css: checkboxStyles(isRenderer)(theme),
+    css: (0, _styles.checkboxStyles)(isRenderer)(theme),
     contentEditable: false
   }, (0, _react2.jsx)("input", {
     id: checkBoxId,
@@ -103,7 +78,9 @@ var TaskItem = function TaskItem(props) {
     disabled: !!disabled,
     suppressHydrationWarning: true,
     onKeyPress: handleOnKeyPress
-  }), (0, _react2.jsx)("div", null));
+  }), (0, _react2.jsx)(_checkbox.default, {
+    label: ""
+  }));
   return (0, _react2.jsx)(_Item.default, {
     appearance: appearance,
     contentRef: contentRef,

package/dist/cjs/components/TaskList.js

@@ -14,7 +14,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-context");
-var _listStyle = _interopRequireDefault(require("./listStyle"));
+var _styles = require("./styles");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -44,7 +44,7 @@ var TaskList = /*#__PURE__*/function (_PureComponent) {
       // The value of `data-task-local-id` should be discarded upon paste, with a
       // a new uuid generated by the editor for the cloned content.
       return (0, _react2.jsx)("div", {
-        css: _listStyle.default,
+        css: [_styles.listStyles, _styles.taskListStyles],
         "data-task-list-local-id": ""
       }, _react.default.Children.map(children, function (child, idx) {
         var _ref = child.props,

package/dist/cjs/components/styles.js

@@ -0,0 +1,156 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.taskStyles = exports.taskListStyles = exports.placeholderStyles = exports.listStyles = exports.decisionStyles = exports.contentStyles = exports.checkboxStyles = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _components = require("@atlaskit/theme/components");
+var _colors = require("@atlaskit/theme/colors");
+var _theme = _interopRequireDefault(require("./theme"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+/*
+  Increasing specificity with double ampersand to ensure these rules take
+  priority over the global styles applied to 'ol' elements.
+*/
+var listStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  && {\n    list-style-type: none;\n    padding-left: 0;\n  }\n"])));
+exports.listStyles = listStyles;
+var taskListStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  div + div {\n    margin-top: ", ";\n  }\n"])), "var(--ds-space-050, 4px)");
+exports.taskListStyles = taskListStyles;
+var contentStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n  word-wrap: break-word;\n  min-width: 0;\n  flex: 1 1 auto;\n"])));
+exports.contentStyles = contentStyles;
+var taskStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  position: relative;\n"])));
+exports.taskStyles = taskStyles;
+var decisionStyles = function decisionStyles(theme) {
+  return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-direction: row;\n    margin: ", " 0 0 0;\n    padding: ", ";\n    padding-left: ", ";\n    border-radius: ", ";\n    background-color: ", ";\n    position: relative;\n\n    .decision-item {\n      cursor: initial;\n    }\n  "])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-150, 12px)", "var(--ds-border-radius-100, 3px)", (0, _components.themed)({
+    light: "var(--ds-background-neutral, ".concat(_colors.N20A, ")"),
+    dark: "var(--ds-background-neutral, ".concat(_colors.DN50, ")")
+  })({
+    theme: theme
+  }));
+};
+exports.decisionStyles = decisionStyles;
+var placeholderStyles = function placeholderStyles(offset) {
+  return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    margin: 0 0 0 ", "px;\n    position: absolute;\n    color: ", ";\n    pointer-events: none;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    max-width: calc(100% - 50px);\n  "])), offset, "var(--ds-text-subtlest, ".concat(_colors.N200, ")"));
+};
+
+/**
+ * References packages/design-system/checkbox/src/checkbox.tsx
+ * To be used until mobile editor does not require legacy themed() API anymore,
+ * which will allow migration to use @atlaskit/checkbox instead
+ */
+exports.placeholderStyles = placeholderStyles;
+var checkboxStyles = function checkboxStyles(isRenderer) {
+  return function (theme) {
+    return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n      flex: 0 0 24px;\n      width: 24px;\n      height: 24px;\n      position: relative;\n      align-self: start;\n\n      & > input[type='checkbox'] {\n        width: 16px;\n        height: 16px;\n        z-index: 1;\n        cursor: pointer;\n        outline: none;\n        margin: 0;\n        opacity: 0;\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n\n        &[disabled] {\n          cursor: default;\n        }\n\n        + span {\n          width: 24px;\n          height: 24px;\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          transform: translate(-50%, -50%);\n        }\n\n        + span > svg {\n          box-sizing: border-box;\n          display: inline;\n          top: 50%;\n          left: 50%;\n          transform: translate(-50%, -50%);\n          max-width: unset;\n          max-height: unset;\n          position: absolute;\n          overflow: hidden;\n          color: ", ";\n          transition: color 0.2s ease-in-out, fill 0.2s ease-in-out;\n          path:first-of-type {\n            visibility: hidden;\n          }\n          rect:first-of-type {\n            stroke: ", ";\n            stroke-width: ", ";\n            transition: stroke 0.2s ease-in-out;\n          }\n        }\n\n        &&:focus + span > svg,\n        &&:checked:focus + span > svg {\n          rect:first-of-type {\n            stroke: ", ";\n          }\n        }\n\n        &:hover + span > svg {\n          color: ", ";\n          rect:first-of-type {\n            stroke: ", ";\n          }\n        }\n\n        &:checked:hover + span > svg {\n          color: ", ";\n          fill: ", ";\n          rect:first-of-type {\n            stroke: ", ";\n          }\n        }\n\n        &:checked {\n          + span > svg {\n            path:first-of-type {\n              visibility: visible;\n            }\n            color: ", ";\n            fill: ", ";\n            rect:first-of-type {\n              stroke: ", ";\n            }\n          }\n        }\n\n        &:active + span > svg {\n          color: ", ";\n          rect:first-of-type {\n            stroke: ", ";\n          }\n        }\n\n        &:checked:active + span > svg {\n          color: ", ";\n          fill: ", ";\n          rect:first-of-type {\n            stroke: ", ";\n          }\n        }\n\n        &:disabled + span > svg,\n        &:disabled:hover + span > svg,\n        &:disabled:focus + span > svg,\n        &:disabled:active + span > svg {\n          color: ", ";\n          rect:first-of-type {\n            stroke: ", ";\n          }\n        }\n\n        &:disabled:checked + span > svg {\n          fill: ", ";\n        }\n\n        ", "\n      }\n    "])), (0, _components.themed)({
+      light: _theme.default.light.boxColor.rest,
+      dark: _theme.default.dark.boxColor.rest
+    })({
+      theme: theme
+    }), (0, _components.themed)({
+      light: _theme.default.light.borderColor.rest,
+      dark: _theme.default.dark.borderColor.rest
+    })({
+      theme: theme
+    }), (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? 1 : 2, (0, _components.themed)({
+      light: _theme.default.light.borderColor.focused,
+      dark: _theme.default.dark.borderColor.focused
+    })({
+      theme: theme
+    }), (0, _components.themed)({
+      light: _theme.default.light.boxColor.hovered,
+      dark: _theme.default.dark.boxColor.hovered
+    })({
+      theme: theme
+    }), (0, _components.themed)({
+      light: _theme.default.light.borderColor.hovered,
+      dark: _theme.default.dark.borderColor.hovered
+    })({
+      theme: theme
+    }), (0, _components.themed)({
+      light: _theme.default.light.boxColor.hoveredAndChecked,
+      dark: _theme.default.dark.boxColor.hoveredAndChecked
+    })({
+      theme: theme
+    }), (0, _components.themed)({
+      light: _theme.default.light.tickColor.checked,
+      dark: _theme.default.dark.tickColor.checked
+    })({
+      theme: theme
+    }), (0, _components.themed)({
+      light: _theme.default.light.borderColor.hoveredAndChecked,
+      dark: _theme.default.dark.borderColor.hoveredAndChecked
+    })({
+      theme: theme
+    }), (0, _components.themed)({
+      light: _theme.default.light.boxColor.checked,
+      dark: _theme.default.dark.boxColor.checked
+    })({
+      theme: theme
+    }), (0, _components.themed)({
+      light: _theme.default.light.tickColor.checked,
+      dark: _theme.default.dark.tickColor.checked
+    })({
+      theme: theme
+    }), (0, _components.themed)({
+      light: _theme.default.light.borderColor.checked,
+      dark: _theme.default.dark.borderColor.checked
+    })({
+      theme: theme
+    }), (0, _components.themed)({
+      light: _theme.default.light.boxColor.active,
+      dark: _theme.default.dark.boxColor.active
+    })({
+      theme: theme
+    }), (0, _components.themed)({
+      light: _theme.default.light.borderColor.active,
+      dark: _theme.default.dark.borderColor.active
+    })({
+      theme: theme
+    }), (0, _components.themed)({
+      light: _theme.default.light.boxColor.active,
+      dark: _theme.default.dark.boxColor.active
+    })({
+      theme: theme
+    }), (0, _components.themed)({
+      light: _theme.default.light.tickColor.activeAndChecked,
+      dark: _theme.default.dark.tickColor.activeAndChecked
+    })({
+      theme: theme
+    }), (0, _components.themed)({
+      light: _theme.default.light.borderColor.active,
+      dark: _theme.default.dark.borderColor.active
+    })({
+      theme: theme
+    }), (0, _components.themed)({
+      light: _theme.default.light.boxColor.disabled,
+      dark: _theme.default.dark.boxColor.disabled
+    })({
+      theme: theme
+    }), (0, _components.themed)({
+      light: _theme.default.light.borderColor.disabled,
+      dark: _theme.default.dark.borderColor.disabled
+    })({
+      theme: theme
+    }), (0, _components.themed)({
+      light: _theme.default.light.tickColor.disabledAndChecked,
+      dark: _theme.default.dark.tickColor.disabledAndChecked
+    })({
+      theme: theme
+    }), isRenderer ? (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n              &:focus + span > svg,\n              &:checked:focus + span > svg {\n                rect:first-of-type {\n                  stroke: ", ";\n                }\n              }\n            "])), (0, _components.themed)({
+      light: _theme.default.light.borderColor.focused,
+      dark: _theme.default.dark.borderColor.focused
+    })({
+      theme: theme
+    })) : (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n              &:active:focus + span > svg,\n              &:checked:active:focus + span > svg {\n                rect:first-of-type {\n                  stroke: ", ";\n                }\n              }\n            "])), (0, _components.themed)({
+      light: _theme.default.light.borderColor.focused,
+      dark: _theme.default.dark.borderColor.focused
+    })({
+      theme: theme
+    })));
+  };
+};
+exports.checkboxStyles = checkboxStyles;

package/dist/cjs/components/theme.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _colors = require("@atlaskit/theme/colors");
+/**
+ * Styles taken from packages/design-system/checkbox/src/internal/theme.tsx
+ * To be used until mobile editor does not require legacy themed() API anymore
+ */
+var checkboxTheme = {
+  light: {
+    borderColor: {
+      rest: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? _colors.N100 : _colors.N40, ")"),
+      hovered: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? _colors.N100 : _colors.N40, ")"),
+      disabled: "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
+      checked: "var(--ds-background-selected-bold, ".concat(_colors.B400, ")"),
+      active: "var(--ds-border, ".concat(_colors.B50, ")"),
+      focused: "var(--ds-border-focused, ".concat(_colors.B100, ")"),
+      hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")")
+    },
+    boxColor: {
+      rest: "var(--ds-background-input, ".concat(_colors.N10, ")"),
+      hovered: "var(--ds-background-input-hovered, ".concat(_colors.N30, ")"),
+      disabled: "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
+      active: "var(--ds-background-input-pressed, ".concat(_colors.B50, ")"),
+      hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")"),
+      checked: "var(--ds-background-selected-bold, ".concat(_colors.B400, ")")
+    },
+    tickColor: {
+      disabledAndChecked: "var(--ds-icon-disabled, ".concat(_colors.N70, ")"),
+      activeAndChecked: "var(--ds-icon-inverse, ".concat(_colors.B400, ")"),
+      checked: "var(--ds-icon-inverse, ".concat(_colors.N10, ")")
+    }
+  },
+  /**
+   * Fallback colours for dark mode taken from
+   * packages/design-system/tokens/src/artifacts/themes/atlassian-dark.tsx
+   * To be used to keep mobile / web checkbox dark mode consistent
+   * until mobile editor does not require legacy themed() API anymore
+   */
+  dark: {
+    borderColor: {
+      rest: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? _colors.DN200 : '#A6C5E229', ")"),
+      hovered: "var(--ds-border-input, #A6C5E229)",
+      disabled: "var(--ds-background-disabled, #BCD6F00A)",
+      checked: "var(--ds-background-selected-bold, #579DFF)",
+      active: "var(--ds-border, #A6C5E229)",
+      focused: "var(--ds-border-focused, #85B8FF)",
+      hoveredAndChecked: "var(--ds-background-selected-bold-hovered, #85B8FF)"
+    },
+    boxColor: {
+      rest: "var(--ds-background-input, #22272B)",
+      hovered: "var(--ds-background-input-hovered, #282E33)",
+      disabled: "var(--ds-background-disabled, #BCD6F00A)",
+      active: "var(--ds-background-input-pressed, #22272B)",
+      hoveredAndChecked: "var(--ds-background-selected-bold-hovered, #85B8FF)",
+      checked: "var(--ds-background-selected-bold, #579DFF)"
+    },
+    tickColor: {
+      disabledAndChecked: "var(--ds-icon-disabled, #BFDBF847)",
+      activeAndChecked: "var(--ds-icon-inverse, #1D2125)",
+      checked: "var(--ds-icon-inverse, #1D2125)"
+    }
+  }
+};
+var _default = checkboxTheme;
+exports.default = _default;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/task-decision",
-	"version": "17.6.3",
+	"version": "17.7.0",
 	"sideEffects": false
 }

package/dist/es2019/components/DecisionList.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
-import decisionListStyles from './listStyle';
+import { listStyles } from './styles';
 export default class DecisionList extends PureComponent {
   render() {
     const {
@@ -20,7 +20,7 @@ export default class DecisionList extends PureComponent {
     // The value of `data-decision-local-id` should be discarded upon paste, with a
     // a new uuid generated by the editor for the cloned content.
     return jsx("ol", {
-      css: decisionListStyles,
+      css: listStyles,
       "data-decision-list-local-id": "",
       "data-node-type": "decisionList"
     }, React.Children.map(children, (child, idx) => {

package/dist/es2019/components/Item.js

@@ -3,51 +3,10 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 
 import { PureComponent } from 'react';
-import { css, jsx } from '@emotion/react';
-import { themed } from '@atlaskit/theme/components';
-import { DN50, N200, N20A } from '@atlaskit/theme/colors';
+import { jsx } from '@emotion/react';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { borderRadius, gridSize } from '@atlaskit/theme/constants';
-const contentStyle = css({
-  margin: 0,
-  wordWrap: 'break-word',
-  minWidth: 0,
-  flex: '1 1 auto'
-});
-const taskStyles = css({
-  display: 'flex',
-  flexDirection: 'row',
-  padding: '6px 3px',
-  position: 'relative'
-});
-const decisionStyles = theme => css({
-  display: 'flex',
-  flexDirection: 'row',
-  margin: `${"var(--ds-space-100, 8px)"} 0 0 0`,
-  padding: "var(--ds-space-100, 8px)",
-  paddingLeft: `${"var(--ds-space-150, 12px)"}`,
-  borderRadius: `${borderRadius()}px`,
-  backgroundColor: themed({
-    light: `var(--ds-background-neutral, ${N20A})`,
-    dark: `var(--ds-background-neutral, ${DN50})`
-  })({
-    theme
-  }),
-  position: 'relative',
-  '.decision-item': {
-    cursor: 'initial'
-  }
-});
-const placeHolderStyles = offset => css({
-  margin: `0 0 0 ${offset}px`,
-  position: 'absolute',
-  color: `var(--ds-text-subtlest, ${N200})`,
-  pointerEvents: 'none',
-  textOverflow: 'ellipsis',
-  overflow: 'hidden',
-  whiteSpace: 'nowrap',
-  maxWidth: 'calc(100% - 50px)'
-});
+import { gridSize } from '@atlaskit/theme/constants';
+import { contentStyles, taskStyles, decisionStyles, placeholderStyles } from './styles';
 export default class Item extends PureComponent {
   renderPlaceholder() {
     const {
@@ -65,7 +24,7 @@ export default class Item extends PureComponent {
     const offset = gridSize() * (itemType === 'TASK' ? 3 : 3.5);
     return jsx("span", {
       "data-component": "placeholder",
-      css: placeHolderStyles(offset),
+      css: placeholderStyles(offset),
       contentEditable: false
     }, placeholder);
   }
@@ -85,7 +44,7 @@ export default class Item extends PureComponent {
         id: `${checkBoxId}-wrapper`
       }, icon, this.renderPlaceholder(), jsx("div", _extends({
         "data-component": "content",
-        css: contentStyle,
+        css: contentStyles,
         ref: contentRef
       }, dataAttributes), children));
     } else if (itemType === 'DECISION') {
@@ -94,7 +53,7 @@ export default class Item extends PureComponent {
         "data-decision-wrapper": "true"
       }, icon, this.renderPlaceholder(), jsx("div", _extends({
         "data-component": "content",
-        css: contentStyle,
+        css: contentStyles,
         ref: contentRef
       }, dataAttributes), children));
     }