Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@atlaskit/toggle

atlassian58.1kApache-2.014.0.3TypeScript support: included

A toggle is used to view or switch between enabled or disabled states.

atlaskit, react, ui

readme

Toggle

A toggle is used to view or switch between enabled or disabled states.

Installation

yarn add @atlaskit/toggle

Usage

Detailed docs and example usage can be found here.

changelog

@atlaskit/toggle

14.0.3

Patch Changes

14.0.2

Patch Changes

  • Updated dependencies

14.0.1

Patch Changes

  • #180314 88b53688f1c39 - Fix bug where linked labels with single quotes in the ID would fail to be detected, leading to an invalid internal selector"

14.0.0

Major Changes

  • #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.

13.4.10

Patch Changes

13.4.9

Patch Changes

  • Updated dependencies

13.4.8

Patch Changes

  • #166026 962b5e77810fb - Adds side-effect config to support Compiled css extraction in third-party apps

13.4.7

Patch Changes

  • Updated dependencies

13.4.6

Patch Changes

  • Updated dependencies

13.4.5

Patch Changes

  • Updated dependencies

13.4.4

Patch Changes

  • #148281 3c4de48168ffe - Update the import path of useId* from @atlaskit/ds-lib
  • Updated dependencies

13.4.3

Patch Changes

13.4.2

Patch Changes

  • Updated dependencies

13.4.1

Patch Changes

  • #138350 fc4679dc7666c - Remove react-uid and use an ID generator that is compatible with React16 and React 18; Strict React 18 behind a flag.

13.4.0

Minor Changes

Patch Changes

  • Updated dependencies

13.3.1

Patch Changes

  • Updated dependencies

13.3.0

Minor Changes

  • #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.3as well as to have a consistent peer dependency range forreactandreact-domfor/platform` packages.

Patch Changes

  • Updated dependencies

13.2.1

Patch Changes

  • Updated dependencies

13.2.0

Minor Changes

  • #111016 d131599730792 - Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime is implicitly set to automatic.

Patch Changes

  • Updated dependencies

13.1.0

Minor Changes

13.0.5

Patch Changes

13.0.4

Patch Changes

13.0.3

Patch Changes

13.0.2

Patch Changes

13.0.1

Patch Changes

  • Updated dependencies

13.0.0

Major Changes

  • #41881 1de74609c13 - Removed all remaining legacy theming logic from the Tag, Toggle and Tooltip components.

12.6.11

Patch Changes

12.6.10

Patch Changes

12.6.9

Patch Changes

  • #37302 ad86a5a28ac - [ux] correct fallback color of focused border in light and dark mode

12.6.8

Patch Changes

12.6.7

Patch Changes

  • #36754 4ae083a7e66 - Use @af/accessibility-testing for default jest-axe config and jest-axe import in accessibility testing.

12.6.6

Patch Changes

  • #35441 599bfe90ee3 - Internal change to use shape tokens. There is no expected visual change.

12.6.5

Patch Changes

  • #34881 774ed69ecef - Internal changes to use space tokens for spacing values. There is no visual change.

12.6.4

Patch Changes

  • #32935 b1bdec7cce2 - Internal change to enforce token usage for spacing properties. There is no expected visual or behaviour change.

12.6.3

Patch Changes

  • #33795 10cd6daef6d - [ux] update fallback of hover color to meet contrast requirement

12.6.2

Patch Changes

12.6.1

Patch Changes

12.6.0

Minor Changes

Patch Changes

  • Updated dependencies

12.5.8

Patch Changes

  • Updated dependencies

12.5.7

Patch Changes

  • Updated dependencies

12.5.6

Patch Changes

  • Updated dependencies

12.5.5

Patch Changes

  • Updated dependencies

12.5.4

Patch Changes

12.5.3

Patch Changes

  • Updated dependencies

12.5.2

Patch Changes

  • #26303 9827dcb82b8 - No-op change to introduce spacing tokens to design system components.

12.5.1

Patch Changes

12.5.0

Minor Changes

  • #24004 0349cb94ca3 - Updates @emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.

Patch Changes

  • Updated dependencies

12.4.10

Patch Changes

12.4.9

Patch Changes

  • #23381 8202e37941b - Internal code change turning on new linting rules.
  • Updated dependencies

12.4.8

Patch Changes

  • Updated dependencies

12.4.7

Patch Changes

12.4.6

Patch Changes

  • Updated dependencies

12.4.5

Patch Changes

  • Updated dependencies

12.4.4

Patch Changes

  • Updated dependencies

12.4.3

Patch Changes

  • #16752 cbf4b3928b4 - Internal changes to @atlaskit/toggle to support adoption of '@compiled/react'.

12.4.2

Patch Changes

  • 19d72473dfb - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
  • Updated dependencies

12.4.1

Patch Changes

  • Updated dependencies

12.4.0

Minor Changes

  • #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.

Patch Changes

  • Updated dependencies

12.3.1

Minor 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.

Patch Changes

  • Updated dependencies

12.3.0

Minor Changes

Patch Changes

  • Updated dependencies

12.2.2

Patch Changes

12.2.1

Patch Changes

12.2.0

Minor Changes

12.1.0

Minor Changes

  • #10230 ab26e3b8958 - Added label, checkIconLabel and crossIconLabel props. Label - text that is used as aria-label, checkIconLabel and crossIconLabel texts that are used as labels of icons

Patch Changes

  • Updated dependencies

12.0.5

Patch Changes

  • #9083 7116601e1b2 - Internal typing refactored to be readable by extract-react-types.
  • Updated dependencies

12.0.4

Patch Changes

  • #8644 79c23df6340 - Use injected package name and version for analytics instead of version.json.
  • Updated dependencies

12.0.3

Patch Changes

  • #7468 1afc5c6e66 - The layout of toggle icons is not showing correctly, fixed it by explicitly set box-sizing to content-box

12.0.2

Patch Changes

12.0.1

Patch Changes

12.0.0

Major Changes

  • #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:

    • merged stateful and stateless component
    • replace styled-components to emotion as styling library
    • restructure DOM element to reduce size
    • using latest analytics-next

    Stateful vs Stateless

    We'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.

    Upgrading with codemod

    # 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]

11.0.3

Patch Changes

  • #5497 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.

11.0.2

Patch Changes

  • Updated dependencies

11.0.1

Patch Changes

  • #5164 2ac834240e - Undo analytics-next file restructure to allow external ts definitions to continue working

11.0.0

Major Changes

  • #4749 6a46a07705 - isDefaultChecked prop renamed to defaultChecked in @atlaskit/toggle.

Patch Changes

  • Updated dependencies

10.0.4

Patch Changes

10.0.3

Patch Changes

  • #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.

10.0.2

Patch Changes

  • #3293 954cc87b62 - The readme and package information has been updated to point to the new design system website.

10.0.1

Patch Changes

10.0.0

Major Changes

Patch Changes

  • Updated dependencies

9.0.0

Major Changes

  • #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!

Minor Changes

  • 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" />

8.1.9

Patch Changes

  • #2866 54a9514fcf - Build and supporting files will no longer be published to npm

8.1.8

Patch Changes

  • Updated dependencies

8.1.7

Patch Changes

8.1.6

Patch Changes

8.1.5

Patch Changes

8.1.4

Patch Changes

8.1.3

Patch Changes

8.1.2

Patch Changes

  • [patch]35d2229b2a:

    Adding missing license to packages and update to Copyright 2019 Atlassian Pty Ltd.

8.1.1

Patch Changes

  • [patch]a2d0043716:

    Updated version of analytics-next to fix potential incompatibilities with TS 3.6

8.1.0

Minor Changes

  • [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.

8.0.5

Patch Changes

  • [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

8.0.4

Patch Changes

8.0.3

Patch Changes

  • [patch]708028db86:

    Change all the imports to theme in Core to use multi entry points

8.0.2

Patch Changes

  • [patch]de35ce8c67:

    Updates component maintainers

8.0.1

Patch Changes

  • [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 withAnalyticsEvents
    • AnalyticsContextWrappedComp alias has been removed, please use withAnalyticsContext

    Breaking 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.
    • Type WithAnalyticsEventProps has been renamed to WithAnalyticsEventsProps to match source code
    • Type CreateUIAnalyticsEventSignature has been renamed to CreateUIAnalyticsEvent to match source code
    • Type UIAnalyticsEventHandlerSignature has been renamed to UIAnalyticsEventHandler to match source code
    • Type AnalyticsEventsPayload has been renamed to AnalyticsEventPayload
    • Type ObjectType has been removed, please use Record<string, any> or [key: string]: any
    • Type UIAnalyticsEventInterface has been removed, please use UIAnalyticsEvent
    • Type AnalyticsEventInterface has been removed, please use AnalyticsEvent
    • Type CreateAndFireEventFunction removed and should now be inferred by TypeScript
    • Type AnalyticsEventUpdater removed and should now be inferred by TypeScript

8.0.0

Major Changes

  • [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.

7.0.4

Patch Changes

  • [patch]9f8ab1084b:

    Consume analytics-next ts type definitions as an ambient declaration.

7.0.3

7.0.2

Patch Changes

  • [patch]4615439434:

    index.ts will now be ignored when publishing to npm

7.0.1

7.0.0

  • [major]7c17b35107:

    • Updates react and react-dom peer dependencies to react@^16.8.0 and react-dom@^16.8.0. To use this package, please ensure you use at least this version of react and react-dom.

6.0.4

6.0.3

6.0.2

  • [patch]3ff7cfeeb7:

    • Internal changes only. Toggle is now SSR-friendly.

6.0.1

6.0.0

  • [major]76299208e6:

    • Drop ES5 from all the flow modules

    Dropping CJS support in all @atlaskit packages

    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.

5.0.15

5.0.14

5.0.13

5.0.12

5.0.11

5.0.10

  • [patch] Adds missing implicit @babel/runtime dependency b71751b

5.0.9

5.0.8

  • [patch] Adds sideEffects: false to allow proper tree shaking b5d6d04

5.0.6

5.0.5

5.0.4

5.0.3

5.0.2

  • [patch] Fixed large toggle icon size and improved dark mode style 7c1166b
  • [none] Updated dependencies 7c1166b

5.0.1

5.0.0

4.0.3

4.0.2

4.0.1

4.0.0

3.0.2

3.0.0

  • [major] Bump to React 16.3. 4251858

2.9.1

  • [patch] Re-releasing due to potentially broken babel release 9ed0bba

2.9.0

  • [minor] Update styled-components dependency to support versions 1.4.6 - 3 ceccf30

2.8.4

2.8.3

  • [patch] Packages Flow types for elements components 3111e74

2.8.2

  • [patch] Change incorrect type info ce915ea

2.8.1

  • [patch] Flatten examples for easier consumer use 145b632

2.8.0

  • [minor] Add React 16 support. 12ea6e4

2.7.1

  • [patch] Fix toggle icon alignment bafb82b

2.7.0

  • [minor] Adding flow types and moving to new repo c9f3246

2.6.4 (2017-11-17)

  • bug fix; bumping internal dependencies to latest version (a19b26d)

2.6.3 (2017-10-26)

  • bug fix; fix to rebuild stories (793b2a7)

2.6.2 (2017-10-22)

  • bug fix; update styled components dep and react peerDep (5539ada)

2.6.1 (2017-09-28)

  • bug fix; active state is now properly applied (c1ee840)
  • bug fix; use withTheme to get theme for icon color (1b554a1)
  • bug fix; update toggle darkmode colors (e2e4727)

2.6.0 (2017-09-18)

  • feature; add dark mode to toggle (ec57939)

2.5.0 (2017-09-13)

  • feature; update dependencies for toggle (ae1a0ca)

2.4.3 (2017-08-11)

  • bug fix; fix the theme-dependency (db90333)

2.4.2 (2017-07-27)

  • fix; rename jsnext:main to jsnext:experimental:main temporarily (c7508e0)

2.4.1 (2017-07-25)

  • fix; use class transform in loose mode in babel to improve load performance in apps (fde719a)

2.1.0 (2017-07-17)

  • fix; rerelease, failed prepublish scripts (5fd82f8)
  • feature; added ES module builds to dist and add jsnext:main to most ADG packages (ea76507)

2.0.5 (2017-07-13)

  • fix; add prop-types as a dependency to avoid React 15.x warnings (92598eb)

2.0.4 (2017-05-18)

  • fix; remove state from ToggleStateless (631252c)

2.0.3 (2017-04-27)

  • fix; update legal copy to be more clear. Not all modules include ADG license. (f3a945e)

2.0.2 (2017-04-26)

  • fix; update legal copy and fix broken links for component README on npm. New contribution and (0b3e454)

2.0.1 (2017-04-11)

  • fix; update toggle readme story with new readme component (31f7e4a)

2.0.0 (2017-04-03)

  • fix; refactor the toggle component to use styled-components (c735164)
  • breaking; added peerDependency "styled-components”, removed dependency “classnames”
  • ISSUES CLOSED: AK-2004

1.0.6 (2017-03-23)

  • fix; Empty commit to release the component (49c08ee)

1.0.4 (2017-03-21)

  • fix; maintainers for all the packages were added (261d00a)

1.0.3 (2017-02-16)

  • fix; refactor stories to use // rather than http:// (a0826cf)

1.0.2 (2017-02-09)

  • fix; avoiding binding render to this (40c9951)

1.0.1 (2017-02-07)

  • fix; Updates package to use scoped ak packages (4923aa0)