@atlaskit/checkbox 14.0.3 → 15.0.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/checkbox
 
+## 15.0.0
+
+### Major Changes
+
+- [#153563](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/153563)
+  [`c30346996e058`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c30346996e058) -
+  Removes `size` prop from checkbox, using the default "medium" size for all checkboxes. There is a
+  codemod included that removes this prop for you.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 14.0.3
 
 ### Patch Changes

package/codemods/15.0.0-size-removal.tsx

@@ -0,0 +1,6 @@
+import { removeSize } from './migrations/remove-props';
+import { createTransformer } from './utils';
+
+const transformer = createTransformer('@atlaskit/checkbox', [removeSize]);
+
+export default transformer;

package/codemods/__tests__/next-size-removal.tsx

@@ -0,0 +1,92 @@
+jest.autoMockOff();
+
+import transformer from '../15.0.0-size-removal';
+
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+
+describe('Remove size prop', () => {
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
+      import React from 'react';
+      import Checkbox from '@atlaskit/checkbox';
+
+      const SimpleCheckbox = () => {
+        return <Checkbox size="large" />;
+      }
+    `,
+		`
+      import React from 'react';
+      import Checkbox from '@atlaskit/checkbox';
+
+      const SimpleCheckbox = () => {
+        return <Checkbox />;
+      }
+    `,
+		'should remove size prop from default import',
+	);
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
+      import React from 'react';
+      import { Checkbox } from '@atlaskit/checkbox';
+
+      const SimpleCheckbox = () => {
+        return <Checkbox size="large" />;
+      }
+    `,
+		`
+      import React from 'react';
+      import { Checkbox } from '@atlaskit/checkbox';
+
+      const SimpleCheckbox = () => {
+        return <Checkbox />;
+      }
+    `,
+		'should remove size prop from named import',
+	);
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
+      import React from 'react';
+      import { Checkbox } from '@foo/bar';
+
+      const SimpleCheckbox = () => {
+        return <Checkbox size="large" />;
+      }
+    `,
+		`
+      import React from 'react';
+      import { Checkbox } from '@foo/bar';
+
+      const SimpleCheckbox = () => {
+        return <Checkbox size="large" />;
+      }
+    `,
+		'should do nothing if not correct import',
+	);
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
+      import React from 'react';
+      import { Checkbox as AkCheckbox } from '@atlaskit/checkbox';
+
+      const SimpleCheckbox = () => {
+        return <AkCheckbox size="large" />;
+      }
+    `,
+		`
+      import React from 'react';
+      import { Checkbox as AkCheckbox } from '@atlaskit/checkbox';
+
+      const SimpleCheckbox = () => {
+        return <AkCheckbox />;
+      }
+    `,
+		'should remove size prop with aliased import',
+	);
+});

package/codemods/migrations/remove-props.tsx

@@ -23,3 +23,5 @@ export const removeTheme = createRemoveFuncFor(
   were using theme to customise the size of the checkbox there is now a \`size\` prop.
   The appearance of Checkbox will have likely changed.`,
 );
+
+export const removeSize = createRemoveFuncFor('@atlaskit/checkbox', 'Checkbox', 'size');

package/codemods/utils.tsx

@@ -33,6 +33,18 @@ export function getNamedSpecifier(
 	return specifiers.nodes()[0]!.local!.name;
 }
 
+function getDefaultSpecifier(j: core.JSCodeshift, source: ReturnType<typeof j>, specifier: string) {
+	const specifiers = source
+		.find(j.ImportDeclaration)
+		.filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === specifier)
+		.find(j.ImportDefaultSpecifier);
+
+	if (!specifiers.length) {
+		return null;
+	}
+	return specifiers.nodes()[0]!.local!.name;
+}
+
 export function getJSXAttributesByName(
 	j: core.JSCodeshift,
 	element: ASTPath<any>,
@@ -244,7 +256,9 @@ export const createRenameFuncFor =
 export const createRemoveFuncFor =
 	(component: string, importName: string, prop: string, comment?: string) =>
 	(j: core.JSCodeshift, source: Collection<Node>) => {
-		const specifier = getNamedSpecifier(j, source, component, importName);
+		const specifier =
+			getNamedSpecifier(j, source, component, importName) ||
+			getDefaultSpecifier(j, source, component);
 
 		if (!specifier) {
 			return;

package/dist/cjs/checkbox.js

@@ -14,7 +14,7 @@ var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatform
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _colors = require("@atlaskit/theme/colors");
 var _internal = require("./internal");
-var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "size", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId", "xcss"];
+var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId", "xcss"];
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -171,8 +171,6 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     defaultChecked = _props$defaultChecked === void 0 ? false : _props$defaultChecked,
     _props$isIndeterminat = props.isIndeterminate,
     isIndeterminate = _props$isIndeterminat === void 0 ? false : _props$isIndeterminat,
-    _props$size = props.size,
-    size = _props$size === void 0 ? 'medium' : _props$size,
     onChangeProps = props.onChange,
     analyticsContext = props.analyticsContext,
     label = props.label,
@@ -198,7 +196,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "14.0.3"
+    packageVersion: "15.0.0"
   });
   var internalRef = (0, _react.useRef)(null);
   var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]);
@@ -237,7 +235,6 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     "data-testid": testId && "".concat(testId, "--hidden-checkbox"),
     "data-invalid": isInvalid ? 'true' : undefined
   })), (0, _react2.jsx)(_internal.CheckboxIcon, {
-    size: size,
     isIndeterminate: isIndeterminate,
     isChecked: isChecked
   }), label && (0, _react2.jsx)(_internal.LabelText, null, label, isRequired && (0, _react2.jsx)(_internal.RequiredIndicator, null)));

package/dist/cjs/internal/checkbox-icon.js

@@ -46,15 +46,13 @@ function getIcon(isIndeterminate, isChecked) {
  * @internal
  */
 var CheckboxIcon = /*#__PURE__*/(0, _react.memo)(function (_ref) {
-  var size = _ref.size,
-    isIndeterminate = _ref.isIndeterminate,
+  var isIndeterminate = _ref.isIndeterminate,
     isChecked = _ref.isChecked;
   var icon = (0, _react.useMemo)(function () {
     return getIcon(isIndeterminate, isChecked);
   }, [isIndeterminate, isChecked]);
   return (0, _react2.jsx)(_svg.default, {
     label: "",
-    size: size,
     primaryColor: "var(--checkbox-background-color)",
     secondaryColor: "var(--checkbox-tick-color)"
   }, (0, _react2.jsx)("g", {

package/dist/es2019/checkbox.js

@@ -159,7 +159,6 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
     isInvalid = false,
     defaultChecked = false,
     isIndeterminate = false,
-    size = 'medium',
     onChange: onChangeProps,
     analyticsContext,
     label,
@@ -183,7 +182,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "14.0.3"
+    packageVersion: "15.0.0"
   });
   const internalRef = useRef(null);
   const mergedRefs = mergeRefs([internalRef, ref]);
@@ -222,7 +221,6 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
     "data-testid": testId && `${testId}--hidden-checkbox`,
     "data-invalid": isInvalid ? 'true' : undefined
   })), jsx(CheckboxIcon, {
-    size: size,
     isIndeterminate: isIndeterminate,
     isChecked: isChecked
   }), label && jsx(LabelText, null, label, isRequired && jsx(RequiredIndicator, null)));

package/dist/es2019/internal/checkbox-icon.js

@@ -38,14 +38,12 @@ function getIcon(isIndeterminate, isChecked) {
  * @internal
  */
 const CheckboxIcon = /*#__PURE__*/memo(({
-  size,
   isIndeterminate,
   isChecked
 }) => {
   const icon = useMemo(() => getIcon(isIndeterminate, isChecked), [isIndeterminate, isChecked]);
   return jsx(PrimitiveSVGIcon, {
     label: "",
-    size: size,
     primaryColor: "var(--checkbox-background-color)",
     secondaryColor: "var(--checkbox-tick-color)"
   }, jsx("g", {

package/dist/esm/checkbox.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "size", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId", "xcss"];
+var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId", "xcss"];
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -165,8 +165,6 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
     defaultChecked = _props$defaultChecked === void 0 ? false : _props$defaultChecked,
     _props$isIndeterminat = props.isIndeterminate,
     isIndeterminate = _props$isIndeterminat === void 0 ? false : _props$isIndeterminat,
-    _props$size = props.size,
-    size = _props$size === void 0 ? 'medium' : _props$size,
     onChangeProps = props.onChange,
     analyticsContext = props.analyticsContext,
     label = props.label,
@@ -192,7 +190,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "14.0.3"
+    packageVersion: "15.0.0"
   });
   var internalRef = useRef(null);
   var mergedRefs = mergeRefs([internalRef, ref]);
@@ -231,7 +229,6 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
     "data-testid": testId && "".concat(testId, "--hidden-checkbox"),
     "data-invalid": isInvalid ? 'true' : undefined
   })), jsx(CheckboxIcon, {
-    size: size,
     isIndeterminate: isIndeterminate,
     isChecked: isChecked
   }), label && jsx(LabelText, null, label, isRequired && jsx(RequiredIndicator, null)));

package/dist/esm/internal/checkbox-icon.js

@@ -38,15 +38,13 @@ function getIcon(isIndeterminate, isChecked) {
  * @internal
  */
 var CheckboxIcon = /*#__PURE__*/memo(function (_ref) {
-  var size = _ref.size,
-    isIndeterminate = _ref.isIndeterminate,
+  var isIndeterminate = _ref.isIndeterminate,
     isChecked = _ref.isChecked;
   var icon = useMemo(function () {
     return getIcon(isIndeterminate, isChecked);
   }, [isIndeterminate, isChecked]);
   return jsx(PrimitiveSVGIcon, {
     label: "",
-    size: size,
     primaryColor: "var(--checkbox-background-color)",
     secondaryColor: "var(--checkbox-tick-color)"
   }, jsx("g", {

package/dist/types/checkbox.d.ts

@@ -8,5 +8,5 @@
  * - [Code](https://atlassian.design/components/checkbox/code)
  * - [Usage](https://atlassian.design/components/checkbox/usage)
  */
-declare const Checkbox: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "disabled" | "required" | "checked" | "css">, keyof import("./types").OwnProps> & import("./types").OwnProps & import("react").RefAttributes<HTMLInputElement>>>;
+declare const Checkbox: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "css" | "disabled" | "required" | "checked">, keyof import("./types").OwnProps> & import("./types").OwnProps & import("react").RefAttributes<HTMLInputElement>>>;
 export default Checkbox;

package/dist/types/internal/checkbox-icon.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import type { Size } from '../types';
 /**
  * __Checkbox icon__
  *
@@ -9,7 +8,6 @@ import type { Size } from '../types';
  * @internal
  */
 declare const CheckboxIcon: import("react").NamedExoticComponent<{
-    size: Size;
     isIndeterminate: boolean;
     isChecked: boolean;
 }>;

package/dist/types/types.d.ts

@@ -1,7 +1,6 @@
 import type React from 'react';
 import type UIAnalyticsEvent from '@atlaskit/analytics-next/UIAnalyticsEvent';
 import { type StrictXCSSProp } from '@atlaskit/css';
-export type Size = 'medium' | 'large';
 /**
  *
  *
@@ -57,13 +56,6 @@ export type OwnProps = {
      * 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.
-     *
-     * @deprecated This will later be removed and all checkboxes will be size
-     * `medium`.
-     */
-    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:

package/dist/types-ts4.5/checkbox.d.ts

@@ -8,5 +8,5 @@
  * - [Code](https://atlassian.design/components/checkbox/code)
  * - [Usage](https://atlassian.design/components/checkbox/usage)
  */
-declare const Checkbox: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "disabled" | "required" | "checked" | "css">, keyof import("./types").OwnProps> & import("./types").OwnProps & import("react").RefAttributes<HTMLInputElement>>>;
+declare const Checkbox: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "css" | "disabled" | "required" | "checked">, keyof import("./types").OwnProps> & import("./types").OwnProps & import("react").RefAttributes<HTMLInputElement>>>;
 export default Checkbox;

package/dist/types-ts4.5/internal/checkbox-icon.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import type { Size } from '../types';
 /**
  * __Checkbox icon__
  *
@@ -9,7 +8,6 @@ import type { Size } from '../types';
  * @internal
  */
 declare const CheckboxIcon: import("react").NamedExoticComponent<{
-    size: Size;
     isIndeterminate: boolean;
     isChecked: boolean;
 }>;

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

@@ -1,7 +1,6 @@
 import type React from 'react';
 import type UIAnalyticsEvent from '@atlaskit/analytics-next/UIAnalyticsEvent';
 import { type StrictXCSSProp } from '@atlaskit/css';
-export type Size = 'medium' | 'large';
 /**
  *
  *
@@ -57,13 +56,6 @@ export type OwnProps = {
      * 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.
-     *
-     * @deprecated This will later be removed and all checkboxes will be size
-     * `medium`.
-     */
-    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:

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/checkbox",
-	"version": "14.0.3",
+	"version": "15.0.0",
 	"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/"
@@ -36,9 +36,9 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/css": "^0.5.0",
-		"@atlaskit/ds-lib": "^3.0.0",
-		"@atlaskit/icon": "^22.20.0",
-		"@atlaskit/theme": "^13.0.0",
+		"@atlaskit/ds-lib": "^3.1.0",
+		"@atlaskit/icon": "^22.22.0",
+		"@atlaskit/theme": "^14.0.0",
 		"@atlaskit/tokens": "^2.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"