@instructure/ui-top-nav-bar 9.1.1-snapshot-12 → 9.2.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 (13) hide show
  1. package/CHANGELOG.md +2 -1
  2. package/es/TopNavBar/TopNavBarLayout/DesktopLayout/styles.js +1 -0
  3. package/es/TopNavBar/TopNavBarLayout/DesktopLayout/theme.js +3 -1
  4. package/es/TopNavBar/TopNavBarLayout/SmallViewportLayout/theme.js +3 -1
  5. package/lib/TopNavBar/TopNavBarLayout/DesktopLayout/styles.js +1 -0
  6. package/lib/TopNavBar/TopNavBarLayout/DesktopLayout/theme.js +3 -1
  7. package/lib/TopNavBar/TopNavBarLayout/SmallViewportLayout/theme.js +3 -1
  8. package/package.json +30 -30
  9. package/src/TopNavBar/TopNavBarLayout/DesktopLayout/styles.ts +1 -0
  10. package/src/TopNavBar/TopNavBarLayout/DesktopLayout/theme.ts +1 -1
  11. package/src/TopNavBar/TopNavBarLayout/SmallViewportLayout/theme.ts +1 -1
  12. package/tsconfig.build.tsbuildinfo +1 -1
  13. package/types/TopNavBar/TopNavBarLayout/DesktopLayout/styles.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,12 +3,13 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [9.1.1-snapshot-12](https://github.com/instructure/instructure-ui/compare/v9.1.0...v9.1.1-snapshot-12) (2024-07-05)
6
+ # [9.2.0](https://github.com/instructure/instructure-ui/compare/v9.1.0...v9.2.0) (2024-07-09)
7
7
 
8
8
 
9
9
  ### Bug Fixes
10
10
 
11
11
  * **ui-top-nav-bar:** fix topnavbar item width changing ([88993e2](https://github.com/instructure/instructure-ui/commit/88993e2729f74d8991bcd4d1d215efeac0d7e510))
12
+ * **ui-top-nav-bar:** lowered topnavbar zindex so it goes below trays/popovers/modals/etc ([bcfcb84](https://github.com/instructure/instructure-ui/commit/bcfcb844f13c29934ffc4286c6bd51e05a9aaf15))
12
13
 
13
14
 
14
15
 
package/es/TopNavBar/TopNavBarLayout/DesktopLayout/styles.js CHANGED
@@ -51,6 +51,7 @@ const generateStyle = (componentTheme, _props, state) => {
51
51
  alignItems: 'stretch',
52
52
  justifyContent: 'space-between',
53
53
  height: componentTheme.desktopHeight,
54
+ position: 'relative',
54
55
  zIndex: componentTheme.desktopZIndex,
55
56
  maxWidth: '100%',
56
57
  overflow: 'hidden',
package/es/TopNavBar/TopNavBarLayout/DesktopLayout/theme.js CHANGED
@@ -42,7 +42,9 @@ const generateComponentTheme = theme => {
42
42
  desktopBottomBorder: 'none',
43
43
  desktopBottomBorderInverse: `${borders === null || borders === void 0 ? void 0 : borders.widthSmall} ${borders === null || borders === void 0 ? void 0 : borders.style} ${colors === null || colors === void 0 ? void 0 : colors.borderMedium}`,
44
44
  desktopHeight: '4rem',
45
- desktopZIndex: (stacking === null || stacking === void 0 ? void 0 : stacking.topmost) + 1,
45
+ desktopZIndex: (stacking === null || stacking === void 0 ? void 0 : stacking.topmost) - 1,
46
+ // -1 so it is below tray/modal/popover/etc TODO find a better solution
47
+
46
48
  desktopInlinePadding: spacing.small,
47
49
  desktopBrandContainerInlineMargin: `0 ${spacing.medium}`,
48
50
  desktopMenuItemsContainerInlineMargin: `0 ${spacing.large}`,
package/es/TopNavBar/TopNavBarLayout/SmallViewportLayout/theme.js CHANGED
@@ -46,7 +46,9 @@ const generateComponentTheme = theme => {
46
46
  smallViewportZIndex: (stacking === null || stacking === void 0 ? void 0 : stacking.topmost) + 1,
47
47
  smallViewportTrayPosition: 'fixed',
48
48
  smallViewportTrayFixTopPosition: void 0,
49
- smallViewportTrayZIndex: (stacking === null || stacking === void 0 ? void 0 : stacking.topmost) + 1,
49
+ smallViewportTrayZIndex: (stacking === null || stacking === void 0 ? void 0 : stacking.topmost) - 1,
50
+ // -1 so it is below tray/modal/popover/etc TODO find a better solution
51
+
50
52
  smallViewportDropdownMenuActiveOptionFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
51
53
  smallViewportDropdownMenuActiveOptionIndicatorSpacing: '0.25rem',
52
54
  smallViewportDropdownMenuActiveOptionIndicatorWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
package/lib/TopNavBar/TopNavBarLayout/DesktopLayout/styles.js CHANGED
@@ -57,6 +57,7 @@ const generateStyle = (componentTheme, _props, state) => {
57
57
  alignItems: 'stretch',
58
58
  justifyContent: 'space-between',
59
59
  height: componentTheme.desktopHeight,
60
+ position: 'relative',
60
61
  zIndex: componentTheme.desktopZIndex,
61
62
  maxWidth: '100%',
62
63
  overflow: 'hidden',
package/lib/TopNavBar/TopNavBarLayout/DesktopLayout/theme.js CHANGED
@@ -48,7 +48,9 @@ const generateComponentTheme = theme => {
48
48
  desktopBottomBorder: 'none',
49
49
  desktopBottomBorderInverse: `${borders === null || borders === void 0 ? void 0 : borders.widthSmall} ${borders === null || borders === void 0 ? void 0 : borders.style} ${colors === null || colors === void 0 ? void 0 : colors.borderMedium}`,
50
50
  desktopHeight: '4rem',
51
- desktopZIndex: (stacking === null || stacking === void 0 ? void 0 : stacking.topmost) + 1,
51
+ desktopZIndex: (stacking === null || stacking === void 0 ? void 0 : stacking.topmost) - 1,
52
+ // -1 so it is below tray/modal/popover/etc TODO find a better solution
53
+
52
54
  desktopInlinePadding: spacing.small,
53
55
  desktopBrandContainerInlineMargin: `0 ${spacing.medium}`,
54
56
  desktopMenuItemsContainerInlineMargin: `0 ${spacing.large}`,
package/lib/TopNavBar/TopNavBarLayout/SmallViewportLayout/theme.js CHANGED
@@ -52,7 +52,9 @@ const generateComponentTheme = theme => {
52
52
  smallViewportZIndex: (stacking === null || stacking === void 0 ? void 0 : stacking.topmost) + 1,
53
53
  smallViewportTrayPosition: 'fixed',
54
54
  smallViewportTrayFixTopPosition: void 0,
55
- smallViewportTrayZIndex: (stacking === null || stacking === void 0 ? void 0 : stacking.topmost) + 1,
55
+ smallViewportTrayZIndex: (stacking === null || stacking === void 0 ? void 0 : stacking.topmost) - 1,
56
+ // -1 so it is below tray/modal/popover/etc TODO find a better solution
57
+
56
58
  smallViewportDropdownMenuActiveOptionFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
57
59
  smallViewportDropdownMenuActiveOptionIndicatorSpacing: '0.25rem',
58
60
  smallViewportDropdownMenuActiveOptionIndicatorWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-top-nav-bar",
3
- "version": "9.1.1-snapshot-12",
3
+ "version": "9.2.0",
4
4
  "description": "A UI component library made by Instructure Inc.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,38 +24,38 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.24.5",
27
- "@instructure/console": "9.1.1-snapshot-12",
28
- "@instructure/emotion": "9.1.1-snapshot-12",
29
- "@instructure/shared-types": "9.1.1-snapshot-12",
30
- "@instructure/ui-a11y-content": "9.1.1-snapshot-12",
31
- "@instructure/ui-avatar": "9.1.1-snapshot-12",
32
- "@instructure/ui-breadcrumb": "9.1.1-snapshot-12",
33
- "@instructure/ui-buttons": "9.1.1-snapshot-12",
34
- "@instructure/ui-dialog": "9.1.1-snapshot-12",
35
- "@instructure/ui-dom-utils": "9.1.1-snapshot-12",
36
- "@instructure/ui-drilldown": "9.1.1-snapshot-12",
37
- "@instructure/ui-icons": "9.1.1-snapshot-12",
38
- "@instructure/ui-link": "9.1.1-snapshot-12",
39
- "@instructure/ui-popover": "9.1.1-snapshot-12",
40
- "@instructure/ui-prop-types": "9.1.1-snapshot-12",
41
- "@instructure/ui-react-utils": "9.1.1-snapshot-12",
42
- "@instructure/ui-responsive": "9.1.1-snapshot-12",
43
- "@instructure/ui-testable": "9.1.1-snapshot-12",
44
- "@instructure/ui-tooltip": "9.1.1-snapshot-12",
45
- "@instructure/ui-tray": "9.1.1-snapshot-12",
46
- "@instructure/ui-truncate-list": "9.1.1-snapshot-12",
47
- "@instructure/ui-utils": "9.1.1-snapshot-12",
48
- "@instructure/ui-view": "9.1.1-snapshot-12",
27
+ "@instructure/console": "9.2.0",
28
+ "@instructure/emotion": "9.2.0",
29
+ "@instructure/shared-types": "9.2.0",
30
+ "@instructure/ui-a11y-content": "9.2.0",
31
+ "@instructure/ui-avatar": "9.2.0",
32
+ "@instructure/ui-breadcrumb": "9.2.0",
33
+ "@instructure/ui-buttons": "9.2.0",
34
+ "@instructure/ui-dialog": "9.2.0",
35
+ "@instructure/ui-dom-utils": "9.2.0",
36
+ "@instructure/ui-drilldown": "9.2.0",
37
+ "@instructure/ui-icons": "9.2.0",
38
+ "@instructure/ui-link": "9.2.0",
39
+ "@instructure/ui-popover": "9.2.0",
40
+ "@instructure/ui-prop-types": "9.2.0",
41
+ "@instructure/ui-react-utils": "9.2.0",
42
+ "@instructure/ui-responsive": "9.2.0",
43
+ "@instructure/ui-testable": "9.2.0",
44
+ "@instructure/ui-tooltip": "9.2.0",
45
+ "@instructure/ui-tray": "9.2.0",
46
+ "@instructure/ui-truncate-list": "9.2.0",
47
+ "@instructure/ui-utils": "9.2.0",
48
+ "@instructure/ui-view": "9.2.0",
49
49
  "prop-types": "^15.8.1"
50
50
  },
51
51
  "devDependencies": {
52
- "@instructure/ui-axe-check": "9.1.1-snapshot-12",
53
- "@instructure/ui-babel-preset": "9.1.1-snapshot-12",
54
- "@instructure/ui-color-utils": "9.1.1-snapshot-12",
55
- "@instructure/ui-scripts": "9.1.1-snapshot-12",
56
- "@instructure/ui-test-locator": "9.1.1-snapshot-12",
57
- "@instructure/ui-test-utils": "9.1.1-snapshot-12",
58
- "@instructure/ui-themes": "9.1.1-snapshot-12",
52
+ "@instructure/ui-axe-check": "9.2.0",
53
+ "@instructure/ui-babel-preset": "9.2.0",
54
+ "@instructure/ui-color-utils": "9.2.0",
55
+ "@instructure/ui-scripts": "9.2.0",
56
+ "@instructure/ui-test-locator": "9.2.0",
57
+ "@instructure/ui-test-utils": "9.2.0",
58
+ "@instructure/ui-themes": "9.2.0",
59
59
  "@testing-library/jest-dom": "^6.4.5",
60
60
  "@testing-library/react": "^15.0.7",
61
61
  "@testing-library/user-event": "^14.5.2"
package/src/TopNavBar/TopNavBarLayout/DesktopLayout/styles.ts CHANGED
@@ -66,6 +66,7 @@ const generateStyle = (
66
66
  alignItems: 'stretch',
67
67
  justifyContent: 'space-between',
68
68
  height: componentTheme.desktopHeight,
69
+ position: 'relative',
69
70
  zIndex: componentTheme.desktopZIndex,
70
71
  maxWidth: '100%',
71
72
  overflow: 'hidden',
package/src/TopNavBar/TopNavBarLayout/DesktopLayout/theme.ts CHANGED
@@ -43,7 +43,7 @@ const generateComponentTheme = (theme: Theme): TopNavBarLayoutDesktopTheme => {
43
43
  desktopBottomBorder: 'none',
44
44
  desktopBottomBorderInverse: `${borders?.widthSmall} ${borders?.style} ${colors?.borderMedium}`,
45
45
  desktopHeight: '4rem',
46
- desktopZIndex: stacking?.topmost + 1,
46
+ desktopZIndex: stacking?.topmost - 1, // -1 so it is below tray/modal/popover/etc TODO find a better solution
47
47
 
48
48
  desktopInlinePadding: spacing.small,
49
49
  desktopBrandContainerInlineMargin: `0 ${spacing.medium}`,
package/src/TopNavBar/TopNavBarLayout/SmallViewportLayout/theme.ts CHANGED
@@ -50,7 +50,7 @@ const generateComponentTheme = (
50
50
 
51
51
  smallViewportTrayPosition: 'fixed',
52
52
  smallViewportTrayFixTopPosition: undefined,
53
- smallViewportTrayZIndex: stacking?.topmost + 1,
53
+ smallViewportTrayZIndex: stacking?.topmost - 1, // -1 so it is below tray/modal/popover/etc TODO find a better solution
54
54
 
55
55
  smallViewportDropdownMenuActiveOptionFontWeight: typography?.fontWeightBold,
56
56
  smallViewportDropdownMenuActiveOptionIndicatorSpacing: '0.25rem',