@learningpool/ui 1.6.1 → 1.6.2

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 (10) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/components/navigation/VerticalNavigation/VerticalNavigation.js +1 -0
  3. package/dist/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemFlyoutMenuStyles.js +1 -1
  4. package/dist/components/navigation/VerticalNavigation/VerticalNavigationStyles.js +1 -1
  5. package/dist/package.json +1 -1
  6. package/package.json +1 -1
  7. package/src/lib/components/navigation/VerticalNavigation/VerticalNavigation.tsx +1 -0
  8. package/src/lib/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemFlyoutMenuStyles.tsx +1 -1
  9. package/src/lib/components/navigation/VerticalNavigation/VerticalNavigationStyles.tsx +0 -1
  10. package/src/stories/Components/Navigation/VerticalNavigation/Examples.stories.tsx +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ ## [1.6.2](https://github.com/HT2-Labs/design-system/compare/v1.6.1...v1.6.2) (2023-02-07)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * **VerticalNavigatioin:** - Fix overflow of long flyoutmenu items [DS-605] ([#149](https://github.com/HT2-Labs/design-system/issues/149)) ([bd1f88b](https://github.com/HT2-Labs/design-system/commit/bd1f88b36067af093ccf1dc8deb0deb061b34a82))
7
+
1
8
  ## [1.6.1](https://github.com/HT2-Labs/design-system/compare/v1.6.0...v1.6.1) (2023-02-07)
2
9
 
3
10
 
package/dist/components/navigation/VerticalNavigation/VerticalNavigation.js CHANGED
@@ -191,6 +191,7 @@ var VerticalNavigation = function (props) {
191
191
  ? theme.palette.primary.main
192
192
  : theme.palette.background.paper,
193
193
  flex: '1 1px',
194
+ marginTop: '-1px',
194
195
  overflow: 'auto',
195
196
  position: 'relative'
196
197
  } }, { children: _jsx(StyledNav, __assign({ tabIndex: -1, "aria-label": 'Primary' }, { children: _jsx(List, __assign({ style: {
package/dist/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemFlyoutMenuStyles.js CHANGED
@@ -11,7 +11,7 @@ export var DRAWER_WIDTH = {
11
11
  };
12
12
  export var FlyoutMenuPaper = styled(Paper, {
13
13
  shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen' && prop !== 'open' && prop !== 'anchorEl'; }
14
- })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: transparent none;\n box-shadow: none;\n left: ", ";\n perspective: 800px;\n pointer-events: ", ";\n position: fixed;\n /* Check against height of browser should be top or bottom positioned */\n top: ", ";\n width: 200px;\n z-index: 2;\n"], ["\n background: transparent none;\n box-shadow: none;\n left: ", ";\n perspective: 800px;\n pointer-events: ", ";\n position: fixed;\n /* Check against height of browser should be top or bottom positioned */\n top: ", ";\n width: 200px;\n z-index: 2;\n"])), function (props) { return props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded, "px") : "".concat(DRAWER_WIDTH.Collapsed - 3, "px"); }, function (props) { return props.open ? 'auto' : 'none'; }, function (props) { return props.anchorEl
14
+ })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: transparent none;\n box-shadow: none;\n left: ", ";\n perspective: 800px;\n pointer-events: ", ";\n position: fixed;\n /* Check against height of browser should be top or bottom positioned */\n top: ", ";\n min-width: 200px;\n z-index: 2;\n"], ["\n background: transparent none;\n box-shadow: none;\n left: ", ";\n perspective: 800px;\n pointer-events: ", ";\n position: fixed;\n /* Check against height of browser should be top or bottom positioned */\n top: ", ";\n min-width: 200px;\n z-index: 2;\n"])), function (props) { return props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded, "px") : "".concat(DRAWER_WIDTH.Collapsed - 3, "px"); }, function (props) { return props.open ? 'auto' : 'none'; }, function (props) { return props.anchorEl
15
15
  ? "".concat(props.anchorEl.getBoundingClientRect().top, "px")
16
16
  : 'auto'; });
17
17
  export var FlyoutMenuWrap = styled('div', {
package/dist/components/navigation/VerticalNavigation/VerticalNavigationStyles.js CHANGED
@@ -30,7 +30,7 @@ export var DrawerToggleHitboxContent = styled('span')(templateObject_3 || (templ
30
30
  ? props.theme.palette.primary.main
31
31
  : props.theme.palette.background.paper; }, function (props) { return props.theme.spacing(0.5); });
32
32
  export var StyledAside = styled('aside')(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""])));
33
- export var StyledNav = styled('nav')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-start;\n margin-top: -1px;\n overflow-x: hidden;\n overflow-y: auto;\n\n // Firefox and future scrollbars\n * & {\n scrollbar-width: thin;\n scrollbar-color: ", ";\n transition: backgroundColor\n ", "ms\n ", ";\n }\n\n * &:hover {\n scrollbar-color: ", ";\n }\n\n // Webkit and fall back scrollbars\n ::-webkit-scrollbar {\n width: 8px;\n }\n\n ::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 55px;\n transition: backgroundColor\n ", "ms\n ", ";\n }\n\n ::-webkit-scrollbar-thumb:hover {\n background-color: ", ";\n }\n"], ["\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-start;\n margin-top: -1px;\n overflow-x: hidden;\n overflow-y: auto;\n\n // Firefox and future scrollbars\n * & {\n scrollbar-width: thin;\n scrollbar-color: ", ";\n transition: backgroundColor\n ", "ms\n ", ";\n }\n\n * &:hover {\n scrollbar-color: ", ";\n }\n\n // Webkit and fall back scrollbars\n ::-webkit-scrollbar {\n width: 8px;\n }\n\n ::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 55px;\n transition: backgroundColor\n ", "ms\n ", ";\n }\n\n ::-webkit-scrollbar-thumb:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.theme.palette.mode === 'dark'
33
+ export var StyledNav = styled('nav')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-start;\n overflow-x: hidden;\n overflow-y: auto;\n\n // Firefox and future scrollbars\n * & {\n scrollbar-width: thin;\n scrollbar-color: ", ";\n transition: backgroundColor\n ", "ms\n ", ";\n }\n\n * &:hover {\n scrollbar-color: ", ";\n }\n\n // Webkit and fall back scrollbars\n ::-webkit-scrollbar {\n width: 8px;\n }\n\n ::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 55px;\n transition: backgroundColor\n ", "ms\n ", ";\n }\n\n ::-webkit-scrollbar-thumb:hover {\n background-color: ", ";\n }\n"], ["\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-start;\n overflow-x: hidden;\n overflow-y: auto;\n\n // Firefox and future scrollbars\n * & {\n scrollbar-width: thin;\n scrollbar-color: ", ";\n transition: backgroundColor\n ", "ms\n ", ";\n }\n\n * &:hover {\n scrollbar-color: ", ";\n }\n\n // Webkit and fall back scrollbars\n ::-webkit-scrollbar {\n width: 8px;\n }\n\n ::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 55px;\n transition: backgroundColor\n ", "ms\n ", ";\n }\n\n ::-webkit-scrollbar-thumb:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.theme.palette.mode === 'dark'
34
34
  ? props.theme.palette.primary.main
35
35
  : props.theme.palette.background.paper; }, function (props) {
36
36
  return props.theme.palette.mode === 'dark'
package/dist/package.json CHANGED
@@ -9,7 +9,7 @@
9
9
  "components",
10
10
  "ui"
11
11
  ],
12
- "version": "1.0.0",
12
+ "version": "1.6.1",
13
13
  "private": false,
14
14
  "main": "index.js",
15
15
  "module": "index.js",
package/package.json CHANGED
@@ -9,7 +9,7 @@
9
9
  "components",
10
10
  "ui"
11
11
  ],
12
- "version": "1.6.1",
12
+ "version": "1.6.2",
13
13
  "private": false,
14
14
  "main": "dist/index.js",
15
15
  "module": "dist/index.js",
package/src/lib/components/navigation/VerticalNavigation/VerticalNavigation.tsx CHANGED
@@ -307,6 +307,7 @@ const VerticalNavigation = (
307
307
  ? theme.palette.primary.main
308
308
  : theme.palette.background.paper,
309
309
  flex: '1 1px',
310
+ marginTop: '-1px',
310
311
  overflow: 'auto',
311
312
  position: 'relative'
312
313
  }}
package/src/lib/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemFlyoutMenuStyles.tsx CHANGED
@@ -27,7 +27,7 @@ export const FlyoutMenuPaper = styled(Paper, {
27
27
  top: ${props => props.anchorEl
28
28
  ? `${props.anchorEl.getBoundingClientRect().top}px`
29
29
  : 'auto'};
30
- width: 200px;
30
+ min-width: 200px;
31
31
  z-index: 2;
32
32
  `
33
33
 
package/src/lib/components/navigation/VerticalNavigation/VerticalNavigationStyles.tsx CHANGED
@@ -113,7 +113,6 @@ export const StyledNav = styled('nav')`
113
113
  flex: 1 auto;
114
114
  flex-direction: column;
115
115
  justify-content: flex-start;
116
- margin-top: -1px;
117
116
  overflow-x: hidden;
118
117
  overflow-y: auto;
119
118
 
package/src/stories/Components/Navigation/VerticalNavigation/Examples.stories.tsx CHANGED
@@ -43,7 +43,7 @@ export const Default: ComponentStory<typeof VerticalNavigation> = (args) => {
43
43
  onClick: () => console.log('Action: First sub item clicked')
44
44
  },
45
45
  { label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do' },
46
- { label: 'Third Item' },
46
+ { label: 'Longstringoftextthatdoesntwrap Item' },
47
47
  { label: 'Forth Item' }
48
48
  ]
49
49
  },