@redocly/theme 0.63.0-next.0 → 0.63.0-next.1

package/lib/components/Buttons/EditPageButton.js

@@ -8,37 +8,15 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const EditIcon_1 = require("../../icons/EditIcon/EditIcon");
-const Link_1 = require("../../components/Link/Link");
+const Button_1 = require("../../components/Button/Button");
 function EditPageButton({ to }) {
     const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const telemetry = useTelemetry();
-    return (react_1.default.createElement(EditPageButtonWrapper, { "data-component-name": "Buttons/EditPageButton", target: "_blank", to: to, onClick: () => telemetry.sendEditPageLinkClickedMessage() },
-        react_1.default.createElement(ButtonIcon, null),
-        react_1.default.createElement(ButtonText, { "data-translation-key": "markdown.editPage.text" }, translate('markdown.editPage.text', 'Edit'))));
+    return (react_1.default.createElement(EditPageButtonWrapper, { "data-component-name": "Buttons/EditPageButton" },
+        react_1.default.createElement(Button_1.Button, { to: to, external: true, variant: "ghost", size: "small", icon: react_1.default.createElement(EditIcon_1.EditIcon, null), onClick: () => telemetry.sendEditPageLinkClickedMessage(), "data-translation-key": "markdown.editPage.text" }, translate('markdown.editPage.text', 'Edit'))));
 }
-const EditPageButtonWrapper = (0, styled_components_1.default)(Link_1.Link) `
-  height: fit-content;
+const EditPageButtonWrapper = styled_components_1.default.div `
   margin-left: auto;
-  display: inline-flex;
-  color: var(--text-color-secondary);
-  font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-base);
-  font-family: var(--font-family-base);
-  text-decoration: none;
-
-  &:hover {
-    color: var(--text-color-primary);
-  }
-
-  @media print {
-    display: none;
-  }
-`;
-const ButtonIcon = (0, styled_components_1.default)(EditIcon_1.EditIcon) `
-  margin-right: 3px;
-`;
-const ButtonText = styled_components_1.default.span `
-  line-height: 14px;
 `;
 //# sourceMappingURL=EditPageButton.js.map

package/lib/components/Dropdown/Dropdown.js

@@ -97,6 +97,6 @@ const ChildrenWrapper = styled_components_1.default.div `
   right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
   display: ${({ isOpen }) => (isOpen ? 'block' : 'none')};
 
-  z-index: var(--z-index-raised);
+  z-index: var(--dropdown-menu-z-index);
 `;
 //# sourceMappingURL=Dropdown.js.map

package/lib/components/Dropdown/variables.js

@@ -10,6 +10,7 @@ exports.dropdown = (0, styled_components_1.css) `
   --dropdown-menu-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --dropdown-menu-line-height: var(--line-height-base); // @presenter LineHeight
   --dropdown-menu-text-color: var(--text-color-secondary); // @presenter Color
+  --dropdown-menu-z-index: var(--z-index-raised); // @presenter ZIndex
 
   --dropdown-menu-padding-top: var(--spacing-xxs);
   --dropdown-menu-min-width: 100px;

package/lib/components/Menu/variables.js

@@ -131,12 +131,12 @@ exports.mobileMenu = (0, styled_components_1.css) `
     * @tokens Mobile Menu
     * */
   /* Fallback for older browsers. dvh accounts for dynamic UI elements like mobile address bars */
-  --menu-mobile-height: calc(100vh - var(--navbar-height));
-  --menu-mobile-height: calc(100dvh - var(--navbar-height));
+  --menu-mobile-height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  --menu-mobile-height: calc(100dvh - var(--navbar-height) - var(--banner-height));
   --menu-mobile-width: 100%;
   --menu-mobile-z-index: var(--z-index-raised);
   --menu-mobile-left: 0;
-  --menu-mobile-top: var(--navbar-height);
+  --menu-mobile-top: calc(var(--navbar-height) + var(--banner-height));
   --menu-mobile-transition: 0.5s;
   --menu-mobile-bg: var(--bg-color); // @presenter Color
   --menu-mobile-margin: var(--menu-mobile-items-margin-top) var(--menu-mobile-margin-horizontal) 0 var(--menu-mobile-margin-horizontal);

package/lib/components/PageActions/PageActions.js

@@ -115,7 +115,7 @@ const LinkMenuItem = (0, styled_components_1.default)(Link_1.Link) `
   --link-decoration-hover: none;
 `;
 const StyledDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
-  z-index: calc(var(--z-index-raised) - 1);
+  --dropdown-menu-z-index: calc(var(--z-index-raised) - 1);
 `;
 const StyledDropdownMenu = (0, styled_components_1.default)(DropdownMenu_1.DropdownMenu) `
   --dropdown-menu-max-height: var(--page-actions-dropdown-max-height);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.63.0-next.0",
+  "version": "0.63.0-next.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -63,7 +63,7 @@
     "vitest": "4.0.10",
     "vitest-when": "0.6.2",
     "webpack": "5.94.0",
-    "@redocly/realm-asyncapi-sdk": "0.9.0-next.0"
+    "@redocly/realm-asyncapi-sdk": "0.9.0-next.1"
   },
   "dependencies": {
     "@tanstack/react-query": "5.62.3",

package/src/components/Buttons/EditPageButton.tsx

@@ -5,7 +5,7 @@ import type { JSX } from 'react';
 
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { EditIcon } from '@redocly/theme/icons/EditIcon/EditIcon';
-import { Link } from '@redocly/theme/components/Link/Link';
+import { Button } from '@redocly/theme/components/Button/Button';
 
 export type EditPageButtonProps = {
   to: string;
@@ -17,43 +17,22 @@ export function EditPageButton({ to }: EditPageButtonProps): JSX.Element {
   const telemetry = useTelemetry();
 
   return (
-    <EditPageButtonWrapper
-      data-component-name="Buttons/EditPageButton"
-      target="_blank"
-      to={to}
-      onClick={() => telemetry.sendEditPageLinkClickedMessage()}
-    >
-      <ButtonIcon />
-      <ButtonText data-translation-key="markdown.editPage.text">
+    <EditPageButtonWrapper data-component-name="Buttons/EditPageButton">
+      <Button
+        to={to}
+        external={true}
+        variant="ghost"
+        size="small"
+        icon={<EditIcon />}
+        onClick={() => telemetry.sendEditPageLinkClickedMessage()}
+        data-translation-key="markdown.editPage.text"
+      >
         {translate('markdown.editPage.text', 'Edit')}
-      </ButtonText>
+      </Button>
     </EditPageButtonWrapper>
   );
 }
 
-const EditPageButtonWrapper = styled(Link)`
-  height: fit-content;
+const EditPageButtonWrapper = styled.div`
   margin-left: auto;
-  display: inline-flex;
-  color: var(--text-color-secondary);
-  font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-base);
-  font-family: var(--font-family-base);
-  text-decoration: none;
-
-  &:hover {
-    color: var(--text-color-primary);
-  }
-
-  @media print {
-    display: none;
-  }
-`;
-
-const ButtonIcon = styled(EditIcon)`
-  margin-right: 3px;
-`;
-
-const ButtonText = styled.span`
-  line-height: 14px;
 `;

package/src/components/Dropdown/Dropdown.tsx

@@ -142,5 +142,5 @@ const ChildrenWrapper = styled.div<{ placement?: string; alignment?: string; isO
   right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
   display: ${({ isOpen }) => (isOpen ? 'block' : 'none')};
 
-  z-index: var(--z-index-raised);
+  z-index: var(--dropdown-menu-z-index);
 `;

package/src/components/Dropdown/variables.ts

@@ -8,6 +8,7 @@ export const dropdown = css`
   --dropdown-menu-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --dropdown-menu-line-height: var(--line-height-base); // @presenter LineHeight
   --dropdown-menu-text-color: var(--text-color-secondary); // @presenter Color
+  --dropdown-menu-z-index: var(--z-index-raised); // @presenter ZIndex
 
   --dropdown-menu-padding-top: var(--spacing-xxs);
   --dropdown-menu-min-width: 100px;

package/src/components/Menu/variables.ts

@@ -130,12 +130,12 @@ export const mobileMenu = css`
     * @tokens Mobile Menu
     * */
   /* Fallback for older browsers. dvh accounts for dynamic UI elements like mobile address bars */
-  --menu-mobile-height: calc(100vh - var(--navbar-height));
-  --menu-mobile-height: calc(100dvh - var(--navbar-height));
+  --menu-mobile-height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  --menu-mobile-height: calc(100dvh - var(--navbar-height) - var(--banner-height));
   --menu-mobile-width: 100%;
   --menu-mobile-z-index: var(--z-index-raised);
   --menu-mobile-left: 0;
-  --menu-mobile-top: var(--navbar-height);
+  --menu-mobile-top: calc(var(--navbar-height) + var(--banner-height));
   --menu-mobile-transition: 0.5s;
   --menu-mobile-bg: var(--bg-color); // @presenter Color
   --menu-mobile-margin: var(--menu-mobile-items-margin-top) var(--menu-mobile-margin-horizontal) 0 var(--menu-mobile-margin-horizontal);

package/src/components/PageActions/PageActions.tsx

@@ -119,7 +119,7 @@ const LinkMenuItem = styled(Link)`
 `;
 
 const StyledDropdown = styled(Dropdown)`
-  z-index: calc(var(--z-index-raised) - 1);
+  --dropdown-menu-z-index: calc(var(--z-index-raised) - 1);
 `;
 
 const StyledDropdownMenu = styled(DropdownMenu)`