Releases: discord/focus-rings
v1.1.0 - Toggle ring visibility through JS
This version expands FocusRingAnimationManager
to also provide a global toggle for whether focus rings will be rendered at all. This is useful for when applications only want to render rings when the user is in a "keyboard mode" or for any other reason.
The scope of changes is:
FocusRingAnimationManager
->FocusRingManager
.FocusRingManager.ringsEnabled
is a boolean indicating whether rings are currently allowed to render.FocusRingManager.setRingsEnabled(enabled: boolean)
is a function to change theringsEnabled
value. It will also force the rings to immediately re-render to pick up this value.
v1.0.8 - Fix default package export compatibility
v1.0.6 changed how this package was built and bundled, and unfortunately got compatibility backwards, meaning the default export was a bundle that required ES module support to run (which node
would not be able to import properly) rather than a CommonJS bundle. This release fixes that by making CJS the default export and providing the ES module for environments that support it.
v1.0.7
v1.0.6 - Add configuration for light/dark ring colors and thresholds
#11 Adds themeOptions
as a prop to FocusRingScope
, allowing consumers to change the brightness threshold that determines whether a light or dark focus ring is presented. It also adds var(--focus-light)
and var(--focus-dark)
to complement the existing var(--focus-primary)
, allowing consumers to control all 3 possible ring colors from their own CSS.
This release also restructures the repository into a more modern monorepo format.
v1.0.5 - Fix border radius calculations in Firefox
#10 fixes an issue where Firefox would not return a value for borderRadius
from the computed style of an element. All major browsers should now have the correct border radius for each corner.
v1.0.4 - Fix rings staying enabled too long
Thanks to #6, focus rings should now properly hide when the enabled
prop changes from true
to false
.