@atlaskit/focus-ring 0.2.6 → 0.2.7

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/focus-ring
 
+## 0.2.7
+
+### Patch Changes
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Updates usage of deprecated token names so they're aligned with the latest naming conventions. No UI or visual changes
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/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

package/dist/cjs/focus-ring.js

@@ -12,18 +12,19 @@ var _core = require("@emotion/core");
 var _colors = require("@atlaskit/theme/colors");
 
 /** @jsx jsx */
-var baseFocusStyles = (0, _core.css)({
-  boxShadow: "0 0 0 2px ".concat("var(--ds-background-default, ".concat(_colors.N0, ")"), ", 0 0 0 4px ").concat("var(--ds-border-focus, ".concat(_colors.B100, ")")),
-  outline: 'none'
-});
+var BORDER_WIDTH = 2;
+var focusOutsideStyles = {
+  outlineOffset: BORDER_WIDTH,
+  outline: "".concat(BORDER_WIDTH, "px solid ").concat("var(--ds-border-focused, ".concat(_colors.B100, ")"))
+};
 var baseInsetStyles = (0, _core.css)({
-  boxShadow: "inset 0px 0px 0px 2px ".concat("var(--ds-border-focus, ".concat(_colors.B100, ")")),
+  boxShadow: "inset 0px 0px 0px ".concat(BORDER_WIDTH, "px ").concat("var(--ds-border-focused, ".concat(_colors.B100, ")")),
   outline: 'none'
 });
 var focusRingStyles = (0, _core.css)({
-  '&:focus-visible': baseFocusStyles,
+  '&:focus-visible': focusOutsideStyles,
   '@supports not selector(*:focus-visible)': {
-    '&:focus': baseFocusStyles
+    '&:focus': focusOutsideStyles
   },
   '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
     '&:focus-visible': {
@@ -49,6 +50,17 @@ var insetFocusRingStyles = (0, _core.css)({
  * A focus ring is used indicate the currently focused item.
  *
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/focus-ring)
+ *
+ * @example
+ * ```jsx
+ * import FocusRing from '@atlaskit/focus-ring';
+ *
+ * const InteractiveComponent = () => (
+ *   <FocusRing>
+ *     <button type="button">Hello</button>
+ *   </FocusRing>
+ * )
+ * ```
  */
 
 var FocusRing = function FocusRing(_ref) {

package/dist/cjs/version.json

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

package/dist/es2019/focus-ring.js

@@ -1,19 +1,20 @@
 /** @jsx jsx */
 import { Children, cloneElement } from 'react';
 import { ClassNames, css, jsx } from '@emotion/core';
-import { B100, N0 } from '@atlaskit/theme/colors';
-const baseFocusStyles = css({
-  boxShadow: `0 0 0 2px ${`var(--ds-background-default, ${N0})`}, 0 0 0 4px ${`var(--ds-border-focus, ${B100})`}`,
-  outline: 'none'
-});
+import { B100 } from '@atlaskit/theme/colors';
+const BORDER_WIDTH = 2;
+const focusOutsideStyles = {
+  outlineOffset: BORDER_WIDTH,
+  outline: `${BORDER_WIDTH}px solid ${`var(--ds-border-focused, ${B100})`}`
+};
 const baseInsetStyles = css({
-  boxShadow: `inset 0px 0px 0px 2px ${`var(--ds-border-focus, ${B100})`}`,
+  boxShadow: `inset 0px 0px 0px ${BORDER_WIDTH}px ${`var(--ds-border-focused, ${B100})`}`,
   outline: 'none'
 });
 const focusRingStyles = css({
-  '&:focus-visible': baseFocusStyles,
+  '&:focus-visible': focusOutsideStyles,
   '@supports not selector(*:focus-visible)': {
-    '&:focus': baseFocusStyles
+    '&:focus': focusOutsideStyles
   },
   '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
     '&:focus-visible': {
@@ -39,6 +40,17 @@ const insetFocusRingStyles = css({
  * A focus ring is used indicate the currently focused item.
  *
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/focus-ring)
+ *
+ * @example
+ * ```jsx
+ * import FocusRing from '@atlaskit/focus-ring';
+ *
+ * const InteractiveComponent = () => (
+ *   <FocusRing>
+ *     <button type="button">Hello</button>
+ *   </FocusRing>
+ * )
+ * ```
  */
 
 const FocusRing = ({

package/dist/es2019/version.json

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

package/dist/esm/focus-ring.js

@@ -1,19 +1,20 @@
 /** @jsx jsx */
 import { Children, cloneElement } from 'react';
 import { ClassNames, css, jsx } from '@emotion/core';
-import { B100, N0 } from '@atlaskit/theme/colors';
-var baseFocusStyles = css({
-  boxShadow: "0 0 0 2px ".concat("var(--ds-background-default, ".concat(N0, ")"), ", 0 0 0 4px ").concat("var(--ds-border-focus, ".concat(B100, ")")),
-  outline: 'none'
-});
+import { B100 } from '@atlaskit/theme/colors';
+var BORDER_WIDTH = 2;
+var focusOutsideStyles = {
+  outlineOffset: BORDER_WIDTH,
+  outline: "".concat(BORDER_WIDTH, "px solid ").concat("var(--ds-border-focused, ".concat(B100, ")"))
+};
 var baseInsetStyles = css({
-  boxShadow: "inset 0px 0px 0px 2px ".concat("var(--ds-border-focus, ".concat(B100, ")")),
+  boxShadow: "inset 0px 0px 0px ".concat(BORDER_WIDTH, "px ").concat("var(--ds-border-focused, ".concat(B100, ")")),
   outline: 'none'
 });
 var focusRingStyles = css({
-  '&:focus-visible': baseFocusStyles,
+  '&:focus-visible': focusOutsideStyles,
   '@supports not selector(*:focus-visible)': {
-    '&:focus': baseFocusStyles
+    '&:focus': focusOutsideStyles
   },
   '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
     '&:focus-visible': {
@@ -39,6 +40,17 @@ var insetFocusRingStyles = css({
  * A focus ring is used indicate the currently focused item.
  *
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/focus-ring)
+ *
+ * @example
+ * ```jsx
+ * import FocusRing from '@atlaskit/focus-ring';
+ *
+ * const InteractiveComponent = () => (
+ *   <FocusRing>
+ *     <button type="button">Hello</button>
+ *   </FocusRing>
+ * )
+ * ```
  */
 
 var FocusRing = function FocusRing(_ref) {

package/dist/esm/version.json

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

package/dist/types/focus-ring.d.ts

@@ -7,6 +7,17 @@ import type { FocusRingProps } from './types';
  * A focus ring is used indicate the currently focused item.
  *
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/focus-ring)
+ *
+ * @example
+ * ```jsx
+ * import FocusRing from '@atlaskit/focus-ring';
+ *
+ * const InteractiveComponent = () => (
+ *   <FocusRing>
+ *     <button type="button">Hello</button>
+ *   </FocusRing>
+ * )
+ * ```
  */
 declare const FocusRing: FC<FocusRingProps>;
 export default FocusRing;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/focus-ring",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "A focus ring is used to indicate the currently focused item.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.5.0",
+    "@atlaskit/tokens": "^0.6.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -34,8 +34,11 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
+    "@atlaskit/button": "^16.1.2",
     "@atlaskit/docs": "*",
+    "@atlaskit/progress-indicator": "^9.1.0",
     "@atlaskit/ssr": "*",
+    "@atlaskit/textfield": "^5.1.2",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",