@redocly/theme 0.21.1 → 0.21.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 (17) hide show
  1. package/lib/components/Menu/MenuGroup.js +15 -5
  2. package/lib/components/Menu/MenuItem.js +1 -0
  3. package/lib/components/Menu/MobileMenuGroup.js +10 -4
  4. package/lib/components/Menu/styledVariables.js +2 -0
  5. package/lib/components/PageNavigation/NextButton.js +1 -0
  6. package/lib/components/PageNavigation/PreviousButton.js +1 -0
  7. package/lib/components/Sidebar/ApiCallItem.js +1 -0
  8. package/lib/components/Sidebar/styledVariables.js +2 -0
  9. package/package.json +1 -1
  10. package/src/components/Menu/MenuGroup.tsx +22 -4
  11. package/src/components/Menu/MenuItem.tsx +1 -0
  12. package/src/components/Menu/MobileMenuGroup.tsx +22 -6
  13. package/src/components/Menu/styledVariables.ts +2 -0
  14. package/src/components/PageNavigation/NextButton.tsx +1 -0
  15. package/src/components/PageNavigation/PreviousButton.tsx +1 -0
  16. package/src/components/Sidebar/ApiCallItem.tsx +1 -0
  17. package/src/components/Sidebar/styledVariables.ts +2 -0
package/lib/components/Menu/MenuGroup.js CHANGED
@@ -55,10 +55,11 @@ function MenuGroup({ item, isExpanded, toggleExpanded, children, className, }) {
55
55
  }, [isExpanded]);
56
56
  return (react_1.default.createElement(Wrapper, { "data-component-name": "Menu/MenuGroup", className: className },
57
57
  react_1.default.createElement(MenuLinkItem_1.MenuLinkItem, { item: item },
58
- react_1.default.createElement(MenuGroupLabel, { onClick: toggleExpanded, isAlwaysExpanded: item.expanded === 'always', active: item.active, role: !item.link ? 'link' : 'none', expanded: isExpanded },
59
- item.icon ? react_1.default.createElement(SidebarItemIcon_1.SidebarItemIcon, { src: item.icon }) : null,
60
- translate(item.labelTranslationKey, item.label),
61
- !!item.items.length && (react_1.default.createElement(ArrowIcon_1.ArrowIcon, { direction: isExpanded ? 'down' : 'right', weight: "thin" })))),
58
+ react_1.default.createElement(MenuGroupLabel, { onClick: toggleExpanded, isAlwaysExpanded: item.expanded === 'always', active: item.active, role: !item.link ? 'link' : 'none', expanded: isExpanded, withArrow: !!item.items.length },
59
+ !!item.items.length && (react_1.default.createElement(ArrowIcon_1.ArrowIcon, { direction: isExpanded ? 'down' : 'right', weight: "thin" })),
60
+ react_1.default.createElement(LabelWrapper, null,
61
+ item.icon ? react_1.default.createElement(SidebarItemIcon_1.SidebarItemIcon, { src: item.icon }) : null,
62
+ translate(item.labelTranslationKey, item.label)))),
62
63
  react_1.default.createElement(MenuWrapper, { isExpanded: isExpanded }, showChildren ? children : null),
63
64
  item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
64
65
  }
@@ -82,7 +83,8 @@ const MenuGroupLabel = (0, styled_components_1.default)(MenuItemLabel_1.MenuItem
82
83
  color: var(--sidebar-item-group-text-color);
83
84
  background: var(--sidebar-item-group-background-color);
84
85
  display: flex;
85
- justify-content: space-between;
86
+ justify-content: flex-start;
87
+ gap: var(--sidebar-item-group-gap);
86
88
 
87
89
  ${({ active }) => active
88
90
  ? `color: var(--sidebar-item-group-active-text-color);
@@ -93,5 +95,13 @@ const MenuGroupLabel = (0, styled_components_1.default)(MenuItemLabel_1.MenuItem
93
95
  `
94
96
  color: var(--sidebar-item-group-active-text-color);
95
97
  `}
98
+
99
+ ${({ withArrow }) => !withArrow &&
100
+ `
101
+ padding-left: var(--sidebar-item-label-padding);
102
+ `}
103
+ `;
104
+ const LabelWrapper = styled_components_1.default.div `
105
+ display: flex;
96
106
  `;
97
107
  //# sourceMappingURL=MenuGroup.js.map
package/lib/components/Menu/MenuItem.js CHANGED
@@ -25,6 +25,7 @@ function MenuItem({ item, className }) {
25
25
  exports.MenuItem = MenuItem;
26
26
  const Wrapper = styled_components_1.default.div ``;
27
27
  const Label = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel) `
28
+ padding-left: var(--sidebar-item-label-padding);
28
29
  color: var(--mobile-menu-item-text-color);
29
30
 
30
31
  ${({ theme }) => theme.mediaQueries.medium} {
package/lib/components/Menu/MobileMenuGroup.js CHANGED
@@ -16,11 +16,11 @@ function MobileMenuGroup({ item, isExpanded, toggleExpanded, children, }) {
16
16
  const { translate } = (0, hooks_1.useTranslate)();
17
17
  return (react_1.default.createElement(Wrapper, { "data-component-name": "Menu/MobileMenuGroup" },
18
18
  react_1.default.createElement(MenuLinkItem_1.MenuLinkItem, { item: item },
19
- react_1.default.createElement(MenuGroupLabel, { onClick: toggleExpanded, active: item.active, expanded: isExpanded },
19
+ react_1.default.createElement(MenuGroupLabel, { onClick: toggleExpanded, active: item.active, expanded: isExpanded, withArrow: !!item.items.length },
20
+ !!item.items.length && (react_1.default.createElement(icons_1.ArrowIcon, { direction: isExpanded ? 'down' : 'right', weight: "thin" })),
20
21
  react_1.default.createElement(LabelContainer, null,
21
22
  item.icon ? react_1.default.createElement(SidebarItemIcon_1.SidebarItemIcon, { src: item.icon }) : null,
22
- react_1.default.createElement(Label, null, translate(item.labelTranslationKey, item.label))),
23
- !!item.items.length && (react_1.default.createElement(icons_1.ArrowIcon, { direction: isExpanded ? 'down' : 'right', weight: "thin" })))),
23
+ react_1.default.createElement(Label, null, translate(item.labelTranslationKey, item.label))))),
24
24
  react_1.default.createElement(MenuWrapper, { isExpanded: isExpanded }, children),
25
25
  item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
26
26
  }
@@ -39,7 +39,8 @@ const MenuGroupLabel = (0, styled_components_1.default)(MenuItemLabel_1.MenuItem
39
39
  color: var(--mobile-menu-item-text-color);
40
40
  background: var(--mobile-menu-background);
41
41
  display: flex;
42
- justify-content: space-between;
42
+ justify-content: flex-start;
43
+ gap: var(--mobile-menu-item-group-gap);
43
44
 
44
45
  ${({ active }) => active &&
45
46
  `
@@ -51,5 +52,10 @@ const MenuGroupLabel = (0, styled_components_1.default)(MenuItemLabel_1.MenuItem
51
52
  `
52
53
  color: var(--mobile-menu-item-active-text-color);
53
54
  `}
55
+
56
+ ${({ withArrow }) => !withArrow &&
57
+ `
58
+ padding-left: var(--mobile-menu-item-label-padding);
59
+ `}
54
60
  `;
55
61
  //# sourceMappingURL=MobileMenuGroup.js.map
package/lib/components/Menu/styledVariables.js CHANGED
@@ -40,6 +40,8 @@ exports.mobileMenu = (0, styled_components_1.css) `
40
40
  --mobile-menu-item-text-color: var(--text-secondary); // @presenter Color
41
41
  --mobile-menu-item-active-background-color: var(--bg-raised); // @presenter Color
42
42
  --mobile-menu-item-active-text-color: var(--text-primary); // @presenter Color
43
+ --mobile-menu-item-label-padding: var(--spacing-xl); // @presenter Spacing
44
+ --mobile-menu-item-group-gap: var(--spacing-xs); // @presenter Spacing
43
45
 
44
46
  /**
45
47
  * @tokens Mobile Menu control button
package/lib/components/PageNavigation/NextButton.js CHANGED
@@ -48,5 +48,6 @@ function NextButton({ nextPage, className }) {
48
48
  exports.NextButton = NextButton;
49
49
  const StyledButton = (0, styled_components_1.default)(Button_1.Button) `
50
50
  font-family: var(--font-family-base);
51
+ text-wrap: wrap;
51
52
  `;
52
53
  //# sourceMappingURL=NextButton.js.map
package/lib/components/PageNavigation/PreviousButton.js CHANGED
@@ -28,5 +28,6 @@ function PreviousButton({ prevPage, className }) {
28
28
  exports.PreviousButton = PreviousButton;
29
29
  const StyledButton = (0, styled_components_1.default)(Button_1.Button) `
30
30
  font-family: var(--font-family-base);
31
+ text-wrap: wrap;
31
32
  `;
32
33
  //# sourceMappingURL=PreviousButton.js.map
package/lib/components/Sidebar/ApiCallItem.js CHANGED
@@ -23,6 +23,7 @@ const Label = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel) `
23
23
  display: flex;
24
24
  justify-content: space-between;
25
25
  color: var(--mobile-menu-item-text-color);
26
+ padding-left: var(--sidebar-item-label-padding);
26
27
 
27
28
  ${({ theme }) => theme.mediaQueries.medium} {
28
29
  color: var(--sidebar-item-text-color);
package/lib/components/Sidebar/styledVariables.js CHANGED
@@ -71,6 +71,7 @@ exports.sidebar = (0, styled_components_1.css) `
71
71
  --sidebar-margin-horizontal: var(--spacing-base); // @presenter Spacing
72
72
  --sidebar-item-padding-vertical: var(--spacing-xs); // @presenter Spacing
73
73
  --sidebar-item-padding-horizontal: var(--spacing-xs); // @presenter Spacing
74
+ --sidebar-item-label-padding: var(--spacing-xl); // @presenter Spacing
74
75
 
75
76
  /**
76
77
  * @tokens Sidebar item border
@@ -111,6 +112,7 @@ exports.sidebar = (0, styled_components_1.css) `
111
112
  --sidebar-item-group-background-color: var(--sidebar-background-color); // @presenter Color
112
113
  --sidebar-item-group-active-text-color: var(--sidebar-item-active-color); // @presenter Color
113
114
  --sidebar-item-group-active-background-color: var(--sidebar-item-active-background-color);
115
+ --sidebar-item-group-gap: var(--spacing-xs); // @presenter Spacing
114
116
 
115
117
  // we need a theme config for chevron-location: left (default), right-compact, right, none
116
118
  // we need another theme config for chevron-style: up-down, down-up, right-down, down-right
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redocly/theme",
3
- "version": "0.21.1",
3
+ "version": "0.21.2",
4
4
  "description": "Shared UI components lib",
5
5
  "keywords": [
6
6
  "theme",
package/src/components/Menu/MenuGroup.tsx CHANGED
@@ -50,12 +50,15 @@ export function MenuGroup({
50
50
  active={item.active}
51
51
  role={!item.link ? 'link' : 'none'}
52
52
  expanded={isExpanded}
53
+ withArrow={!!item.items.length}
53
54
  >
54
- {item.icon ? <SidebarItemIcon src={item.icon} /> : null}
55
- {translate(item.labelTranslationKey, item.label)}
56
55
  {!!item.items.length && (
57
56
  <ArrowIcon direction={isExpanded ? 'down' : 'right'} weight="thin" />
58
57
  )}
58
+ <LabelWrapper>
59
+ {item.icon ? <SidebarItemIcon src={item.icon} /> : null}
60
+ {translate(item.labelTranslationKey, item.label)}
61
+ </LabelWrapper>
59
62
  </MenuGroupLabel>
60
63
  </MenuLinkItem>
61
64
 
@@ -79,7 +82,11 @@ const MenuWrapper = styled.div<{ isExpanded?: boolean }>`
79
82
  transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;`};
80
83
  `;
81
84
 
82
- const MenuGroupLabel = styled(MenuItemLabel)<{ isAlwaysExpanded?: boolean; expanded?: boolean }>`
85
+ const MenuGroupLabel = styled(MenuItemLabel)<{
86
+ isAlwaysExpanded?: boolean;
87
+ expanded?: boolean;
88
+ withArrow?: boolean;
89
+ }>`
83
90
  padding-left: var(--sidebar-item-padding-horizontal);
84
91
  cursor: ${(props) => (props.isAlwaysExpanded ? 'default' : 'pointer')};
85
92
  font-family: var(--sidebar-item-group-font-family);
@@ -88,7 +95,8 @@ const MenuGroupLabel = styled(MenuItemLabel)<{ isAlwaysExpanded?: boolean; expan
88
95
  color: var(--sidebar-item-group-text-color);
89
96
  background: var(--sidebar-item-group-background-color);
90
97
  display: flex;
91
- justify-content: space-between;
98
+ justify-content: flex-start;
99
+ gap: var(--sidebar-item-group-gap);
92
100
 
93
101
  ${({ active }) =>
94
102
  active
@@ -101,4 +109,14 @@ const MenuGroupLabel = styled(MenuItemLabel)<{ isAlwaysExpanded?: boolean; expan
101
109
  `
102
110
  color: var(--sidebar-item-group-active-text-color);
103
111
  `}
112
+
113
+ ${({ withArrow }) =>
114
+ !withArrow &&
115
+ `
116
+ padding-left: var(--sidebar-item-label-padding);
117
+ `}
118
+ `;
119
+
120
+ const LabelWrapper = styled.div`
121
+ display: flex;
104
122
  `;
package/src/components/Menu/MenuItem.tsx CHANGED
@@ -29,6 +29,7 @@ export function MenuItem({ item, className }: MenuItemProps): JSX.Element {
29
29
  const Wrapper = styled.div``;
30
30
 
31
31
  const Label = styled(MenuItemLabel)<{ active?: boolean }>`
32
+ padding-left: var(--sidebar-item-label-padding);
32
33
  color: var(--mobile-menu-item-text-color);
33
34
 
34
35
  ${({ theme }) => theme.mediaQueries.medium} {
package/src/components/Menu/MobileMenuGroup.tsx CHANGED
@@ -26,14 +26,19 @@ export function MobileMenuGroup({
26
26
  return (
27
27
  <Wrapper data-component-name="Menu/MobileMenuGroup">
28
28
  <MenuLinkItem item={item}>
29
- <MenuGroupLabel onClick={toggleExpanded} active={item.active} expanded={isExpanded}>
29
+ <MenuGroupLabel
30
+ onClick={toggleExpanded}
31
+ active={item.active}
32
+ expanded={isExpanded}
33
+ withArrow={!!item.items.length}
34
+ >
35
+ {!!item.items.length && (
36
+ <ArrowIcon direction={isExpanded ? 'down' : 'right'} weight="thin" />
37
+ )}
30
38
  <LabelContainer>
31
39
  {item.icon ? <SidebarItemIcon src={item.icon} /> : null}
32
40
  <Label>{translate(item.labelTranslationKey, item.label)}</Label>
33
41
  </LabelContainer>
34
- {!!item.items.length && (
35
- <ArrowIcon direction={isExpanded ? 'down' : 'right'} weight="thin" />
36
- )}
37
42
  </MenuGroupLabel>
38
43
  </MenuLinkItem>
39
44
  <MenuWrapper isExpanded={isExpanded}>{children}</MenuWrapper>
@@ -56,11 +61,16 @@ const MenuWrapper = styled.div<{ isExpanded?: boolean }>`
56
61
  ${(props) => !props.isExpanded && 'max-height: 0'}
57
62
  `;
58
63
 
59
- const MenuGroupLabel = styled(MenuItemLabel)<{ active?: boolean; expanded?: boolean }>`
64
+ const MenuGroupLabel = styled(MenuItemLabel)<{
65
+ active?: boolean;
66
+ expanded?: boolean;
67
+ withArrow?: boolean;
68
+ }>`
60
69
  color: var(--mobile-menu-item-text-color);
61
70
  background: var(--mobile-menu-background);
62
71
  display: flex;
63
- justify-content: space-between;
72
+ justify-content: flex-start;
73
+ gap: var(--mobile-menu-item-group-gap);
64
74
 
65
75
  ${({ active }) =>
66
76
  active &&
@@ -74,4 +84,10 @@ const MenuGroupLabel = styled(MenuItemLabel)<{ active?: boolean; expanded?: bool
74
84
  `
75
85
  color: var(--mobile-menu-item-active-text-color);
76
86
  `}
87
+
88
+ ${({ withArrow }) =>
89
+ !withArrow &&
90
+ `
91
+ padding-left: var(--mobile-menu-item-label-padding);
92
+ `}
77
93
  `;
package/src/components/Menu/styledVariables.ts CHANGED
@@ -38,6 +38,8 @@ export const mobileMenu = css`
38
38
  --mobile-menu-item-text-color: var(--text-secondary); // @presenter Color
39
39
  --mobile-menu-item-active-background-color: var(--bg-raised); // @presenter Color
40
40
  --mobile-menu-item-active-text-color: var(--text-primary); // @presenter Color
41
+ --mobile-menu-item-label-padding: var(--spacing-xl); // @presenter Spacing
42
+ --mobile-menu-item-group-gap: var(--spacing-xs); // @presenter Spacing
41
43
 
42
44
  /**
43
45
  * @tokens Mobile Menu control button
package/src/components/PageNavigation/NextButton.tsx CHANGED
@@ -42,4 +42,5 @@ export function NextButton({ nextPage, className }: NextPageType): JSX.Element {
42
42
 
43
43
  const StyledButton = styled(Button)`
44
44
  font-family: var(--font-family-base);
45
+ text-wrap: wrap;
45
46
  `;
package/src/components/PageNavigation/PreviousButton.tsx CHANGED
@@ -45,4 +45,5 @@ export function PreviousButton({ prevPage, className }: PreviousPageType): JSX.E
45
45
 
46
46
  const StyledButton = styled(Button)`
47
47
  font-family: var(--font-family-base);
48
+ text-wrap: wrap;
48
49
  `;
package/src/components/Sidebar/ApiCallItem.tsx CHANGED
@@ -28,6 +28,7 @@ const Label = styled(MenuItemLabel)`
28
28
  display: flex;
29
29
  justify-content: space-between;
30
30
  color: var(--mobile-menu-item-text-color);
31
+ padding-left: var(--sidebar-item-label-padding);
31
32
 
32
33
  ${({ theme }) => theme.mediaQueries.medium} {
33
34
  color: var(--sidebar-item-text-color);
package/src/components/Sidebar/styledVariables.ts CHANGED
@@ -69,6 +69,7 @@ export const sidebar = css`
69
69
  --sidebar-margin-horizontal: var(--spacing-base); // @presenter Spacing
70
70
  --sidebar-item-padding-vertical: var(--spacing-xs); // @presenter Spacing
71
71
  --sidebar-item-padding-horizontal: var(--spacing-xs); // @presenter Spacing
72
+ --sidebar-item-label-padding: var(--spacing-xl); // @presenter Spacing
72
73
 
73
74
  /**
74
75
  * @tokens Sidebar item border
@@ -109,6 +110,7 @@ export const sidebar = css`
109
110
  --sidebar-item-group-background-color: var(--sidebar-background-color); // @presenter Color
110
111
  --sidebar-item-group-active-text-color: var(--sidebar-item-active-color); // @presenter Color
111
112
  --sidebar-item-group-active-background-color: var(--sidebar-item-active-background-color);
113
+ --sidebar-item-group-gap: var(--spacing-xs); // @presenter Spacing
112
114
 
113
115
  // we need a theme config for chevron-location: left (default), right-compact, right, none
114
116
  // we need another theme config for chevron-style: up-down, down-up, right-down, down-right