@atlaskit/checkbox 12.5.0 → 12.6.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/checkbox
 
+## 12.6.1
+
+### Patch Changes
+
+- [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
+
+## 12.6.0
+
+### Minor Changes
+
+- [`8d0fd2d3f6c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d0fd2d3f6c) - [ux] reduce stroke width from 2px to 1px with new color to meet contrast requirement
+
 ## 12.5.0
 
 ### Minor Changes

package/dist/cjs/checkbox.js

@@ -12,6 +12,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _internal = require("./internal");
 var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "size", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId"];
 /**  @jsx jsx */
@@ -42,7 +43,7 @@ var checkboxStyles = (0, _react2.css)({
     transition: 'color 0.2s ease-in-out, fill 0.2s ease-in-out',
     'rect:first-of-type': {
       stroke: 'var(--checkbox-border-color)',
-      strokeWidth: 2,
+      strokeWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? 1 : 2,
       transition: 'stroke 0.2s ease-in-out'
     }
   },
@@ -160,7 +161,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.5.0"
+    packageVersion: "12.6.1"
   });
   var internalRef = (0, _react.useRef)(null);
   var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]);

package/dist/cjs/internal/theme.js

@@ -4,12 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var theme = {
   light: {
     borderColor: {
-      rest: "var(--ds-border-input, ".concat(_colors.N40, ")"),
-      hovered: "var(--ds-border-input, ".concat(_colors.N40, ")"),
+      rest: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? _colors.N100 : _colors.N40, ")"),
+      hovered: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? _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, ")"),
@@ -34,7 +35,7 @@ var theme = {
   },
   dark: {
     borderColor: {
-      rest: "var(--ds-border-input, ".concat(_colors.DN80, ")"),
+      rest: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? _colors.DN200 : _colors.DN80, ")"),
       hovered: "var(--ds-border-input, ".concat(_colors.DN200, ")"),
       disabled: "var(--ds-background-disabled, ".concat(_colors.DN10, ")"),
       checked: "var(--ds-background-selected-bold, ".concat(_colors.B400, ")"),

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/checkbox",
-	"version": "12.5.0",
+	"version": "12.6.1",
 	"sideEffects": false
 }

package/dist/es2019/checkbox.js

@@ -4,6 +4,7 @@ import { forwardRef, memo, useCallback, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { CheckboxIcon, Label, LabelText, RequiredIndicator } from './internal';
 /* eslint-disable @repo/internal/styles/no-nested-styles */
 const checkboxStyles = css({
@@ -32,7 +33,7 @@ const checkboxStyles = css({
     transition: 'color 0.2s ease-in-out, fill 0.2s ease-in-out',
     'rect:first-of-type': {
       stroke: 'var(--checkbox-border-color)',
-      strokeWidth: 2,
+      strokeWidth: getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? 1 : 2,
       transition: 'stroke 0.2s ease-in-out'
     }
   },
@@ -144,7 +145,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.5.0"
+    packageVersion: "12.6.1"
   });
   const internalRef = useRef(null);
   const mergedRefs = mergeRefs([internalRef, ref]);

package/dist/es2019/internal/theme.js

@@ -1,9 +1,10 @@
-import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N100, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors';
 const theme = {
   light: {
     borderColor: {
-      rest: `var(--ds-border-input, ${N40})`,
-      hovered: `var(--ds-border-input, ${N40})`,
+      rest: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N40})`,
+      hovered: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N40})`,
       disabled: `var(--ds-background-disabled, ${N20})`,
       checked: `var(--ds-background-selected-bold, ${B400})`,
       active: `var(--ds-border, ${B50})`,
@@ -28,7 +29,7 @@ const theme = {
   },
   dark: {
     borderColor: {
-      rest: `var(--ds-border-input, ${DN80})`,
+      rest: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? DN200 : DN80})`,
       hovered: `var(--ds-border-input, ${DN200})`,
       disabled: `var(--ds-background-disabled, ${DN10})`,
       checked: `var(--ds-background-selected-bold, ${B400})`,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/checkbox",
-	"version": "12.5.0",
+	"version": "12.6.1",
 	"sideEffects": false
 }

package/dist/esm/checkbox.js

@@ -7,6 +7,7 @@ import { forwardRef, memo, useCallback, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { CheckboxIcon, Label, LabelText, RequiredIndicator } from './internal';
 /* eslint-disable @repo/internal/styles/no-nested-styles */
 var checkboxStyles = css({
@@ -35,7 +36,7 @@ var checkboxStyles = css({
     transition: 'color 0.2s ease-in-out, fill 0.2s ease-in-out',
     'rect:first-of-type': {
       stroke: 'var(--checkbox-border-color)',
-      strokeWidth: 2,
+      strokeWidth: getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? 1 : 2,
       transition: 'stroke 0.2s ease-in-out'
     }
   },
@@ -153,7 +154,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.5.0"
+    packageVersion: "12.6.1"
   });
   var internalRef = useRef(null);
   var mergedRefs = mergeRefs([internalRef, ref]);

package/dist/esm/internal/theme.js

@@ -1,9 +1,10 @@
-import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N100, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors';
 var theme = {
   light: {
     borderColor: {
-      rest: "var(--ds-border-input, ".concat(N40, ")"),
-      hovered: "var(--ds-border-input, ".concat(N40, ")"),
+      rest: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N40, ")"),
+      hovered: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N40, ")"),
       disabled: "var(--ds-background-disabled, ".concat(N20, ")"),
       checked: "var(--ds-background-selected-bold, ".concat(B400, ")"),
       active: "var(--ds-border, ".concat(B50, ")"),
@@ -28,7 +29,7 @@ var theme = {
   },
   dark: {
     borderColor: {
-      rest: "var(--ds-border-input, ".concat(DN80, ")"),
+      rest: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? DN200 : DN80, ")"),
       hovered: "var(--ds-border-input, ".concat(DN200, ")"),
       disabled: "var(--ds-background-disabled, ".concat(DN10, ")"),
       checked: "var(--ds-background-selected-bold, ".concat(B400, ")"),

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/checkbox",
-	"version": "12.5.0",
+	"version": "12.6.1",
 	"sideEffects": false
 }

package/dist/types/types.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type UIAnalyticsEvent from '@atlaskit/analytics-next/UIAnalyticsEvent';
-export declare type Size = 'small' | 'medium' | 'large' | 'xlarge';
+export type Size = 'small' | 'medium' | 'large' | 'xlarge';
 /**
  *
  *
@@ -8,7 +8,7 @@ export declare type Size = 'small' | 'medium' | 'large' | 'xlarge';
  *
  *
  */
-export declare type OwnProps = {
+export type OwnProps = {
     /**
      * Sets whether the checkbox begins checked.
      */
@@ -71,8 +71,8 @@ export declare type OwnProps = {
      */
     analyticsContext?: Record<string, any>;
 };
-declare type Combine<First, Second> = Omit<First, keyof Second> & Second;
-export declare type CheckboxProps = Combine<Omit<React.InputHTMLAttributes<HTMLInputElement>, 
+type Combine<First, Second> = Omit<First, keyof Second> & Second;
+export type CheckboxProps = Combine<Omit<React.InputHTMLAttributes<HTMLInputElement>, 
 /**
  * 'disabled', 'required', and 'checked' are omitted so that
  * consumers must handle state using our props.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/checkbox",
-  "version": "12.5.0",
+  "version": "12.6.1",
   "description": "A checkbox is an input control that allows a user to select one or more options from a number of choices.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,6 +12,14 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
@@ -29,8 +37,9 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/icon": "^21.12.0",
+    "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.3.0",
+    "@atlaskit/tokens": "^1.4.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -47,11 +56,12 @@
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@atlassian/feature-flags-test-utils": "*",
     "@testing-library/react": "^12.1.5",
     "jscodeshift": "^0.13.0",
     "react-dom": "^16.8.0",
     "storybook-addon-performance": "^0.16.0",
-    "typescript": "4.5.5",
+    "typescript": "~4.9.5",
     "wait-for-expect": "^1.2.0"
   },
   "keywords": [
@@ -79,6 +89,11 @@
       ]
     }
   },
+  "platform-feature-flags": {
+    "platform.design-system-team.update-border-input_ff9l1": {
+      "type": "boolean"
+    }
+  },
   "homepage": "https://atlassian.design/components/checkbox/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }