@instructure/ui-side-nav-bar 8.49.1-snapshot-4 → 8.49.1-snapshot-6

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 (14) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/SideNavBar/index.js +4 -6
  3. package/es/SideNavBar/styles.js +3 -5
  4. package/lib/SideNavBar/index.js +4 -6
  5. package/lib/SideNavBar/styles.js +3 -5
  6. package/package.json +24 -24
  7. package/src/SideNavBar/index.tsx +13 -15
  8. package/src/SideNavBar/props.ts +1 -1
  9. package/src/SideNavBar/styles.ts +3 -5
  10. package/tsconfig.build.tsbuildinfo +1 -1
  11. package/types/SideNavBar/index.d.ts.map +1 -1
  12. package/types/SideNavBar/props.d.ts +1 -1
  13. package/types/SideNavBar/props.d.ts.map +1 -1
  14. package/types/SideNavBar/styles.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
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
- ## [8.49.1-snapshot-4](https://github.com/instructure/instructure-ui/compare/v8.49.0...v8.49.1-snapshot-4) (2023-11-30)
6
+ ## [8.49.1-snapshot-6](https://github.com/instructure/instructure-ui/compare/v8.49.0...v8.49.1-snapshot-6) (2023-12-05)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-side-nav-bar
8
+
9
+ ### Bug Fixes
10
+
11
+ * **ui-side-nav-bar:** fix scrollbar appearing in closed state ([e84775f](https://github.com/instructure/instructure-ui/commit/e84775f68d99aa301517b1158f43279eef38866e))
9
12
 
10
13
 
11
14
 
package/es/SideNavBar/index.js CHANGED
@@ -96,7 +96,7 @@ let SideNavBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
96
96
  return this.state.minimized ? this.props.toggleLabel.minimizedLabel : this.props.toggleLabel.expandedLabel;
97
97
  }
98
98
  render() {
99
- var _this$props$styles2, _this$props$styles3, _this$props$styles4, _this$props$styles5;
99
+ var _this$props$styles2, _this$props$styles3, _this$props$styles4;
100
100
  const label = this.props.label;
101
101
  const props = omitProps(this.props, SideNavBar.allowedProps, ['minimized']);
102
102
  return jsx("nav", Object.assign({}, props, {
@@ -107,17 +107,15 @@ let SideNavBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
107
107
  }
108
108
  }), jsx("ul", {
109
109
  css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.content
110
- }, this.renderChildren()), jsx("div", {
111
- css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.toggle
112
- }, jsx(SideNavBarItem, {
110
+ }, this.renderChildren()), jsx(SideNavBarItem, {
113
111
  "aria-expanded": !this.minimized,
114
112
  onClick: this.handleNavToggle,
115
113
  icon: jsx(IconMoveStartLine, {
116
- css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.toggleIcon,
114
+ css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.toggleIcon,
117
115
  inline: false
118
116
  }),
119
117
  label: jsx(ScreenReaderContent, null, this.toggleMessage())
120
- })));
118
+ }));
121
119
  }
122
120
  }, _class2.displayName = "SideNavBar", _class2.componentId = 'SideNavBar', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
123
121
  children: null,
package/es/SideNavBar/styles.js CHANGED
@@ -61,16 +61,14 @@ const generateStyle = (componentTheme, props, state) => {
61
61
  padding: '0',
62
62
  flex: '1 0 auto'
63
63
  },
64
- toggle: {
64
+ toggleIcon: {
65
+ fill: componentTheme.fill,
66
+ margin: '0 auto',
65
67
  transform: 'translate3d(0, 0, 0)',
66
68
  transition: `all ${componentTheme.toggleTransition}`,
67
69
  ...(minimized ? {
68
70
  transform: 'rotate3d(0, 1, 0, -180deg)'
69
71
  } : {})
70
- },
71
- toggleIcon: {
72
- fill: componentTheme.fill,
73
- margin: '0 auto'
74
72
  }
75
73
  };
76
74
  };
package/lib/SideNavBar/index.js CHANGED
@@ -112,7 +112,7 @@ let SideNavBar = exports.SideNavBar = (_dec = (0, _emotion.withStyle)(_styles.de
112
112
  return this.state.minimized ? this.props.toggleLabel.minimizedLabel : this.props.toggleLabel.expandedLabel;
113
113
  }
114
114
  render() {
115
- var _this$props$styles2, _this$props$styles3, _this$props$styles4, _this$props$styles5;
115
+ var _this$props$styles2, _this$props$styles3, _this$props$styles4;
116
116
  const label = this.props.label;
117
117
  const props = (0, _omitProps.omitProps)(this.props, SideNavBar.allowedProps, ['minimized']);
118
118
  return (0, _emotion.jsx)("nav", Object.assign({}, props, {
@@ -123,17 +123,15 @@ let SideNavBar = exports.SideNavBar = (_dec = (0, _emotion.withStyle)(_styles.de
123
123
  }
124
124
  }), (0, _emotion.jsx)("ul", {
125
125
  css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.content
126
- }, this.renderChildren()), (0, _emotion.jsx)("div", {
127
- css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.toggle
128
- }, (0, _emotion.jsx)(_SideNavBarItem.SideNavBarItem, {
126
+ }, this.renderChildren()), (0, _emotion.jsx)(_SideNavBarItem.SideNavBarItem, {
129
127
  "aria-expanded": !this.minimized,
130
128
  onClick: this.handleNavToggle,
131
129
  icon: (0, _emotion.jsx)(_IconMoveStartLine.IconMoveStartLine, {
132
- css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.toggleIcon,
130
+ css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.toggleIcon,
133
131
  inline: false
134
132
  }),
135
133
  label: (0, _emotion.jsx)(_ScreenReaderContent.ScreenReaderContent, null, this.toggleMessage())
136
- })));
134
+ }));
137
135
  }
138
136
  }, _class2.displayName = "SideNavBar", _class2.componentId = 'SideNavBar', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
139
137
  children: null,
package/lib/SideNavBar/styles.js CHANGED
@@ -67,16 +67,14 @@ const generateStyle = (componentTheme, props, state) => {
67
67
  padding: '0',
68
68
  flex: '1 0 auto'
69
69
  },
70
- toggle: {
70
+ toggleIcon: {
71
+ fill: componentTheme.fill,
72
+ margin: '0 auto',
71
73
  transform: 'translate3d(0, 0, 0)',
72
74
  transition: `all ${componentTheme.toggleTransition}`,
73
75
  ...(minimized ? {
74
76
  transform: 'rotate3d(0, 1, 0, -180deg)'
75
77
  } : {})
76
- },
77
- toggleIcon: {
78
- fill: componentTheme.fill,
79
- margin: '0 auto'
80
78
  }
81
79
  };
82
80
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-side-nav-bar",
3
- "version": "8.49.1-snapshot-4",
3
+ "version": "8.49.1-snapshot-6",
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,32 +23,32 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-babel-preset": "8.49.1-snapshot-4",
27
- "@instructure/ui-color-utils": "8.49.1-snapshot-4",
28
- "@instructure/ui-test-locator": "8.49.1-snapshot-4",
29
- "@instructure/ui-test-utils": "8.49.1-snapshot-4",
30
- "@instructure/ui-themes": "8.49.1-snapshot-4"
26
+ "@instructure/ui-babel-preset": "8.49.1-snapshot-6",
27
+ "@instructure/ui-color-utils": "8.49.1-snapshot-6",
28
+ "@instructure/ui-test-locator": "8.49.1-snapshot-6",
29
+ "@instructure/ui-test-utils": "8.49.1-snapshot-6",
30
+ "@instructure/ui-themes": "8.49.1-snapshot-6"
31
31
  },
32
32
  "dependencies": {
33
33
  "@babel/runtime": "^7.23.2",
34
- "@instructure/console": "8.49.1-snapshot-4",
35
- "@instructure/debounce": "8.49.1-snapshot-4",
36
- "@instructure/emotion": "8.49.1-snapshot-4",
37
- "@instructure/shared-types": "8.49.1-snapshot-4",
38
- "@instructure/ui-a11y-content": "8.49.1-snapshot-4",
39
- "@instructure/ui-a11y-utils": "8.49.1-snapshot-4",
40
- "@instructure/ui-badge": "8.49.1-snapshot-4",
41
- "@instructure/ui-dom-utils": "8.49.1-snapshot-4",
42
- "@instructure/ui-focusable": "8.49.1-snapshot-4",
43
- "@instructure/ui-icons": "8.49.1-snapshot-4",
44
- "@instructure/ui-menu": "8.49.1-snapshot-4",
45
- "@instructure/ui-prop-types": "8.49.1-snapshot-4",
46
- "@instructure/ui-react-utils": "8.49.1-snapshot-4",
47
- "@instructure/ui-testable": "8.49.1-snapshot-4",
48
- "@instructure/ui-tooltip": "8.49.1-snapshot-4",
49
- "@instructure/ui-truncate-list": "8.49.1-snapshot-4",
50
- "@instructure/ui-utils": "8.49.1-snapshot-4",
51
- "@instructure/ui-view": "8.49.1-snapshot-4",
34
+ "@instructure/console": "8.49.1-snapshot-6",
35
+ "@instructure/debounce": "8.49.1-snapshot-6",
36
+ "@instructure/emotion": "8.49.1-snapshot-6",
37
+ "@instructure/shared-types": "8.49.1-snapshot-6",
38
+ "@instructure/ui-a11y-content": "8.49.1-snapshot-6",
39
+ "@instructure/ui-a11y-utils": "8.49.1-snapshot-6",
40
+ "@instructure/ui-badge": "8.49.1-snapshot-6",
41
+ "@instructure/ui-dom-utils": "8.49.1-snapshot-6",
42
+ "@instructure/ui-focusable": "8.49.1-snapshot-6",
43
+ "@instructure/ui-icons": "8.49.1-snapshot-6",
44
+ "@instructure/ui-menu": "8.49.1-snapshot-6",
45
+ "@instructure/ui-prop-types": "8.49.1-snapshot-6",
46
+ "@instructure/ui-react-utils": "8.49.1-snapshot-6",
47
+ "@instructure/ui-testable": "8.49.1-snapshot-6",
48
+ "@instructure/ui-tooltip": "8.49.1-snapshot-6",
49
+ "@instructure/ui-truncate-list": "8.49.1-snapshot-6",
50
+ "@instructure/ui-utils": "8.49.1-snapshot-6",
51
+ "@instructure/ui-view": "8.49.1-snapshot-6",
52
52
  "prop-types": "^15.8.1"
53
53
  },
54
54
  "peerDependencies": {
package/src/SideNavBar/index.tsx CHANGED
@@ -135,21 +135,19 @@ class SideNavBar extends Component<SideNavBarProps, SideNavBarState> {
135
135
  }}
136
136
  >
137
137
  <ul css={this.props.styles?.content}>{this.renderChildren()}</ul>
138
- <div css={this.props.styles?.toggle}>
139
- <SideNavBarItem
140
- aria-expanded={!this.minimized}
141
- onClick={this.handleNavToggle}
142
- icon={
143
- <IconMoveStartLine
144
- css={this.props.styles?.toggleIcon}
145
- inline={false}
146
- />
147
- }
148
- label={
149
- <ScreenReaderContent>{this.toggleMessage()}</ScreenReaderContent>
150
- }
151
- ></SideNavBarItem>
152
- </div>
138
+ <SideNavBarItem
139
+ aria-expanded={!this.minimized}
140
+ onClick={this.handleNavToggle}
141
+ icon={
142
+ <IconMoveStartLine
143
+ css={this.props.styles?.toggleIcon}
144
+ inline={false}
145
+ />
146
+ }
147
+ label={
148
+ <ScreenReaderContent>{this.toggleMessage()}</ScreenReaderContent>
149
+ }
150
+ ></SideNavBarItem>
153
151
  </nav>
154
152
  )
155
153
  }
package/src/SideNavBar/props.ts CHANGED
@@ -86,7 +86,7 @@ type SideNavBarProps = SideNavBarOwnProps &
86
86
  OtherHTMLAttributes<SideNavBarOwnProps>
87
87
 
88
88
  type SideNavBarStyle = ComponentStyle<
89
- 'navigation' | 'list' | 'content' | 'toggle' | 'toggleIcon'
89
+ 'navigation' | 'list' | 'content' | 'toggleIcon'
90
90
  >
91
91
 
92
92
  const propTypes: PropValidators<PropKeys> = {
package/src/SideNavBar/styles.ts CHANGED
@@ -68,14 +68,12 @@ const generateStyle = (
68
68
  padding: '0',
69
69
  flex: '1 0 auto'
70
70
  },
71
- toggle: {
71
+ toggleIcon: {
72
+ fill: componentTheme.fill,
73
+ margin: '0 auto',
72
74
  transform: 'translate3d(0, 0, 0)',
73
75
  transition: `all ${componentTheme.toggleTransition}`,
74
76
  ...(minimized ? { transform: 'rotate3d(0, 1, 0, -180deg)' } : {})
75
- },
76
- toggleIcon: {
77
- fill: componentTheme.fill,
78
- margin: '0 auto'
79
77
  }
80
78
  }
81
79
  }