A radio input allows users to select only one option from a number of choices. Radio is generally displayed in a radio group.
yarn add @atlaskit/radio#117363
10a0f7f6c2027 -
This package's peerDependencies have been adjusted for react and/or react-dom to reflect the
status of only supporting React 18 going forward. No explicit breaking change to React support has
been made in this release, but this is to signify going forward, breaking changes for React 16 or
React 17 may come via non-major semver releases.
Please refer this community post for more details: https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026
b50c5d5d65ae2 -
Bump to the latest version of @compiled/react4660ec858a305 -
Update React from v16 to v18188698fbad962 -
Migrated from @emotion/react to @compiled/react in order to improve performance, align with
the rest of the Atlaskit techstack, and support React 18 Streaming SSR. Please note, in order to
use this version of @atlaskit/radio, you will need to ensure that your bundler is configured to
handle .css imports correctly. Most bundlers come with built-in support for .css imports, so
you may not need to do anything. If you are using a different bundler, please refer to the
documentation for that bundler to understand how to handle .css imports. For more information on
the migration, please refer to
RFC-73 Migrating our components to Compiled CSS-in-JS.8189b94404af2 -
Update radio to match new icon styles behind feature flag.57f451bda8919 -
Adds side-effect config to support Compiled css extraction in third-party apps#127511
db30e29344013 -
Widening range of react and react-dom peer dependencies from ^16.8.0 || ^17.0.0 || ~18.2.0
to the wider range of ``^16.8.0 || ^17.0.0 || ^18.0.0` (where applicable).
This change has been done to enable usage of react@18.3 as well as to have a consistent peer
dependency range for react and react-dom for /platform packages.
a8bd419fd70b9 -
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.5d9e1dccacca -
[ux] Update input border color token to meet 3:1 color contrast ratioLight theme:
color.border.input: #091E4224 → #8590A2Dark mode: color.border.input: #A6C5E229 → #738496427c2dd9e0d6 -
[ux] update border with from 2px to 1px with darker color to meet 3:1 color contrast for
accessibility improvementcabae83473c3 -
[ux] Improved visibility of focus styles by adding a gap between the radio and focus ring. This
makes the focus ring easier to distinguish to a selected radio, which is also blue.a82da4c52cfb -
Fix type bug where 'crossOrigin' appeared as a required prop for Radio6b5d817a38e9 -
Expose a testId on RadioGroup. This applies data-testid to the root level element, as well
as propagates the value to Radio children.ed8b6957789 - Removes
any usage of deprecated legacy theming APIs. These have been superseeded by design tokens.d6eab5e857c - Fix
loose inequality check in determining if a radio button is checked or not.4ae083a7e66 - Use
@af/accessibility-testing for default jest-axe config and jest-axe import in accessibility
testing.599bfe90ee3 - Internal
change to use shape tokens. There is no expected visual change.53ffecf71cb - Updated
selected radio to use color.background.selected.bold instead of color.background.brand.bold.
There's no visual change as these tokens have same hex value in both light and dark mode.b1bdec7cce2 - Internal
change to enforce token usage for spacing properties. There is no expected visual or behaviour
change.56507598609 - Skip
minor dependency bump18aeca8c199 - Internal
change to update token references. There is no expected behaviour or visual change.22d4be4674b - Fixes
issue where disabled radios were using the wrong background and border tokens8e6acf8f038 - Updates
tokens used for border and dot, improved tokens appearance when radio is both checked and disabled9827dcb82b8 - No-op
change to introduce spacing tokens to design system components.54a5b7576a6 - Updates
@emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.72cfbe1a536 - Internal
code change turning on new linting rules.fe575d49d66 - Updated
styles to use new input design tokens19d72473dfb - The
no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when
auto-fixing by correctly formatting token ids.19d72473dfb - The
no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when
auto-fixing by correctly formatting token ids.f460cc7c411 - Builds
for this package now pass through a tokens babel plugin, removing runtime invocations of the
tokens() function and improving bundle size.#13302
f276913fa2c -
Instrumented Radio with the new theming package, @atlaskit/tokens.
New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha). These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
af4bca32ad4 - Internal
changes to supress eslint rules.2d7cc544696 - Updates
token usage to match the latest token setd6f7ff383cf - Updates
to development dependency storybook-addon-performance7af2427f3a8 - [ux]
Update form field examples for validation and add a new prop to RadioGroup component79c23df6340 - Use
injected package name and version for analytics instead of version.json.5f58283e1f - Export
types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules
compiler option. This requires version 3.8 of Typescript, read more about how we handle Typescript
versions here: https://atlaskit.atlassian.com/get-started Also add typescript to
devDependencies to denote version that the package was built with.#4749
44ef6437cd - In this
version, we made radio dramatically faster and lighter 😍
In 5.0.0 we improved the performance of radio by making it more similar to a native radio input.
appearance: none on the input, enabling us to style the input and the after
pseudo-element. This removes the need for an svg.${testId}--hidden-radio to
${testId}--radio-input to provide less usage friction. We looked into product usage of the
testId and we have reached out to the owners of any code that would be effected (there was
only one).peerDependency on styled-components@3 in favour of using @emotion/core.ref to a radio input.RadioIcon export, you should just use the Radio without a label if you want this
functionality.Radio and RadioGroup. RadioGroup previously allowed you to pass any
props so this has been restricted to only those used. The isChecked prop in theoptions prop
for RadioGroup has been removed. You can only set a Radio as checked if the value of the
Radio is the selected value in the RadioGroup. Radio used to explicitly define input
attributes as props and now it extends InputHTMLAttributes allowing you to pass any input
attribute as a prop.onMouse events were passed onto both the input element and the
Radio, which means they would be called multiple times. Now they are only passed to the input
element.Radio acts as a native radio input, the name prop on each RadioGroup needs to be unique
or each RadioGroup with the same name needs to be inside a form element. This is because the
name attribute on radio inputs is used to link the inputs so if you have two separate
RadioGroup's with the same name, the browser views them as one radio group.#3885
6c525a8229 - Upgraded
to TypeScript 3.9.6 and tslib to 2.0.0
Since tslib is a dependency for all our packages we recommend that products also follow this tslib upgrade to prevent duplicates of tslib being bundled.
954cc87b62 - The readme
and package information has been updated to point to the new design system website.87f4720f27 - Officially
dropping IE11 support, from this version onwards there are no warranties of the package working in
IE11. For more information see:
https://community.developer.atlassian.com/t/atlaskit-to-drop-support-for-internet-explorer-11-from-1st-july-2020/3953454a9514fcf - Build and
supporting files will no longer be published to npm966efe3f95 - Change
imports to comply with Atlassian conventions- Updated dependencies[minor]f0af33ead6:
Add name prop to RadioGroup
[patch]6548261c9a:
Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a:
[patch]e20d7996ca:
Fixes radio value from string | number to just string to match the current implementation.-
Updated dependencies
ec76622d34:
Updated dependencies d93de8e56e:
[patch]4a223473c5:
Removes babel/runtime from dependencies. Users should see a smaller bundlesize as a result- Updated dependencies 28f8f0e089:
Updated dependencies 82747f2922:
Updated dependencies 4a223473c5:
Updated dependencies 6a8bc6f866:
[patch]24865cfaff:
Form has been converted to Typescript. TypeScript consumers will now get static type safety. Flow types are no longer provided. No API changes.- Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
[patch]d222c2b987:
Theme has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided.
** getTokens props changes ** When defining the value function passed into a ThemeProvider, the
getTokens parameter cannot be called without props; if no props are provided an empty object {}
must be passed in:
<CustomTheme.Provider
value={t => ({ ...t(), backgroundColor: '#333'})}
>
becomes:
<CustomTheme.Provider
value={t => ({ ...t({}), backgroundColor: '#333'})}
>
** Color palette changes ** Color palettes have been moved into their own file. Users will need to update imports from this:
import { colors } from '@atlaskit/theme';
colors.colorPalette('8');
to this:
import { colorPalette } from '@atlaskit/theme';
colorPalette.colorPalette('8');
or for multi entry-point users:
import * as colors from '@atlaskit/theme/colors';
colors.colorPalette('8');
to this:
import * as colorPalettes from '@atlaskit/theme/color-palette';
colorPalettes.colorPalette('8');
[patch]70e57645f2:
Updates controlled example to show better pattern for state duplication between RadioGroup and Form
[patch]35d2229b2a:
Adding missing license to packages and update to Copyright 2019 Atlassian Pty Ltd.
[patch]a2d0043716:
Updated version of analytics-next to fix potential incompatibilities with TS 3.6
[minor]ff521a0e20:
Adding an optional prop testId that will set the attribute value data-testid. It will help
products to write better integration and end to end tests.
[patch]097b696613:
Components now depend on TS 3.6 internally, in order to fix an issue with TS resolving non-relative imports as relative imports
[patch]708028db86:
Change all the imports to theme in Core to use multi entry points
[patch]926b43142b:
Analytics-next has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No behavioural changes.
Breaking changes
withAnalyticsForSumTypeProps alias has been removed, please use withAnalyticsEventsAnalyticsContextWrappedComp alias has been removed, please use withAnalyticsContextBreaking changes to TypeScript annotations
withAnalyticsEvents now infers proptypes automatically, consumers no longer need to provide
props as a generic type.withAnalyticsContext now infers proptypes automatically, consumers no longer need to provide
props as a generic type.WithAnalyticsEventProps has been renamed to WithAnalyticsEventsProps to match source
codeCreateUIAnalyticsEventSignature has been renamed to CreateUIAnalyticsEvent to match
source codeUIAnalyticsEventHandlerSignature has been renamed to UIAnalyticsEventHandler to match
source codeAnalyticsEventsPayload has been renamed to AnalyticsEventPayloadObjectType has been removed, please use Record<string, any> or [key: string]: anyUIAnalyticsEventInterface has been removed, please use UIAnalyticsEventAnalyticsEventInterface has been removed, please use AnalyticsEventCreateAndFireEventFunction removed and should now be inferred by TypeScriptAnalyticsEventUpdater removed and should now be inferred by TypeScript[patch]9f8ab1084b:
Consume analytics-next ts type definitions as an ambient declaration.
[patch]d0db01b410:
TypeScript users of withAnalyticsEvents and withAnalyticsContext are now required to provide props as a generic type. This is so that TypeScript can correctly calculate the props and defaultProps of the returned component.
Before:
withAnalyticsEvents()(Button) as ComponentClass<Props>;
After:
withAnalyticsEvents<Props>()(Button);
[patch]b0ef06c685:
[major]1da5351f72:
[major]7c17b35107:
[major]6c4e41ff36:
[minor]76299208e6:
As a breaking change, all @atlaskit packages will be dropping cjs distributions and will only
distribute esm. This means all distributed code will be transpiled, but will still contain
import and export declarations.
The major reason for doing this is to allow us to support multiple entry points in packages, e.g:
import colors from `@atlaskit/theme/colors`;
Previously this was sort of possible for consumers by doing something like:
import colors from `@atlaskit/theme/dist/esm/colors`;
This has a couple of issues. 1, it treats the file system as API making internal refactors harder, we have to worry about how consumers might be using things that aren't actually supposed to be used. 2. We are unable to do this internally in @atlaskit packages. This leads to lots of packages bundling all of theme, just to use a single color, especially in situations where tree shaking fails.
To support being able to use multiple entrypoints internally, we unfortunately cannot have multiple distributions as they would need to have very different imports from of their own internal dependencies.
ES Modules are widely supported by all modern bundlers and can be worked around in node environments.
We may choose to revisit this solution in the future if we find any unintended condequences, but we see this as a pretty sane path forward which should lead to some major bundle size decreases, saner API's and simpler package architecture.
Please reach out to #fabric-build (if in Atlassian) or create an issue in Design System Support (for external) if you have any questions or queries about this.
[patch]942e0aec04:
[minor]b42680b:
[minor]8199088: