Focus ring
A focus ring is used to visually indicate the currently focused item.
Usage
import FocusRing from '@atlaskit/focus-ring';
A focus ring clearly indicates which item has keyboard focus.
A focus ring is used to visually indicate the currently focused item.
import FocusRing from '@atlaskit/focus-ring';
#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
4660ec858a305
-
Update React
from v16 to v18845d6a4956e61
-
Update dependencies.9f62ecec4d422
-
Update dependencies.ed07db7789d4e
-
Remove Compiled variant.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.#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 for
reactand
react-domfor
/platform` packages.
c733254a2dd6e
-
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.5f51c15a6d33f
-
Adds a :focus
style reset to prevent :focus
styles with lower specificity from leaking
through.a53c45efeac1
-
Add support for React 18 in non-strict mode.6b1707c169e0
-
The internal composition of this component has changed. There is no expected change in behaviour.8d4e99057fe0
-
Upgrade Typescript from 4.9.5
to 5.4.2
b037e5451037
-
Update new button text color fallback for default theme (non-token) to match that of old button
current text color1e90520801a
- Added
this package into push model consumption.63ee052ee1b
- Fix
focus-ring border width token with border.width.outline
ce22a54e852
- [ux]
update focus ring outline border.focused fallback to B200 to meet contrastb1bdec7cce2
- Internal
change to enforce token usage for spacing properties. There is no expected visual or behaviour
change.9d00501a414
- Ensure
legacy types are published for TS 4.5-4.841fae2c6f68
- Upgrade
Typescript from 4.5.5
to 4.9.5
56507598609
- Skip
minor dependency bumpc23cf0b085d
- Adds
display name to component for React devtools debugging.7f5f23dcb68
-
Introduce shape tokens to some packages.71bf011db22
- Focus
ring inset styles are now applied via outline - consistent with offset styles.b5d79ded842
- Updates
@emotion/core
to @emotion/react
; v10 to v11. There is no expected behavior change.8cc2f888c83
- Upgrade
Typescript from 4.3.5
to 4.5.5
8d4228767b0
- Upgrade
Typescript from 4.2.4
to 4.3.5
.cb2392f6d33
- Upgrade
to TypeScript 4.2.43e1a93c6b67
- Releases
FocusRing to v1.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
.19d72473dfb
- Updates
usage of deprecated token names so they're aligned with the latest naming conventions. No UI or
visual changes19d72473dfb
- [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.f460cc7c411
- Builds
for this package now pass through a tokens babel plugin, removing runtime invocations of the
tokens() function and improving bundle size.6c1c909296d
- [ux]
When composing elements that define class name they will now be correctly retained.34282240102
- Adds
explicit type to button usages components.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.9c9296f2959
- Fix bug
where the package was being exported from the wrong file.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.229b32842b5
- Fix
.npmignore and tsconfig.json for testsd3265f19be
- Transpile
packages using babel rather than tsc5f58283e1f
- 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.b443b5a60f
- Renamed
template package