@atlaskit/radio 5.5.1 → 5.6.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/radio
 
+## 5.6.0
+
+### Minor Changes
+
+- [`b257978b66a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b257978b66a) - [ux] reduce the border from 2px to 1px
+
+## 5.5.2
+
+### Patch Changes
+
+- [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
+
 ## 5.5.1
 
 ### Patch Changes

package/dist/cjs/radio.js

@@ -11,6 +11,7 @@ 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 _components = _interopRequireDefault(require("@atlaskit/theme/components"));
 var _constants = require("@atlaskit/theme/constants");
@@ -18,7 +19,7 @@ var _styles = _interopRequireDefault(require("./styles"));
 var _excluded = ["ariaLabel", "isDisabled", "isRequired", "isInvalid", "isChecked", "label", "mode", "name", "onChange", "value", "testId", "analyticsContext"];
 /** @jsx jsx */
 var packageName = "@atlaskit/radio";
-var packageVersion = "5.5.1";
+var packageVersion = "5.6.0";
 var fontFamily = (0, _constants.fontFamily)();
 var noop = _noop.default;
 var labelPaddingStyles = (0, _react2.css)({
@@ -44,6 +45,7 @@ var darkLabelStyles = (0, _react2.css)({
 });
 var radioStyles = (0, _react2.css)({
   display: 'flex',
+  // TODO https://product-fabric.atlassian.net/browse/DSP-10507 revisit and remove the scale of 14/24
   /*
     The circle should be 14px * 14px centred in a 24px * 24px box.
     This is inclusive of a 2px border and inner circle with 2px radius.
@@ -59,8 +61,9 @@ var radioStyles = (0, _react2.css)({
   justifyContent: 'center',
   flexShrink: 0,
   backgroundColor: 'var(--radio-background-color)',
-  /* Border should be 2px, multiply by 24/14 to offset scale */
-  border: 'calc(2px * 12 / 7) solid var(--radio-border-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-input_ff9l1') ? '1px' : 'calc(2px * 12 / 7)', " solid var(--radio-border-color)"),
   borderRadius: '50%',
   MozAppearance: 'none',
   outline: 'none',

package/dist/cjs/styles.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = getRadioCustomProperties;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var radioThemeColors = {
   light: {
@@ -17,8 +18,8 @@ var radioThemeColors = {
     dotChecked: "var(--ds-icon-inverse, ".concat(_colors.N10, ")"),
     dotDisabled: "var(--ds-icon-disabled, ".concat(_colors.N70, ")"),
     dotActive: "var(--ds-icon-inverse, ".concat(_colors.B400, ")"),
-    border: "var(--ds-border-input, ".concat(_colors.N40, ")"),
-    borderHover: "var(--ds-border-input, ".concat(_colors.N40, ")"),
+    border: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? _colors.N100 : _colors.N40, ")"),
+    borderHover: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? _colors.N100 : _colors.N40, ")"),
     borderDisabled: "var(--ds-border-disabled, ".concat(_colors.N20, ")"),
     borderFocus: "var(--ds-border-focused, ".concat(_colors.B100, ")")
   },
@@ -33,7 +34,7 @@ var radioThemeColors = {
     dotChecked: "var(--ds-icon-inverse, ".concat(_colors.DN10, ")"),
     dotDisabled: "var(--ds-icon-disabled, ".concat(_colors.DN90, ")"),
     dotActive: "var(--ds-icon-inverse, ".concat(_colors.DN10, ")"),
-    border: "var(--ds-border-input, ".concat(_colors.DN80, ")"),
+    border: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? _colors.DN200 : _colors.DN80, ")"),
     borderHover: "var(--ds-border-input, ".concat(_colors.DN200, ")"),
     borderDisabled: "var(--ds-border-disabled, ".concat(_colors.DN10, ")"),
     borderFocus: "var(--ds-border-focused, ".concat(_colors.B75, ")")

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/radio",
-	"version": "5.5.1",
+	"version": "5.6.0",
 	"sideEffects": false
 }

package/dist/es2019/radio.js

@@ -4,12 +4,13 @@ import { forwardRef, memo, useMemo } 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 { DN600, N80, N900 } from '@atlaskit/theme/colors';
 import GlobalTheme from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 import getRadioCustomProperties from './styles';
 const packageName = "@atlaskit/radio";
-const packageVersion = "5.5.1";
+const packageVersion = "5.6.0";
 const fontFamily = getFontFamily();
 const noop = __noop;
 const labelPaddingStyles = css({
@@ -35,6 +36,7 @@ const darkLabelStyles = css({
 });
 const radioStyles = css({
   display: 'flex',
+  // TODO https://product-fabric.atlassian.net/browse/DSP-10507 revisit and remove the scale of 14/24
   /*
     The circle should be 14px * 14px centred in a 24px * 24px box.
     This is inclusive of a 2px border and inner circle with 2px radius.
@@ -50,8 +52,9 @@ const radioStyles = css({
   justifyContent: 'center',
   flexShrink: 0,
   backgroundColor: 'var(--radio-background-color)',
-  /* Border should be 2px, multiply by 24/14 to offset scale */
-  border: 'calc(2px * 12 / 7) solid var(--radio-border-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-input_ff9l1') ? '1px' : 'calc(2px * 12 / 7)'} solid var(--radio-border-color)`,
   borderRadius: '50%',
   MozAppearance: 'none',
   outline: 'none',

package/dist/es2019/styles.js

@@ -1,4 +1,5 @@
-import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N100, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors';
 const radioThemeColors = {
   light: {
     background: `var(--ds-background-input, ${N10})`,
@@ -11,8 +12,8 @@ const radioThemeColors = {
     dotChecked: `var(--ds-icon-inverse, ${N10})`,
     dotDisabled: `var(--ds-icon-disabled, ${N70})`,
     dotActive: `var(--ds-icon-inverse, ${B400})`,
-    border: `var(--ds-border-input, ${N40})`,
-    borderHover: `var(--ds-border-input, ${N40})`,
+    border: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N40})`,
+    borderHover: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N40})`,
     borderDisabled: `var(--ds-border-disabled, ${N20})`,
     borderFocus: `var(--ds-border-focused, ${B100})`
   },
@@ -27,7 +28,7 @@ const radioThemeColors = {
     dotChecked: `var(--ds-icon-inverse, ${DN10})`,
     dotDisabled: `var(--ds-icon-disabled, ${DN90})`,
     dotActive: `var(--ds-icon-inverse, ${DN10})`,
-    border: `var(--ds-border-input, ${DN80})`,
+    border: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? DN200 : DN80})`,
     borderHover: `var(--ds-border-input, ${DN200})`,
     borderDisabled: `var(--ds-border-disabled, ${DN10})`,
     borderFocus: `var(--ds-border-focused, ${B75})`

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/radio",
-	"version": "5.5.1",
+	"version": "5.6.0",
 	"sideEffects": false
 }

package/dist/esm/radio.js

@@ -6,12 +6,13 @@ import { forwardRef, memo, useMemo } 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 { DN600, N80, N900 } from '@atlaskit/theme/colors';
 import GlobalTheme from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 import getRadioCustomProperties from './styles';
 var packageName = "@atlaskit/radio";
-var packageVersion = "5.5.1";
+var packageVersion = "5.6.0";
 var fontFamily = getFontFamily();
 var noop = __noop;
 var labelPaddingStyles = css({
@@ -37,6 +38,7 @@ var darkLabelStyles = css({
 });
 var radioStyles = css({
   display: 'flex',
+  // TODO https://product-fabric.atlassian.net/browse/DSP-10507 revisit and remove the scale of 14/24
   /*
     The circle should be 14px * 14px centred in a 24px * 24px box.
     This is inclusive of a 2px border and inner circle with 2px radius.
@@ -52,8 +54,9 @@ var radioStyles = css({
   justifyContent: 'center',
   flexShrink: 0,
   backgroundColor: 'var(--radio-background-color)',
-  /* Border should be 2px, multiply by 24/14 to offset scale */
-  border: 'calc(2px * 12 / 7) solid var(--radio-border-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-input_ff9l1') ? '1px' : 'calc(2px * 12 / 7)', " solid var(--radio-border-color)"),
   borderRadius: '50%',
   MozAppearance: 'none',
   outline: 'none',

package/dist/esm/styles.js

@@ -1,4 +1,5 @@
-import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N100, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors';
 var radioThemeColors = {
   light: {
     background: "var(--ds-background-input, ".concat(N10, ")"),
@@ -11,8 +12,8 @@ var radioThemeColors = {
     dotChecked: "var(--ds-icon-inverse, ".concat(N10, ")"),
     dotDisabled: "var(--ds-icon-disabled, ".concat(N70, ")"),
     dotActive: "var(--ds-icon-inverse, ".concat(B400, ")"),
-    border: "var(--ds-border-input, ".concat(N40, ")"),
-    borderHover: "var(--ds-border-input, ".concat(N40, ")"),
+    border: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N40, ")"),
+    borderHover: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N40, ")"),
     borderDisabled: "var(--ds-border-disabled, ".concat(N20, ")"),
     borderFocus: "var(--ds-border-focused, ".concat(B100, ")")
   },
@@ -27,7 +28,7 @@ var radioThemeColors = {
     dotChecked: "var(--ds-icon-inverse, ".concat(DN10, ")"),
     dotDisabled: "var(--ds-icon-disabled, ".concat(DN90, ")"),
     dotActive: "var(--ds-icon-inverse, ".concat(DN10, ")"),
-    border: "var(--ds-border-input, ".concat(DN80, ")"),
+    border: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? DN200 : DN80, ")"),
     borderHover: "var(--ds-border-input, ".concat(DN200, ")"),
     borderDisabled: "var(--ds-border-disabled, ".concat(DN10, ")"),
     borderFocus: "var(--ds-border-focused, ".concat(B75, ")")

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/radio",
-	"version": "5.5.1",
+	"version": "5.6.0",
 	"sideEffects": false
 }

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

@@ -0,0 +1,2 @@
+export { default as RadioGroup } from './radio-group';
+export { default as Radio } from './radio';

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

@@ -0,0 +1,50 @@
+import React, { SyntheticEvent } from 'react';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { OptionsPropType, RadioValue } from './types';
+export interface RadioGroupProps {
+    /**
+     * Once set, controls the selected value on the `RadioGroup`
+     */
+    value?: RadioValue | null;
+    /**
+     * Sets the initial selected value on the `RadioGroup`
+     */
+    defaultValue?: RadioValue | null;
+    /**
+     * Sets the disabled state of all `Radio` elements in the group. Overrides the `isDisabled` setting of all child `Radio` items.
+     */
+    isDisabled?: boolean;
+    /**
+     * Sets the required state of all `Radio` elements in the group
+     */
+    isRequired?: boolean;
+    /**
+     * Sets the invalid state of all `Radio` elements in the group
+     */
+    isInvalid?: boolean;
+    /**
+     * An array of objects, each object is mapped onto a `Radio` element within the group. Name must be unique to the group.
+     */
+    options: OptionsPropType;
+    /**
+     * Function that gets fired after each invalid event
+     */
+    onInvalid?: (event: SyntheticEvent<any>) => void;
+    /**
+     * Function that gets after each change event
+     */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>, analyticsEvent: UIAnalyticsEvent) => void;
+    /**
+     * Sets the `name` prop on each of the `Radio` elements in the group
+     */
+    name?: string;
+    /**
+     * Additional information to be included in the `context` of analytics events that come from radio
+     */
+    analyticsContext?: Record<string, any>;
+    /**
+     * The id of the element that links to this radiogroup.
+     */
+    'aria-labelledby'?: string;
+}
+export default function RadioGroup(props: RadioGroupProps): JSX.Element;

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

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+/**
+ * __Radio__
+ *
+ * A radio input allows users to select only one option from a number of choices. Radio is generally displayed in a radio group.
+ *
+ * - [Examples](https://atlassian.design/components/radio/examples)
+ * - [Code](https://atlassian.design/components/radio/code)
+ * - [Usage](https://atlassian.design/components/radio/usage)
+ */
+declare const Radio: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<Omit<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-label" | "disabled" | "required" | "checked" | "value">, keyof {
+    ariaLabel?: string | undefined;
+    isDisabled?: boolean | undefined;
+    isRequired?: boolean | undefined;
+    isInvalid?: boolean | undefined;
+    isChecked?: boolean | undefined;
+    label?: import("react").ReactNode;
+    onChange?: ((e: import("react").ChangeEvent<HTMLInputElement>, analyticsEvent: import("@atlaskit/analytics-next").UIAnalyticsEvent) => void) | undefined;
+    value?: string | undefined;
+    testId?: string | undefined;
+    analyticsContext?: Record<string, any> | undefined;
+}> & {
+    ariaLabel?: string | undefined;
+    isDisabled?: boolean | undefined;
+    isRequired?: boolean | undefined;
+    isInvalid?: boolean | undefined;
+    isChecked?: boolean | undefined;
+    label?: import("react").ReactNode;
+    onChange?: ((e: import("react").ChangeEvent<HTMLInputElement>, analyticsEvent: import("@atlaskit/analytics-next").UIAnalyticsEvent) => void) | undefined;
+    value?: string | undefined;
+    testId?: string | undefined;
+    analyticsContext?: Record<string, any> | undefined;
+} & import("@atlaskit/analytics-next").WithAnalyticsEventsProps, "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "crossOrigin" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "size" | "src" | "step" | "type" | "width" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof {
+    ariaLabel?: string | undefined;
+    isDisabled?: boolean | undefined;
+    isRequired?: boolean | undefined;
+    isInvalid?: boolean | undefined;
+    isChecked?: boolean | undefined;
+    label?: import("react").ReactNode;
+    onChange?: ((e: import("react").ChangeEvent<HTMLInputElement>, analyticsEvent: import("@atlaskit/analytics-next").UIAnalyticsEvent) => void) | undefined;
+    value?: string | undefined;
+    testId?: string | undefined;
+    analyticsContext?: Record<string, any> | undefined;
+} | "createAnalyticsEvent"> & import("react").RefAttributes<HTMLInputElement>>>;
+export default Radio;

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

@@ -0,0 +1,18 @@
+import { ThemeModes } from '@atlaskit/theme/types';
+export default function getRadioCustomProperties(mode: ThemeModes): {
+    '--local-background': "var(--ds-background-input)";
+    '--local-background-active': "var(--ds-background-input-pressed)";
+    '--local-background-checked': "var(--ds-background-brand-bold)";
+    '--local-background-checked-active': "var(--ds-background-brand-bold-pressed)";
+    '--local-background-checked-hover': "var(--ds-background-brand-bold-hovered)";
+    '--local-background-disabled': "var(--ds-background-disabled)";
+    '--local-background-hover': "var(--ds-background-input-hovered)";
+    '--local-border': "var(--ds-border-input)";
+    '--local-border-disabled': "var(--ds-border-disabled)";
+    '--local-border-hover': "var(--ds-border-input)";
+    '--local-border-focus': "var(--ds-border-focused)";
+    '--local-dot-active': "var(--ds-icon-inverse)";
+    '--local-dot-checked': "var(--ds-icon-inverse)";
+    '--local-dot-disabled': "var(--ds-icon-disabled)";
+    '--local-invalid': "var(--ds-icon-danger)";
+};

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

@@ -0,0 +1,118 @@
+import { ReactNode, SyntheticEvent } from 'react';
+import { UIAnalyticsEvent, WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+export type OptionPropType = {
+    isDisabled?: boolean;
+    label?: ReactNode;
+    name?: string;
+    value?: RadioValue;
+    testId?: string;
+};
+export type OptionsPropType = Array<OptionPropType>;
+export type RadioValue = string;
+type OwnProps = {
+    /**
+     * the aria-label attribute associated with the radio element
+     */
+    ariaLabel?: string;
+    /**
+     * Makes a `Radio` field unselectable when true. Overridden by `isDisabled` prop of `RadioGroup`.
+     */
+    isDisabled?: boolean;
+    /**
+     * Marks this as a required field
+     */
+    isRequired?: boolean;
+    /**
+     * Field is invalid
+     */
+    isInvalid?: boolean;
+    /**
+     * Set the field as checked
+     */
+    isChecked?: boolean;
+    /**
+     * The label value for the input rendered to the dom
+     */
+    label?: ReactNode;
+    /**
+     * onChange event handler, passed into the props of each `Radio` Component instantiated within `RadioGroup`
+     */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>, analyticsEvent: UIAnalyticsEvent) => void;
+    /**
+     * Field value
+     */
+    value?: RadioValue;
+    /**
+     * 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 2 different testid generated based on the one you pass to the Radio component:
+     * - `{testId}--radio-input` to check if it got changed to checked/unchecked.
+     * - `{testId}--radio-label` to click the input
+     */
+    testId?: string;
+    /**
+     * Additional information to be included in the `context` of analytics events that come from radio
+     */
+    analyticsContext?: Record<string, any>;
+};
+type Combine<First, Second> = Omit<First, keyof Second> & Second;
+export type RadioProps = Combine<Omit<React.InputHTMLAttributes<HTMLInputElement>, 'aria-label' | 'disabled' | 'required' | 'checked' | 'value'>, OwnProps> & WithAnalyticsEventsProps;
+export interface ExtractReactTypeProps extends WithAnalyticsEventsProps {
+    /**
+     * the aria-label attribute associated with the radio element
+     */
+    ariaLabel?: string;
+    /**
+     * Field disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Marks this as a required field
+     */
+    isRequired?: boolean;
+    /**
+     * Field is invalid
+     */
+    isInvalid?: boolean;
+    /**
+     * Set the field as checked
+     */
+    isChecked?: boolean;
+    /**
+     * The label value for the input rendered to the dom
+     */
+    label?: ReactNode;
+    /**
+     * Field name, must be unique to the radio group
+     */
+    name?: string;
+    /**
+     * `onChange` event handler, passed into the props of each `Radio` Component instantiated within RadioGroup
+     */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>, analyticsEvent: UIAnalyticsEvent) => void;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onMouseDown?: React.MouseEventHandler;
+    onMouseUp?: React.MouseEventHandler;
+    onMouseEnter?: React.MouseEventHandler;
+    onMouseLeave?: React.MouseEventHandler;
+    /**
+     * `onInvalid` event handler, passed into the props of each `Radio` component instantiated within `RadioGroup`
+     */
+    onInvalid?: (e: SyntheticEvent<any>) => void;
+    /**
+     * Field value
+     */
+    value?: RadioValue;
+    /**
+     * 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 two different `testId`s generated based on the one you pass to the Radio component:
+     * - `{testId}--radio-input` to check if it got changed to checked/unchecked.
+     * - `{testId}--radio-label` to click the input
+     */
+    testId?: string;
+    /**
+     * Additional information to be included in the `context` of analytics events that come from radio
+     */
+    analyticsContext?: Record<string, any>;
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/radio",
-  "version": "5.5.1",
+  "version": "5.6.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/"
@@ -39,6 +39,7 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/ds-lib": "^2.2.0",
+    "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/theme": "^12.5.0",
     "@atlaskit/tokens": "^1.4.0",
     "@babel/runtime": "^7.0.0",
@@ -57,6 +58,7 @@
     "@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",
     "react-dom": "^16.8.0",
     "storybook-addon-performance": "^0.16.0",
@@ -86,6 +88,11 @@
       "deprecation": "no-deprecated-imports"
     }
   },
+  "platform-feature-flags": {
+    "platform.design-system-team.update-border-input_ff9l1": {
+      "type": "boolean"
+    }
+  },
   "homepage": "https://atlassian.design/components/radio/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }