@atlaskit/focus-ring 0.2.3 → 0.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/README.md +2 -2
  3. package/dist/cjs/focus-ring.js +19 -17
  4. package/dist/cjs/version.json +1 -1
  5. package/dist/es2019/focus-ring.js +20 -17
  6. package/dist/es2019/version.json +1 -1
  7. package/dist/esm/focus-ring.js +20 -17
  8. package/dist/esm/version.json +1 -1
  9. package/dist/types/focus-ring.d.ts +8 -6
  10. package/package.json +11 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,33 @@
1
1
  # @atlaskit/focus-ring
2
2
 
3
+ ## 0.2.7
4
+
5
+ ### Patch Changes
6
+
7
+ - [`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
8
+ - [`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.
9
+ - Updated dependencies
10
+
11
+ ## 0.2.6
12
+
13
+ ### Patch Changes
14
+
15
+ - Updated dependencies
16
+
17
+ ## 0.2.5
18
+
19
+ ### Patch Changes
20
+
21
+ - [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
22
+ - Updated dependencies
23
+
24
+ ## 0.2.4
25
+
26
+ ### Patch Changes
27
+
28
+ - [`6c1c909296d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c1c909296d) - [ux] When composing elements that define class name they will now be correctly retained.
29
+ - Updated dependencies
30
+
3
31
  ## 0.2.3
4
32
 
5
33
  ### Patch Changes
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
- # FocusRing
1
+ # Focus ring
2
2
 
3
- A focus ring is used to apply accessibile styles to a focusable element.
3
+ A focus ring is used indicate the currently focused item.
4
4
 
5
5
  ## Usage
6
6
 
package/dist/cjs/focus-ring.js CHANGED
@@ -11,21 +11,20 @@ var _core = require("@emotion/core");
11
11
 
12
12
  var _colors = require("@atlaskit/theme/colors");
13
13
 
14
- var _tokens = require("@atlaskit/tokens");
15
-
16
14
  /** @jsx jsx */
17
- var baseFocusStyles = (0, _core.css)({
18
- boxShadow: "0 0 0 2px ".concat((0, _tokens.token)('color.background.default', _colors.N0), ", 0 0 0 4px ").concat((0, _tokens.token)('color.border.focus', _colors.B100)),
19
- outline: 'none'
20
- });
15
+ var BORDER_WIDTH = 2;
16
+ var focusOutsideStyles = {
17
+ outlineOffset: BORDER_WIDTH,
18
+ outline: "".concat(BORDER_WIDTH, "px solid ").concat("var(--ds-border-focused, ".concat(_colors.B100, ")"))
19
+ };
21
20
  var baseInsetStyles = (0, _core.css)({
22
- boxShadow: "inset 0px 0px 0px 2px ".concat((0, _tokens.token)('color.border.focus', _colors.B100)),
21
+ boxShadow: "inset 0px 0px 0px ".concat(BORDER_WIDTH, "px ").concat("var(--ds-border-focused, ".concat(_colors.B100, ")")),
23
22
  outline: 'none'
24
23
  });
25
24
  var focusRingStyles = (0, _core.css)({
26
- '&:focus-visible': baseFocusStyles,
25
+ '&:focus-visible': focusOutsideStyles,
27
26
  '@supports not selector(*:focus-visible)': {
28
- '&:focus': baseFocusStyles
27
+ '&:focus': focusOutsideStyles
29
28
  },
30
29
  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
31
30
  '&:focus-visible': {
@@ -48,17 +47,19 @@ var insetFocusRingStyles = (0, _core.css)({
48
47
  /**
49
48
  * __Focus ring__
50
49
  *
51
- * A focus ring is used to apply accessibile styles to a focusable element.
50
+ * A focus ring is used indicate the currently focused item.
51
+ *
52
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/focus-ring)
52
53
  *
53
54
  * @example
54
55
  * ```jsx
55
56
  * import FocusRing from '@atlaskit/focus-ring';
56
57
  *
57
- * const MyFocusableInput = () => (
58
- * <FocusRing>
59
- * <Input />
60
- * </FocusRing>
61
- * );
58
+ * const InteractiveComponent = () => (
59
+ * <FocusRing>
60
+ * <button type="button">Hello</button>
61
+ * </FocusRing>
62
+ * )
62
63
  * ```
63
64
  */
64
65
 
@@ -66,12 +67,13 @@ var FocusRing = function FocusRing(_ref) {
66
67
  var children = _ref.children,
67
68
  isInset = _ref.isInset;
68
69
  return (0, _core.jsx)(_core.ClassNames, null, function (_ref2) {
69
- var css = _ref2.css;
70
+ var css = _ref2.css,
71
+ cx = _ref2.cx;
70
72
  return _react.Children.only(
71
73
  /*#__PURE__*/
72
74
  // eslint-disable-next-line @repo/internal/react/no-clone-element
73
75
  (0, _react.cloneElement)(children, {
74
- className: css([isInset ? insetFocusRingStyles : focusRingStyles, children.className])
76
+ className: cx([css(isInset ? insetFocusRingStyles : focusRingStyles), children && children.props.className])
75
77
  }));
76
78
  });
77
79
  };
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/focus-ring",
3
- "version": "0.2.3",
3
+ "version": "0.2.7",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/focus-ring.js CHANGED
@@ -1,20 +1,20 @@
1
1
  /** @jsx jsx */
2
2
  import { Children, cloneElement } from 'react';
3
3
  import { ClassNames, css, jsx } from '@emotion/core';
4
- import { B100, N0 } from '@atlaskit/theme/colors';
5
- import { token } from '@atlaskit/tokens';
6
- const baseFocusStyles = css({
7
- boxShadow: `0 0 0 2px ${token('color.background.default', N0)}, 0 0 0 4px ${token('color.border.focus', B100)}`,
8
- outline: 'none'
9
- });
4
+ import { B100 } from '@atlaskit/theme/colors';
5
+ const BORDER_WIDTH = 2;
6
+ const focusOutsideStyles = {
7
+ outlineOffset: BORDER_WIDTH,
8
+ outline: `${BORDER_WIDTH}px solid ${`var(--ds-border-focused, ${B100})`}`
9
+ };
10
10
  const baseInsetStyles = css({
11
- boxShadow: `inset 0px 0px 0px 2px ${token('color.border.focus', B100)}`,
11
+ boxShadow: `inset 0px 0px 0px ${BORDER_WIDTH}px ${`var(--ds-border-focused, ${B100})`}`,
12
12
  outline: 'none'
13
13
  });
14
14
  const focusRingStyles = css({
15
- '&:focus-visible': baseFocusStyles,
15
+ '&:focus-visible': focusOutsideStyles,
16
16
  '@supports not selector(*:focus-visible)': {
17
- '&:focus': baseFocusStyles
17
+ '&:focus': focusOutsideStyles
18
18
  },
19
19
  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
20
20
  '&:focus-visible': {
@@ -37,17 +37,19 @@ const insetFocusRingStyles = css({
37
37
  /**
38
38
  * __Focus ring__
39
39
  *
40
- * A focus ring is used to apply accessibile styles to a focusable element.
40
+ * A focus ring is used indicate the currently focused item.
41
+ *
42
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/focus-ring)
41
43
  *
42
44
  * @example
43
45
  * ```jsx
44
46
  * import FocusRing from '@atlaskit/focus-ring';
45
47
  *
46
- * const MyFocusableInput = () => (
47
- * <FocusRing>
48
- * <Input />
49
- * </FocusRing>
50
- * );
48
+ * const InteractiveComponent = () => (
49
+ * <FocusRing>
50
+ * <button type="button">Hello</button>
51
+ * </FocusRing>
52
+ * )
51
53
  * ```
52
54
  */
53
55
 
@@ -55,12 +57,13 @@ const FocusRing = ({
55
57
  children,
56
58
  isInset
57
59
  }) => jsx(ClassNames, null, ({
58
- css
60
+ css,
61
+ cx
59
62
  }) => Children.only(
60
63
  /*#__PURE__*/
61
64
  // eslint-disable-next-line @repo/internal/react/no-clone-element
62
65
  cloneElement(children, {
63
- className: css([isInset ? insetFocusRingStyles : focusRingStyles, children.className])
66
+ className: cx([css(isInset ? insetFocusRingStyles : focusRingStyles), children && children.props.className])
64
67
  })));
65
68
 
66
69
  export default FocusRing;
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/focus-ring",
3
- "version": "0.2.3",
3
+ "version": "0.2.7",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/focus-ring.js CHANGED
@@ -1,20 +1,20 @@
1
1
  /** @jsx jsx */
2
2
  import { Children, cloneElement } from 'react';
3
3
  import { ClassNames, css, jsx } from '@emotion/core';
4
- import { B100, N0 } from '@atlaskit/theme/colors';
5
- import { token } from '@atlaskit/tokens';
6
- var baseFocusStyles = css({
7
- boxShadow: "0 0 0 2px ".concat(token('color.background.default', N0), ", 0 0 0 4px ").concat(token('color.border.focus', B100)),
8
- outline: 'none'
9
- });
4
+ import { B100 } from '@atlaskit/theme/colors';
5
+ var BORDER_WIDTH = 2;
6
+ var focusOutsideStyles = {
7
+ outlineOffset: BORDER_WIDTH,
8
+ outline: "".concat(BORDER_WIDTH, "px solid ").concat("var(--ds-border-focused, ".concat(B100, ")"))
9
+ };
10
10
  var baseInsetStyles = css({
11
- boxShadow: "inset 0px 0px 0px 2px ".concat(token('color.border.focus', B100)),
11
+ boxShadow: "inset 0px 0px 0px ".concat(BORDER_WIDTH, "px ").concat("var(--ds-border-focused, ".concat(B100, ")")),
12
12
  outline: 'none'
13
13
  });
14
14
  var focusRingStyles = css({
15
- '&:focus-visible': baseFocusStyles,
15
+ '&:focus-visible': focusOutsideStyles,
16
16
  '@supports not selector(*:focus-visible)': {
17
- '&:focus': baseFocusStyles
17
+ '&:focus': focusOutsideStyles
18
18
  },
19
19
  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
20
20
  '&:focus-visible': {
@@ -37,17 +37,19 @@ var insetFocusRingStyles = css({
37
37
  /**
38
38
  * __Focus ring__
39
39
  *
40
- * A focus ring is used to apply accessibile styles to a focusable element.
40
+ * A focus ring is used indicate the currently focused item.
41
+ *
42
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/focus-ring)
41
43
  *
42
44
  * @example
43
45
  * ```jsx
44
46
  * import FocusRing from '@atlaskit/focus-ring';
45
47
  *
46
- * const MyFocusableInput = () => (
47
- * <FocusRing>
48
- * <Input />
49
- * </FocusRing>
50
- * );
48
+ * const InteractiveComponent = () => (
49
+ * <FocusRing>
50
+ * <button type="button">Hello</button>
51
+ * </FocusRing>
52
+ * )
51
53
  * ```
52
54
  */
53
55
 
@@ -55,12 +57,13 @@ var FocusRing = function FocusRing(_ref) {
55
57
  var children = _ref.children,
56
58
  isInset = _ref.isInset;
57
59
  return jsx(ClassNames, null, function (_ref2) {
58
- var css = _ref2.css;
60
+ var css = _ref2.css,
61
+ cx = _ref2.cx;
59
62
  return Children.only(
60
63
  /*#__PURE__*/
61
64
  // eslint-disable-next-line @repo/internal/react/no-clone-element
62
65
  cloneElement(children, {
63
- className: css([isInset ? insetFocusRingStyles : focusRingStyles, children.className])
66
+ className: cx([css(isInset ? insetFocusRingStyles : focusRingStyles), children && children.props.className])
64
67
  }));
65
68
  });
66
69
  };
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/focus-ring",
3
- "version": "0.2.3",
3
+ "version": "0.2.7",
4
4
  "sideEffects": false
5
5
  }
package/dist/types/focus-ring.d.ts CHANGED
@@ -4,17 +4,19 @@ import type { FocusRingProps } from './types';
4
4
  /**
5
5
  * __Focus ring__
6
6
  *
7
- * A focus ring is used to apply accessibile styles to a focusable element.
7
+ * A focus ring is used indicate the currently focused item.
8
+ *
9
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/focus-ring)
8
10
  *
9
11
  * @example
10
12
  * ```jsx
11
13
  * import FocusRing from '@atlaskit/focus-ring';
12
14
  *
13
- * const MyFocusableInput = () => (
14
- * <FocusRing>
15
- * <Input />
16
- * </FocusRing>
17
- * );
15
+ * const InteractiveComponent = () => (
16
+ * <FocusRing>
17
+ * <button type="button">Hello</button>
18
+ * </FocusRing>
19
+ * )
18
20
  * ```
19
21
  */
20
22
  declare const FocusRing: FC<FocusRingProps>;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@atlaskit/focus-ring",
3
- "version": "0.2.3",
4
- "description": "A focus ring is used to apply accessibile styles to a focusable element.",
3
+ "version": "0.2.7",
4
+ "description": "A focus ring is used to indicate the currently focused item.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
7
7
  "publishConfig": {
@@ -9,7 +9,6 @@
9
9
  },
10
10
  "atlassian": {
11
11
  "team": "Design System Team",
12
- "inPublicMirror": false,
13
12
  "releaseModel": "continuous",
14
13
  "website": {
15
14
  "name": "FocusRing"
@@ -26,8 +25,8 @@
26
25
  ".": "./src/index.tsx"
27
26
  },
28
27
  "dependencies": {
29
- "@atlaskit/theme": "^12.0.0",
30
- "@atlaskit/tokens": "^0.2.0",
28
+ "@atlaskit/theme": "^12.1.0",
29
+ "@atlaskit/tokens": "^0.6.0",
31
30
  "@babel/runtime": "^7.0.0",
32
31
  "@emotion/core": "^10.0.9"
33
32
  },
@@ -35,9 +34,11 @@
35
34
  "react": "^16.8.0"
36
35
  },
37
36
  "devDependencies": {
38
- "@atlaskit/build-utils": "*",
37
+ "@atlaskit/button": "^16.1.2",
39
38
  "@atlaskit/docs": "*",
39
+ "@atlaskit/progress-indicator": "^9.1.0",
40
40
  "@atlaskit/ssr": "*",
41
+ "@atlaskit/textfield": "^5.1.2",
41
42
  "@atlaskit/visual-regression": "*",
42
43
  "@atlaskit/webdriver-runner": "*",
43
44
  "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
@@ -53,7 +54,10 @@
53
54
  },
54
55
  "@repo/internal": {
55
56
  "design-system": "v1",
56
- "styling": "emotion",
57
+ "styling": [
58
+ "static",
59
+ "emotion"
60
+ ],
57
61
  "ui-components": "lite-mode",
58
62
  "analytics": "analytics-next",
59
63
  "theming": "tokens",