@atlaskit/side-navigation 1.10.4 → 2.0.0

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 (17) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/common/styles.js +2 -2
  3. package/dist/cjs/components/Item/skeleton-item.js +3 -3
  4. package/dist/cjs/components/NavigationContent/styles.js +1 -1
  5. package/dist/cjs/components/NavigationFooter/index.js +1 -1
  6. package/dist/es2019/common/styles.js +2 -2
  7. package/dist/es2019/components/Item/skeleton-item.js +3 -3
  8. package/dist/es2019/components/NavigationContent/styles.js +1 -1
  9. package/dist/es2019/components/NavigationFooter/index.js +1 -1
  10. package/dist/esm/common/styles.js +2 -2
  11. package/dist/esm/components/Item/skeleton-item.js +3 -3
  12. package/dist/esm/components/NavigationContent/styles.js +1 -1
  13. package/dist/esm/components/NavigationFooter/index.js +1 -1
  14. package/package.json +5 -4
  15. package/dist/cjs/version.json +0 -5
  16. package/dist/es2019/version.json +0 -5
  17. package/dist/esm/version.json +0 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/side-navigation
2
2
 
3
+ ## 2.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [`cf66b43d67a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf66b43d67a) - Updated spacing of Side Navigation components to ensure token values and fallbacks are matching. When used with space tokens enabled, there is no visual difference with the previous release of Side Navigation. When used without space tokens enabled there will be a slight visual difference; we recommend enabling space tokens if they are not already enabled to resolve this.
8
+
3
9
  ## 1.10.4
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/common/styles.js CHANGED
@@ -57,7 +57,7 @@ var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
57
57
  // This padding is set to ensure that the center of the left icon
58
58
  // is approximately center aligned with the horizontal app switcher.
59
59
  paddingBlock: "var(--ds-space-100, 8px)",
60
- paddingInline: "var(--ds-space-100, 10px)",
60
+ paddingInline: "var(--ds-space-100, 8px)",
61
61
  borderRadius: "var(--ds-border-radius, 3px)",
62
62
  // -- TODO: DELETE THESE COLOR OVERRIDES WHEN CLEANING UP FALLBACK THEMING --
63
63
  // Menu and side navigation are now color aligned so they do not need this!
@@ -71,7 +71,7 @@ var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
71
71
  exports.baseSideNavItemStyle = baseSideNavItemStyle;
72
72
  var sectionHeaderSpacingStyles = function sectionHeaderSpacingStyles() {
73
73
  return {
74
- paddingInline: "var(--ds-space-100, 10px)"
74
+ paddingInline: "var(--ds-space-100, 8px)"
75
75
  };
76
76
  };
77
77
  exports.sectionHeaderSpacingStyles = sectionHeaderSpacingStyles;
package/dist/cjs/components/Item/skeleton-item.js CHANGED
@@ -34,9 +34,9 @@ var SkeletonItem = function SkeletonItem(props) {
34
34
  return _objectSpread(_objectSpread({}, (0, _styles.sectionHeaderSpacingStyles)()), {}, {
35
35
  // This doubles up & to get a higher specificity as well as to not overwite the base styles.
36
36
  '&&::before': {
37
- height: "var(--ds-space-300, 20px)",
38
- marginRight: "var(--ds-space-200, 18px)",
39
- width: "var(--ds-space-300, 20px)"
37
+ height: "var(--ds-space-300, 24px)",
38
+ marginRight: "var(--ds-space-200, 16px)",
39
+ width: "var(--ds-space-300, 24px)"
40
40
  }
41
41
  });
42
42
  }
package/dist/cjs/components/NavigationContent/styles.js CHANGED
@@ -121,7 +121,7 @@ var containerCSS = function containerCSS(opts) {
121
121
  position: 'relative',
122
122
  '& [data-ds--menu--heading-item]': {
123
123
  marginBottom: "var(--ds-space-075, 6px)",
124
- marginTop: "var(--ds-space-200, 20px)"
124
+ marginTop: "var(--ds-space-200, 16px)"
125
125
  },
126
126
  '& [data-ds--menu--skeleton-heading-item]': {
127
127
  marginTop: skeletonHeadingTopMargin,
package/dist/cjs/components/NavigationFooter/index.js CHANGED
@@ -24,7 +24,7 @@ var NavigationFooter = function NavigationFooter(_ref) {
24
24
  position: "relative",
25
25
  padding: "space.100",
26
26
  UNSAFE_style: {
27
- paddingBottom: "var(--ds-space-200, 14px)"
27
+ paddingBottom: "var(--ds-space-200, 16px)"
28
28
  }
29
29
  }, children);
30
30
  };
package/dist/es2019/common/styles.js CHANGED
@@ -44,7 +44,7 @@ export const baseSideNavItemStyle = ({
44
44
  // This padding is set to ensure that the center of the left icon
45
45
  // is approximately center aligned with the horizontal app switcher.
46
46
  paddingBlock: "var(--ds-space-100, 8px)",
47
- paddingInline: "var(--ds-space-100, 10px)",
47
+ paddingInline: "var(--ds-space-100, 8px)",
48
48
  borderRadius: "var(--ds-border-radius, 3px)",
49
49
  // -- TODO: DELETE THESE COLOR OVERRIDES WHEN CLEANING UP FALLBACK THEMING --
50
50
  // Menu and side navigation are now color aligned so they do not need this!
@@ -62,6 +62,6 @@ export const baseSideNavItemStyle = ({
62
62
  };
63
63
  export const sectionHeaderSpacingStyles = () => {
64
64
  return {
65
- paddingInline: "var(--ds-space-100, 10px)"
65
+ paddingInline: "var(--ds-space-100, 8px)"
66
66
  };
67
67
  };
package/dist/es2019/components/Item/skeleton-item.js CHANGED
@@ -25,9 +25,9 @@ const SkeletonItem = props => {
25
25
  ...sectionHeaderSpacingStyles(),
26
26
  // This doubles up & to get a higher specificity as well as to not overwite the base styles.
27
27
  '&&::before': {
28
- height: "var(--ds-space-300, 20px)",
29
- marginRight: "var(--ds-space-200, 18px)",
30
- width: "var(--ds-space-300, 20px)"
28
+ height: "var(--ds-space-300, 24px)",
29
+ marginRight: "var(--ds-space-200, 16px)",
30
+ width: "var(--ds-space-300, 24px)"
31
31
  }
32
32
  })
33
33
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
package/dist/es2019/components/NavigationContent/styles.js CHANGED
@@ -107,7 +107,7 @@ export const containerCSS = opts => ({
107
107
  position: 'relative',
108
108
  '& [data-ds--menu--heading-item]': {
109
109
  marginBottom: "var(--ds-space-075, 6px)",
110
- marginTop: "var(--ds-space-200, 20px)"
110
+ marginTop: "var(--ds-space-200, 16px)"
111
111
  },
112
112
  '& [data-ds--menu--skeleton-heading-item]': {
113
113
  marginTop: skeletonHeadingTopMargin,
package/dist/es2019/components/NavigationFooter/index.js CHANGED
@@ -18,7 +18,7 @@ const NavigationFooter = ({
18
18
  position: "relative",
19
19
  padding: "space.100",
20
20
  UNSAFE_style: {
21
- paddingBottom: "var(--ds-space-200, 14px)"
21
+ paddingBottom: "var(--ds-space-200, 16px)"
22
22
  }
23
23
  }, children);
24
24
  };
package/dist/esm/common/styles.js CHANGED
@@ -49,7 +49,7 @@ export var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
49
49
  // This padding is set to ensure that the center of the left icon
50
50
  // is approximately center aligned with the horizontal app switcher.
51
51
  paddingBlock: "var(--ds-space-100, 8px)",
52
- paddingInline: "var(--ds-space-100, 10px)",
52
+ paddingInline: "var(--ds-space-100, 8px)",
53
53
  borderRadius: "var(--ds-border-radius, 3px)",
54
54
  // -- TODO: DELETE THESE COLOR OVERRIDES WHEN CLEANING UP FALLBACK THEMING --
55
55
  // Menu and side navigation are now color aligned so they do not need this!
@@ -62,6 +62,6 @@ export var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
62
62
  };
63
63
  export var sectionHeaderSpacingStyles = function sectionHeaderSpacingStyles() {
64
64
  return {
65
- paddingInline: "var(--ds-space-100, 10px)"
65
+ paddingInline: "var(--ds-space-100, 8px)"
66
66
  };
67
67
  };
package/dist/esm/components/Item/skeleton-item.js CHANGED
@@ -27,9 +27,9 @@ var SkeletonItem = function SkeletonItem(props) {
27
27
  return _objectSpread(_objectSpread({}, sectionHeaderSpacingStyles()), {}, {
28
28
  // This doubles up & to get a higher specificity as well as to not overwite the base styles.
29
29
  '&&::before': {
30
- height: "var(--ds-space-300, 20px)",
31
- marginRight: "var(--ds-space-200, 18px)",
32
- width: "var(--ds-space-300, 20px)"
30
+ height: "var(--ds-space-300, 24px)",
31
+ marginRight: "var(--ds-space-200, 16px)",
32
+ width: "var(--ds-space-300, 24px)"
33
33
  }
34
34
  });
35
35
  }
package/dist/esm/components/NavigationContent/styles.js CHANGED
@@ -113,7 +113,7 @@ export var containerCSS = function containerCSS(opts) {
113
113
  position: 'relative',
114
114
  '& [data-ds--menu--heading-item]': {
115
115
  marginBottom: "var(--ds-space-075, 6px)",
116
- marginTop: "var(--ds-space-200, 20px)"
116
+ marginTop: "var(--ds-space-200, 16px)"
117
117
  },
118
118
  '& [data-ds--menu--skeleton-heading-item]': {
119
119
  marginTop: skeletonHeadingTopMargin,
package/dist/esm/components/NavigationFooter/index.js CHANGED
@@ -17,7 +17,7 @@ var NavigationFooter = function NavigationFooter(_ref) {
17
17
  position: "relative",
18
18
  padding: "space.100",
19
19
  UNSAFE_style: {
20
- paddingBottom: "var(--ds-space-200, 14px)"
20
+ paddingBottom: "var(--ds-space-200, 16px)"
21
21
  }
22
22
  }, children);
23
23
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/side-navigation",
3
- "version": "1.10.4",
3
+ "version": "2.0.0",
4
4
  "description": "A highly composable side navigation component that supports nested views.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -23,7 +23,7 @@
23
23
  "sideEffects": false,
24
24
  "atlaskit:src": "src/index.tsx",
25
25
  "atlassian": {
26
- "team": "Design System Pyxis",
26
+ "team": "Design System Team",
27
27
  "deprecatedAutoEntryPoints": true,
28
28
  "releaseModel": "continuous",
29
29
  "website": {
@@ -37,9 +37,9 @@
37
37
  "@atlaskit/icon": "^21.12.0",
38
38
  "@atlaskit/menu": "^1.9.0",
39
39
  "@atlaskit/motion": "^1.4.0",
40
- "@atlaskit/primitives": "^1.0.6",
40
+ "@atlaskit/primitives": "^1.2.0",
41
41
  "@atlaskit/theme": "^12.5.0",
42
- "@atlaskit/tokens": "^1.13.0",
42
+ "@atlaskit/tokens": "^1.14.0",
43
43
  "@babel/runtime": "^7.0.0",
44
44
  "@emotion/react": "^11.7.1"
45
45
  },
@@ -47,6 +47,7 @@
47
47
  "react": "^16.8.0"
48
48
  },
49
49
  "devDependencies": {
50
+ "@af/accessibility-testing": "*",
50
51
  "@af/visual-regression": "*",
51
52
  "@atlaskit/visual-regression": "*",
52
53
  "@atlaskit/webdriver-runner": "*",
package/dist/cjs/version.json DELETED
@@ -1,5 +0,0 @@
1
- {
2
- "name": "@atlaskit/side-navigation",
3
- "version": "1.10.4",
4
- "sideEffects": false
5
- }
package/dist/es2019/version.json DELETED
@@ -1,5 +0,0 @@
1
- {
2
- "name": "@atlaskit/side-navigation",
3
- "version": "1.10.4",
4
- "sideEffects": false
5
- }
package/dist/esm/version.json DELETED
@@ -1,5 +0,0 @@
1
- {
2
- "name": "@atlaskit/side-navigation",
3
- "version": "1.10.4",
4
- "sideEffects": false
5
- }