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

Package detail

@atlaskit/focus-ring

atlassian330.6kApache-2.03.0.1TypeScript support: included

A focus ring clearly indicates which item has keyboard focus.

readme

Focus ring

A focus ring is used to visually indicate the currently focused item.

Usage

import FocusRing from '@atlaskit/focus-ring';

changelog

@atlaskit/focus-ring

3.0.1

Patch Changes

  • Updated dependencies

3.0.0

Major Changes

Patch Changes

  • Updated dependencies

2.1.0

Minor Changes

Patch Changes

  • Updated dependencies

2.0.3

Patch Changes

2.0.2

Patch Changes

2.0.1

Patch Changes

  • Updated dependencies

2.0.0

Major Changes

1.7.0

Minor Changes

  • #159379 821ffec580412 - Adds an experimental Compiled CSS-in-JS entrypoint for our Focus Ring component. This requires specific setup that is not documented fully and is not intended for external consumption.

1.6.1

Patch Changes

  • Updated dependencies

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

1.5.0

Minor Changes

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

1.4.1

Patch Changes

  • #111297 5f51c15a6d33f - Adds a :focus style reset to prevent :focus styles with lower specificity from leaking through.

1.4.0

Minor Changes

1.3.9

Patch Changes

  • #83297 6b1707c169e0 - The internal composition of this component has changed. There is no expected change in behaviour.

1.3.8

Patch Changes

1.3.7

Patch Changes

  • #72130 b037e5451037 - Update new button text color fallback for default theme (non-token) to match that of old button current text color

1.3.6

Patch Changes

1.3.5

Patch Changes

1.3.4

Patch Changes

  • #37186 ce22a54e852 - [ux] update focus ring outline border.focused fallback to B200 to meet contrast

1.3.3

Patch Changes

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

1.3.2

Patch Changes

1.3.1

Patch Changes

1.3.0

Minor Changes

Patch Changes

  • Updated dependencies

1.2.6

Patch Changes

1.2.5

Patch Changes

1.2.4

Patch Changes

  • Updated dependencies

1.2.3

Patch Changes

  • Updated dependencies

1.2.2

Patch Changes

  • Updated dependencies

1.2.1

Patch Changes

  • Updated dependencies

1.2.0

Minor Changes

  • #26244 71bf011db22 - Focus ring inset styles are now applied via outline - consistent with offset styles.

1.1.0

Minor Changes

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

1.0.7

Patch Changes

1.0.6

Patch Changes

1.0.5

Patch Changes

  • Updated dependencies

1.0.4

Patch Changes

1.0.3

Patch Changes

  • Updated dependencies

1.0.2

Patch Changes

  • Updated dependencies

1.0.1

Patch Changes

  • Updated dependencies

1.0.0

Major Changes

Minor Changes

  • 63b8679585b - Adds an additional prop focus to the FocusRing to allow the component to also be controlled. This prop is designed to be used in conjunction with a complementary hook; useFocusRing.

0.2.7

Patch Changes

  • 19d72473dfb - Updates usage of deprecated token names so they're aligned with the latest naming conventions. No UI or visual changes
  • 19d72473dfb - [ux] The component has reworked its internal so that it can now better deal with issues where the background-color was obscured by the focus-ring box shadow.
  • Updated dependencies

0.2.6

Patch Changes

  • Updated dependencies

0.2.5

Patch Changes

  • #15998 f460cc7c411 - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
  • Updated dependencies

0.2.4

Patch Changes

  • #14777 6c1c909296d - [ux] When composing elements that define class name they will now be correctly retained.
  • Updated dependencies

0.2.3

Patch Changes

0.2.2

Patch Changes

  • Updated dependencies

0.2.1

Patch Changes

  • Updated dependencies

0.2.0

Minor Changes

  • #13302 c765dce3afb - [ux] Focus Ring now exposes an additional prop isInset to support inset focus states; for example on inputs, or textfields.
  • 0dac09c47b6 - [ux] Colors are now sourced through tokens.

Patch Changes

  • Updated dependencies

0.1.1

Patch Changes

  • #13232 9c9296f2959 - Fix bug where the package was being exported from the wrong file.

0.1.0

Minor Changes

  • #12837 5ab09801cfa - [ux] Updates focus-ring to use an offset box-shadow for its focus state.
  • adaa7913de0 - Initial release for the package. A Focus Ring can be used to compose focusable elements with a simple composable API.

Patch Changes

  • Updated dependencies

0.0.4

Patch Changes

0.0.3

Patch Changes

0.0.2

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.

0.0.1

Patch Changes