@atlaskit/checkbox 13.0.1 → 13.1.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/checkbox
 
+## 13.1.0
+
+### Minor Changes
+
+- [#80805](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80805) [`427c2dd9e0d6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/427c2dd9e0d6) - [ux] update border with from 2px to 1px with darker color to meet 3:1 color contrast for accessibility improvement
+
+### Patch Changes
+
+- Updated dependencies
+
+## 13.0.2
+
+### Patch Changes
+
+- [#78598](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/78598) [`cabae83473c3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cabae83473c3) - [ux] Focus styles for Checkbox and Radio components
+
 ## 13.0.1
 
 ### Patch Changes

package/dist/cjs/checkbox.js

@@ -12,7 +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 _colors = require("@atlaskit/theme/colors");
 var _internal = require("./internal");
 var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "size", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId"];
 /**  @jsx jsx */
@@ -26,6 +26,9 @@ var checkboxStyles = (0, _react2.css)({
   gridArea: '1 / 1 / 2 / 2',
   opacity: 0,
   outline: 'none',
+  '&:focus': {
+    opacity: 1
+  },
   '& + svg': {
     /**
      *  Change the variables --checkbox-background-color, --checkbox-border-color
@@ -43,12 +46,14 @@ 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.update-border-radio-checkbox_7askv') ? "var(--ds-border-width, 1px)" : 2,
+      strokeWidth: "var(--ds-border-width, 1px)",
       transition: 'stroke 0.2s ease-in-out'
     }
   },
   '&&:focus + svg, &&:checked:focus + svg': {
-    '--checkbox-border-color': 'var(--local-border-focus)'
+    borderRadius: "var(--ds-border-radius, 0.25rem)",
+    outline: "var(--ds-border-width-outline, 2px)".concat(" solid ", "var(--ds-border-focused, ".concat(_colors.B200, ")")),
+    outlineOffset: '-2px'
   },
   '&:hover + svg': {
     '--checkbox-background-color': 'var(--local-background-hover)',
@@ -161,7 +166,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "13.0.1"
+    packageVersion: "13.1.0"
   });
   var internalRef = (0, _react.useRef)(null);
   var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]);
@@ -173,7 +178,10 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     label: label,
     id: rest.id ? "".concat(rest.id, "-label") : undefined,
     testId: testId && "".concat(testId, "--checkbox-label")
-  }, (0, _react2.jsx)("input", (0, _extends2.default)({}, rest, {
+  }, (0, _react2.jsx)("input", (0, _extends2.default)({
+    // It is necessary only for Safari. It allows to render focus styles.
+    tabIndex: 0
+  }, rest, {
     type: "checkbox",
     ref: mergedRefs,
     disabled: isDisabled,

package/dist/cjs/internal/label.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Label;
 var _react = require("@emotion/react");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("./constants");
 /** @jsx jsx */
@@ -39,14 +38,14 @@ var labelStyles = (0, _react.css)({
   /**
    * Border
    */
-  '--local-border': (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, ")"),
+  '--local-border': "var(--ds-border-input, ".concat(_colors.N100, ")"),
   '--local-border-active': "var(--ds-border, ".concat(_colors.B50, ")"),
   '--local-border-checked': "var(--ds-background-selected-bold, ".concat(_colors.B400, ")"),
   '--local-border-checked-hover': "var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")"),
   '--local-border-checked-invalid': "var(--ds-border-danger, ".concat(_colors.R300, ")"),
   '--local-border-disabled': "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
   '--local-border-focus': "var(--ds-border-focused, ".concat(_colors.B200, ")"),
-  '--local-border-hover': (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, ")"),
+  '--local-border-hover': "var(--ds-border-input, ".concat(_colors.N100, ")"),
   '--local-border-invalid': "var(--ds-border-danger, ".concat(_colors.R300, ")"),
   /**
    * Tick

package/dist/es2019/checkbox.js

@@ -4,7 +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 { B200 } from '@atlaskit/theme/colors';
 import { CheckboxIcon, Label, LabelText, RequiredIndicator } from './internal';
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
 const checkboxStyles = css({
@@ -16,6 +16,9 @@ const checkboxStyles = css({
   gridArea: '1 / 1 / 2 / 2',
   opacity: 0,
   outline: 'none',
+  '&:focus': {
+    opacity: 1
+  },
   '& + svg': {
     /**
      *  Change the variables --checkbox-background-color, --checkbox-border-color
@@ -33,12 +36,14 @@ 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.update-border-radio-checkbox_7askv') ? "var(--ds-border-width, 1px)" : 2,
+      strokeWidth: "var(--ds-border-width, 1px)",
       transition: 'stroke 0.2s ease-in-out'
     }
   },
   '&&:focus + svg, &&:checked:focus + svg': {
-    '--checkbox-border-color': 'var(--local-border-focus)'
+    borderRadius: "var(--ds-border-radius, 0.25rem)",
+    outline: `${"var(--ds-border-width-outline, 2px)"} solid ${`var(--ds-border-focused, ${B200})`}`,
+    outlineOffset: '-2px'
   },
   '&:hover + svg': {
     '--checkbox-background-color': 'var(--local-background-hover)',
@@ -145,7 +150,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "13.0.1"
+    packageVersion: "13.1.0"
   });
   const internalRef = useRef(null);
   const mergedRefs = mergeRefs([internalRef, ref]);
@@ -157,7 +162,10 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
     label: label,
     id: rest.id ? `${rest.id}-label` : undefined,
     testId: testId && `${testId}--checkbox-label`
-  }, jsx("input", _extends({}, rest, {
+  }, jsx("input", _extends({
+    // It is necessary only for Safari. It allows to render focus styles.
+    tabIndex: 0
+  }, rest, {
     type: "checkbox",
     ref: mergedRefs,
     disabled: isDisabled,

package/dist/es2019/internal/label.js

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { B200, B300, B400, B50, N10, N100, N20, N30, N40, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
+import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
 import { fontFamily } from './constants';
 const baseStyles = css({
   display: 'grid',
@@ -32,14 +31,14 @@ const labelStyles = css({
   /**
    * Border
    */
-  '--local-border': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${N100})` : `var(--ds-border-input, ${N40})`,
+  '--local-border': `var(--ds-border-input, ${N100})`,
   '--local-border-active': `var(--ds-border, ${B50})`,
   '--local-border-checked': `var(--ds-background-selected-bold, ${B400})`,
   '--local-border-checked-hover': `var(--ds-background-selected-bold-hovered, ${B300})`,
   '--local-border-checked-invalid': `var(--ds-border-danger, ${R300})`,
   '--local-border-disabled': `var(--ds-background-disabled, ${N20})`,
   '--local-border-focus': `var(--ds-border-focused, ${B200})`,
-  '--local-border-hover': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${N100})` : `var(--ds-border-input, ${N40})`,
+  '--local-border-hover': `var(--ds-border-input, ${N100})`,
   '--local-border-invalid': `var(--ds-border-danger, ${R300})`,
   /**
    * Tick

package/dist/esm/checkbox.js

@@ -7,7 +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 { B200 } from '@atlaskit/theme/colors';
 import { CheckboxIcon, Label, LabelText, RequiredIndicator } from './internal';
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
 var checkboxStyles = css({
@@ -19,6 +19,9 @@ var checkboxStyles = css({
   gridArea: '1 / 1 / 2 / 2',
   opacity: 0,
   outline: 'none',
+  '&:focus': {
+    opacity: 1
+  },
   '& + svg': {
     /**
      *  Change the variables --checkbox-background-color, --checkbox-border-color
@@ -36,12 +39,14 @@ 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.update-border-radio-checkbox_7askv') ? "var(--ds-border-width, 1px)" : 2,
+      strokeWidth: "var(--ds-border-width, 1px)",
       transition: 'stroke 0.2s ease-in-out'
     }
   },
   '&&:focus + svg, &&:checked:focus + svg': {
-    '--checkbox-border-color': 'var(--local-border-focus)'
+    borderRadius: "var(--ds-border-radius, 0.25rem)",
+    outline: "var(--ds-border-width-outline, 2px)".concat(" solid ", "var(--ds-border-focused, ".concat(B200, ")")),
+    outlineOffset: '-2px'
   },
   '&:hover + svg': {
     '--checkbox-background-color': 'var(--local-background-hover)',
@@ -154,7 +159,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "13.0.1"
+    packageVersion: "13.1.0"
   });
   var internalRef = useRef(null);
   var mergedRefs = mergeRefs([internalRef, ref]);
@@ -166,7 +171,10 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
     label: label,
     id: rest.id ? "".concat(rest.id, "-label") : undefined,
     testId: testId && "".concat(testId, "--checkbox-label")
-  }, jsx("input", _extends({}, rest, {
+  }, jsx("input", _extends({
+    // It is necessary only for Safari. It allows to render focus styles.
+    tabIndex: 0
+  }, rest, {
     type: "checkbox",
     ref: mergedRefs,
     disabled: isDisabled,

package/dist/esm/internal/label.js

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { B200, B300, B400, B50, N10, N100, N20, N30, N40, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
+import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
 import { fontFamily } from './constants';
 var baseStyles = css({
   display: 'grid',
@@ -32,14 +31,14 @@ var labelStyles = css({
   /**
    * Border
    */
-  '--local-border': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(N100, ")") : "var(--ds-border-input, ".concat(N40, ")"),
+  '--local-border': "var(--ds-border-input, ".concat(N100, ")"),
   '--local-border-active': "var(--ds-border, ".concat(B50, ")"),
   '--local-border-checked': "var(--ds-background-selected-bold, ".concat(B400, ")"),
   '--local-border-checked-hover': "var(--ds-background-selected-bold-hovered, ".concat(B300, ")"),
   '--local-border-checked-invalid': "var(--ds-border-danger, ".concat(R300, ")"),
   '--local-border-disabled': "var(--ds-background-disabled, ".concat(N20, ")"),
   '--local-border-focus': "var(--ds-border-focused, ".concat(B200, ")"),
-  '--local-border-hover': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(N100, ")") : "var(--ds-border-input, ".concat(N40, ")"),
+  '--local-border-hover': "var(--ds-border-input, ".concat(N100, ")"),
   '--local-border-invalid': "var(--ds-border-danger, ".concat(R300, ")"),
   /**
    * Tick

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/checkbox",
-  "version": "13.0.1",
+  "version": "13.1.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/"
@@ -37,12 +37,11 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/analytics-next": "^9.1.0",
+    "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/ds-lib": "^2.2.0",
-    "@atlaskit/icon": "^22.0.0",
-    "@atlaskit/platform-feature-flags": "^0.2.0",
+    "@atlaskit/icon": "^22.1.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.28.0",
+    "@atlaskit/tokens": "^1.41.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -51,10 +50,10 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
+    "@af/integration-testing": "*",
     "@af/visual-regression": "*",
     "@atlaskit/ssr": "*",
     "@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",
@@ -89,11 +88,6 @@
       ]
     }
   },
-  "platform-feature-flags": {
-    "platform.design-system-team.update-border-radio-checkbox_7askv": {
-      "type": "boolean"
-    }
-  },
   "homepage": "https://atlassian.design/components/checkbox/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }

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

@@ -1,62 +0,0 @@
-## 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)
-
-```