@atlaskit/side-navigation 1.8.7 → 1.8.8

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 (13) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/common/styles.js +1 -4
  3. package/dist/cjs/components/NavigationContent/styles.js +5 -7
  4. package/dist/cjs/version.json +1 -1
  5. package/dist/es2019/common/styles.js +1 -4
  6. package/dist/es2019/components/NavigationContent/styles.js +5 -7
  7. package/dist/es2019/version.json +1 -1
  8. package/dist/esm/common/styles.js +1 -4
  9. package/dist/esm/components/NavigationContent/styles.js +5 -7
  10. package/dist/esm/version.json +1 -1
  11. package/dist/types/components/NavigationContent/styles.d.ts +4 -4
  12. package/dist/types-ts4.5/components/NavigationContent/styles.d.ts +4 -4
  13. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @atlaskit/side-navigation
2
2
 
3
+ ## 1.8.8
4
+
5
+ ### Patch Changes
6
+
7
+ - [`967dd926bfc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/967dd926bfc) - Updates all navigation components to use border/shape tokens. This is a no-op as these tokens are not enabled in product.
8
+ - Updated dependencies
9
+
3
10
  ## 1.8.7
4
11
 
5
12
  ### Patch Changes
package/dist/cjs/common/styles.js CHANGED
@@ -7,11 +7,8 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.sectionHeaderSpacingStyles = exports.overrideStyleFunction = exports.baseSideNavItemStyle = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _colors = require("@atlaskit/theme/colors");
10
- var _constants = require("@atlaskit/theme/constants");
11
10
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
12
11
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
13
- var borderRadius = (0, _constants.borderRadius)();
14
-
15
12
  /**
16
13
  * Allows chaining of style functions on top of base style functions
17
14
  * @param baseStyle the base custom cssFn
@@ -61,7 +58,7 @@ var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
61
58
  // is approximately center aligned with the horizontal app switcher.
62
59
  paddingBlock: "var(--ds-space-100, 8px)",
63
60
  paddingInline: "var(--ds-space-100, 10px)",
64
- borderRadius: borderRadius,
61
+ borderRadius: "var(--ds-border-radius, 3px)",
65
62
  // -- TODO: DELETE THESE COLOR OVERRIDES WHEN CLEANING UP FALLBACK THEMING --
66
63
  // Menu and side navigation are now color aligned so they do not need this!
67
64
  // See: https://product-fabric.atlassian.net/browse/DSP-1684
package/dist/cjs/components/NavigationContent/styles.js CHANGED
@@ -14,7 +14,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
14
14
  var scrollIndicatorMaskZIndex = 2;
15
15
  var scrollIndicatorZIndex = 1;
16
16
  var scrollIndicatorHeight = 2;
17
- var scrollIndicatorBorderRadius = 1;
17
+ var scrollIndicatorBorderRadius = '1px';
18
18
  var containerPadding = 8;
19
19
  var itemHeadingContentHeight = _typography.headingSizes.h100.lineHeight;
20
20
  var skeletonHeadingHeight = containerPadding;
@@ -41,11 +41,10 @@ var outerContainerCSS = function outerContainerCSS(opts) {
41
41
  '&::before': {
42
42
  content: "''",
43
43
  display: 'block',
44
- // TODO Delete this comment after verifying space token -> previous value `containerPadding`
45
44
  left: "var(--ds-space-100, 8px)",
46
45
  right: containerPadding + opts.scrollbarWidth,
47
46
  height: scrollIndicatorHeight,
48
- borderRadius: scrollIndicatorBorderRadius,
47
+ borderRadius: "var(--ds-border-radius-050, ".concat(scrollIndicatorBorderRadius, ")"),
49
48
  backgroundColor: "var(".concat(_constants.VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(_colors.N30, ")"), ")"),
50
49
  position: 'absolute',
51
50
  zIndex: scrollIndicatorZIndex
@@ -54,10 +53,9 @@ var outerContainerCSS = function outerContainerCSS(opts) {
54
53
  content: "''",
55
54
  position: 'absolute',
56
55
  display: 'block',
57
- borderRadius: scrollIndicatorBorderRadius,
56
+ borderRadius: "var(--ds-border-radius-050, ".concat(scrollIndicatorBorderRadius, ")"),
58
57
  flexShrink: 0,
59
58
  height: scrollIndicatorHeight,
60
- // TODO Delete this comment after verifying space token -> previous value `containerPadding`
61
59
  left: "var(--ds-space-100, 8px)",
62
60
  right: containerPadding + opts.scrollbarWidth,
63
61
  bottom: 0,
@@ -83,7 +81,7 @@ var innerContainerCSS = function innerContainerCSS(opts) {
83
81
  flexDirection: 'column'
84
82
  }, !opts.showTopScrollIndicator && {
85
83
  '&::before': {
86
- borderRadius: scrollIndicatorBorderRadius,
84
+ borderRadius: "var(--ds-border-radius-050, ".concat(scrollIndicatorBorderRadius, ")"),
87
85
  content: "''",
88
86
  left: 0,
89
87
  right: 0,
@@ -97,7 +95,7 @@ var innerContainerCSS = function innerContainerCSS(opts) {
97
95
  // This after pseudo element abuses being a flex child and pushes itself down to the
98
96
  // very bottom of the container - doing so ends up "masking" the actual scroll indicator.
99
97
  '&::after': {
100
- borderRadius: scrollIndicatorBorderRadius,
98
+ borderRadius: "var(--ds-border-radius-050, ".concat(scrollIndicatorBorderRadius, ")"),
101
99
  content: "''",
102
100
  display: 'block',
103
101
  flexShrink: 0,
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/side-navigation",
3
- "version": "1.8.7",
3
+ "version": "1.8.8",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/common/styles.js CHANGED
@@ -1,7 +1,4 @@
1
1
  import { B400, B50, N30, N500 } from '@atlaskit/theme/colors';
2
- import { borderRadius as borderRadiusFn } from '@atlaskit/theme/constants';
3
- const borderRadius = borderRadiusFn();
4
-
5
2
  /**
6
3
  * Allows chaining of style functions on top of base style functions
7
4
  * @param baseStyle the base custom cssFn
@@ -48,7 +45,7 @@ export const baseSideNavItemStyle = ({
48
45
  // is approximately center aligned with the horizontal app switcher.
49
46
  paddingBlock: "var(--ds-space-100, 8px)",
50
47
  paddingInline: "var(--ds-space-100, 10px)",
51
- borderRadius,
48
+ borderRadius: "var(--ds-border-radius, 3px)",
52
49
  // -- TODO: DELETE THESE COLOR OVERRIDES WHEN CLEANING UP FALLBACK THEMING --
53
50
  // Menu and side navigation are now color aligned so they do not need this!
54
51
  // See: https://product-fabric.atlassian.net/browse/DSP-1684
package/dist/es2019/components/NavigationContent/styles.js CHANGED
@@ -5,7 +5,7 @@ import { VAR_SCROLL_INDICATOR_COLOR, VAR_SEPARATOR_COLOR } from '../../common/co
5
5
  const scrollIndicatorMaskZIndex = 2;
6
6
  const scrollIndicatorZIndex = 1;
7
7
  const scrollIndicatorHeight = 2;
8
- const scrollIndicatorBorderRadius = 1;
8
+ const scrollIndicatorBorderRadius = '1px';
9
9
  const containerPadding = 8;
10
10
  const itemHeadingContentHeight = headingSizes.h100.lineHeight;
11
11
  const skeletonHeadingHeight = containerPadding;
@@ -31,11 +31,10 @@ export const outerContainerCSS = opts => ({
31
31
  '&::before': {
32
32
  content: "''",
33
33
  display: 'block',
34
- // TODO Delete this comment after verifying space token -> previous value `containerPadding`
35
34
  left: "var(--ds-space-100, 8px)",
36
35
  right: containerPadding + opts.scrollbarWidth,
37
36
  height: scrollIndicatorHeight,
38
- borderRadius: scrollIndicatorBorderRadius,
37
+ borderRadius: `var(--ds-border-radius-050, ${scrollIndicatorBorderRadius})`,
39
38
  backgroundColor: `var(${VAR_SEPARATOR_COLOR}, ${`var(--ds-border, ${N30})`})`,
40
39
  position: 'absolute',
41
40
  zIndex: scrollIndicatorZIndex
@@ -44,10 +43,9 @@ export const outerContainerCSS = opts => ({
44
43
  content: "''",
45
44
  position: 'absolute',
46
45
  display: 'block',
47
- borderRadius: scrollIndicatorBorderRadius,
46
+ borderRadius: `var(--ds-border-radius-050, ${scrollIndicatorBorderRadius})`,
48
47
  flexShrink: 0,
49
48
  height: scrollIndicatorHeight,
50
- // TODO Delete this comment after verifying space token -> previous value `containerPadding`
51
49
  left: "var(--ds-space-100, 8px)",
52
50
  right: containerPadding + opts.scrollbarWidth,
53
51
  bottom: 0,
@@ -72,7 +70,7 @@ export const innerContainerCSS = opts => ({
72
70
  // container - so when you scroll down it stops "masking" the actual scroll indicator.
73
71
  ...(!opts.showTopScrollIndicator && {
74
72
  '&::before': {
75
- borderRadius: scrollIndicatorBorderRadius,
73
+ borderRadius: `var(--ds-border-radius-050, ${scrollIndicatorBorderRadius})`,
76
74
  content: "''",
77
75
  left: 0,
78
76
  right: 0,
@@ -86,7 +84,7 @@ export const innerContainerCSS = opts => ({
86
84
  // This after pseudo element abuses being a flex child and pushes itself down to the
87
85
  // very bottom of the container - doing so ends up "masking" the actual scroll indicator.
88
86
  '&::after': {
89
- borderRadius: scrollIndicatorBorderRadius,
87
+ borderRadius: `var(--ds-border-radius-050, ${scrollIndicatorBorderRadius})`,
90
88
  content: "''",
91
89
  display: 'block',
92
90
  flexShrink: 0,
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/side-navigation",
3
- "version": "1.8.7",
3
+ "version": "1.8.8",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/common/styles.js CHANGED
@@ -2,9 +2,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
3
3
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
4
4
  import { B400, B50, N30, N500 } from '@atlaskit/theme/colors';
5
- import { borderRadius as borderRadiusFn } from '@atlaskit/theme/constants';
6
- var borderRadius = borderRadiusFn();
7
-
8
5
  /**
9
6
  * Allows chaining of style functions on top of base style functions
10
7
  * @param baseStyle the base custom cssFn
@@ -53,7 +50,7 @@ export var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
53
50
  // is approximately center aligned with the horizontal app switcher.
54
51
  paddingBlock: "var(--ds-space-100, 8px)",
55
52
  paddingInline: "var(--ds-space-100, 10px)",
56
- borderRadius: borderRadius,
53
+ borderRadius: "var(--ds-border-radius, 3px)",
57
54
  // -- TODO: DELETE THESE COLOR OVERRIDES WHEN CLEANING UP FALLBACK THEMING --
58
55
  // Menu and side navigation are now color aligned so they do not need this!
59
56
  // See: https://product-fabric.atlassian.net/browse/DSP-1684
package/dist/esm/components/NavigationContent/styles.js CHANGED
@@ -8,7 +8,7 @@ import { VAR_SCROLL_INDICATOR_COLOR, VAR_SEPARATOR_COLOR } from '../../common/co
8
8
  var scrollIndicatorMaskZIndex = 2;
9
9
  var scrollIndicatorZIndex = 1;
10
10
  var scrollIndicatorHeight = 2;
11
- var scrollIndicatorBorderRadius = 1;
11
+ var scrollIndicatorBorderRadius = '1px';
12
12
  var containerPadding = 8;
13
13
  var itemHeadingContentHeight = headingSizes.h100.lineHeight;
14
14
  var skeletonHeadingHeight = containerPadding;
@@ -35,11 +35,10 @@ export var outerContainerCSS = function outerContainerCSS(opts) {
35
35
  '&::before': {
36
36
  content: "''",
37
37
  display: 'block',
38
- // TODO Delete this comment after verifying space token -> previous value `containerPadding`
39
38
  left: "var(--ds-space-100, 8px)",
40
39
  right: containerPadding + opts.scrollbarWidth,
41
40
  height: scrollIndicatorHeight,
42
- borderRadius: scrollIndicatorBorderRadius,
41
+ borderRadius: "var(--ds-border-radius-050, ".concat(scrollIndicatorBorderRadius, ")"),
43
42
  backgroundColor: "var(".concat(VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(N30, ")"), ")"),
44
43
  position: 'absolute',
45
44
  zIndex: scrollIndicatorZIndex
@@ -48,10 +47,9 @@ export var outerContainerCSS = function outerContainerCSS(opts) {
48
47
  content: "''",
49
48
  position: 'absolute',
50
49
  display: 'block',
51
- borderRadius: scrollIndicatorBorderRadius,
50
+ borderRadius: "var(--ds-border-radius-050, ".concat(scrollIndicatorBorderRadius, ")"),
52
51
  flexShrink: 0,
53
52
  height: scrollIndicatorHeight,
54
- // TODO Delete this comment after verifying space token -> previous value `containerPadding`
55
53
  left: "var(--ds-space-100, 8px)",
56
54
  right: containerPadding + opts.scrollbarWidth,
57
55
  bottom: 0,
@@ -76,7 +74,7 @@ export var innerContainerCSS = function innerContainerCSS(opts) {
76
74
  flexDirection: 'column'
77
75
  }, !opts.showTopScrollIndicator && {
78
76
  '&::before': {
79
- borderRadius: scrollIndicatorBorderRadius,
77
+ borderRadius: "var(--ds-border-radius-050, ".concat(scrollIndicatorBorderRadius, ")"),
80
78
  content: "''",
81
79
  left: 0,
82
80
  right: 0,
@@ -90,7 +88,7 @@ export var innerContainerCSS = function innerContainerCSS(opts) {
90
88
  // This after pseudo element abuses being a flex child and pushes itself down to the
91
89
  // very bottom of the container - doing so ends up "masking" the actual scroll indicator.
92
90
  '&::after': {
93
- borderRadius: scrollIndicatorBorderRadius,
91
+ borderRadius: "var(--ds-border-radius-050, ".concat(scrollIndicatorBorderRadius, ")"),
94
92
  content: "''",
95
93
  display: 'block',
96
94
  flexShrink: 0,
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/side-navigation",
3
- "version": "1.8.7",
3
+ "version": "1.8.8",
4
4
  "sideEffects": false
5
5
  }
package/dist/types/components/NavigationContent/styles.d.ts CHANGED
@@ -20,7 +20,7 @@ export declare const outerContainerCSS: (opts: StyleOpts & {
20
20
  readonly left: "var(--ds-space-100)";
21
21
  readonly right: number;
22
22
  readonly height: 2;
23
- readonly borderRadius: 1;
23
+ readonly borderRadius: "var(--ds-border-radius-050)";
24
24
  readonly backgroundColor: "var(--ds-menu-seperator-color, var(--ds-border))";
25
25
  readonly position: "absolute";
26
26
  readonly zIndex: 1;
@@ -29,7 +29,7 @@ export declare const outerContainerCSS: (opts: StyleOpts & {
29
29
  readonly content: "''";
30
30
  readonly position: "absolute";
31
31
  readonly display: "block";
32
- readonly borderRadius: 1;
32
+ readonly borderRadius: "var(--ds-border-radius-050)";
33
33
  readonly flexShrink: 0;
34
34
  readonly height: 2;
35
35
  readonly left: "var(--ds-space-100)";
@@ -46,7 +46,7 @@ export declare const outerContainerCSS: (opts: StyleOpts & {
46
46
  */
47
47
  export declare const innerContainerCSS: (opts: StyleOpts) => {
48
48
  readonly '&::after': {
49
- readonly borderRadius: 1;
49
+ readonly borderRadius: "var(--ds-border-radius-050)";
50
50
  readonly content: "''";
51
51
  readonly display: "block";
52
52
  readonly flexShrink: 0;
@@ -57,7 +57,7 @@ export declare const innerContainerCSS: (opts: StyleOpts) => {
57
57
  readonly backgroundColor: "var(--ds-menu-scroll-indicator-color, var(--ds-surface))";
58
58
  };
59
59
  readonly '&::before'?: {
60
- readonly borderRadius: 1;
60
+ readonly borderRadius: "var(--ds-border-radius-050)";
61
61
  readonly content: "''";
62
62
  readonly left: 0;
63
63
  readonly right: 0;
package/dist/types-ts4.5/components/NavigationContent/styles.d.ts CHANGED
@@ -20,7 +20,7 @@ export declare const outerContainerCSS: (opts: StyleOpts & {
20
20
  readonly left: "var(--ds-space-100)";
21
21
  readonly right: number;
22
22
  readonly height: 2;
23
- readonly borderRadius: 1;
23
+ readonly borderRadius: "var(--ds-border-radius-050)";
24
24
  readonly backgroundColor: "var(--ds-menu-seperator-color, var(--ds-border))";
25
25
  readonly position: "absolute";
26
26
  readonly zIndex: 1;
@@ -29,7 +29,7 @@ export declare const outerContainerCSS: (opts: StyleOpts & {
29
29
  readonly content: "''";
30
30
  readonly position: "absolute";
31
31
  readonly display: "block";
32
- readonly borderRadius: 1;
32
+ readonly borderRadius: "var(--ds-border-radius-050)";
33
33
  readonly flexShrink: 0;
34
34
  readonly height: 2;
35
35
  readonly left: "var(--ds-space-100)";
@@ -46,7 +46,7 @@ export declare const outerContainerCSS: (opts: StyleOpts & {
46
46
  */
47
47
  export declare const innerContainerCSS: (opts: StyleOpts) => {
48
48
  readonly '&::after': {
49
- readonly borderRadius: 1;
49
+ readonly borderRadius: "var(--ds-border-radius-050)";
50
50
  readonly content: "''";
51
51
  readonly display: "block";
52
52
  readonly flexShrink: 0;
@@ -57,7 +57,7 @@ export declare const innerContainerCSS: (opts: StyleOpts) => {
57
57
  readonly backgroundColor: "var(--ds-menu-scroll-indicator-color, var(--ds-surface))";
58
58
  };
59
59
  readonly '&::before'?: {
60
- readonly borderRadius: 1;
60
+ readonly borderRadius: "var(--ds-border-radius-050)";
61
61
  readonly content: "''";
62
62
  readonly left: 0;
63
63
  readonly right: 0;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/side-navigation",
3
- "version": "1.8.7",
3
+ "version": "1.8.8",
4
4
  "description": "A highly composable side navigation component that supports nested views.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -39,7 +39,7 @@
39
39
  "@atlaskit/motion": "^1.4.0",
40
40
  "@atlaskit/primitives": "^0.12.0",
41
41
  "@atlaskit/theme": "^12.5.0",
42
- "@atlaskit/tokens": "^1.5.0",
42
+ "@atlaskit/tokens": "^1.6.0",
43
43
  "@babel/runtime": "^7.0.0",
44
44
  "@emotion/react": "^11.7.1"
45
45
  },