@atlaskit/checkbox 12.3.16 → 12.3.17

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/checkbox
 
+## 12.3.17
+
+### Patch Changes
+
+- [`90e89e12034`](https://bitbucket.org/atlassian/atlassian-frontend/commits/90e89e12034) - [ux] Updated colors to use appropriate tokens
+
 ## 12.3.16
 
 ### Patch Changes

package/dist/cjs/checkbox.js

@@ -174,7 +174,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.3.16"
+    packageVersion: "12.3.17"
   });
   var internalRef = (0, _react.useRef)(null);
   var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]); // Use isChecked from the state if it is controlled

package/dist/cjs/internal/theme.js

@@ -13,25 +13,25 @@ var theme = {
       rest: "var(--ds-border, ".concat(_colors.N40, ")"),
       hovered: "var(--ds-border, ".concat(_colors.N40, ")"),
       disabled: "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
-      checked: "var(--ds-background-brand-bold, ".concat(_colors.B400, ")"),
+      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, ")"),
-      hoveredAndChecked: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B300, ")")
+      hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")")
     },
     boxColor: {
       rest: "var(--ds-background-input, ".concat(_colors.N10, ")"),
-      hovered: "var(--ds-surface, ".concat(_colors.N30, ")"),
+      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-brand-bold-hovered, ".concat(_colors.B300, ")"),
-      checked: "var(--ds-background-brand-bold, ".concat(_colors.B400, ")")
+      hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")"),
+      checked: "var(--ds-background-selected-bold, ".concat(_colors.B400, ")")
     },
     tickColor: {
-      disabledAndChecked: "var(--ds-text-disabled, ".concat(_colors.N70, ")"),
-      activeAndChecked: "var(--ds-text-inverse, ".concat(_colors.B400, ")"),
-      checked: "var(--ds-text-inverse, ".concat(_colors.N10, ")")
+      disabledAndChecked: "var(--ds-icon-disabled, ".concat(_colors.N70, ")"),
+      activeAndChecked: "var(--ds-icon-inverse, ".concat(_colors.B400, ")"),
+      checked: "var(--ds-icon-inverse, ".concat(_colors.N10, ")")
     }
   },
   dark: {
@@ -39,25 +39,25 @@ var theme = {
       rest: "var(--ds-border, ".concat(_colors.DN80, ")"),
       hovered: "var(--ds-border, ".concat(_colors.DN200, ")"),
       disabled: "var(--ds-background-disabled, ".concat(_colors.DN10, ")"),
-      checked: "var(--ds-background-brand-bold, ".concat(_colors.B400, ")"),
+      checked: "var(--ds-background-selected-bold, ".concat(_colors.B400, ")"),
       active: "var(--ds-border, ".concat(_colors.B200, ")"),
       invalid: "var(--ds-border-danger, ".concat(_colors.R300, ")"),
       invalidAndChecked: "var(--ds-border-danger, ".concat(_colors.R300, ")"),
       focused: "var(--ds-border-focused, ".concat(_colors.B75, ")"),
-      hoveredAndChecked: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B75, ")")
+      hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(_colors.B75, ")")
     },
     boxColor: {
       rest: "var(--ds-background-input, ".concat(_colors.DN10, ")"),
-      hovered: "var(--ds-surface, ".concat(_colors.DN30, ")"),
+      hovered: "var(--ds-background-input-hovered, ".concat(_colors.DN30, ")"),
       disabled: "var(--ds-background-disabled, ".concat(_colors.DN10, ")"),
       active: "var(--ds-background-input-pressed, ".concat(_colors.B200, ")"),
-      hoveredAndChecked: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B75, ")"),
-      checked: "var(--ds-background-brand-bold, ".concat(_colors.B400, ")")
+      hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(_colors.B75, ")"),
+      checked: "var(--ds-background-selected-bold, ".concat(_colors.B400, ")")
     },
     tickColor: {
-      disabledAndChecked: "var(--ds-text-disabled, ".concat(_colors.DN90, ")"),
-      activeAndChecked: "var(--ds-text-inverse, ".concat(_colors.DN10, ")"),
-      checked: "var(--ds-text-inverse, ".concat(_colors.DN10, ")")
+      disabledAndChecked: "var(--ds-icon-disabled, ".concat(_colors.DN90, ")"),
+      activeAndChecked: "var(--ds-icon-inverse, ".concat(_colors.DN10, ")"),
+      checked: "var(--ds-icon-inverse, ".concat(_colors.DN10, ")")
     }
   }
 };

package/dist/cjs/version.json

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

package/dist/es2019/checkbox.js

@@ -148,7 +148,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.3.16"
+    packageVersion: "12.3.17"
   });
   const internalRef = useRef(null);
   const mergedRefs = mergeRefs([internalRef, ref]); // Use isChecked from the state if it is controlled

package/dist/es2019/internal/theme.js

@@ -5,25 +5,25 @@ const theme = {
       rest: `var(--ds-border, ${N40})`,
       hovered: `var(--ds-border, ${N40})`,
       disabled: `var(--ds-background-disabled, ${N20})`,
-      checked: `var(--ds-background-brand-bold, ${B400})`,
+      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})`,
-      hoveredAndChecked: `var(--ds-background-brand-bold-hovered, ${B300})`
+      hoveredAndChecked: `var(--ds-background-selected-bold-hovered, ${B300})`
     },
     boxColor: {
       rest: `var(--ds-background-input, ${N10})`,
-      hovered: `var(--ds-surface, ${N30})`,
+      hovered: `var(--ds-background-input-hovered, ${N30})`,
       disabled: `var(--ds-background-disabled, ${N20})`,
       active: `var(--ds-background-input-pressed, ${B50})`,
-      hoveredAndChecked: `var(--ds-background-brand-bold-hovered, ${B300})`,
-      checked: `var(--ds-background-brand-bold, ${B400})`
+      hoveredAndChecked: `var(--ds-background-selected-bold-hovered, ${B300})`,
+      checked: `var(--ds-background-selected-bold, ${B400})`
     },
     tickColor: {
-      disabledAndChecked: `var(--ds-text-disabled, ${N70})`,
-      activeAndChecked: `var(--ds-text-inverse, ${B400})`,
-      checked: `var(--ds-text-inverse, ${N10})`
+      disabledAndChecked: `var(--ds-icon-disabled, ${N70})`,
+      activeAndChecked: `var(--ds-icon-inverse, ${B400})`,
+      checked: `var(--ds-icon-inverse, ${N10})`
     }
   },
   dark: {
@@ -31,25 +31,25 @@ const theme = {
       rest: `var(--ds-border, ${DN80})`,
       hovered: `var(--ds-border, ${DN200})`,
       disabled: `var(--ds-background-disabled, ${DN10})`,
-      checked: `var(--ds-background-brand-bold, ${B400})`,
+      checked: `var(--ds-background-selected-bold, ${B400})`,
       active: `var(--ds-border, ${B200})`,
       invalid: `var(--ds-border-danger, ${R300})`,
       invalidAndChecked: `var(--ds-border-danger, ${R300})`,
       focused: `var(--ds-border-focused, ${B75})`,
-      hoveredAndChecked: `var(--ds-background-brand-bold-hovered, ${B75})`
+      hoveredAndChecked: `var(--ds-background-selected-bold-hovered, ${B75})`
     },
     boxColor: {
       rest: `var(--ds-background-input, ${DN10})`,
-      hovered: `var(--ds-surface, ${DN30})`,
+      hovered: `var(--ds-background-input-hovered, ${DN30})`,
       disabled: `var(--ds-background-disabled, ${DN10})`,
       active: `var(--ds-background-input-pressed, ${B200})`,
-      hoveredAndChecked: `var(--ds-background-brand-bold-hovered, ${B75})`,
-      checked: `var(--ds-background-brand-bold, ${B400})`
+      hoveredAndChecked: `var(--ds-background-selected-bold-hovered, ${B75})`,
+      checked: `var(--ds-background-selected-bold, ${B400})`
     },
     tickColor: {
-      disabledAndChecked: `var(--ds-text-disabled, ${DN90})`,
-      activeAndChecked: `var(--ds-text-inverse, ${DN10})`,
-      checked: `var(--ds-text-inverse, ${DN10})`
+      disabledAndChecked: `var(--ds-icon-disabled, ${DN90})`,
+      activeAndChecked: `var(--ds-icon-inverse, ${DN10})`,
+      checked: `var(--ds-icon-inverse, ${DN10})`
     }
   }
 };

package/dist/es2019/version.json

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

package/dist/esm/checkbox.js

@@ -159,7 +159,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.3.16"
+    packageVersion: "12.3.17"
   });
   var internalRef = useRef(null);
   var mergedRefs = mergeRefs([internalRef, ref]); // Use isChecked from the state if it is controlled

package/dist/esm/internal/theme.js

@@ -5,25 +5,25 @@ var theme = {
       rest: "var(--ds-border, ".concat(N40, ")"),
       hovered: "var(--ds-border, ".concat(N40, ")"),
       disabled: "var(--ds-background-disabled, ".concat(N20, ")"),
-      checked: "var(--ds-background-brand-bold, ".concat(B400, ")"),
+      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, ")"),
-      hoveredAndChecked: "var(--ds-background-brand-bold-hovered, ".concat(B300, ")")
+      hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(B300, ")")
     },
     boxColor: {
       rest: "var(--ds-background-input, ".concat(N10, ")"),
-      hovered: "var(--ds-surface, ".concat(N30, ")"),
+      hovered: "var(--ds-background-input-hovered, ".concat(N30, ")"),
       disabled: "var(--ds-background-disabled, ".concat(N20, ")"),
       active: "var(--ds-background-input-pressed, ".concat(B50, ")"),
-      hoveredAndChecked: "var(--ds-background-brand-bold-hovered, ".concat(B300, ")"),
-      checked: "var(--ds-background-brand-bold, ".concat(B400, ")")
+      hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(B300, ")"),
+      checked: "var(--ds-background-selected-bold, ".concat(B400, ")")
     },
     tickColor: {
-      disabledAndChecked: "var(--ds-text-disabled, ".concat(N70, ")"),
-      activeAndChecked: "var(--ds-text-inverse, ".concat(B400, ")"),
-      checked: "var(--ds-text-inverse, ".concat(N10, ")")
+      disabledAndChecked: "var(--ds-icon-disabled, ".concat(N70, ")"),
+      activeAndChecked: "var(--ds-icon-inverse, ".concat(B400, ")"),
+      checked: "var(--ds-icon-inverse, ".concat(N10, ")")
     }
   },
   dark: {
@@ -31,25 +31,25 @@ var theme = {
       rest: "var(--ds-border, ".concat(DN80, ")"),
       hovered: "var(--ds-border, ".concat(DN200, ")"),
       disabled: "var(--ds-background-disabled, ".concat(DN10, ")"),
-      checked: "var(--ds-background-brand-bold, ".concat(B400, ")"),
+      checked: "var(--ds-background-selected-bold, ".concat(B400, ")"),
       active: "var(--ds-border, ".concat(B200, ")"),
       invalid: "var(--ds-border-danger, ".concat(R300, ")"),
       invalidAndChecked: "var(--ds-border-danger, ".concat(R300, ")"),
       focused: "var(--ds-border-focused, ".concat(B75, ")"),
-      hoveredAndChecked: "var(--ds-background-brand-bold-hovered, ".concat(B75, ")")
+      hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(B75, ")")
     },
     boxColor: {
       rest: "var(--ds-background-input, ".concat(DN10, ")"),
-      hovered: "var(--ds-surface, ".concat(DN30, ")"),
+      hovered: "var(--ds-background-input-hovered, ".concat(DN30, ")"),
       disabled: "var(--ds-background-disabled, ".concat(DN10, ")"),
       active: "var(--ds-background-input-pressed, ".concat(B200, ")"),
-      hoveredAndChecked: "var(--ds-background-brand-bold-hovered, ".concat(B75, ")"),
-      checked: "var(--ds-background-brand-bold, ".concat(B400, ")")
+      hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(B75, ")"),
+      checked: "var(--ds-background-selected-bold, ".concat(B400, ")")
     },
     tickColor: {
-      disabledAndChecked: "var(--ds-text-disabled, ".concat(DN90, ")"),
-      activeAndChecked: "var(--ds-text-inverse, ".concat(DN10, ")"),
-      checked: "var(--ds-text-inverse, ".concat(DN10, ")")
+      disabledAndChecked: "var(--ds-icon-disabled, ".concat(DN90, ")"),
+      activeAndChecked: "var(--ds-icon-inverse, ".concat(DN10, ")"),
+      checked: "var(--ds-icon-inverse, ".concat(DN10, ")")
     }
   }
 };

package/dist/esm/version.json

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

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

@@ -4,25 +4,25 @@ declare const theme: {
             rest: "var(--ds-border)";
             hovered: "var(--ds-border)";
             disabled: "var(--ds-background-disabled)";
-            checked: "var(--ds-background-brand-bold)";
+            checked: "var(--ds-background-selected-bold)";
             active: "var(--ds-border)";
             invalid: "var(--ds-border-danger)";
             invalidAndChecked: "var(--ds-border-danger)";
             focused: "var(--ds-border-focused)";
-            hoveredAndChecked: "var(--ds-background-brand-bold-hovered)";
+            hoveredAndChecked: "var(--ds-background-selected-bold-hovered)";
         };
         boxColor: {
             rest: "var(--ds-background-input)";
-            hovered: "var(--ds-surface)";
+            hovered: "var(--ds-background-input-hovered)";
             disabled: "var(--ds-background-disabled)";
             active: "var(--ds-background-input-pressed)";
-            hoveredAndChecked: "var(--ds-background-brand-bold-hovered)";
-            checked: "var(--ds-background-brand-bold)";
+            hoveredAndChecked: "var(--ds-background-selected-bold-hovered)";
+            checked: "var(--ds-background-selected-bold)";
         };
         tickColor: {
-            disabledAndChecked: "var(--ds-text-disabled)";
-            activeAndChecked: "var(--ds-text-inverse)";
-            checked: "var(--ds-text-inverse)";
+            disabledAndChecked: "var(--ds-icon-disabled)";
+            activeAndChecked: "var(--ds-icon-inverse)";
+            checked: "var(--ds-icon-inverse)";
         };
     };
     dark: {
@@ -30,25 +30,25 @@ declare const theme: {
             rest: "var(--ds-border)";
             hovered: "var(--ds-border)";
             disabled: "var(--ds-background-disabled)";
-            checked: "var(--ds-background-brand-bold)";
+            checked: "var(--ds-background-selected-bold)";
             active: "var(--ds-border)";
             invalid: "var(--ds-border-danger)";
             invalidAndChecked: "var(--ds-border-danger)";
             focused: "var(--ds-border-focused)";
-            hoveredAndChecked: "var(--ds-background-brand-bold-hovered)";
+            hoveredAndChecked: "var(--ds-background-selected-bold-hovered)";
         };
         boxColor: {
             rest: "var(--ds-background-input)";
-            hovered: "var(--ds-surface)";
+            hovered: "var(--ds-background-input-hovered)";
             disabled: "var(--ds-background-disabled)";
             active: "var(--ds-background-input-pressed)";
-            hoveredAndChecked: "var(--ds-background-brand-bold-hovered)";
-            checked: "var(--ds-background-brand-bold)";
+            hoveredAndChecked: "var(--ds-background-selected-bold-hovered)";
+            checked: "var(--ds-background-selected-bold)";
         };
         tickColor: {
-            disabledAndChecked: "var(--ds-text-disabled)";
-            activeAndChecked: "var(--ds-text-inverse)";
-            checked: "var(--ds-text-inverse)";
+            disabledAndChecked: "var(--ds-icon-disabled)";
+            activeAndChecked: "var(--ds-icon-inverse)";
+            checked: "var(--ds-icon-inverse)";
         };
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/checkbox",
-  "version": "12.3.16",
+  "version": "12.3.17",
   "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/"

package/report.api.md

@@ -12,8 +12,16 @@ import { default as React_2 } from 'react';
 import { RefAttributes } from 'react';
 import type UIAnalyticsEvent from '@atlaskit/analytics-next/UIAnalyticsEvent';
 
-// @public
-const Checkbox: MemoExoticComponent<ForwardRefExoticComponent<
+/**
+ * __Checkbox__
+ *
+ * A checkbox an input control that allows a user to select one or more options from a number of choices.
+ *
+ * - [Examples](https://atlassian.design/components/checkbox/examples)
+ * - [Code](https://atlassian.design/components/checkbox/code)
+ * - [Usage](https://atlassian.design/components/checkbox/usage)
+ */
+declare const Checkbox: MemoExoticComponent<ForwardRefExoticComponent<
   Omit<
     Omit<
       InputHTMLAttributes<HTMLInputElement>,
@@ -27,8 +35,7 @@ const Checkbox: MemoExoticComponent<ForwardRefExoticComponent<
 export { Checkbox };
 export default Checkbox;
 
-// @public (undocumented)
-export type CheckboxProps = Combine<
+export declare type CheckboxProps = Combine<
   Omit<
     React_2.InputHTMLAttributes<HTMLInputElement>,
     /**
@@ -47,5 +54,83 @@ export type CheckboxProps = Combine<
   OwnProps
 >;
 
-// (No @packageDocumentation comment for this package)
+declare type Combine<First, Second> = Omit<First, keyof Second> & Second;
+
+/**
+ *
+ *
+ * CHECKBOX PROPTYPES
+ *
+ *
+ */
+declare type OwnProps = {
+  /**
+   * Sets whether the checkbox begins checked.
+   */
+  defaultChecked?: boolean;
+  /**
+   * id assigned to input
+   */
+  id?: string;
+  /**
+   * Sets whether the checkbox is checked or unchecked.
+   */
+  isChecked?: boolean;
+  /**
+   * Sets whether the checkbox is disabled.
+   */
+  isDisabled?: boolean;
+  /**
+   * Sets whether the checkbox is indeterminate. This only affects the
+   * style and does not modify the isChecked property.
+   */
+  isIndeterminate?: boolean;
+  /**
+   * Marks the field as invalid. Changes style of unchecked component.
+   */
+  isInvalid?: boolean;
+  /**
+   * Marks the field as required & changes the label style.
+   */
+  isRequired?: boolean;
+  /**
+   * The label to be displayed to the right of the checkbox. The label is part
+   * of the clickable element to select the checkbox.
+   */
+  label?: React_2.ReactChild;
+  /**
+   * The name of the submitted field in a checkbox.
+   */
+  name?: string;
+  /**
+   * Function that is called whenever the state of the checkbox changes. It will
+   * be called with an object containing the react synthetic event. Use currentTarget to get value, name and checked
+   */
+  onChange?: (
+    e: React_2.ChangeEvent<HTMLInputElement>,
+    analyticsEvent: UIAnalyticsEvent,
+  ) => void;
+  /**
+   * The value to be used in the checkbox input. This is the value that will be returned on form submission.
+   */
+  value?: number | string;
+  /**
+   * The size of the Checkbox
+   */
+  size?: Size;
+  /**
+   * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
+   * we have generated testid based on the one you pass to the Checkbox component:
+   * - `{testId}--hidden-checkbox` to check if it got changed to checked/unchecked.
+   */
+  testId?: string;
+  /**
+   * Additional information to be included in the `context` of analytics events that come from radio
+   */
+  analyticsContext?: Record<string, any>;
+};
+
+declare type Size = 'small' | 'medium' | 'large' | 'xlarge';
+
+export {};
 ```