@atlaskit/task-decision 17.8.1 → 17.9.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/task-decision
 
+## 17.9.1
+
+### Patch Changes
+
+- [`c820226ec08`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c820226ec08) - Update feature flag name for checkbox and radio border update
+
+## 17.9.0
+
+### Minor Changes
+
+- [`96f4e9fe6de`](https://bitbucket.org/atlassian/atlassian-frontend/commits/96f4e9fe6de) - [ux] ECA11Y-1 Added keyboard support to focus checkbox, check or uncheck, inside action item
+
 ## 17.8.1
 
 ### Patch Changes

package/dist/cjs/components/ResourcedTaskItem.js

@@ -156,7 +156,8 @@ var ResourcedTaskItem = /*#__PURE__*/function (_PureComponent) {
         taskId = _this$props3.taskId,
         disabled = _this$props3.disabled,
         dataAttributes = _this$props3.dataAttributes,
-        isRenderer = _this$props3.isRenderer;
+        isRenderer = _this$props3.isRenderer,
+        isFocused = _this$props3.isFocused;
       return /*#__PURE__*/_react.default.createElement(_analyticsNamespacedContext.FabricElementsAnalyticsContext, {
         data: {
           objectAri: objectAri
@@ -164,6 +165,7 @@ var ResourcedTaskItem = /*#__PURE__*/function (_PureComponent) {
       }, /*#__PURE__*/_react.default.createElement(_TaskItem.default, {
         isDone: isDone,
         isRenderer: isRenderer,
+        isFocused: isFocused,
         taskId: taskId,
         onChange: this.handleOnChange,
         appearance: appearance,

package/dist/cjs/components/TaskItem.js

@@ -25,6 +25,7 @@ var getCheckBoxId = function getCheckBoxId(localId) {
 var TaskItem = function TaskItem(props) {
   var appearance = props.appearance,
     isDone = props.isDone,
+    isFocused = props.isFocused,
     isRenderer = props.isRenderer,
     contentRef = props.contentRef,
     children = props.children,
@@ -65,6 +66,7 @@ var TaskItem = function TaskItem(props) {
       }
     };
   }, [handleOnChange]);
+  var inputRef = (0, _react.useRef)(null);
   var icon = (0, _react2.jsx)("span", {
     css: (0, _styles.checkboxStyles)(isRenderer)(theme),
     contentEditable: false
@@ -77,10 +79,22 @@ var TaskItem = function TaskItem(props) {
     checked: !!isDone,
     disabled: !!disabled,
     suppressHydrationWarning: true,
-    onKeyPress: handleOnKeyPress
+    onKeyPress: handleOnKeyPress,
+    ref: inputRef
   }), (0, _react2.jsx)(_checkbox.default, {
     label: ""
   }));
+  _react.default.useEffect(function () {
+    if (isFocused && inputRef.current) {
+      var _inputRef$current, _inputRef$current2;
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
+      setTimeout(function () {
+        var _inputRef$current3;
+        (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus();
+      }, 100);
+    }
+  }, [isFocused]);
   return (0, _react2.jsx)(_Item.default, {
     appearance: appearance,
     contentRef: contentRef,

package/dist/cjs/components/styles.js

@@ -45,7 +45,7 @@ var placeholderStyles = function placeholderStyles(offset) {
 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)({
+    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        &:focus + span > svg rect:first-of-type {\n          stroke: ", ";\n        }\n        &:checked:focus + span {\n          & > svg {\n            rect:first-of-type {\n              stroke: ", ";\n            }\n          }\n        }\n\n        ", "\n      }\n    "])), (0, _components.themed)({
       light: _theme.default.light.boxColor.rest,
       dark: _theme.default.dark.boxColor.rest
     })({
@@ -55,7 +55,7 @@ var checkboxStyles = function checkboxStyles(isRenderer) {
       dark: _theme.default.dark.borderColor.rest
     })({
       theme: theme
-    }), (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? 1 : 2, (0, _components.themed)({
+    }), (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? 1 : 2, (0, _components.themed)({
       light: _theme.default.light.borderColor.focused,
       dark: _theme.default.dark.borderColor.focused
     })({
@@ -140,6 +140,16 @@ var checkboxStyles = function checkboxStyles(isRenderer) {
       dark: _theme.default.dark.tickColor.disabledAndChecked
     })({
       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.borderColor.focused,
+      dark: _theme.default.dark.borderColor.focused
+    })({
+      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

package/dist/cjs/components/theme.js

@@ -13,8 +13,8 @@ var _colors = require("@atlaskit/theme/colors");
 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, ")"),
+      rest: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? _colors.N100 : _colors.N40, ")"),
+      hovered: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? _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, ")"),
@@ -43,7 +43,7 @@ var checkboxTheme = {
    */
   dark: {
     borderColor: {
-      rest: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? _colors.DN200 : '#A6C5E229', ")"),
+      rest: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? _colors.DN200 : '#A6C5E229', ")"),
       hovered: "var(--ds-border-input, #A6C5E229)",
       disabled: "var(--ds-background-disabled, #BCD6F00A)",
       checked: "var(--ds-background-selected-bold, #579DFF)",

package/dist/es2019/components/ResourcedTaskItem.js

@@ -125,7 +125,8 @@ export default class ResourcedTaskItem extends PureComponent {
       taskId,
       disabled,
       dataAttributes,
-      isRenderer
+      isRenderer,
+      isFocused
     } = this.props;
     return /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
       data: {
@@ -134,6 +135,7 @@ export default class ResourcedTaskItem extends PureComponent {
     }, /*#__PURE__*/React.createElement(TaskItem, {
       isDone: isDone,
       isRenderer: isRenderer,
+      isFocused: isFocused,
       taskId: taskId,
       onChange: this.handleOnChange,
       appearance: appearance,

package/dist/es2019/components/TaskItem.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React, { useMemo } from 'react';
+import React, { useMemo, useRef } from 'react';
 import { jsx } from '@emotion/react';
 import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
 import Item from './Item';
@@ -13,6 +13,7 @@ const TaskItem = props => {
   const {
     appearance,
     isDone,
+    isFocused,
     isRenderer,
     contentRef,
     children,
@@ -50,6 +51,7 @@ const TaskItem = props => {
       handleOnChange(event);
     }
   }, [handleOnChange]);
+  const inputRef = useRef(null);
   const icon = jsx("span", {
     css: checkboxStyles(isRenderer)(theme),
     contentEditable: false
@@ -62,10 +64,22 @@ const TaskItem = props => {
     checked: !!isDone,
     disabled: !!disabled,
     suppressHydrationWarning: true,
-    onKeyPress: handleOnKeyPress
+    onKeyPress: handleOnKeyPress,
+    ref: inputRef
   }), jsx(CheckboxIcon, {
     label: ""
   }));
+  React.useEffect(() => {
+    if (isFocused && inputRef.current) {
+      var _inputRef$current, _inputRef$current2;
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
+      setTimeout(() => {
+        var _inputRef$current3;
+        (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus();
+      }, 100);
+    }
+  }, [isFocused]);
   return jsx(Item, {
     appearance: appearance,
     contentRef: contentRef,

package/dist/es2019/components/styles.js

@@ -125,7 +125,7 @@ export const checkboxStyles = isRenderer => theme => css`
 })({
   theme
 })};
-            stroke-width: ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? 1 : 2};
+            stroke-width: ${getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? 1 : 2};
             transition: stroke 0.2s ease-in-out;
           }
         }
@@ -279,6 +279,27 @@ export const checkboxStyles = isRenderer => theme => css`
 })};
         }
 
+        &:focus + span > svg rect:first-of-type {
+          stroke: ${themed({
+  light: checkboxTheme.light.boxColor.checked,
+  dark: checkboxTheme.dark.boxColor.checked
+})({
+  theme
+})};
+        }
+        &:checked:focus + span {
+          & > svg {
+            rect:first-of-type {
+              stroke: ${themed({
+  light: checkboxTheme.light.borderColor.focused,
+  dark: checkboxTheme.dark.borderColor.focused
+})({
+  theme
+})};
+            }
+          }
+        }
+
         ${isRenderer ? css`
               &:focus + span > svg,
               &:checked:focus + span > svg {

package/dist/es2019/components/theme.js

@@ -8,8 +8,8 @@ import { B100, B300, B400, B50, DN200, N10, N20, N30, N40, N70, N100 } from '@at
 const checkboxTheme = {
   light: {
     borderColor: {
-      rest: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40})`,
-      hovered: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40})`,
+      rest: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? N100 : N40})`,
+      hovered: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? N100 : N40})`,
       disabled: `var(--ds-background-disabled, ${N20})`,
       checked: `var(--ds-background-selected-bold, ${B400})`,
       active: `var(--ds-border, ${B50})`,
@@ -38,7 +38,7 @@ const checkboxTheme = {
    */
   dark: {
     borderColor: {
-      rest: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? DN200 : '#A6C5E229'})`,
+      rest: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? DN200 : '#A6C5E229'})`,
       hovered: "var(--ds-border-input, #A6C5E229)",
       disabled: "var(--ds-background-disabled, #BCD6F00A)",
       checked: "var(--ds-background-selected-bold, #579DFF)",

package/dist/esm/components/ResourcedTaskItem.js

@@ -147,7 +147,8 @@ var ResourcedTaskItem = /*#__PURE__*/function (_PureComponent) {
         taskId = _this$props3.taskId,
         disabled = _this$props3.disabled,
         dataAttributes = _this$props3.dataAttributes,
-        isRenderer = _this$props3.isRenderer;
+        isRenderer = _this$props3.isRenderer,
+        isFocused = _this$props3.isFocused;
       return /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
         data: {
           objectAri: objectAri
@@ -155,6 +156,7 @@ var ResourcedTaskItem = /*#__PURE__*/function (_PureComponent) {
       }, /*#__PURE__*/React.createElement(TaskItem, {
         isDone: isDone,
         isRenderer: isRenderer,
+        isFocused: isFocused,
         taskId: taskId,
         onChange: this.handleOnChange,
         appearance: appearance,

package/dist/esm/components/TaskItem.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React, { useMemo } from 'react';
+import React, { useMemo, useRef } from 'react';
 import { jsx } from '@emotion/react';
 import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
 import Item from './Item';
@@ -14,6 +14,7 @@ var getCheckBoxId = function getCheckBoxId(localId) {
 var TaskItem = function TaskItem(props) {
   var appearance = props.appearance,
     isDone = props.isDone,
+    isFocused = props.isFocused,
     isRenderer = props.isRenderer,
     contentRef = props.contentRef,
     children = props.children,
@@ -54,6 +55,7 @@ var TaskItem = function TaskItem(props) {
       }
     };
   }, [handleOnChange]);
+  var inputRef = useRef(null);
   var icon = jsx("span", {
     css: checkboxStyles(isRenderer)(theme),
     contentEditable: false
@@ -66,10 +68,22 @@ var TaskItem = function TaskItem(props) {
     checked: !!isDone,
     disabled: !!disabled,
     suppressHydrationWarning: true,
-    onKeyPress: handleOnKeyPress
+    onKeyPress: handleOnKeyPress,
+    ref: inputRef
   }), jsx(CheckboxIcon, {
     label: ""
   }));
+  React.useEffect(function () {
+    if (isFocused && inputRef.current) {
+      var _inputRef$current, _inputRef$current2;
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
+      setTimeout(function () {
+        var _inputRef$current3;
+        (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus();
+      }, 100);
+    }
+  }, [isFocused]);
   return jsx(Item, {
     appearance: appearance,
     contentRef: contentRef,

package/dist/esm/components/styles.js

@@ -33,7 +33,7 @@ export var placeholderStyles = function placeholderStyles(offset) {
  */
 export var checkboxStyles = function checkboxStyles(isRenderer) {
   return function (theme) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\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    "])), themed({
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\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        &:focus + span > svg rect:first-of-type {\n          stroke: ", ";\n        }\n        &:checked:focus + span {\n          & > svg {\n            rect:first-of-type {\n              stroke: ", ";\n            }\n          }\n        }\n\n        ", "\n      }\n    "])), themed({
       light: checkboxTheme.light.boxColor.rest,
       dark: checkboxTheme.dark.boxColor.rest
     })({
@@ -43,7 +43,7 @@ export var checkboxStyles = function checkboxStyles(isRenderer) {
       dark: checkboxTheme.dark.borderColor.rest
     })({
       theme: theme
-    }), getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? 1 : 2, themed({
+    }), getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? 1 : 2, themed({
       light: checkboxTheme.light.borderColor.focused,
       dark: checkboxTheme.dark.borderColor.focused
     })({
@@ -128,6 +128,16 @@ export var checkboxStyles = function checkboxStyles(isRenderer) {
       dark: checkboxTheme.dark.tickColor.disabledAndChecked
     })({
       theme: theme
+    }), themed({
+      light: checkboxTheme.light.boxColor.checked,
+      dark: checkboxTheme.dark.boxColor.checked
+    })({
+      theme: theme
+    }), themed({
+      light: checkboxTheme.light.borderColor.focused,
+      dark: checkboxTheme.dark.borderColor.focused
+    })({
+      theme: theme
     }), isRenderer ? css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n              &:focus + span > svg,\n              &:checked:focus + span > svg {\n                rect:first-of-type {\n                  stroke: ", ";\n                }\n              }\n            "])), themed({
       light: checkboxTheme.light.borderColor.focused,
       dark: checkboxTheme.dark.borderColor.focused

package/dist/esm/components/theme.js

@@ -8,8 +8,8 @@ import { B100, B300, B400, B50, DN200, N10, N20, N30, N40, N70, N100 } from '@at
 var checkboxTheme = {
   light: {
     borderColor: {
-      rest: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40, ")"),
-      hovered: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40, ")"),
+      rest: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? N100 : N40, ")"),
+      hovered: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? N100 : N40, ")"),
       disabled: "var(--ds-background-disabled, ".concat(N20, ")"),
       checked: "var(--ds-background-selected-bold, ".concat(B400, ")"),
       active: "var(--ds-border, ".concat(B50, ")"),
@@ -38,7 +38,7 @@ var checkboxTheme = {
    */
   dark: {
     borderColor: {
-      rest: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? DN200 : '#A6C5E229', ")"),
+      rest: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? DN200 : '#A6C5E229', ")"),
       hovered: "var(--ds-border-input, #A6C5E229)",
       disabled: "var(--ds-background-disabled, #BCD6F00A)",
       checked: "var(--ds-background-selected-bold, #579DFF)",

package/dist/types/components/ResourcedTaskItem.d.ts

@@ -4,6 +4,7 @@ export interface Props {
     taskId: string;
     isDone?: boolean;
     isRenderer?: boolean;
+    isFocused?: boolean;
     onChange?: (taskId: string, isChecked: boolean) => void;
     contentRef?: ContentRef;
     children?: any;

package/dist/types/components/TaskItem.d.ts

@@ -5,6 +5,7 @@ import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 export interface Props {
     taskId: string;
     isDone?: boolean;
+    isFocused?: boolean;
     isRenderer?: boolean;
     onChange?: (taskId: string, isChecked: boolean) => void;
     contentRef?: ContentRef;

package/dist/types-ts4.5/components/ResourcedTaskItem.d.ts

@@ -4,6 +4,7 @@ export interface Props {
     taskId: string;
     isDone?: boolean;
     isRenderer?: boolean;
+    isFocused?: boolean;
     onChange?: (taskId: string, isChecked: boolean) => void;
     contentRef?: ContentRef;
     children?: any;

package/dist/types-ts4.5/components/TaskItem.d.ts

@@ -5,6 +5,7 @@ import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 export interface Props {
     taskId: string;
     isDone?: boolean;
+    isFocused?: boolean;
     isRenderer?: boolean;
     onChange?: (taskId: string, isChecked: boolean) => void;
     contentRef?: ContentRef;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/task-decision",
-  "version": "17.8.1",
+  "version": "17.9.1",
   "description": "Tasks and decisions react components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -39,7 +39,7 @@
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/platform-feature-flags": "^0.2.2",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.21.0",
+    "@atlaskit/tokens": "^1.24.0",
     "@atlaskit/util-service-support": "^6.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -77,7 +77,7 @@
     }
   },
   "platform-feature-flags": {
-    "platform.design-system-team.border-checkbox_nyoiu": {
+    "platform.design-system-team.update-border-radio-checkbox_7askv": {
       "type": "boolean"
     }
   },

package/report.api.md

@@ -164,6 +164,8 @@ interface Props_3 {
   // (undocumented)
   isDone?: boolean;
   // (undocumented)
+  isFocused?: boolean;
+  // (undocumented)
   isRenderer?: boolean;
   // (undocumented)
   objectAri?: string;
@@ -196,6 +198,8 @@ interface Props_4 {
   // (undocumented)
   isDone?: boolean;
   // (undocumented)
+  isFocused?: boolean;
+  // (undocumented)
   isRenderer?: boolean;
   // (undocumented)
   onChange?: (taskId: string, isChecked: boolean) => void;

package/tmp/api-report-tmp.d.ts

@@ -146,6 +146,8 @@ interface Props_3 {
     // (undocumented)
     isDone?: boolean;
     // (undocumented)
+    isFocused?: boolean;
+    // (undocumented)
     isRenderer?: boolean;
     // (undocumented)
     objectAri?: string;
@@ -178,6 +180,8 @@ interface Props_4 {
     // (undocumented)
     isDone?: boolean;
     // (undocumented)
+    isFocused?: boolean;
+    // (undocumented)
     isRenderer?: boolean;
     // (undocumented)
     onChange?: (taskId: string, isChecked: boolean) => void;