@redocly/theme 0.71.0-next.6 → 0.71.0-next.7

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 (7) hide show
  1. package/lib/components/PageActions/PageActions.js +3 -2
  2. package/lib/components/PageActions/variables.js +2 -1
  3. package/lib/markdoc/components/Heading/Heading.js +9 -0
  4. package/package.json +1 -1
  5. package/src/components/PageActions/PageActions.tsx +4 -2
  6. package/src/components/PageActions/variables.ts +2 -1
  7. package/src/markdoc/components/Heading/Heading.tsx +10 -1
package/lib/components/PageActions/PageActions.js CHANGED
@@ -87,7 +87,7 @@ function PageActions(props) {
87
87
  return (react_1.default.createElement(StyledDropdownMenuItem, { key: key, onAction: () => handleActionClick(action) }, content));
88
88
  });
89
89
  return (react_1.default.createElement(PageActionsWrapper, { "data-component-name": "PageActions/PageActions" },
90
- react_1.default.createElement(SplitButton_1.SplitButton, { portalled: true, variant: "outlined", size: "medium", toggleAriaLabel: translate('page.actions.moreActions', 'More actions'), button: react_1.default.createElement(Button_1.Button, { variant: "outlined", icon: renderIcon(buttonAction, actionState), to: 'link' in buttonAction ? buttonAction.link : undefined, external: true, onClick: () => handleActionClick(buttonAction) }, buttonAction.buttonText) }, actions.length > 1 ? react_1.default.createElement(StyledDropdownMenu, null, menuItems) : null)));
90
+ react_1.default.createElement(SplitButton_1.SplitButton, { portalled: true, variant: "outlined", size: "small", toggleAriaLabel: translate('page.actions.moreActions', 'More actions'), button: react_1.default.createElement(Button_1.Button, { variant: "outlined", size: "small", icon: renderIcon(buttonAction, actionState), to: 'link' in buttonAction ? buttonAction.link : undefined, external: true, onClick: () => handleActionClick(buttonAction) }, buttonAction.buttonText) }, actions.length > 1 ? react_1.default.createElement(StyledDropdownMenu, null, menuItems) : null)));
91
91
  }
92
92
  function renderIcon(buttonAction, actionState) {
93
93
  switch (actionState) {
@@ -105,8 +105,9 @@ const PageActionsWrapper = styled_components_1.default.div `
105
105
  user-select: none;
106
106
  --button-color: var(--page-actions-button-text-color);
107
107
 
108
- .button-group-size-medium .button.button-size-medium {
108
+ && .button.button-size-small {
109
109
  --button-icon-left-padding: var(--page-actions-button-padding);
110
+ --button-icon-padding: var(--page-actions-toggle-padding);
110
111
  }
111
112
  `;
112
113
  const LinkMenuItem = (0, styled_components_1.default)(Link_1.Link) `
package/lib/components/PageActions/variables.js CHANGED
@@ -7,7 +7,8 @@ exports.pageActions = (0, styled_components_1.css) `
7
7
  --page-actions-padding-left: var(--spacing-sm);
8
8
 
9
9
  --page-actions-button-text-color: var(--text-color-secondary);
10
- --page-actions-button-padding: 5px 14px 5px var(--spacing-sm);
10
+ --page-actions-button-padding: 0 var(--spacing-sm) 0 10px;
11
+ --page-actions-toggle-padding: 4px;
11
12
 
12
13
  --page-actions-dropdown-max-height: fit-content;
13
14
 
package/lib/markdoc/components/Heading/Heading.js CHANGED
@@ -100,6 +100,15 @@ const HeadingContentWrapper = styled_components_1.default.div `
100
100
  visibility: hidden;
101
101
  }
102
102
  }
103
+
104
+ @media screen and (max-width: ${utils_1.breakpoints.small}) {
105
+ flex-wrap: wrap;
106
+
107
+ & > [data-component-name='PageActions/PageActions'] {
108
+ flex-basis: 100%;
109
+ --page-actions-padding-left: 0;
110
+ }
111
+ }
103
112
  `;
104
113
  const StyledHeadingText = styled_components_1.default.span `
105
114
  margin: auto 0;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redocly/theme",
3
- "version": "0.71.0-next.6",
3
+ "version": "0.71.0-next.7",
4
4
  "description": "Shared UI components lib",
5
5
  "keywords": [
6
6
  "theme",
package/src/components/PageActions/PageActions.tsx CHANGED
@@ -78,11 +78,12 @@ export function PageActions(props: PageActionProps): JSX.Element | null {
78
78
  <SplitButton
79
79
  portalled
80
80
  variant="outlined"
81
- size="medium"
81
+ size="small"
82
82
  toggleAriaLabel={translate('page.actions.moreActions', 'More actions')}
83
83
  button={
84
84
  <Button
85
85
  variant="outlined"
86
+ size="small"
86
87
  icon={renderIcon(buttonAction, actionState)}
87
88
  to={'link' in buttonAction ? buttonAction.link : undefined}
88
89
  external
@@ -115,8 +116,9 @@ const PageActionsWrapper = styled.div`
115
116
  user-select: none;
116
117
  --button-color: var(--page-actions-button-text-color);
117
118
 
118
- .button-group-size-medium .button.button-size-medium {
119
+ && .button.button-size-small {
119
120
  --button-icon-left-padding: var(--page-actions-button-padding);
121
+ --button-icon-padding: var(--page-actions-toggle-padding);
120
122
  }
121
123
  `;
122
124
 
package/src/components/PageActions/variables.ts CHANGED
@@ -5,7 +5,8 @@ export const pageActions = css`
5
5
  --page-actions-padding-left: var(--spacing-sm);
6
6
 
7
7
  --page-actions-button-text-color: var(--text-color-secondary);
8
- --page-actions-button-padding: 5px 14px 5px var(--spacing-sm);
8
+ --page-actions-button-padding: 0 var(--spacing-sm) 0 10px;
9
+ --page-actions-toggle-padding: 4px;
9
10
 
10
11
  --page-actions-dropdown-max-height: fit-content;
11
12
 
package/src/markdoc/components/Heading/Heading.tsx CHANGED
@@ -5,7 +5,7 @@ import { useLocation } from 'react-router';
5
5
  import type { JSX, PropsWithChildren, ReactElement, ReactNode } from 'react';
6
6
 
7
7
  import { Image as MarkdocImage } from '@redocly/theme/markdoc/components/Image/Image';
8
- import { concatClassNames } from '@redocly/theme/core/utils';
8
+ import { breakpoints, concatClassNames } from '@redocly/theme/core/utils';
9
9
  import { LinkIcon } from '@redocly/theme/icons/LinkIcon/LinkIcon';
10
10
  import { PageActions } from '@redocly/theme/components/PageActions/PageActions';
11
11
  import { useThemeHooks } from '@redocly/theme/core/hooks';
@@ -125,6 +125,15 @@ const HeadingContentWrapper = styled.div`
125
125
  visibility: hidden;
126
126
  }
127
127
  }
128
+
129
+ @media screen and (max-width: ${breakpoints.small}) {
130
+ flex-wrap: wrap;
131
+
132
+ & > [data-component-name='PageActions/PageActions'] {
133
+ flex-basis: 100%;
134
+ --page-actions-padding-left: 0;
135
+ }
136
+ }
128
137
  `;
129
138
 
130
139
  const StyledHeadingText = styled.span`