@atlaskit/radio 6.0.2 → 6.0.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/radio
 
+## 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.js

@@ -17,7 +17,7 @@ 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.0.3";
 var fontFamily = (0, _constants.fontFamily)();
 var noop = _noop.default;
 var labelPaddingStyles = (0, _react2.css)({
@@ -94,7 +94,8 @@ var radioStyles = (0, _react2.css)({
     '--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, ")"),
@@ -111,7 +112,8 @@ var radioStyles = (0, _react2.css)({
     '--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 +156,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

@@ -5,10 +5,10 @@ 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, N40, 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.0.3";
 const fontFamily = getFontFamily();
 const noop = __noop;
 const labelPaddingStyles = css({
@@ -85,7 +85,8 @@ const radioStyles = css({
     '--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})`,
@@ -102,7 +103,8 @@ const radioStyles = css({
     '--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 +146,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

@@ -7,10 +7,10 @@ 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, N40, 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.0.3";
 var fontFamily = getFontFamily();
 var noop = __noop;
 var labelPaddingStyles = css({
@@ -87,7 +87,8 @@ var radioStyles = css({
     '--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, ")"),
@@ -104,7 +105,8 @@ var radioStyles = css({
     '--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 +149,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.0.3",
   "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/"
@@ -44,7 +44,7 @@
     "@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.39.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -95,4 +95,4 @@
   },
   "homepage": "https://atlassian.design/components/radio/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
-}
+}