@redocly/theme 0.18.4-patch.1 → 0.18.5

package/src/components/Search/SearchItem.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 
-import { Tag } from '@theme/components/Tag';
+import { OperationBadge } from '@theme/components/OperationBadge';
 import { Link } from '@portal/Link';
 import { highlight } from '@theme/components/Search/utils';
 import type { ActiveItem } from '@theme/types/portal/src/shared/types/activeItem';
@@ -28,7 +28,7 @@ export function SearchItem({ item, className, product }: SearchItemProps): JSX.E
       {product && <ProductTag label={product} />}
       {item.httpVerb ? (
         <Operation>
-          <Tag color={item.httpVerb}>{item.httpVerb.toUpperCase()}</Tag>
+          <OperationBadge type={item.httpVerb}>{item.httpVerb}</OperationBadge>
           {item.pathName ? highlight(item.pathName) : null}
         </Operation>
       ) : null}
@@ -125,7 +125,7 @@ const Description = styled.div`
 `;
 
 const Path = styled.div`
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-small);
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: 22px;
@@ -135,7 +135,7 @@ const Place = styled.div`
   display: flex;
   flex-direction: column;
   gap: 5px;
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-small);
   overflow: hidden;
   text-overflow: ellipsis;
 

package/src/components/Search/SearchTrigger.tsx

@@ -39,9 +39,8 @@ const Wrapper = styled.div`
   background-color: var(--search-trigger-background-color);
   border: var(--search-trigger-border);
   border-radius: var(--search-trigger-border-radius);
-  padding: var(--search-trigger-padding);
+  padding: 5px 10px 5px 14px;
   user-select: none;
-  gap: var(--search-trigger-gap);
 
   :hover {
     background-color: var(--search-trigger-hover-background-color);
@@ -57,11 +56,13 @@ const Wrapper = styled.div`
 `;
 
 const Label = styled.span`
+  padding-left: 10px;
+  padding-right: 16px;
   font-size: var(--search-trigger-font-size);
 `;
 
 const SearchIconSmall = styled(SearchIcon)`
-  width: var(--search-trigger-icon-size);
-  height: var(--search-trigger-icon-size);
+  width: 13px;
+  height: 13px;
   fill: var(--search-trigger-text-color);
 `;

package/src/components/Search/ShortcutKey.tsx

@@ -23,5 +23,9 @@ export function ShortcutKey(props: ShortcutKeyProps): JSX.Element {
 }
 
 export const Wrapper = styled.div`
-  font-size: var(--search-trigger-shortcut-font-size);
+  cursor: pointer;
+  font-size: 0.75em;
+  right: 1em;
+  color: var(--search-trigger-shortcut-text-color);
+  opacity: 0.5;
 `;

package/src/components/Search/SuggestedPages.tsx

@@ -47,8 +47,8 @@ const Wrapper = styled.div`
 const Title = styled.div`
   color: var(--search-item-title-text-color);
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-sm);
+  font-size: var(--font-size-small);
+  line-height: 20px;
   padding: 8px 24px;
 `;
 
@@ -89,7 +89,7 @@ const PageLink = styled(Link)`
     }
   }
   :focus-visible {
-    outline: 2px solid var(--color-primary);
+    outline: 2px solid var(--color-primary-200);
     border-radius: 2px;
   }
 `;

package/src/components/Search/index.ts

@@ -14,4 +14,3 @@ export * from '@theme/components/Search/MobileSearchTrigger';
 export * from '@theme/components/Search/CancelSearch';
 export * from '@theme/components/Search/ProductTag';
 export * from '@theme/components/Search/utils';
-export * from '@theme/components/Search/styledVariables';

package/src/components/Select/Select.tsx

@@ -1,46 +1,32 @@
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 
 import { ArrowIcon } from '@theme/icons';
 import { useOutsideClick } from '@theme/hooks';
 
-export interface SelectProps<T = any> {
-  value: T;
-  options: {
-    element: React.ReactNode | string;
-    value: T;
-    label?: string;
-  }[];
+export interface SelectProps {
+  selected: React.ReactNode | string;
+  options: React.ReactNode[] | string[];
   dataAttributes?: Record<string, string>;
   className?: string;
   withArrow?: boolean;
   triggerEvent?: 'click' | 'hover';
-  onChange?: (value: any) => void;
-  placement?: 'top' | 'bottom';
-  alignment?: 'start' | 'end';
-  icon?: React.ReactNode;
-  onlyIcon?: boolean;
-  placeholder?: string;
+  onChange?: (value: React.ReactNode | string) => void;
 }
 
-export function Select<T>({
+export const Select = ({
   className,
-  value,
+  selected,
   options,
   dataAttributes,
-  withArrow = true,
+  withArrow,
   triggerEvent = 'click',
   onChange,
-  placement,
-  alignment,
-  icon,
-  onlyIcon,
-  placeholder,
-}: SelectProps<T>) {
-  const containerRef = useRef<HTMLDivElement | null>(null);
+}: SelectProps) => {
+  const selectRef = useRef<HTMLDivElement | null>(null);
 
   const [isOpen, setIsOpen] = useState<boolean>(false);
-  // const [selectedIdx, setSelectedIdx] = useState<React.ReactNode | string>(selected);
+  const [_selected, setSelected] = useState<React.ReactNode | string>(selected);
 
   const handleOpen = () => {
     setIsOpen(true);
@@ -54,56 +40,45 @@ export function Select<T>({
     setIsOpen(!isOpen);
   };
 
-  const handleSelect = (value: T) => {
-    // setSelectedIdx(options.findIndex(o => o.value === value));
+  const handleSelect = (value: React.ReactNode | string) => {
+    setSelected(value);
     setIsOpen(false);
     onChange?.(value);
   };
 
-  useOutsideClick(containerRef, handleClose);
+  useOutsideClick(selectRef, handleClose);
 
-  // useEffect(() => {
-  //   handleSelect(selected);
-  //   // eslint-disable-next-line react-hooks/exhaustive-deps
-  // }, [selected]);
-
-  const selectedOption = options.find((option) => option.value === value);
+  useEffect(() => {
+    handleSelect(selected);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selected]);
 
   return (
     <SelectContainer
       {...dataAttributes}
       data-testid="select"
       className={className}
-      ref={containerRef}
+      ref={selectRef}
       onPointerEnter={triggerEvent === 'hover' ? handleOpen : undefined}
       onPointerLeave={triggerEvent === 'hover' ? handleClose : undefined}
       onClick={triggerEvent === 'click' ? handleToggle : undefined}
     >
       <SelectInput>
-        {!onlyIcon && (
-          <SelectInputValue>
-            {selectedOption?.label || selectedOption?.element || placeholder}
-          </SelectInputValue>
-        )}
-        {icon}
+        <SelectInputValue withArrow={withArrow}>{_selected}</SelectInputValue>
         {withArrow ? isOpen ? <ArrowIcon direction="up" /> : <ArrowIcon direction="down" /> : null}
       </SelectInput>
       {isOpen && (
-        <SelectList placement={placement} alignment={alignment}>
+        <SelectList>
           {options.map((option, index) => (
-            <SelectListItem
-              key={index}
-              onClick={() => handleSelect(option.value)}
-              selected={option.value === value}
-            >
-              {typeof option.element === 'string' ? <div>{option.element}</div> : option.element}
+            <SelectListItem key={index} onClick={() => handleSelect(option)}>
+              {option}
             </SelectListItem>
           ))}
         </SelectList>
       )}
     </SelectContainer>
   );
-}
+};
 
 export const SelectContainer = styled.div`
   position: relative;
@@ -127,20 +102,17 @@ export const SelectInput = styled.div`
   border-radius: var(--select-input-border-radius);
   padding: var(--select-input-padding-vertical) var(--select-input-padding-horizontal);
   cursor: pointer;
-  gap: 8px;
 `;
 
-export const SelectInputValue = styled.div`
+export const SelectInputValue = styled.div<{ withArrow?: boolean }>`
   pointer-events: none;
-  min-width: 0;
+  ${({ withArrow }) => (withArrow ? 'margin-right: 8px;' : '')}
 `;
 
-export const SelectList = styled.ul<{ placement?: string; alignment?: string }>`
+export const SelectList = styled.ul`
   position: absolute;
-  top: ${({ placement }) => (placement === 'top' ? 'auto' : '100%')};
-  bottom: ${({ placement }) => (placement === 'top' ? '100%' : 'auto')};
-  left: ${({ alignment }) => (alignment === 'start' ? '0' : 'auto')};
-  right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
+  top: 100%;
+  left: 0;
   margin: 0;
   min-width: var(--select-list-min-width);
   max-width: var(--select-list-max-width);
@@ -155,7 +127,7 @@ export const SelectList = styled.ul<{ placement?: string; alignment?: string }>`
   z-index: 1;
 `;
 
-export const SelectListItem = styled.li<{ selected: boolean }>`
+export const SelectListItem = styled.li`
   border-radius: var(--select-list-item-border-radius);
 
   & > * {
@@ -163,12 +135,6 @@ export const SelectListItem = styled.li<{ selected: boolean }>`
   }
 
   :hover {
-    background-color: var(--select-list-item-hover-background-color);
+    background-color: var(--select-list-item-active-background-color);
   }
-
-  ${({ selected }) =>
-    selected &&
-    `
-    &, &:hover { background-color: var(--select-list-item-active-background-color); }
-    `}
 `;

package/src/components/Select/index.ts

@@ -1,2 +1 @@
 export * from '@theme/components/Select/Select';
-export * from '@theme/components/Select/styledVariables';

package/src/components/Separator/Separator.tsx

@@ -5,30 +5,16 @@ import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
 import { SeparatorItem } from '@theme/components/Separator/SeparatorItem';
 import type { MenuItemProps } from '@theme/components/Sidebar/types';
 import { useTranslate } from '@portal/hooks';
-import { useThemeConfig } from '@theme/hooks';
 
 export function Separator({ item, className }: MenuItemProps): JSX.Element {
   const { translate } = useTranslate();
-  const { sidebar } = useThemeConfig();
-
-  const separatorLine = item.separatorLine || sidebar?.separatorLine;
-  const linePosition = item.linePosition || sidebar?.linePosition || 'bottom';
 
   return (
-    <Wrapper
-      data-component-name="Sidebar/Separator"
-      className={className}
-      linePosition={linePosition}
-      withLabel={!!item.label}
-    >
+    <Wrapper data-component-name="Sidebar/Separator" className={className}>
       <SeparatorItem>{translate(item.labelTranslationKey, item.label)}</SeparatorItem>
-      {separatorLine ? <SeparatorLine /> : null}
+      {item.separatorLine ? <SeparatorLine /> : null}
     </Wrapper>
   );
 }
 
-const Wrapper = styled.div<{ linePosition: 'top' | 'bottom'; withLabel?: boolean }>`
-  display: flex;
-  flex-direction: ${({ linePosition }) => (linePosition === 'top' ? 'column-reverse' : 'column')};
-  margin-top: ${({ withLabel }) => (withLabel ? 'var(--sidebar-item-separator-offset)' : '0')};
-`;
+const Wrapper = styled.div``;

package/src/components/Separator/SeparatorItem.tsx

@@ -9,20 +9,23 @@ export const SeparatorItem = styled(MenuItemLabel).attrs<{ className?: string }>
   }),
 )`
   cursor: default;
-  font-weight: var(--sidebar-item-separator-font-weight);
-  color: var(--sidebar-item-separator-text-color);
+  font-weight: var(--font-weight-bold);
+  color: var(--sidebar-separator-item-color);
+  font-family: var(--sidebar-item-separator-font-family);
   font-size: var(--sidebar-item-separator-font-size);
   text-transform: var(--sidebar-item-separator-text-transform);
   background: var(--mobile-menu-background);
-  border-radius: 0;
-  padding: var(--sidebar-item-separator-padding);
 
   ${({ theme }) => theme.mediaQueries.medium} {
     background: var(--sidebar-item-separator-background-color);
   }
 
+  *:not(:first-child) > & {
+    margin-top: var(--sidebar-item-separator-offset);
+  }
+
   :hover {
-    color: var(--sidebar-item-separator-text-color);
-    background: none;
+    color: inherit;
+    background-color: inherit;
   }
 `;

package/src/components/Separator/SeparatorLine.tsx

@@ -4,11 +4,7 @@ export const SeparatorLine = styled.div.attrs<{ className?: string }>(({ classNa
   'data-component-name': 'Sidebar/SeparatorLine',
   className,
 }))`
-  height: var(--sidebar-item-separator-border-width);
-  background-color: var(--sidebar-item-separator-border-color);
-  margin: var(--mobile-sidebar-item-separator-line-offset);
-
-  ${({ theme }) => theme.mediaQueries.medium} {
-    margin: var(--sidebar-item-separator-line-offset);
-  }
+  height: 1px;
+  background-color: var(--sidebar-item-separator-line-color);
+  margin: var(--sidebar-item-separator-offset) 0 var(--sidebar-item-padding-vertical) 0;
 `;

package/src/components/Sidebar/ApiCallItem.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Tag } from '@theme/components/Tag';
+import { OperationBadge } from '@theme/components/OperationBadge';
 import { MenuLinkItem } from '@theme/components/Menu/MenuLinkItem';
 import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
 import { MenuItemLabel } from '@theme/components/Menu/MenuItemLabel';
@@ -12,10 +12,10 @@ export function ApiCallItem({ item, className }: MenuItemProps): JSX.Element {
     <Wrapper data-component-name="Sidebar/ApiCallItem" className={className}>
       <MenuLinkItem item={item}>
         <Label active={item.active}>
-          {item.label}
-          <HttpTag color={item.httpVerb || ''}>
+          <Badge type={item.httpVerb || ''}>
             {item.httpVerb === 'hook' ? 'event' : item.httpVerb}
-          </HttpTag>
+          </Badge>
+          {item.label}
         </Label>
       </MenuLinkItem>
 
@@ -25,8 +25,6 @@ export function ApiCallItem({ item, className }: MenuItemProps): JSX.Element {
 }
 
 const Label = styled(MenuItemLabel)`
-  display: flex;
-  justify-content: space-between;
   color: var(--mobile-menu-item-text-color);
 
   ${({ theme }) => theme.mediaQueries.medium} {
@@ -36,16 +34,14 @@ const Label = styled(MenuItemLabel)`
 
 const Wrapper = styled.div``;
 
-export const HttpTag = styled(Tag)`
+export const Badge = styled(OperationBadge)`
   flex-shrink: 0;
-  margin: var(--sidebar-item-http-tag-margin);
-  text-transform: uppercase;
-
-  width: var(--sidebar-item-http-tag-width);
-  height: var(--sidebar-item-http-tag-height);
-
-  font-size: var(--sidebar-item-http-tag-font-size);
-  font-family: var(--sidebar-item-http-tag-font-family);
-  font-weight: var(--sidebar-item-http-tag-font-weight);
-  border-radius: var(--sidebar-item-http-tag-border-radius);
+  margin-top: 0;
+  width: 36px;
+  height: 14px;
+  font-size: var(--sidebar-item-badge-http-font-size);
+  font-family: var(--sidebar-item-badge-http-font-family);
+  font-weight: var(--sidebar-item-badge-http-font-weight);
+  border-radius: var(--sidebar-item-badge-http-border-radius);
+  color: var(--sidebar-item-badge-http-text-color);
 `;

package/src/components/Sidebar/FooterWrapper.tsx

@@ -1,14 +1,15 @@
 import styled from 'styled-components';
 export const FooterWrapper = styled.div<{ collapsed?: boolean }>`
-  padding: var(--sidebar-footer-padding-vertical) var(--sidebar-footer-padding-horizontal);
-
   ${({ collapsed }) =>
     collapsed &&
     `
         position: sticky;
         bottom: 0;
-        padding: 0;
     `}
+  margin: var(--sidebar-offset-top) 0 var(--sidebar-spacing-unit) var(--sidebar-offset-left);
+  padding-top: var(--sidebar-spacing-unit);
+  padding-right: var(--sidebar-spacing-unit);
+  border-top: solid 1px var(--border-color);
 
   button {
     margin: 0;

package/src/components/Sidebar/HeaderWrapper.tsx

@@ -4,7 +4,7 @@ export const HeaderWrapper = styled.div.attrs<{ className?: string }>(({ classNa
   'data-component-name': 'Sidebar/HeaderWrapper',
   className,
 }))`
-  margin: var(--sidebar-offset-top) 0 0 0;
-  padding: 0 0 var(--sidebar-header-padding-bottom) var(--sidebar-offset-left);
-  border-bottom: solid 1px var(--border-primary);
+  margin: var(--sidebar-offset-top) 0 0 var(--sidebar-offset-left);
+  padding-bottom: var(--sidebar-spacing-unit);
+  border-bottom: solid 1px var(--border-color);
 `;

package/src/components/Sidebar/VersionPicker.tsx

@@ -9,11 +9,6 @@ export const VersionPicker = styled(Select).attrs(() => ({
     'data-component-name': 'Sidebar/VersionPicker',
   },
 }))<SelectProps>`
-  --select-list-item-active-background-color: var(
-    --version-picker-list-item-active-background-color
-  );
-  --select-list-item-hover-background-color: var(--version-picker-list-item-hover-background-color);
-
   font-size: var(--version-picker-font-size);
   font-weight: var(--version-picker-font-weight);
   border-radius: var(--version-picker-border-radius);
@@ -30,7 +25,6 @@ export const VersionPicker = styled(Select).attrs(() => ({
 
   ${SelectList} {
     right: 0;
-    width: 100%;
     min-width: var(--version-picker-list-min-width);
     max-width: var(--version-picker-list-max-width);
     padding: var(--version-picker-list-padding);
@@ -46,5 +40,9 @@ export const VersionPicker = styled(Select).attrs(() => ({
       padding: var(--version-picker-list-item-vertical-padding)
         var(--version-picker-list-item-horizontal-padding);
     }
+
+    :hover {
+      background-color: var(--version-picker-list-item-active-background-color);
+    }
   }
 `;

package/src/components/Sidebar/index.ts

@@ -11,4 +11,3 @@ export * from '@theme/components/Sidebar/FooterWrapper';
 export * from '@theme/components/Sidebar/HeaderWrapper';
 export * from '@theme/components/Sidebar/SidebarItemIcon';
 export * from '@theme/components/Sidebar/VersionPicker';
-export * from '@theme/components/Sidebar/styledVariables';

package/src/components/Sidebar/types.ts

@@ -47,7 +47,6 @@ export interface NavItem {
   requiredPermission?: string;
   menuStyle?: MenuStyle;
   separatorLine?: boolean;
-  linePosition?: 'top' | 'bottom';
   version?: string;
   default?: boolean;
 }

package/src/components/SidebarActions/CollapseSidebarButton.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import styled, { css } from 'styled-components';
 
 import {
   StyledToggleRightPanelButton,
@@ -16,30 +15,11 @@ export const CollapseSidebarButton = ({
   onClick,
 }: CollapseSidebarButtonProps): JSX.Element => {
   return (
-    <ToggleButton
+    <StyledToggleRightPanelButton
       title={initialValue ? 'Show sidebar' : 'Hide sidebar'}
       onClick={onClick}
-      collapsed={initialValue}
     >
       {initialValue ? <HideLeftPanelSVG /> : <ShowLeftPanelSVG />}
-    </ToggleButton>
+    </StyledToggleRightPanelButton>
   );
 };
-
-const ToggleButton = styled(StyledToggleRightPanelButton)<{ collapsed?: boolean }>`
-  background: var(--sidebar-collapse-button-background-color);
-  fill: var(--sidebar-collapse-button-icon-color);
-  margin-right: ${({ collapsed }) => (collapsed ? 0 : 'calc(var(--spacing-unit) * -9)')};
-  border: 1px solid var(--sidebar-collapse-button-border-color);
-  border-radius: var(--border-radius-md);
-  padding: var(--spacing-xxs);
-  height: var(--control-height-sm);
-  width: var(--control-height-sm);
-
-  ${({ collapsed }) =>
-    collapsed &&
-    css`
-      background: var(--sidebar-collapse-button-active-background-color);
-      border: var(--sidebar-collapse-button-active-border-color);
-    `}
-`;