@instructure/ui-navigation 8.17.1-snapshot.17 → 8.17.1-snapshot.30

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 (18) hide show
  1. package/es/AppNav/Item/index.js +11 -17
  2. package/es/AppNav/Item/theme.js +6 -6
  3. package/es/AppNav/index.js +11 -21
  4. package/es/AppNav/theme.js +5 -5
  5. package/es/Navigation/NavigationItem/index.js +13 -19
  6. package/es/Navigation/NavigationItem/theme.js +15 -15
  7. package/es/Navigation/index.js +7 -15
  8. package/es/Navigation/theme.js +9 -9
  9. package/lib/AppNav/Item/index.js +11 -17
  10. package/lib/AppNav/Item/theme.js +6 -6
  11. package/lib/AppNav/index.js +11 -21
  12. package/lib/AppNav/theme.js +5 -5
  13. package/lib/Navigation/NavigationItem/index.js +13 -19
  14. package/lib/Navigation/NavigationItem/theme.js +15 -15
  15. package/lib/Navigation/index.js +7 -15
  16. package/lib/Navigation/theme.js +9 -9
  17. package/package.json +24 -24
  18. package/tsconfig.build.tsbuildinfo +1 -1
package/lib/Navigation/NavigationItem/theme.js CHANGED
@@ -53,24 +53,24 @@ const generateComponentTheme = theme => {
53
53
  }
54
54
  };
55
55
  const componentVariables = {
56
- fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
57
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
58
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightLight,
59
- fontColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
56
+ fontSize: typography?.fontSizeSmall,
57
+ fontFamily: typography?.fontFamily,
58
+ fontWeight: typography?.fontWeightLight,
59
+ fontColor: colors?.textLightest,
60
60
  iconSize: '1.625rem',
61
- iconColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
62
- lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeight,
61
+ iconColor: colors?.textLightest,
62
+ lineHeight: typography?.lineHeight,
63
63
  backgroundColor: 'transparent',
64
64
  linkTextDecoration: 'none',
65
- hoverBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest,
66
- outerFocusOutline: `inset 0 0 0 0.125rem ${colors === null || colors === void 0 ? void 0 : colors.borderDarkest}`,
67
- innerFocusOutline: `inset 0 0 0 0.25rem ${colors === null || colors === void 0 ? void 0 : colors.borderLightest}`,
68
- selectedFontColor: colors === null || colors === void 0 ? void 0 : colors.textBrand,
69
- selectedIconColor: colors === null || colors === void 0 ? void 0 : colors.textBrand,
70
- selectedBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
71
- selectedOuterFocusOutline: `inset 0 0 0 0.125rem ${colors === null || colors === void 0 ? void 0 : colors.borderLightest}`,
72
- selectedInnerFocusOutline: `inset 0 0 0 0.25rem ${colors === null || colors === void 0 ? void 0 : colors.borderBrand}`,
73
- contentPadding: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall
65
+ hoverBackgroundColor: colors?.backgroundDarkest,
66
+ outerFocusOutline: `inset 0 0 0 0.125rem ${colors?.borderDarkest}`,
67
+ innerFocusOutline: `inset 0 0 0 0.25rem ${colors?.borderLightest}`,
68
+ selectedFontColor: colors?.textBrand,
69
+ selectedIconColor: colors?.textBrand,
70
+ selectedBackgroundColor: colors?.backgroundLightest,
71
+ selectedOuterFocusOutline: `inset 0 0 0 0.125rem ${colors?.borderLightest}`,
72
+ selectedInnerFocusOutline: `inset 0 0 0 0.25rem ${colors?.borderBrand}`,
73
+ contentPadding: spacing?.xxSmall
74
74
  };
75
75
  return { ...componentVariables,
76
76
  ...themeSpecificStyle[themeName]
package/lib/Navigation/index.js CHANGED
@@ -72,17 +72,13 @@ let Navigation = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
72
72
  }
73
73
 
74
74
  componentDidMount() {
75
- var _this$props$makeStyle, _this$props;
76
-
77
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, {
75
+ this.props.makeStyles?.({
78
76
  minimized: this.minimized
79
77
  });
80
78
  }
81
79
 
82
80
  componentDidUpdate() {
83
- var _this$props$makeStyle2, _this$props2;
84
-
85
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, {
81
+ this.props.makeStyles?.({
86
82
  minimized: this.minimized
87
83
  });
88
84
  }
@@ -102,13 +98,11 @@ let Navigation = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
102
98
 
103
99
  renderChildren() {
104
100
  return _react.Children.map(this.props.children, child => {
105
- var _this$props$styles;
106
-
107
101
  const navItem = (0, _safeCloneElement.safeCloneElement)(child, {
108
102
  minimized: this.state.minimized
109
103
  });
110
104
  return (0, _emotion.jsx)("li", {
111
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.list
105
+ css: this.props.styles?.list
112
106
  }, navItem);
113
107
  });
114
108
  }
@@ -118,25 +112,23 @@ let Navigation = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
118
112
  }
119
113
 
120
114
  render() {
121
- var _this$props$styles2, _this$props$styles3, _this$props$styles4, _this$props$styles5;
122
-
123
115
  const label = this.props.label;
124
116
  const props = (0, _omitProps.omitProps)(this.props, Navigation.allowedProps, ['minimized']);
125
117
  return (0, _emotion.jsx)("nav", Object.assign({}, props, {
126
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.navigation,
118
+ css: this.props.styles?.navigation,
127
119
  "aria-label": label,
128
120
  ref: element => {
129
121
  this.ref = element;
130
122
  }
131
123
  }), (0, _emotion.jsx)("ul", {
132
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.content
124
+ css: this.props.styles?.content
133
125
  }, this.renderChildren()), (0, _emotion.jsx)("div", {
134
- css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.toggle
126
+ css: this.props.styles?.toggle
135
127
  }, (0, _emotion.jsx)(_NavigationItem.NavigationItem, {
136
128
  "aria-expanded": !this.minimized,
137
129
  onClick: this.handleNavToggle,
138
130
  icon: (0, _emotion.jsx)(_IconMoveStartLine.IconMoveStartLine, {
139
- css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.toggleIcon,
131
+ css: this.props.styles?.toggleIcon,
140
132
  inline: false
141
133
  }),
142
134
  label: (0, _emotion.jsx)(_ScreenReaderContent.ScreenReaderContent, null, this.toggleMessage())
package/lib/Navigation/theme.js CHANGED
@@ -48,17 +48,17 @@ const generateComponentTheme = theme => {
48
48
  }
49
49
  };
50
50
  const componentVariables = {
51
- fontColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
52
- backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundBrandSecondary,
51
+ fontColor: colors?.textLightest,
52
+ backgroundColor: colors?.backgroundBrandSecondary,
53
53
  width: '5.25rem',
54
54
  minimizedWidth: '3.375rem',
55
- fill: colors === null || colors === void 0 ? void 0 : colors.textLightest,
56
- focusOutlineInnerWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
57
- focusOutlineOuterWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
58
- focusOutlineInnerColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
59
- focusOutlineOuterColor: colors === null || colors === void 0 ? void 0 : colors.borderLightest,
60
- marginBottom: spacing === null || spacing === void 0 ? void 0 : spacing.small,
61
- toggleTransition: transitions === null || transitions === void 0 ? void 0 : transitions.duration
55
+ fill: colors?.textLightest,
56
+ focusOutlineInnerWidth: borders?.widthMedium,
57
+ focusOutlineOuterWidth: borders?.widthSmall,
58
+ focusOutlineInnerColor: colors?.borderBrand,
59
+ focusOutlineOuterColor: colors?.borderLightest,
60
+ marginBottom: spacing?.small,
61
+ toggleTransition: transitions?.duration
62
62
  };
63
63
  return { ...componentVariables,
64
64
  ...themeSpecificStyle[themeName]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-navigation",
3
- "version": "8.17.1-snapshot.17+8e38d5a2e",
3
+ "version": "8.17.1-snapshot.30+cb1322c25",
4
4
  "description": "Main and application level navigational components",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,31 +23,31 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-babel-preset": "8.17.1-snapshot.17+8e38d5a2e",
27
- "@instructure/ui-color-utils": "8.17.1-snapshot.17+8e38d5a2e",
28
- "@instructure/ui-test-locator": "8.17.1-snapshot.17+8e38d5a2e",
29
- "@instructure/ui-test-utils": "8.17.1-snapshot.17+8e38d5a2e",
30
- "@instructure/ui-themes": "8.17.1-snapshot.17+8e38d5a2e"
26
+ "@instructure/ui-babel-preset": "8.17.1-snapshot.30+cb1322c25",
27
+ "@instructure/ui-color-utils": "8.17.1-snapshot.30+cb1322c25",
28
+ "@instructure/ui-test-locator": "8.17.1-snapshot.30+cb1322c25",
29
+ "@instructure/ui-test-utils": "8.17.1-snapshot.30+cb1322c25",
30
+ "@instructure/ui-themes": "8.17.1-snapshot.30+cb1322c25"
31
31
  },
32
32
  "dependencies": {
33
33
  "@babel/runtime": "^7.13.10",
34
- "@instructure/console": "8.17.1-snapshot.17+8e38d5a2e",
35
- "@instructure/debounce": "8.17.1-snapshot.17+8e38d5a2e",
36
- "@instructure/emotion": "8.17.1-snapshot.17+8e38d5a2e",
37
- "@instructure/shared-types": "8.17.1-snapshot.17+8e38d5a2e",
38
- "@instructure/ui-a11y-content": "8.17.1-snapshot.17+8e38d5a2e",
39
- "@instructure/ui-a11y-utils": "8.17.1-snapshot.17+8e38d5a2e",
40
- "@instructure/ui-badge": "8.17.1-snapshot.17+8e38d5a2e",
41
- "@instructure/ui-dom-utils": "8.17.1-snapshot.17+8e38d5a2e",
42
- "@instructure/ui-focusable": "8.17.1-snapshot.17+8e38d5a2e",
43
- "@instructure/ui-icons": "8.17.1-snapshot.17+8e38d5a2e",
44
- "@instructure/ui-menu": "8.17.1-snapshot.17+8e38d5a2e",
45
- "@instructure/ui-prop-types": "8.17.1-snapshot.17+8e38d5a2e",
46
- "@instructure/ui-react-utils": "8.17.1-snapshot.17+8e38d5a2e",
47
- "@instructure/ui-testable": "8.17.1-snapshot.17+8e38d5a2e",
48
- "@instructure/ui-tooltip": "8.17.1-snapshot.17+8e38d5a2e",
49
- "@instructure/ui-utils": "8.17.1-snapshot.17+8e38d5a2e",
50
- "@instructure/ui-view": "8.17.1-snapshot.17+8e38d5a2e",
34
+ "@instructure/console": "8.17.1-snapshot.30+cb1322c25",
35
+ "@instructure/debounce": "8.17.1-snapshot.30+cb1322c25",
36
+ "@instructure/emotion": "8.17.1-snapshot.30+cb1322c25",
37
+ "@instructure/shared-types": "8.17.1-snapshot.30+cb1322c25",
38
+ "@instructure/ui-a11y-content": "8.17.1-snapshot.30+cb1322c25",
39
+ "@instructure/ui-a11y-utils": "8.17.1-snapshot.30+cb1322c25",
40
+ "@instructure/ui-badge": "8.17.1-snapshot.30+cb1322c25",
41
+ "@instructure/ui-dom-utils": "8.17.1-snapshot.30+cb1322c25",
42
+ "@instructure/ui-focusable": "8.17.1-snapshot.30+cb1322c25",
43
+ "@instructure/ui-icons": "8.17.1-snapshot.30+cb1322c25",
44
+ "@instructure/ui-menu": "8.17.1-snapshot.30+cb1322c25",
45
+ "@instructure/ui-prop-types": "8.17.1-snapshot.30+cb1322c25",
46
+ "@instructure/ui-react-utils": "8.17.1-snapshot.30+cb1322c25",
47
+ "@instructure/ui-testable": "8.17.1-snapshot.30+cb1322c25",
48
+ "@instructure/ui-tooltip": "8.17.1-snapshot.30+cb1322c25",
49
+ "@instructure/ui-utils": "8.17.1-snapshot.30+cb1322c25",
50
+ "@instructure/ui-view": "8.17.1-snapshot.30+cb1322c25",
51
51
  "prop-types": "^15"
52
52
  },
53
53
  "peerDependencies": {
@@ -57,5 +57,5 @@
57
57
  "access": "public"
58
58
  },
59
59
  "sideEffects": false,
60
- "gitHead": "8e38d5a2e11e842eafa2fa270e47a261c6ebb626"
60
+ "gitHead": "cb1322c25257139750149d7a817f1fb32571c1ed"
61
61
  }