@atlaskit/focus-ring 3.0.3 → 3.0.5

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 (5) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/focus-ring.js +4 -4
  3. package/dist/es2019/focus-ring.js +4 -4
  4. package/dist/esm/focus-ring.js +4 -4
  5. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/focus-ring
2
2
 
3
+ ## 3.0.5
4
+
5
+ ### Patch Changes
6
+
7
+ - [`248faa32d4835`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/248faa32d4835) -
8
+ Internal changes to how borders are applied.
9
+
10
+ ## 3.0.4
11
+
12
+ ### Patch Changes
13
+
14
+ - [`f0662cd7a143e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f0662cd7a143e) -
15
+ Internal changes to how borders are applied.
16
+ - Updated dependencies
17
+
3
18
  ## 3.0.3
4
19
 
5
20
  ### Patch Changes
package/dist/cjs/focus-ring.js CHANGED
@@ -15,7 +15,7 @@ var _react2 = require("@emotion/react");
15
15
 
16
16
  var BORDER_WIDTH = 2;
17
17
  var baseFocusOutsideStyles = (0, _react2.css)({
18
- outline: "".concat(BORDER_WIDTH, "px solid ", "var(--ds-border-focused, #2684FF)"),
18
+ outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #2684FF)"),
19
19
  outlineOffset: BORDER_WIDTH
20
20
  });
21
21
  var baseInsetStyles = (0, _react2.css)({
@@ -23,7 +23,7 @@ var baseInsetStyles = (0, _react2.css)({
23
23
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
24
24
  outlineOffset: -BORDER_WIDTH,
25
25
  outlineStyle: 'solid',
26
- outlineWidth: "var(--ds-border-width-outline, 2px)"
26
+ outlineWidth: "var(--ds-border-width-focused, 2px)"
27
27
  });
28
28
  var focusRingStyles = (0, _react2.css)({
29
29
  // Focus styles used when :focus-visible isn't supported
@@ -38,7 +38,7 @@ var focusRingStyles = (0, _react2.css)({
38
38
  },
39
39
  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
40
40
  '&:focus-visible': {
41
- outline: '1px solid'
41
+ outline: "var(--ds-border-width, 1px)".concat(" solid")
42
42
  }
43
43
  }
44
44
  });
@@ -55,7 +55,7 @@ var insetFocusRingStyles = (0, _react2.css)({
55
55
  },
56
56
  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
57
57
  '&:focus-visible': {
58
- outline: '1px solid',
58
+ outline: "var(--ds-border-width, 1px)".concat(" solid"),
59
59
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
60
60
  outlineOffset: '-1px'
61
61
  }
package/dist/es2019/focus-ring.js CHANGED
@@ -8,7 +8,7 @@ import { Children, cloneElement, memo } from 'react';
8
8
  import { ClassNames, css, jsx } from '@emotion/react';
9
9
  const BORDER_WIDTH = 2;
10
10
  const baseFocusOutsideStyles = css({
11
- outline: `${BORDER_WIDTH}px solid ${"var(--ds-border-focused, #2684FF)"}`,
11
+ outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #2684FF)"}`,
12
12
  outlineOffset: BORDER_WIDTH
13
13
  });
14
14
  const baseInsetStyles = css({
@@ -16,7 +16,7 @@ const baseInsetStyles = css({
16
16
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
17
17
  outlineOffset: -BORDER_WIDTH,
18
18
  outlineStyle: 'solid',
19
- outlineWidth: "var(--ds-border-width-outline, 2px)"
19
+ outlineWidth: "var(--ds-border-width-focused, 2px)"
20
20
  });
21
21
  const focusRingStyles = css({
22
22
  // Focus styles used when :focus-visible isn't supported
@@ -31,7 +31,7 @@ const focusRingStyles = css({
31
31
  },
32
32
  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
33
33
  '&:focus-visible': {
34
- outline: '1px solid'
34
+ outline: `${"var(--ds-border-width, 1px)"} solid`
35
35
  }
36
36
  }
37
37
  });
@@ -48,7 +48,7 @@ const insetFocusRingStyles = css({
48
48
  },
49
49
  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
50
50
  '&:focus-visible': {
51
- outline: '1px solid',
51
+ outline: `${"var(--ds-border-width, 1px)"} solid`,
52
52
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
53
53
  outlineOffset: '-1px'
54
54
  }
package/dist/esm/focus-ring.js CHANGED
@@ -8,7 +8,7 @@ import { Children, cloneElement, memo } from 'react';
8
8
  import { ClassNames, css, jsx } from '@emotion/react';
9
9
  var BORDER_WIDTH = 2;
10
10
  var baseFocusOutsideStyles = css({
11
- outline: "".concat(BORDER_WIDTH, "px solid ", "var(--ds-border-focused, #2684FF)"),
11
+ outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #2684FF)"),
12
12
  outlineOffset: BORDER_WIDTH
13
13
  });
14
14
  var baseInsetStyles = css({
@@ -16,7 +16,7 @@ var baseInsetStyles = css({
16
16
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
17
17
  outlineOffset: -BORDER_WIDTH,
18
18
  outlineStyle: 'solid',
19
- outlineWidth: "var(--ds-border-width-outline, 2px)"
19
+ outlineWidth: "var(--ds-border-width-focused, 2px)"
20
20
  });
21
21
  var focusRingStyles = css({
22
22
  // Focus styles used when :focus-visible isn't supported
@@ -31,7 +31,7 @@ var focusRingStyles = css({
31
31
  },
32
32
  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
33
33
  '&:focus-visible': {
34
- outline: '1px solid'
34
+ outline: "var(--ds-border-width, 1px)".concat(" solid")
35
35
  }
36
36
  }
37
37
  });
@@ -48,7 +48,7 @@ var insetFocusRingStyles = css({
48
48
  },
49
49
  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
50
50
  '&:focus-visible': {
51
- outline: '1px solid',
51
+ outline: "var(--ds-border-width, 1px)".concat(" solid"),
52
52
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
53
53
  outlineOffset: '-1px'
54
54
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/focus-ring",
3
- "version": "3.0.3",
3
+ "version": "3.0.5",
4
4
  "description": "A focus ring clearly indicates which item has keyboard focus.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -42,7 +42,7 @@
42
42
  ],
43
43
  "atlaskit:src": "src/index.tsx",
44
44
  "dependencies": {
45
- "@atlaskit/tokens": "^6.1.0",
45
+ "@atlaskit/tokens": "^6.3.0",
46
46
  "@babel/runtime": "^7.0.0",
47
47
  "@emotion/react": "^11.7.1"
48
48
  },
@@ -54,8 +54,8 @@
54
54
  "@af/integration-testing": "workspace:^",
55
55
  "@af/visual-regression": "workspace:^",
56
56
  "@atlaskit/button": "^23.4.0",
57
- "@atlaskit/docs": "^11.0.0",
58
- "@atlaskit/primitives": "^14.12.0",
57
+ "@atlaskit/docs": "^11.1.0",
58
+ "@atlaskit/primitives": "^14.14.0",
59
59
  "@atlaskit/textfield": "^8.0.0",
60
60
  "@testing-library/react": "^13.4.0",
61
61
  "react-dom": "^18.2.0"