@atlaskit/radio 6.0.2 → 6.1.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/radio
 
+## 6.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
+
+## 6.0.3
+
+### 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
+
 ## 6.0.2
 
 ### Patch Changes

package/dist/cjs/radio-group.js

@@ -12,8 +12,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _radio = _interopRequireDefault(require("./radio"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var noOptions = [];
 function RadioGroup(props) {
   var onChange = props.onChange,

package/dist/cjs/radio.js

@@ -11,13 +11,12 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _excluded = ["ariaLabel", "isDisabled", "isRequired", "isInvalid", "isChecked", "label", "name", "onChange", "value", "testId", "analyticsContext"];
 /** @jsx jsx */
 var packageName = "@atlaskit/radio";
-var packageVersion = "6.0.2";
+var packageVersion = "6.1.0";
 var fontFamily = (0, _constants.fontFamily)();
 var noop = _noop.default;
 var labelPaddingStyles = (0, _react2.css)({
@@ -56,7 +55,7 @@ var radioStyles = (0, _react2.css)({
   backgroundColor: 'var(--radio-background-color)',
   /* Border should multiply by 24/14 to offset scale, a scale of 12 / 7 is to fix a Chrome bug that makes the circle become an oval and the
     inner circle not be centred at various zoom levels */
-  border: "".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-width, 1px)" : 'calc(2px * 12 / 7)', " solid var(--radio-border-color)"),
+  border: "var(--ds-border-width, 1px)".concat(" solid var(--radio-border-color)"),
   borderRadius: "var(--ds-border-radius-circle, 50%)",
   MozAppearance: 'none',
   outline: 'none',
@@ -66,7 +65,7 @@ var radioStyles = (0, _react2.css)({
     All other variables are constant
   */
   '--radio-background-color': "var(--ds-background-input, ".concat(_colors.N10, ")"),
-  '--radio-border-color': (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, ")"),
+  '--radio-border-color': "var(--ds-border-input, ".concat(_colors.N100, ")"),
   '--radio-dot-color': "var(--ds-icon-inverse, ".concat(_colors.N10, ")"),
   '--radio-dot-opacity': 0,
   /* 24px * 7 / 12 === 14px height and width */
@@ -88,13 +87,14 @@ var radioStyles = (0, _react2.css)({
   },
   '&:hover': {
     '--radio-background-color': "var(--ds-background-input-hovered, ".concat(_colors.N30, ")"),
-    '--radio-border-color': (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, ")")
+    '--radio-border-color': "var(--ds-border-input, ".concat(_colors.N100, ")")
   },
   '&:active': {
     '--radio-background-color': "var(--ds-background-input-pressed, ".concat(_colors.N30, ")")
   },
   '&:focus': {
-    '--radio-border-color': "var(--ds-border-focused, ".concat(_colors.B100, ")")
+    outline: "var(--ds-border-width-outline, 3px)".concat(" solid ", "var(--ds-border-focused, ".concat(_colors.B200, ")")),
+    outlineOffset: "var(--ds-border-width-indicator, 3px)"
   },
   '&:checked': {
     '--radio-background-color': "var(--ds-background-selected-bold, ".concat(_colors.B400, ")"),
@@ -107,11 +107,12 @@ var radioStyles = (0, _react2.css)({
   },
   '&:checked:active': {
     '--radio-background-color': "var(--ds-background-selected-bold-pressed, ".concat(_colors.B50, ")"),
-    '--radio-border-color': (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, ")"),
+    '--radio-border-color': "var(--ds-border-input, ".concat(_colors.N100, ")"),
     '--radio-dot-color': "var(--ds-icon-inverse, ".concat(_colors.B400, ")")
   },
   '&:checked:focus': {
-    '--radio-border-color': "var(--ds-border-focused, ".concat(_colors.B100, ")")
+    outline: "var(--ds-border-width-outline, 3px)".concat(" solid ", "var(--ds-border-focused, ".concat(_colors.B200, ")")),
+    outlineOffset: "var(--ds-border-width-indicator, 3px)"
   },
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '&[data-invalid], &:checked[data-invalid]': {
@@ -154,6 +155,8 @@ var InnerRadio = /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, ref)
     "data-disabled": isDisabled ? 'true' : undefined,
     css: labelStyles
   }, (0, _react2.jsx)("input", (0, _extends2.default)({}, rest, {
+    // It is necessary only for Safari. It allows to render focus styles.
+    tabIndex: 0,
     "aria-label": ariaLabel,
     checked: isChecked,
     disabled: isDisabled,

package/dist/es2019/radio.js

@@ -4,11 +4,10 @@ import { forwardRef, memo } from 'react';
 import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import __noop from '@atlaskit/ds-lib/noop';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { B100, 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 as getFontFamily } from '@atlaskit/theme/constants';
 const packageName = "@atlaskit/radio";
-const packageVersion = "6.0.2";
+const packageVersion = "6.1.0";
 const fontFamily = getFontFamily();
 const noop = __noop;
 const labelPaddingStyles = css({
@@ -47,7 +46,7 @@ const radioStyles = css({
   backgroundColor: 'var(--radio-background-color)',
   /* Border should multiply by 24/14 to offset scale, a scale of 12 / 7 is to fix a Chrome bug that makes the circle become an oval and the
     inner circle not be centred at various zoom levels */
-  border: `${getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-width, 1px)" : 'calc(2px * 12 / 7)'} solid var(--radio-border-color)`,
+  border: `${"var(--ds-border-width, 1px)"} solid var(--radio-border-color)`,
   borderRadius: "var(--ds-border-radius-circle, 50%)",
   MozAppearance: 'none',
   outline: 'none',
@@ -57,7 +56,7 @@ const radioStyles = css({
     All other variables are constant
   */
   '--radio-background-color': `var(--ds-background-input, ${N10})`,
-  '--radio-border-color': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${N100})` : `var(--ds-border-input, ${N40})`,
+  '--radio-border-color': `var(--ds-border-input, ${N100})`,
   '--radio-dot-color': `var(--ds-icon-inverse, ${N10})`,
   '--radio-dot-opacity': 0,
   /* 24px * 7 / 12 === 14px height and width */
@@ -79,13 +78,14 @@ const radioStyles = css({
   },
   '&:hover': {
     '--radio-background-color': `var(--ds-background-input-hovered, ${N30})`,
-    '--radio-border-color': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${N100})` : `var(--ds-border-input, ${N40})`
+    '--radio-border-color': `var(--ds-border-input, ${N100})`
   },
   '&:active': {
     '--radio-background-color': `var(--ds-background-input-pressed, ${N30})`
   },
   '&:focus': {
-    '--radio-border-color': `var(--ds-border-focused, ${B100})`
+    outline: `${"var(--ds-border-width-outline, 3px)"} solid ${`var(--ds-border-focused, ${B200})`}`,
+    outlineOffset: "var(--ds-border-width-indicator, 3px)"
   },
   '&:checked': {
     '--radio-background-color': `var(--ds-background-selected-bold, ${B400})`,
@@ -98,11 +98,12 @@ const radioStyles = css({
   },
   '&:checked:active': {
     '--radio-background-color': `var(--ds-background-selected-bold-pressed, ${B50})`,
-    '--radio-border-color': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${N100})` : `var(--ds-border-input, ${N40})`,
+    '--radio-border-color': `var(--ds-border-input, ${N100})`,
     '--radio-dot-color': `var(--ds-icon-inverse, ${B400})`
   },
   '&:checked:focus': {
-    '--radio-border-color': `var(--ds-border-focused, ${B100})`
+    outline: `${"var(--ds-border-width-outline, 3px)"} solid ${`var(--ds-border-focused, ${B200})`}`,
+    outlineOffset: "var(--ds-border-width-indicator, 3px)"
   },
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '&[data-invalid], &:checked[data-invalid]': {
@@ -144,6 +145,8 @@ const InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
     "data-disabled": isDisabled ? 'true' : undefined,
     css: labelStyles
   }, jsx("input", _extends({}, rest, {
+    // It is necessary only for Safari. It allows to render focus styles.
+    tabIndex: 0,
     "aria-label": ariaLabel,
     checked: isChecked,
     disabled: isDisabled,

package/dist/esm/radio.js

@@ -6,11 +6,10 @@ import { forwardRef, memo } from 'react';
 import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import __noop from '@atlaskit/ds-lib/noop';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { B100, 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 as getFontFamily } from '@atlaskit/theme/constants';
 var packageName = "@atlaskit/radio";
-var packageVersion = "6.0.2";
+var packageVersion = "6.1.0";
 var fontFamily = getFontFamily();
 var noop = __noop;
 var labelPaddingStyles = css({
@@ -49,7 +48,7 @@ var radioStyles = css({
   backgroundColor: 'var(--radio-background-color)',
   /* Border should multiply by 24/14 to offset scale, a scale of 12 / 7 is to fix a Chrome bug that makes the circle become an oval and the
     inner circle not be centred at various zoom levels */
-  border: "".concat(getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-width, 1px)" : 'calc(2px * 12 / 7)', " solid var(--radio-border-color)"),
+  border: "var(--ds-border-width, 1px)".concat(" solid var(--radio-border-color)"),
   borderRadius: "var(--ds-border-radius-circle, 50%)",
   MozAppearance: 'none',
   outline: 'none',
@@ -59,7 +58,7 @@ var radioStyles = css({
     All other variables are constant
   */
   '--radio-background-color': "var(--ds-background-input, ".concat(N10, ")"),
-  '--radio-border-color': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(N100, ")") : "var(--ds-border-input, ".concat(N40, ")"),
+  '--radio-border-color': "var(--ds-border-input, ".concat(N100, ")"),
   '--radio-dot-color': "var(--ds-icon-inverse, ".concat(N10, ")"),
   '--radio-dot-opacity': 0,
   /* 24px * 7 / 12 === 14px height and width */
@@ -81,13 +80,14 @@ var radioStyles = css({
   },
   '&:hover': {
     '--radio-background-color': "var(--ds-background-input-hovered, ".concat(N30, ")"),
-    '--radio-border-color': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(N100, ")") : "var(--ds-border-input, ".concat(N40, ")")
+    '--radio-border-color': "var(--ds-border-input, ".concat(N100, ")")
   },
   '&:active': {
     '--radio-background-color': "var(--ds-background-input-pressed, ".concat(N30, ")")
   },
   '&:focus': {
-    '--radio-border-color': "var(--ds-border-focused, ".concat(B100, ")")
+    outline: "var(--ds-border-width-outline, 3px)".concat(" solid ", "var(--ds-border-focused, ".concat(B200, ")")),
+    outlineOffset: "var(--ds-border-width-indicator, 3px)"
   },
   '&:checked': {
     '--radio-background-color': "var(--ds-background-selected-bold, ".concat(B400, ")"),
@@ -100,11 +100,12 @@ var radioStyles = css({
   },
   '&:checked:active': {
     '--radio-background-color': "var(--ds-background-selected-bold-pressed, ".concat(B50, ")"),
-    '--radio-border-color': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(N100, ")") : "var(--ds-border-input, ".concat(N40, ")"),
+    '--radio-border-color': "var(--ds-border-input, ".concat(N100, ")"),
     '--radio-dot-color': "var(--ds-icon-inverse, ".concat(B400, ")")
   },
   '&:checked:focus': {
-    '--radio-border-color': "var(--ds-border-focused, ".concat(B100, ")")
+    outline: "var(--ds-border-width-outline, 3px)".concat(" solid ", "var(--ds-border-focused, ".concat(B200, ")")),
+    outlineOffset: "var(--ds-border-width-indicator, 3px)"
   },
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '&[data-invalid], &:checked[data-invalid]': {
@@ -147,6 +148,8 @@ var InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
     "data-disabled": isDisabled ? 'true' : undefined,
     css: labelStyles
   }, jsx("input", _extends({}, rest, {
+    // It is necessary only for Safari. It allows to render focus styles.
+    tabIndex: 0,
     "aria-label": ariaLabel,
     checked: isChecked,
     disabled: isDisabled,

package/dist/types/radio-group.d.ts

@@ -47,7 +47,7 @@ export interface RadioGroupProps {
      */
     'aria-labelledby'?: string;
     /**
-     * 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
+     * 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.
      * The specified `testId` is applied to the root element of `RadioGroup`. If no `testId` is supplied in the `options` prop, then the one supplied to `RadioGroup` will also be propagated to
      * the `Radio` children. Otherwise, the `testId` supplied in the `options` prop will be used.
      *

package/dist/types/types.d.ts

@@ -11,7 +11,7 @@ export type OptionsPropType = Array<OptionPropType>;
 export type RadioValue = string;
 type OwnProps = {
     /**
-     * The aria-label attribute associated with the radio element.
+     * The `aria-label` attribute associated with the radio element.
      */
     ariaLabel?: string;
     /**
@@ -35,7 +35,7 @@ type OwnProps = {
      */
     label?: ReactNode;
     /**
-     * OnChange event handler, passed into the props of each `Radio` Component instantiated within `RadioGroup`.
+     * `onChange` event handler, passed into the props of each `Radio` Component instantiated within `RadioGroup`.
      */
     onChange?: (e: React.ChangeEvent<HTMLInputElement>, analyticsEvent: UIAnalyticsEvent) => void;
     /**

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

@@ -47,7 +47,7 @@ export interface RadioGroupProps {
      */
     'aria-labelledby'?: string;
     /**
-     * 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
+     * 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.
      * The specified `testId` is applied to the root element of `RadioGroup`. If no `testId` is supplied in the `options` prop, then the one supplied to `RadioGroup` will also be propagated to
      * the `Radio` children. Otherwise, the `testId` supplied in the `options` prop will be used.
      *

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

@@ -11,7 +11,7 @@ export type OptionsPropType = Array<OptionPropType>;
 export type RadioValue = string;
 type OwnProps = {
     /**
-     * The aria-label attribute associated with the radio element.
+     * The `aria-label` attribute associated with the radio element.
      */
     ariaLabel?: string;
     /**
@@ -35,7 +35,7 @@ type OwnProps = {
      */
     label?: ReactNode;
     /**
-     * OnChange event handler, passed into the props of each `Radio` Component instantiated within `RadioGroup`.
+     * `onChange` event handler, passed into the props of each `Radio` Component instantiated within `RadioGroup`.
      */
     onChange?: (e: React.ChangeEvent<HTMLInputElement>, analyticsEvent: UIAnalyticsEvent) => void;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/radio",
-  "version": "6.0.2",
+  "version": "6.1.0",
   "description": "A radio input allows users to select only one option from a number of choices. Radio is generally displayed in a radio group.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -42,9 +42,8 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/ds-lib": "^2.2.0",
-    "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.36.0",
+    "@atlaskit/tokens": "^1.41.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -88,11 +87,6 @@
       "deprecation": "no-deprecated-imports"
     }
   },
-  "platform-feature-flags": {
-    "platform.design-system-team.update-border-radio-checkbox_7askv": {
-      "type": "boolean"
-    }
-  },
   "homepage": "https://atlassian.design/components/radio/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }