@atlaskit/focus-ring 1.3.3 → 1.3.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/focus-ring
 
+## 1.3.4
+
+### Patch Changes
+
+- [`ce22a54e852`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ce22a54e852) - [ux] update focus ring outline border.focused fallback to B200 to meet contrast
+
 ## 1.3.3
 
 ### Patch Changes

package/dist/cjs/focus-ring.js

@@ -10,14 +10,16 @@ var _react2 = require("@emotion/react");
 
 var BORDER_WIDTH = 2;
 var baseFocusOutsideStyles = (0, _react2.css)({
-  outline: "".concat(BORDER_WIDTH, "px solid ", "var(--ds-border-focused, #4C9AFF)"),
+  outline: "".concat(BORDER_WIDTH, "px solid ", "var(--ds-border-focused, #2684FF)"),
   outlineOffset: BORDER_WIDTH
 });
 var baseInsetStyles = (0, _react2.css)({
-  outlineColor: "var(--ds-border-focused, #4C9AFF)",
+  outlineColor: "var(--ds-border-focused, #2684FF)",
   outlineOffset: -BORDER_WIDTH,
   outlineStyle: 'solid',
-  outlineWidth: BORDER_WIDTH
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  // TODO Delete this comment after verifying space token -> previous value `BORDER_WIDTH`
+  outlineWidth: "var(--ds-border-width, 2px)"
 });
 var focusRingStyles = (0, _react2.css)({
   '&:focus-visible': baseFocusOutsideStyles,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/focus-ring",
-	"version": "1.3.3",
+	"version": "1.3.4",
 	"sideEffects": false
 }

package/dist/es2019/focus-ring.js

@@ -3,14 +3,16 @@ import { Children, cloneElement, memo } from 'react';
 import { ClassNames, css, jsx } from '@emotion/react';
 const BORDER_WIDTH = 2;
 const baseFocusOutsideStyles = css({
-  outline: `${BORDER_WIDTH}px solid ${"var(--ds-border-focused, #4C9AFF)"}`,
+  outline: `${BORDER_WIDTH}px solid ${"var(--ds-border-focused, #2684FF)"}`,
   outlineOffset: BORDER_WIDTH
 });
 const baseInsetStyles = css({
-  outlineColor: "var(--ds-border-focused, #4C9AFF)",
+  outlineColor: "var(--ds-border-focused, #2684FF)",
   outlineOffset: -BORDER_WIDTH,
   outlineStyle: 'solid',
-  outlineWidth: BORDER_WIDTH
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  // TODO Delete this comment after verifying space token -> previous value `BORDER_WIDTH`
+  outlineWidth: "var(--ds-border-width, 2px)"
 });
 const focusRingStyles = css({
   '&:focus-visible': baseFocusOutsideStyles,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/focus-ring",
-	"version": "1.3.3",
+	"version": "1.3.4",
 	"sideEffects": false
 }

package/dist/esm/focus-ring.js

@@ -3,14 +3,16 @@ import { Children, cloneElement, memo } from 'react';
 import { ClassNames, css, jsx } from '@emotion/react';
 var BORDER_WIDTH = 2;
 var baseFocusOutsideStyles = css({
-  outline: "".concat(BORDER_WIDTH, "px solid ", "var(--ds-border-focused, #4C9AFF)"),
+  outline: "".concat(BORDER_WIDTH, "px solid ", "var(--ds-border-focused, #2684FF)"),
   outlineOffset: BORDER_WIDTH
 });
 var baseInsetStyles = css({
-  outlineColor: "var(--ds-border-focused, #4C9AFF)",
+  outlineColor: "var(--ds-border-focused, #2684FF)",
   outlineOffset: -BORDER_WIDTH,
   outlineStyle: 'solid',
-  outlineWidth: BORDER_WIDTH
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  // TODO Delete this comment after verifying space token -> previous value `BORDER_WIDTH`
+  outlineWidth: "var(--ds-border-width, 2px)"
 });
 var focusRingStyles = css({
   '&:focus-visible': baseFocusOutsideStyles,

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/focus-ring",
-	"version": "1.3.3",
+	"version": "1.3.4",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/focus-ring",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "A focus ring is used to indicate the currently focused item.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -9,7 +9,7 @@
   },
   "atlassian": {
     "team": "Design System Team",
-    "releaseModel": "scheduled",
+    "releaseModel": "continuous",
     "website": {
       "name": "Focus ring",
       "category": "Components"
@@ -34,7 +34,7 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.4.0",
+    "@atlaskit/tokens": "^1.13.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -42,15 +42,7 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.7.0",
-    "@atlaskit/docs": "*",
-    "@atlaskit/progress-indicator": "^9.5.0",
-    "@atlaskit/section-message": "^6.4.0",
-    "@atlaskit/ssr": "*",
-    "@atlaskit/textfield": "^5.5.0",
     "@atlaskit/visual-regression": "*",
-    "@atlaskit/visually-hidden": "^1.2.0",
-    "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
     "@testing-library/react": "^12.1.5",
     "react-dom": "^16.8.0",

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,41 @@
+## API Report File for "@atlaskit/focus-ring"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { FC } from 'react';
+import type { FocusEventHandler } from 'react';
+import type { ReactElement } from 'react';
+
+// @public (undocumented)
+export interface FocusEventHandlers {
+    // (undocumented)
+    onBlur: FocusEventHandler;
+    // (undocumented)
+    onFocus: FocusEventHandler;
+}
+
+// @public
+const FocusRing: FC<FocusRingProps>;
+export default FocusRing;
+
+// @public (undocumented)
+export interface FocusRingProps {
+    children: ReactElement;
+    focus?: FocusState;
+    isInset?: boolean;
+}
+
+// @public (undocumented)
+export type FocusState = 'off' | 'on';
+
+// @public
+export const useFocusRing: (initialState?: FocusState) => {
+    readonly focusState: "off" | "on";
+    readonly focusProps: FocusEventHandlers;
+};
+
+// (No @packageDocumentation comment for this package)
+
+```