@atlaskit/focus-ring 0.2.2 → 0.2.6

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 +26 -0
  2. package/README.md +2 -2
  3. package/dist/cjs/focus-ring.js +7 -17
  4. package/dist/cjs/version.json +1 -1
  5. package/dist/es2019/focus-ring.js +7 -16
  6. package/dist/es2019/version.json +1 -1
  7. package/dist/esm/focus-ring.js +7 -16
  8. package/dist/esm/version.json +1 -1
  9. package/dist/types/focus-ring.d.ts +2 -11
  10. package/package.json +8 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,31 @@
1
1
  # @atlaskit/focus-ring
2
2
 
3
+ ## 0.2.6
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 0.2.5
10
+
11
+ ### Patch Changes
12
+
13
+ - [`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.
14
+ - Updated dependencies
15
+
16
+ ## 0.2.4
17
+
18
+ ### Patch Changes
19
+
20
+ - [`6c1c909296d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c1c909296d) - [ux] When composing elements that define class name they will now be correctly retained.
21
+ - Updated dependencies
22
+
23
+ ## 0.2.3
24
+
25
+ ### Patch Changes
26
+
27
+ - [`34282240102`](https://bitbucket.org/atlassian/atlassian-frontend/commits/34282240102) - Adds explicit type to button usages components.
28
+
3
29
  ## 0.2.2
4
30
 
5
31
  ### 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,15 +11,13 @@ 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
15
  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)),
16
+ 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, ")")),
19
17
  outline: 'none'
20
18
  });
21
19
  var baseInsetStyles = (0, _core.css)({
22
- boxShadow: "inset 0px 0px 0px 2px ".concat((0, _tokens.token)('color.border.focus', _colors.B100)),
20
+ boxShadow: "inset 0px 0px 0px 2px ".concat("var(--ds-border-focus, ".concat(_colors.B100, ")")),
23
21
  outline: 'none'
24
22
  });
25
23
  var focusRingStyles = (0, _core.css)({
@@ -48,30 +46,22 @@ var insetFocusRingStyles = (0, _core.css)({
48
46
  /**
49
47
  * __Focus ring__
50
48
  *
51
- * A focus ring is used to apply accessibile styles to a focusable element.
52
- *
53
- * @example
54
- * ```jsx
55
- * import FocusRing from '@atlaskit/focus-ring';
49
+ * A focus ring is used indicate the currently focused item.
56
50
  *
57
- * const MyFocusableInput = () => (
58
- * <FocusRing>
59
- * <Input />
60
- * </FocusRing>
61
- * );
62
- * ```
51
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/focus-ring)
63
52
  */
64
53
 
65
54
  var FocusRing = function FocusRing(_ref) {
66
55
  var children = _ref.children,
67
56
  isInset = _ref.isInset;
68
57
  return (0, _core.jsx)(_core.ClassNames, null, function (_ref2) {
69
- var css = _ref2.css;
58
+ var css = _ref2.css,
59
+ cx = _ref2.cx;
70
60
  return _react.Children.only(
71
61
  /*#__PURE__*/
72
62
  // eslint-disable-next-line @repo/internal/react/no-clone-element
73
63
  (0, _react.cloneElement)(children, {
74
- className: css([isInset ? insetFocusRingStyles : focusRingStyles, children.className])
64
+ className: cx([css(isInset ? insetFocusRingStyles : focusRingStyles), children && children.props.className])
75
65
  }));
76
66
  });
77
67
  };
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/focus-ring",
3
- "version": "0.2.2",
3
+ "version": "0.2.6",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/focus-ring.js CHANGED
@@ -2,13 +2,12 @@
2
2
  import { Children, cloneElement } from 'react';
3
3
  import { ClassNames, css, jsx } from '@emotion/core';
4
4
  import { B100, N0 } from '@atlaskit/theme/colors';
5
- import { token } from '@atlaskit/tokens';
6
5
  const baseFocusStyles = css({
7
- boxShadow: `0 0 0 2px ${token('color.background.default', N0)}, 0 0 0 4px ${token('color.border.focus', B100)}`,
6
+ boxShadow: `0 0 0 2px ${`var(--ds-background-default, ${N0})`}, 0 0 0 4px ${`var(--ds-border-focus, ${B100})`}`,
8
7
  outline: 'none'
9
8
  });
10
9
  const baseInsetStyles = css({
11
- boxShadow: `inset 0px 0px 0px 2px ${token('color.border.focus', B100)}`,
10
+ boxShadow: `inset 0px 0px 0px 2px ${`var(--ds-border-focus, ${B100})`}`,
12
11
  outline: 'none'
13
12
  });
14
13
  const focusRingStyles = css({
@@ -37,30 +36,22 @@ const insetFocusRingStyles = css({
37
36
  /**
38
37
  * __Focus ring__
39
38
  *
40
- * A focus ring is used to apply accessibile styles to a focusable element.
39
+ * A focus ring is used indicate the currently focused item.
41
40
  *
42
- * @example
43
- * ```jsx
44
- * import FocusRing from '@atlaskit/focus-ring';
45
- *
46
- * const MyFocusableInput = () => (
47
- * <FocusRing>
48
- * <Input />
49
- * </FocusRing>
50
- * );
51
- * ```
41
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/focus-ring)
52
42
  */
53
43
 
54
44
  const FocusRing = ({
55
45
  children,
56
46
  isInset
57
47
  }) => jsx(ClassNames, null, ({
58
- css
48
+ css,
49
+ cx
59
50
  }) => Children.only(
60
51
  /*#__PURE__*/
61
52
  // eslint-disable-next-line @repo/internal/react/no-clone-element
62
53
  cloneElement(children, {
63
- className: css([isInset ? insetFocusRingStyles : focusRingStyles, children.className])
54
+ className: cx([css(isInset ? insetFocusRingStyles : focusRingStyles), children && children.props.className])
64
55
  })));
65
56
 
66
57
  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.2",
3
+ "version": "0.2.6",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/focus-ring.js CHANGED
@@ -2,13 +2,12 @@
2
2
  import { Children, cloneElement } from 'react';
3
3
  import { ClassNames, css, jsx } from '@emotion/core';
4
4
  import { B100, N0 } from '@atlaskit/theme/colors';
5
- import { token } from '@atlaskit/tokens';
6
5
  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)),
6
+ boxShadow: "0 0 0 2px ".concat("var(--ds-background-default, ".concat(N0, ")"), ", 0 0 0 4px ").concat("var(--ds-border-focus, ".concat(B100, ")")),
8
7
  outline: 'none'
9
8
  });
10
9
  var baseInsetStyles = css({
11
- boxShadow: "inset 0px 0px 0px 2px ".concat(token('color.border.focus', B100)),
10
+ boxShadow: "inset 0px 0px 0px 2px ".concat("var(--ds-border-focus, ".concat(B100, ")")),
12
11
  outline: 'none'
13
12
  });
14
13
  var focusRingStyles = css({
@@ -37,30 +36,22 @@ var insetFocusRingStyles = css({
37
36
  /**
38
37
  * __Focus ring__
39
38
  *
40
- * A focus ring is used to apply accessibile styles to a focusable element.
39
+ * A focus ring is used indicate the currently focused item.
41
40
  *
42
- * @example
43
- * ```jsx
44
- * import FocusRing from '@atlaskit/focus-ring';
45
- *
46
- * const MyFocusableInput = () => (
47
- * <FocusRing>
48
- * <Input />
49
- * </FocusRing>
50
- * );
51
- * ```
41
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/focus-ring)
52
42
  */
53
43
 
54
44
  var FocusRing = function FocusRing(_ref) {
55
45
  var children = _ref.children,
56
46
  isInset = _ref.isInset;
57
47
  return jsx(ClassNames, null, function (_ref2) {
58
- var css = _ref2.css;
48
+ var css = _ref2.css,
49
+ cx = _ref2.cx;
59
50
  return Children.only(
60
51
  /*#__PURE__*/
61
52
  // eslint-disable-next-line @repo/internal/react/no-clone-element
62
53
  cloneElement(children, {
63
- className: css([isInset ? insetFocusRingStyles : focusRingStyles, children.className])
54
+ className: cx([css(isInset ? insetFocusRingStyles : focusRingStyles), children && children.props.className])
64
55
  }));
65
56
  });
66
57
  };
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/focus-ring",
3
- "version": "0.2.2",
3
+ "version": "0.2.6",
4
4
  "sideEffects": false
5
5
  }
package/dist/types/focus-ring.d.ts CHANGED
@@ -4,18 +4,9 @@ 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
8
  *
9
- * @example
10
- * ```jsx
11
- * import FocusRing from '@atlaskit/focus-ring';
12
- *
13
- * const MyFocusableInput = () => (
14
- * <FocusRing>
15
- * <Input />
16
- * </FocusRing>
17
- * );
18
- * ```
9
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/focus-ring)
19
10
  */
20
11
  declare const FocusRing: FC<FocusRingProps>;
21
12
  export default FocusRing;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@atlaskit/focus-ring",
3
- "version": "0.2.2",
4
- "description": "A focus ring is used to apply accessibile styles to a focusable element.",
3
+ "version": "0.2.6",
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.5.0",
31
30
  "@babel/runtime": "^7.0.0",
32
31
  "@emotion/core": "^10.0.9"
33
32
  },
@@ -35,7 +34,6 @@
35
34
  "react": "^16.8.0"
36
35
  },
37
36
  "devDependencies": {
38
- "@atlaskit/build-utils": "*",
39
37
  "@atlaskit/docs": "*",
40
38
  "@atlaskit/ssr": "*",
41
39
  "@atlaskit/visual-regression": "*",
@@ -53,7 +51,10 @@
53
51
  },
54
52
  "@repo/internal": {
55
53
  "design-system": "v1",
56
- "styling": "emotion",
54
+ "styling": [
55
+ "static",
56
+ "emotion"
57
+ ],
57
58
  "ui-components": "lite-mode",
58
59
  "analytics": "analytics-next",
59
60
  "theming": "tokens",