@atlaskit/checkbox 12.6.6 → 12.6.8

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/checkbox
 
+## 12.6.8
+
+### Patch Changes
+
+- [`ba0a43d8ccc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ba0a43d8ccc) - [ux] update focused color fallback to meet contrast requirement
+
+## 12.6.7
+
+### Patch Changes
+
+- [`9cc3b8d1902`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9cc3b8d1902) - chore(checkbox): use new feature flag for border contrast
+
 ## 12.6.6
 
 ### Patch Changes

package/dist/cjs/checkbox.js

@@ -16,7 +16,7 @@ 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 */
-/* eslint-disable @repo/internal/styles/no-nested-styles */
+/* eslint-disable @atlaskit/design-system/no-nested-styles */
 var checkboxStyles = (0, _react2.css)({
   width: '100%',
   height: '100%',
@@ -43,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: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)" : 2,
+      strokeWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-width, 1px)" : 2,
       transition: 'stroke 0.2s ease-in-out'
     }
   },
@@ -114,7 +114,7 @@ var checkboxStyles = (0, _react2.css)({
     }
   }
 });
-/* eslint-enable @repo/internal/styles/no-nested-styles */
+/* eslint-enable @atlaskit/design-system/no-nested-styles */
 
 /**
  * __Checkbox__
@@ -161,7 +161,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.6.6"
+    packageVersion: "12.6.8"
   });
   var internalRef = (0, _react.useRef)(null);
   var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]);

package/dist/cjs/internal/label.js

@@ -100,6 +100,7 @@ function Label(_ref) {
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),
     mode = _useGlobalTheme.mode;
   return (
+    // TODO: Labels should not have click handlers (DSP-11750)
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
     (0, _react.jsx)("label", {
       css: [labelStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],

package/dist/cjs/internal/theme.js

@@ -9,14 +9,14 @@ var _colors = require("@atlaskit/theme/colors");
 var theme = {
   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: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(_colors.N100, ")") : "var(--ds-border-input, ".concat(_colors.N40, ")"),
+      hovered: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(_colors.N100, ")") : "var(--ds-border-input, ".concat(_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, ")"),
       invalid: "var(--ds-border-danger, ".concat(_colors.R300, ")"),
       invalidAndChecked: "var(--ds-border-danger, ".concat(_colors.R300, ")"),
-      focused: "var(--ds-border-focused, ".concat(_colors.B100, ")"),
+      focused: "var(--ds-border-focused, ".concat(_colors.B200, ")"),
       hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")")
     },
     boxColor: {
@@ -35,7 +35,7 @@ var theme = {
   },
   dark: {
     borderColor: {
-      rest: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? _colors.DN200 : _colors.DN80, ")"),
+      rest: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(_colors.DN200, ")") : "var(--ds-border-input, ".concat(_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.6.6",
+	"version": "12.6.8",
 	"sideEffects": false
 }

package/dist/es2019/checkbox.js

@@ -6,7 +6,7 @@ import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatfor
 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 */
+/* eslint-disable @atlaskit/design-system/no-nested-styles */
 const checkboxStyles = css({
   width: '100%',
   height: '100%',
@@ -33,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: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)" : 2,
+      strokeWidth: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-width, 1px)" : 2,
       transition: 'stroke 0.2s ease-in-out'
     }
   },
@@ -104,7 +104,7 @@ const checkboxStyles = css({
     }
   }
 });
-/* eslint-enable @repo/internal/styles/no-nested-styles */
+/* eslint-enable @atlaskit/design-system/no-nested-styles */
 
 /**
  * __Checkbox__
@@ -145,7 +145,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.6.6"
+    packageVersion: "12.6.8"
   });
   const internalRef = useRef(null);
   const mergedRefs = mergeRefs([internalRef, ref]);

package/dist/es2019/internal/label.js

@@ -94,6 +94,7 @@ export default function Label({
     mode
   } = useGlobalTheme();
   return (
+    // TODO: Labels should not have click handlers (DSP-11750)
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
     jsx("label", {
       css: [labelStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],

package/dist/es2019/internal/theme.js

@@ -1,16 +1,16 @@
 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';
+import { 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, ${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: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${N100})` : `var(--ds-border-input, ${N40})`,
+      hovered: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${N100})` : `var(--ds-border-input, ${N40})`,
       disabled: `var(--ds-background-disabled, ${N20})`,
       checked: `var(--ds-background-selected-bold, ${B400})`,
       active: `var(--ds-border, ${B50})`,
       invalid: `var(--ds-border-danger, ${R300})`,
       invalidAndChecked: `var(--ds-border-danger, ${R300})`,
-      focused: `var(--ds-border-focused, ${B100})`,
+      focused: `var(--ds-border-focused, ${B200})`,
       hoveredAndChecked: `var(--ds-background-selected-bold-hovered, ${B300})`
     },
     boxColor: {
@@ -29,7 +29,7 @@ const theme = {
   },
   dark: {
     borderColor: {
-      rest: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? DN200 : DN80})`,
+      rest: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${DN200})` : `var(--ds-border-input, ${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.6.6",
+	"version": "12.6.8",
 	"sideEffects": false
 }

package/dist/esm/checkbox.js

@@ -9,7 +9,7 @@ import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatfor
 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 */
+/* eslint-disable @atlaskit/design-system/no-nested-styles */
 var checkboxStyles = css({
   width: '100%',
   height: '100%',
@@ -36,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: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)" : 2,
+      strokeWidth: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-width, 1px)" : 2,
       transition: 'stroke 0.2s ease-in-out'
     }
   },
@@ -107,7 +107,7 @@ var checkboxStyles = css({
     }
   }
 });
-/* eslint-enable @repo/internal/styles/no-nested-styles */
+/* eslint-enable @atlaskit/design-system/no-nested-styles */
 
 /**
  * __Checkbox__
@@ -154,7 +154,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.6.6"
+    packageVersion: "12.6.8"
   });
   var internalRef = useRef(null);
   var mergedRefs = mergeRefs([internalRef, ref]);

package/dist/esm/internal/label.js

@@ -92,6 +92,7 @@ export default function Label(_ref) {
   var _useGlobalTheme = useGlobalTheme(),
     mode = _useGlobalTheme.mode;
   return (
+    // TODO: Labels should not have click handlers (DSP-11750)
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
     jsx("label", {
       css: [labelStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],

package/dist/esm/internal/theme.js

@@ -1,16 +1,16 @@
 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';
+import { 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(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: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(N100, ")") : "var(--ds-border-input, ".concat(N40, ")"),
+      hovered: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(N100, ")") : "var(--ds-border-input, ".concat(N40, ")"),
       disabled: "var(--ds-background-disabled, ".concat(N20, ")"),
       checked: "var(--ds-background-selected-bold, ".concat(B400, ")"),
       active: "var(--ds-border, ".concat(B50, ")"),
       invalid: "var(--ds-border-danger, ".concat(R300, ")"),
       invalidAndChecked: "var(--ds-border-danger, ".concat(R300, ")"),
-      focused: "var(--ds-border-focused, ".concat(B100, ")"),
+      focused: "var(--ds-border-focused, ".concat(B200, ")"),
       hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(B300, ")")
     },
     boxColor: {
@@ -29,7 +29,7 @@ var theme = {
   },
   dark: {
     borderColor: {
-      rest: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? DN200 : DN80, ")"),
+      rest: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(DN200, ")") : "var(--ds-border-input, ".concat(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.6.6",
+	"version": "12.6.8",
 	"sideEffects": false
 }

package/dist/types/internal/theme.d.ts

@@ -1,8 +1,8 @@
 declare const theme: {
     light: {
         borderColor: {
-            rest: "var(--ds-border-input)";
-            hovered: "var(--ds-border-input)";
+            rest: "var(--ds-border-bold)" | "var(--ds-border-input)";
+            hovered: "var(--ds-border-bold)" | "var(--ds-border-input)";
             disabled: "var(--ds-background-disabled)";
             checked: "var(--ds-background-selected-bold)";
             active: "var(--ds-border)";
@@ -27,7 +27,7 @@ declare const theme: {
     };
     dark: {
         borderColor: {
-            rest: "var(--ds-border-input)";
+            rest: "var(--ds-border-bold)" | "var(--ds-border-input)";
             hovered: "var(--ds-border-input)";
             disabled: "var(--ds-background-disabled)";
             checked: "var(--ds-background-selected-bold)";

package/dist/types-ts4.5/internal/theme.d.ts

@@ -1,8 +1,8 @@
 declare const theme: {
     light: {
         borderColor: {
-            rest: "var(--ds-border-input)";
-            hovered: "var(--ds-border-input)";
+            rest: "var(--ds-border-bold)" | "var(--ds-border-input)";
+            hovered: "var(--ds-border-bold)" | "var(--ds-border-input)";
             disabled: "var(--ds-background-disabled)";
             checked: "var(--ds-background-selected-bold)";
             active: "var(--ds-border)";
@@ -27,7 +27,7 @@ declare const theme: {
     };
     dark: {
         borderColor: {
-            rest: "var(--ds-border-input)";
+            rest: "var(--ds-border-bold)" | "var(--ds-border-input)";
             hovered: "var(--ds-border-input)";
             disabled: "var(--ds-background-disabled)";
             checked: "var(--ds-background-selected-bold)";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/checkbox",
-  "version": "12.6.6",
+  "version": "12.6.8",
   "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/"
@@ -39,7 +39,7 @@
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.11.0",
+    "@atlaskit/tokens": "^1.14.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -86,7 +86,7 @@
     }
   },
   "platform-feature-flags": {
-    "platform.design-system-team.border-checkbox_nyoiu": {
+    "platform.design-system-team.update-border-radio-checkbox_7askv": {
       "type": "boolean"
     }
   },

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

@@ -0,0 +1,62 @@
+## API Report File for "@atlaskit/checkbox"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+/// <reference types="react" />
+
+import { ForwardRefExoticComponent } from 'react';
+import { InputHTMLAttributes } from 'react';
+import { MemoExoticComponent } from 'react';
+import { default as React_2 } from 'react';
+import { RefAttributes } from 'react';
+import type UIAnalyticsEvent from '@atlaskit/analytics-next/UIAnalyticsEvent';
+
+// @public
+const Checkbox: MemoExoticComponent<ForwardRefExoticComponent<Omit<Omit<InputHTMLAttributes<HTMLInputElement>, "checked" | "css" | "disabled" | "required">, keyof OwnProps> & OwnProps & RefAttributes<HTMLInputElement>>>;
+export { Checkbox }
+export default Checkbox;
+
+// @public (undocumented)
+export type CheckboxProps = Combine<Omit<React_2.InputHTMLAttributes<HTMLInputElement>,
+/**
+* 'disabled', 'required', and 'checked' are omitted so that
+* consumers must handle state using our props.
+*
+* 'css' is added globally to element attributes by emotion.
+* This was causing a bug, making the css prop required in
+* some cases. We explicitly omit it to avoid that.
+*
+* Because 'className' (which the css prop uses internally)
+* is still available, this should not break existing usage.
+*/
+'checked' | 'css' | 'disabled' | 'required'>, OwnProps>;
+
+// @public (undocumented)
+type Combine<First, Second> = Omit<First, keyof Second> & Second;
+
+// @public
+type OwnProps = {
+    defaultChecked?: boolean;
+    id?: string;
+    isChecked?: boolean;
+    isDisabled?: boolean;
+    isIndeterminate?: boolean;
+    isInvalid?: boolean;
+    isRequired?: boolean;
+    label?: React_2.ReactChild;
+    name?: string;
+    onChange?: (e: React_2.ChangeEvent<HTMLInputElement>, analyticsEvent: UIAnalyticsEvent) => void;
+    value?: number | string;
+    size?: Size;
+    testId?: string;
+    analyticsContext?: Record<string, any>;
+};
+
+// @public (undocumented)
+type Size = 'large' | 'medium' | 'small' | 'xlarge';
+
+// (No @packageDocumentation comment for this package)
+
+```