@redocly/theme 0.82.2-rc.1 → 0.82.2-rc.2

package/lib/components/Sidebar/Sidebar.js

@@ -42,7 +42,7 @@ function Sidebar({ versions, menu, footer, header, growContent, collapsed, class
     if (sidebar === null || sidebar === void 0 ? void 0 : sidebar.hide) {
         return null;
     }
-    return (react_1.default.createElement(SidebarContent, { "data-component-name": "Sidebar/Sidebar", animate: true, opened: isOpen, className: className, collapsed: mappedCollapsed },
+    return (react_1.default.createElement(SidebarContent, { "data-component-name": "Sidebar/Sidebar", opened: isOpen, className: className, collapsed: mappedCollapsed },
         header ? react_1.default.createElement(SidebarHeader, { collapsed: mappedCollapsed }, header) : null,
         !mappedCollapsed && versions ? versions : null,
         react_1.default.createElement(MenuContainer_1.MenuContainer, { hidden: mappedCollapsed, growContent: growContent, animation: menuItemsAnimation }, menu),
@@ -67,14 +67,8 @@ const SidebarContent = styled_components_1.default.aside `
   top: var(--navbar-height);
   height: calc(100vh - var(--navbar-height));
   overflow-x: hidden;
-  ${({ opened, animate }) => `
-    opacity: ${opened ? '1' : '0'};
-    pointer-events: ${opened ? 'auto' : 'none'};
-
-    & > * {
-      transform: ${opened ? 'translate(0, 0)' : 'translate(0, 40px)'};
-      transition: ${animate ? 'transform 0.65s ease, opacity 0.25s ease;' : 'none'};
-    }
+  ${({ opened }) => `
+    display: ${opened ? 'flex' : 'none'}
   `};
 
   @media screen and (min-width: ${utils_1.breakpoints.medium}) {

package/lib/core/styles/global.js

@@ -973,10 +973,9 @@ const error = (0, styled_components_1.css) `
   --detailed-error-overlay-opacity: 0.9;
   --detailed-error-overlay-z-index: var(--z-index-raised);
 
-  --detailed-error-modal-width: 70%;
-  --detailed-error-modal-height: calc(100vh - 100px - var(--navbar-height));
-  --detailed-error-modal-top: calc(50px + var(--navbar-height));
-  --detailed-error-modal-left: 15%;
+  --detailed-error-modal-width: calc(100% - var(--spacing-lg) * 2);
+  --detailed-error-modal-height: calc(100vh - var(--navbar-height) - var(--spacing-lg) * 2);
+  --detailed-error-modal-top: calc(var(--spacing-lg) + var(--navbar-height));
   --detailed-error-modal-border-radius: var(--border-radius-md);
   --detailed-error-modal-bg-color: var(--bg-color-raised);
   --detailed-error-modal-color: var(--text-color-primary);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.82.2-rc.1",
+  "version": "0.82.2-rc.2",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -98,7 +98,7 @@
     "timeago.js": "^4.0.2",
     "i18next": "^22.4.12",
     "nprogress": "^0.2.0",
-    "@redocly/config": "0.5.0"
+    "@redocly/config": "0.82.2-rc.2"
   },
   "scripts": {
     "start": "npm-run-all --parallel storybook storybook:tokens:watch",

package/src/components/Markdown/Markdown.tsx

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
-import { typography } from '@redocly/theme/core/utils/theme-helpers';
 
+import { typography } from '@redocly/theme/core/utils/theme-helpers';
 import { markdownBaseTableCss } from '@redocly/theme/components/Markdown/styles/baseTable';
 import { markdownLinksCss } from '@redocly/theme/components/Markdown/styles/links';
 import { headingAnchorCss } from '@redocly/theme/components/Markdown/styles/headingAnchor';

package/src/components/Search/SearchDialog.tsx

@@ -1,8 +1,8 @@
 import React, { useRef, useState } from 'react';
 import styled from 'styled-components';
 
-import type { SearchDocument } from '@redocly/theme/core/types';
 import type { MouseEvent } from 'react';
+import type { SearchDocument } from '@redocly/theme/core/types';
 
 import { SearchInput } from '@redocly/theme/components/Search/SearchInput';
 import { SearchShortcut } from '@redocly/theme/components/Search/SearchShortcut';

package/src/components/Segmented/Segmented.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
-import { typedMemo } from '@redocly/theme/core/hoc/typedMemo';
 
 import type { ReactElement } from 'react';
 import type { SelectOption } from '@redocly/theme/core/types/select-option';
 
+import { typedMemo } from '@redocly/theme/core/hoc/typedMemo';
+
 type SegmentedProps<T> = {
   options: SelectOption<T>[];
   value: T;

package/src/components/Sidebar/Sidebar.tsx

@@ -50,7 +50,6 @@ export function Sidebar({
   return (
     <SidebarContent
       data-component-name="Sidebar/Sidebar"
-      animate={true}
       opened={isOpen}
       className={className}
       collapsed={mappedCollapsed}
@@ -73,7 +72,7 @@ export function Sidebar({
   );
 }
 
-const SidebarContent = styled.aside<{ opened?: boolean; animate?: boolean; collapsed?: boolean }>`
+const SidebarContent = styled.aside<{ opened?: boolean; collapsed?: boolean }>`
   border-right: 1px solid var(--sidebar-border-color);
   position: fixed;
   left: 0;
@@ -91,14 +90,8 @@ const SidebarContent = styled.aside<{ opened?: boolean; animate?: boolean; colla
   top: var(--navbar-height);
   height: calc(100vh - var(--navbar-height));
   overflow-x: hidden;
-  ${({ opened, animate }) => `
-    opacity: ${opened ? '1' : '0'};
-    pointer-events: ${opened ? 'auto' : 'none'};
-
-    & > * {
-      transform: ${opened ? 'translate(0, 0)' : 'translate(0, 40px)'};
-      transition: ${animate ? 'transform 0.65s ease, opacity 0.25s ease;' : 'none'};
-    }
+  ${({ opened }) => `
+    display: ${opened ? 'flex' : 'none'}
   `};
 
   @media screen and (min-width: ${breakpoints.medium}) {

package/src/core/styles/global.ts

@@ -1,6 +1,6 @@
 import { createGlobalStyle, css } from 'styled-components';
-import { darkMode } from '@redocly/theme/core/styles/dark';
 
+import { darkMode } from '@redocly/theme/core/styles/dark';
 import { languagePicker } from '@redocly/theme/components/LanguagePicker/variables';
 import { scorecard } from '@redocly/theme/components/Scorecard/variables';
 import { feedback } from '@redocly/theme/components/Feedback/variables';
@@ -987,10 +987,9 @@ const error = css`
   --detailed-error-overlay-opacity: 0.9;
   --detailed-error-overlay-z-index: var(--z-index-raised);
 
-  --detailed-error-modal-width: 70%;
-  --detailed-error-modal-height: calc(100vh - 100px - var(--navbar-height));
-  --detailed-error-modal-top: calc(50px + var(--navbar-height));
-  --detailed-error-modal-left: 15%;
+  --detailed-error-modal-width: calc(100% - var(--spacing-lg) * 2);
+  --detailed-error-modal-height: calc(100vh - var(--navbar-height) - var(--spacing-lg) * 2);
+  --detailed-error-modal-top: calc(var(--spacing-lg) + var(--navbar-height));
   --detailed-error-modal-border-radius: var(--border-radius-md);
   --detailed-error-modal-bg-color: var(--bg-color-raised);
   --detailed-error-modal-color: var(--text-color-primary);

package/src/core/utils/menu.ts

@@ -1,8 +1,7 @@
-import { withPathPrefix } from '@redocly/theme/core/utils/urls';
-
 import type { ResolvedNavItem, Version } from '@redocly/config';
 import type { Location } from 'react-router-dom';
 
+import { withPathPrefix } from '@redocly/theme/core/utils/urls';
 import { getPathnameForLocale } from '@redocly/theme/core/utils';
 import { type Locale, type TFunction, type ItemState } from '@redocly/theme/core/types';
 import { MenuItemType } from '@redocly/theme/core/constants';

package/src/layouts/ThreePanelLayout.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
 import { LayoutVariant } from '@redocly/config';
+
 import { breakpoints } from '@redocly/theme/core/utils/media-css';
 
 interface LayoutConfig {