A checkbox is an input control that allows a user to select one or more options from a number of choices.
yarn add @atlaskit/checkbox#117762
424fded960a12 -
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/checkbox, 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.
#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 v188713842724537 -
Update dependencies and remove unused internal exports.9875764c197bb -
Update checkbox to match new icon styles behind feature flag.962b5e77810fb -
Adds side-effect config to support Compiled css extraction in third-party apps20db78434becd -
Bump to the latest version of @compiled/*c30346996e058 -
Removes size prop from checkbox, using the default "medium" size for all checkboxes. There is a
codemod included that removes this prop for you.d0453c21aafb7 -
Remove small and xlarge from sizes. These are currently completely unused within Atlassian and
the smaller size results in less accessible interfaces. We are also deprecating the size prop to
eventually only have checkboxes render at medium (the default) size.#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.
be7f8b7ab5827 -
Accessibility changes. Removed aria-checked attribute, and set indeterminate to true if
nested checkbox is checked.223959ef57c80 -
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 → #7384966b1707c169e0 -
The internal composition of this component has changed. There is no expected change in behaviour.427c2dd9e0d6 -
[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 checkbox and focus ring. This
makes the focus ring easier to distinguish to a selected checkbox, which is also blue.909e4a30fe7 - Removed
all remaining legacy theming logic from the Blanket, Breadcrumbs and Checkbox components.356d6ebed05 - This
package is now onboarded onto the product push model.ba0a43d8ccc - [ux]
update focused color fallback to meet contrast requirement4ae083a7e66 - Use
@af/accessibility-testing for default jest-axe config and jest-axe import in accessibility
testing.49b08bfdf5f - Migrated
use of gridSize to space tokens where possible. There is no expected visual or behaviour change.8d0fd2d3f6c - [ux]
reduce stroke width from 2px to 1px with new color to meet contrast requirement56507598609 - Skip
minor dependency bumped1b0fd2c2d - [ux]
Removes redundant whitespace from checkbox when no visual label is applied - eg when an aria-label
or id is used instead.0944c0e7eed - Updates
@emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.fe575d49d66 - Updated
styles to use new input design tokensf55cf469372 - Added id
property to the checkbox label for compatibility with aria-labelledbyff75f6c3189 - [ux]
Checkbox now uses grid layout in order to position the hidden checkbox over the area where the
icon is. This improves the virtual cursor for screen readers while also meaning that modifier keys
used when clicking the checkbox work."5d27b03c5cf - Styles
have been rewritten in preparation for migration to compiled.19d72473dfb - Updates
usage of deprecated token names so they're aligned with the latest naming conventions. No UI or
visual changesf460cc7c411 - Builds
for this package now pass through a tokens babel plugin, removing runtime invocations of the
tokens() function and improving bundle size.6e2231d4609 - Checkbox
no longer creates an empty <span/> element next to the input if no label is provided.fe79d66ea34 -
Instruments checkbox with the new tokens api. This will continue to work alongside the existing
theming implementation. No visual changesb6b4c4100cd - Updates
high contrast css declarations to use system color tokens + generic media query2d7cc544696 - Updates
token usage to match the latest token set18c128f6b73 - [ux] Fix
bug in which modified click events (e.g. Ctrl+Click) would not get passed down to the underlying
input element in Firefox.987e2fc4ddd - Add
configuration to eslint rule label-has-associated-control3c67db1a6e9 - Fix for
checkbox to account for a change in the @atlaskit/icon APId6f7ff383cf - Updates
to development dependency storybook-addon-performance37324ccc750 - Fix
styling error causing rendering errors in iOS Safari, and focus rings in Firefoxa99925b1634 - Added
styles for edge high contrast modes (black on white and white on black)02a0cdbd98b - Added
aria-invalid to checkbox input which corresponds the isInvalid prope0278312c57 - Checkbox
now uses the new SVG component from @atlaskit/icon.79c23df6340 - Use
injected package name and version for analytics instead of version.json.08c1f789a45 - [ux]
Fixes flickering when transitioning to and from indeterminate statesee02ee0aaa In this
version, we made Checkbox dramatically faster and more lightweight 😍In 12.0.0 we improved the performance of Checkbox by making it more similar to a native checkbox
and removing performance-heavy API.
overrides is an API that allowed extreme customisation flexibility. Previously you could customise
the css and attributes of 6 internal components or replace the component entirely.
<Checkbox
overrides={{
IconWrapper: {
cssFn: defaultStyles => {
...defaultStyles,
transition: 'all 0.3 cubic-bezier',
},
component: SomeCustomComponent,
attributes: { 'data-custom': true }
}
}}
/>
This proved to be a significant performance problem even if you weren't using the API. It also
exposes internal structure as external API which prevents us from changing the structure and
improving the component. We found that not many consumers were using overrides so we decided to
benefit all consumers of Checkbox we have removed overrides from the package. If you are using
overrides and we haven't already been in contact with you, contact the design system team for
assistance in migrating away from it.
theme is another API that allows you to customise the appearance of Checkbox. Theming could
previously be used to customise the various colours, spacing and sizes used in Checkbox. Much like
overrides there was minimal usage of this API and it was identified to have a negative performance
impact regardless of whether it was used.
We decided to also remove this API to benefit all consumers of Checkbox. If you would like to
continue customising checkbox there are now two ways of doing this. Checkbox now spreads any
HTMLInputAttribute onto the checkbox input. Therefore you can put a className on the checkbox
input and target the svg that is actually being shown, in the exact same way that we target the svg
based off checkbox styles. For example,
import React from 'react';
import { css } from '@emotion/core';
import { Checkbox } from '@atlaskit/checkbox;
export default function CustomStyleExample() {
return (
<Checkbox
label="Custom style checkbox"
css={css`
& + svg {
margin-left: -2px;
}
`}
/>
)
}
You can also customise the size of the Checkbox with the size prop.
import React from 'react';
import { Checkbox } from '@atlaskit/Checkbox';
export default function LargeSizeExample() {
return (
<Checkbox
defaultChecked
value="Large checkbox"
label="Large checkbox"
name="checkbox-basic"
size="large"
testId="large"
/>
);
}
Note that Checkbox still supports the light mode / dark mode global token. Along with this change
we have removed the exports ComponentTokens and ThemeFn from Checkbox as they can no longer be
used with the removal of theme.
Checkbox are applied
using css selectors.@atlaskit/icon and instead
changed to an svg that can be customised to be the default checkbox or the indeterminate
checkbox. This svg is styled from the input element with the sibling selector.Checkbox previously had no border. This was not intentional and now
Checkbox has a 2px border when it is disabled, this is consistent with all other states of
Checkbox.CheckboxProps now extends HTMLInputAttribute which means you can pass any input attribute as a
prop onto Checkbox.inputRef prop to be ref which returns the ref of the checkbox input using
forwardRef. This new ref prop will accept the type of the old inputRef prop,
(input?: HTMLInputElement) => any, as well as if ref is created with createRef.isFullWidth as it did not do anything.Checkbox and CheckboxProps. Checkbox can now be a
named or default import. As the old entry point allowed access to every export at the base level
these exports have now been removed; ComponentTokens, ThemeFn, CheckboxWithoutAnalytics,
CheckboxIcon as well as all exported types.aria-checked to be mixed.There is a codemod that assists you in upgrading most of the changes from above.
isFullWidth, theme and overrides prop.inputRef to refComponentTokens and ThemeFn.CheckboxProps to be at the base level.CheckboxWithoutAnalytics to import Checkbox at the base level.# You first need to have the latest `Checkbox` installed before you can run the codemod
yarn upgrade @atlaskit/checkbox@^12.0.0
# Run the codemod cli
# Pass in a parser for your codebase
npx @atlaskit/codemod-cli /path/to/target/directory --parser [tsx | flow | babel]
c7604cdf02 - In
12.0.0 the checkbox input accidentally changed vertical alignment from top to center. This
had a visual impact when you had a checkbox label the spanned multiple lines. This changes the
vertical alignment of the checkbox input back to top.6cb7f0c5e5 - Patch fix
to make the svg not shrink and give Checkbox a display name.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.#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.
6262f382de - Use the
'lodash' package instead of single-function 'lodash.*' packagese99262c6f0 - All form
elements now have a default font explicitly set954cc87b62 - 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 npm[patch]68ff159118:
Change imports to comply with Atlassian conventions- Updated dependencies 6b8e60827e:
Updated dependencies 449ef134b3:
Updated dependencies 57c0487a02:
Updated dependencies 0059d26429:
Updated dependencies fd41d77c29:
[patch]c1992227dc:
Bump to lodash.merge to 4.6.2- Updated dependencies eaad41d56c:
Updated dependencies c12ba5eb3e:
Updated dependencies 0603860c07:
[patch]6548261c9a:
Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a:
[patch]4a223473c5:
Removes babel/runtime from dependencies. Users should see a smaller bundlesize as a result- [patch]6a8bc6f866:
Fixes an issue where focus rings and borders were not appearing as expected on some checkboxes- Updated dependencies 28f8f0e089:
Updated dependencies 82747f2922:
Updated dependencies 4a223473c5:
[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.- [patch]24865cfaff:
fixes disabled checkbox not having correct cursor when hovering over icons- 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]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]f22f6e1e4f:
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.
[major]97bab7fd28:
@atlaskit/checkbox 10.x includes the following changes:
@atlaskit/theme v2 implementation
overrides prop which enables targeted customisations of key components in the
@atlaskit/checkbox package.
HiddenCheckbox and spread props
Passing props to the <Checkbox/> component for them to be spread onto the underlying
<HiddenCheckbox/> component is now no longer possible. @atlaskit/checkbox still supports
passing props down to the <HiddenCheckbox/> component, however we've opted to make this
behaviour more explicit.
Whereas previously you would do this:
<Checkbox
...supportedCheckboxProps
'data-testid'='test-checkbox'
/>
Now you would leverage the overrides prop to pass these props down to the <HiddenCheckbox/>
component like so:
<Checkbox
...supportedCheckboxProps
overrides={{
HiddenCheckbox:{
attributesFn: () => ({ 'data-testid': 'test-checkbox' })
}
}}
/>
[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);
[major]87a2638655:
Replaced styled-components with emotion 10 as part of Atlaskit-wide conversion process.
No changes to styling or API; only a breaking change if checkbox is being styled using the
styled-components styled function or via the styled-components theming library.
[patch]9c80ef7539:
The update to node 10 reveals that unknown type is breaking the extract react types. I had to replace unknown type by any
[major]70862830d6:
[major]7c17b35107:
[patch]98e11001ff:
[major]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]c0ad531a70:
[patch]3ae465b6f0:
[patch]b0153ee6c9:
[patch]fad28be:
[major] Checkbox refactored to remove the need for CheckboxStateless 80e1925
@atlaskit/checkbox 5.x is part of an ongoing body of work to normalize atlaskit form components.
There are a few breaking changes you need to be aware of in upgrading from 4.x to 5.x.
Exports
@atlaskit/checkbox no longer specifies the Checkbox component as the default export. Moreover
the following changes have been made to exports from the @atlaskit/checkbox package.
Checkbox is now a named export of the @atlaskit/checkboxpackage. Please import it as below.
import { Checkbox } from @atlaskit/checkbox;
The Checkbox component is now a conditionally controlled component, the isChecked prop is
exposed for users to control the checked state of the component. This was the sole reason for
having the CheckboxStateless component in pre 5.x, and as a result leveraging this pattern
allows us to do away with the CheckboxStateless component.
To let the component take care of checked state, leave the isChecked prop unset, or explicitly
set it to undefined.
Additionally, one can control the initial checked state of a component by setting the
defaultChecked (boolean) prop. This is used as the initial value of the internal isChecked
property in state. This value will be overridden by additional user interactions with the
component.
This component has been deprecated in favor of the conditionally controlled component pattern specified above.**
@atlaskit/checkbox no longer exports a CheckboxGroup component. It has been removed for the
following reasons:
Prop Changes
<Checkbox/> - initiallyChecked renamed to defaultChecked<Checkbox/> - label prop now accepts type Node instead of type string.<Checkbox/> - isChecked is now an optional boolean prop on the Checkbox component.