A toggle is used to view or switch between enabled or disabled states.
yarn add @atlaskit/toggle#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 v1888b53688f1c39 -
Fix bug where linked labels with single quotes in the ID would fail to be detected, leading to an
invalid internal selector"#174218
37630216e4b54 -
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/toggle, 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.
962b5e77810fb -
Adds side-effect config to support Compiled css extraction in third-party apps3c4de48168ffe -
Update the import path of useId* from @atlaskit/ds-lib8ae1e110621b7 -
Internal changes to feature flag used to toggle new iconsfc4679dc7666c -
Remove react-uid and use an ID generator that is compatible with React16 and React 18; Strict
React 18 behind a flag.21bfb50836bad -
Migrated to use new iconography behind a feature flag.#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.
d131599730792 -
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.1de74609c13 - Removed
all remaining legacy theming logic from the Tag, Toggle and Tooltip components.aff17bcbf09 - This
package is now onboarded onto the product push model.ad86a5a28ac - [ux]
correct fallback color of focused border in light and dark mode4ae083a7e66 - 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.774ed69ecef - Internal
changes to use space tokens for spacing values. There is no visual change.b1bdec7cce2 - Internal
change to enforce token usage for spacing properties. There is no expected visual or behaviour
change.10cd6daef6d - [ux]
update fallback of hover color to meet contrast requirement56507598609 - Skip
minor dependency bump73237f2e62e - [ux] Fix
token usages on toggle icon and handle background.9827dcb82b8 - No-op
change to introduce spacing tokens to design system components.0349cb94ca3 - Updates
@emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.8202e37941b - Internal
code change turning on new linting rules.cbf4b3928b4 - Internal
changes to @atlaskit/toggle to support adoption of '@compiled/react'.19d72473dfb - The
no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when
auto-fixing by correctly formatting token ids.#17576
5f184bb7147 -
Note: It is a re-release of the wrongly patched version 11.4.1 that should have been a
minor release.
[ux] Instrumented toggle 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.
WRONG RELEASE TYPE - DON'T USE
#15998
fa8d020232e - [ux]
Instrumented toggle 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.
cf853e39278 - [ux] Fix
toggle focus ring in windows high contrast moded6f7ff383cf - Updates
to development dependency storybook-addon-performanceab26e3b8958 - Added
label, checkIconLabel and crossIconLabel props. Label - text that is used as aria-label,
checkIconLabel and crossIconLabel texts that are used as labels of icons7116601e1b2 - Internal
typing refactored to be readable by extract-react-types.79c23df6340 - Use
injected package name and version for analytics instead of version.json.1afc5c6e66 - The layout
of toggle icons is not showing correctly, fixed it by explicitly set box-sizing to content-box#5860
da6f3ca7ff - ### Brief
The ultimate goal of this major for toggle is to improve the component's performance, by both reducing static structure or avoiding unnecessary function calls.
Some big changes are made as following:
styled-components to emotion as styling libraryWe've merged Toggle and ToggleStateless in this major, internally we distinguish those two
different behaviours by props a user passed in. In React documents, it's recommended to use
controlled components to implement forms
here, while there are cases you might
need a different approach instead, there is a
detailed discussion here that
can help you to decide which way to go.
When defaultChecked is passed in, that means you want it to be stateful and the component will
have a state reflecting checked or unchecked all by itself. In contrast, if defaultChecked
is absent, it turns to a stateless component and you have to control it on you own, by using
isChecked prop.
When both are provided, it will always be a stateful component.
# You first need to have the latest toggle installed before you can run the codemod
yarn upgrade @atlaskit/toggle@^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]
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.2ac834240e - Undo
analytics-next file restructure to allow external ts definitions to continue working6a46a07705 -
isDefaultChecked prop renamed to defaultChecked in @atlaskit/toggle.#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/39534#2763
74b9e80533 -
BREAKING - The label prop has been removed. If wanting to pair your toggle with a label
element make sure to use the freshly introduced id prop!
Before:
<Toggle label="Allow pull requests" />
After (we use Emotion here - but you can use any equivalent library):
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { jsx } from '@emotion/core';
import { visuallyHidden } from '@atlaskit/theme/constants';
<label css={visuallyHidden()} htmlFor="my-toggle">Allow pull requests</label>
<Toggle id="my-toggle" />
This now also allows you to visually show a label (just omit the visually hidden mixin) - which for the most part you'll want to do. Read the design docs for more inspiration.
Happy toggling!
5ab389c082 - Adds an
id prop for you to use with a pairing label element, for use like so:import Toggle from '@atlaskit/toggle';
<label htmlFor="my-toggle">Do the thing</label>
<Toggle id="my-toggle" />
54a9514fcf - Build and
supporting files will no longer be published to npm[patch]9e4b195732:
Change imports to comply with Atlassian conventions- Updated dependencies 6b8e60827e:
Updated dependencies 57c0487a02:
Updated dependencies fd41d77c29:
[patch]6548261c9a:
Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a:
[patch]6dccb16bfc:
Updated cross and check icon, removed Icon dependency
Updated dependencies 82747f2922:
Updated dependencies 4a223473c5:
[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]decb366d7a:
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[major]7e9d653278:
Toggle has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No API or behavioural changes.
[patch]9f8ab1084b:
Consume analytics-next ts type definitions as an ambient declaration.
[major]7c17b35107:
[patch]3ff7cfeeb7:
[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.