@redocly/theme 0.42.3 → 0.44.0

package/src/components/Search/SearchInput.tsx

@@ -5,14 +5,14 @@ import type { ChangeEvent, SyntheticEvent } from 'react';
 
 import { SearchIcon } from '@redocly/theme/icons/SearchIcon/SearchIcon';
 import { Spinner } from '@redocly/theme/icons/Spinner/Spinner';
-import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { CloseFilledIcon } from '@redocly/theme/icons/CloseFilledIcon/CloseFilledIcon';
 
 export type SearchInputProps = {
   placeholder?: string;
   value: string;
-  onChange(value: string): void;
+  onChange: (value: string) => void;
   inputRef?: React.RefObject<HTMLInputElement>;
   isLoading: boolean;
   className?: string;
@@ -52,7 +52,9 @@ export function SearchInput({
         onChange={handleOnChange}
         onClick={stopPropagation}
       />
-      {!!value && <Button variant="ghost" onClick={handleOnReset} icon={<CloseIcon />} />}
+      {!!value && (
+        <ResetButton variant="ghost" onClick={handleOnReset} icon={<CloseFilledIcon />} />
+      )}
     </SearchInputWrapper>
   );
 }
@@ -82,3 +84,7 @@ const SearchInputField = styled.input`
     color: var(--search-input-placeholder-color);
   }
 `;
+
+const ResetButton = styled(Button)`
+  color: var(--color-warm-grey-5);
+`;

package/src/components/Search/SearchItem.tsx

@@ -1,17 +1,18 @@
 import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 
-import type { SearchDocument } from '@redocly/theme/core/types';
+import type { SearchItemData } from '@redocly/theme/core/types';
 
 import { HttpTag } from '@redocly/theme/components/Tags/HttpTag';
 import { Link } from '@redocly/theme/components/Link/Link';
 import { Image } from '@redocly/theme/components/Image/Image';
-import { highlight } from '@redocly/theme/components/Search/SearchHighlight';
+import { searchHighlight } from '@redocly/theme/components/Search/SearchHighlight';
 import { Badge } from '@redocly/theme/components/Badge/Badge';
+import { trimText } from '@redocly/theme/core/utils';
 
 type ActiveItem<T> = T & { active?: boolean };
 export type SearchItemProps = {
-  item: ActiveItem<SearchDocument>;
+  item: ActiveItem<SearchItemData>;
   product?: {
     name: string;
     icon?: string;
@@ -28,12 +29,16 @@ export function SearchItem({ item, className, product }: SearchItemProps): JSX.E
     }
   }, [item.active]);
 
-  const itemParam = item.parameters?.[0];
+  const { document, highlight } = item;
+
+  const parameter =
+    highlight.parameters && highlight.parameters.length ? highlight.parameters[0] : null;
+  const shouldShowPath = document.path && document.path?.length > 1;
 
   return (
     <SearchItemWrapper
       className={className}
-      to={item.url}
+      to={document.url}
       tabIndex={0}
       innerRef={ref}
       data-component-name="Search/SearchItem"
@@ -45,41 +50,49 @@ export function SearchItem({ item, className, product }: SearchItemProps): JSX.E
             {product.name}
           </SearchItemProductTag>
         )}
-        {item.httpVerb ? (
+        {document.httpMethod ? (
           <SearchItemOperation>
-            <SearchItemOperationTag color={item.httpVerb}>
-              {item.httpVerb.toUpperCase()}
+            <SearchItemOperationTag color={document.httpMethod}>
+              {document.httpMethod.toUpperCase()}
             </SearchItemOperationTag>
-            {item.pathName ? highlight(item.pathName) : null}
+            {highlight.httpPath ? searchHighlight(highlight.httpPath) : document.httpPath}
           </SearchItemOperation>
         ) : null}
         <SearchItemTitleWrapper>
-          <SearchItemTitle>{highlight(item.title)}</SearchItemTitle>
-          {item.deprecated ? <SearchItemBadge deprecated>Deprecated</SearchItemBadge> : null}
-          {item.badges
-            ? item.badges.map(({ name, color }) => (
+          <SearchItemTitle>
+            {highlight.title ? searchHighlight(highlight.title) : document.title}
+          </SearchItemTitle>
+          {document.deprecated ? <SearchItemBadge deprecated>Deprecated</SearchItemBadge> : null}
+          {document.badges
+            ? document.badges.map(({ name, color }) => (
                 <SearchItemBadge color={color || 'var(--color-info-base)'} key={name}>
                   {name}
                 </SearchItemBadge>
               ))
             : null}
         </SearchItemTitleWrapper>
-        {Array.isArray(item.text) ? (
-          <SearchItemDescription>{highlight(item.text)}</SearchItemDescription>
-        ) : null}
+        <SearchItemDescription>
+          {highlight.text ? searchHighlight(highlight.text) : trimText(document.text)}
+        </SearchItemDescription>
       </SearchItemHeader>
-      {itemParam ? (
+      {parameter ? (
         <SearchItemPlace>
           <div>
-            {`${itemParam.place} → ${
-              itemParam.path?.length ? itemParam.path?.join(' → ') + ' → ' : ''
-            }`}
-            {highlight(itemParam.name)}
+            {searchHighlight(parameter.place)}
+            {` → `}
+            {parameter.path?.length ? searchHighlight(parameter.path?.join(' → ')) + ' → ' : ''}
+            {searchHighlight(parameter.name)}
           </div>
-          <div>{highlight(itemParam.description)}</div>
+          <div>{searchHighlight(parameter.description)}</div>
         </SearchItemPlace>
       ) : (
-        <SearchItemPath>{item.path?.join(' → ')}</SearchItemPath>
+        shouldShowPath && (
+          <SearchItemPath>
+            {highlight.path && highlight.path.length
+              ? searchHighlight(highlight.path.join(' → '))
+              : document.path?.join(' → ')}
+          </SearchItemPath>
+        )
       )}
     </SearchItemWrapper>
   );
@@ -92,7 +105,7 @@ const SearchItemWrapper = styled(Link)`
   background-color: var(--search-item-bg-color);
   transition: background-color 0.3s ease;
   text-decoration: none;
-  white-space: nowrap;
+  white-space: normal;
   outline: none;
   border-top: 1px solid var(--search-item-border-color);
   border-bottom: 1px solid var(--search-item-border-color);
@@ -160,6 +173,7 @@ const SearchItemPath = styled.div`
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
   font-weight: var(--font-weight-regular);
+  margin-top: var(--spacing-sm);
 `;
 
 const SearchItemPlace = styled.div`
@@ -170,6 +184,7 @@ const SearchItemPlace = styled.div`
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
   font-weight: var(--font-weight-regular);
+  margin-top: var(--spacing-sm);
 
   &:first-child {
     padding-top: 0;

package/src/components/Search/SearchRecent.tsx

@@ -34,8 +34,8 @@ export function SearchRecent({ onSelect, className }: SearchRecentProps): JSX.El
 
   return (
     <SearchRecentWrapper data-component-name="Search/SearchRecent" className={className}>
-      <SearchRecentTitle data-translation-key="theme.search.recent">
-        {translate('theme.search.recent', 'Recent searches')}
+      <SearchRecentTitle data-translation-key="search.recent">
+        {translate('search.recent', 'Recent searches')}
       </SearchRecentTitle>
       <SearchRecentItems>
         {items.map((item) => (

package/src/components/Search/SearchSuggestedPages.tsx

@@ -17,8 +17,8 @@ export function SearchSuggestedPages({ className }: SearchSuggestedPagesProps):
 
   return (
     <SearchSuggestedWrapper data-component-name="Search/SearchSuggestedPages" className={className}>
-      <SearchSuggestedTitle data-translation-key="theme.search.suggested">
-        {translate('theme.search.suggested', 'Suggested pages')}
+      <SearchSuggestedTitle data-translation-key="search.suggested">
+        {translate('search.suggested', 'Suggested pages')}
       </SearchSuggestedTitle>
       <SearchSuggestedItems>
         {pages.map((page) =>

package/src/components/Search/SearchTrigger.tsx

@@ -43,10 +43,10 @@ export function SearchTrigger({ onClick, className }: SearchTriggerProps): JSX.E
       />
       <SearchTriggerInput
         data-testid="search-trigger-input"
-        data-translation-key="theme.search.navbar.label"
+        data-translation-key="search.navbar.label"
       >
         <SearchIcon />
-        {translate('theme.search.navbar.label', 'Search')}
+        {translate('search.navbar.label', 'Search')}
         {mainShortcutKey && <span>{mainShortcutKey}</span>}
       </SearchTriggerInput>
     </SearchTriggerWrapper>

package/src/components/Search/variables.ts

@@ -4,11 +4,18 @@ export const search = css`
   /**
     * @tokens Search
     */
-  --search-modal-width: 700px;
-  --search-modal-min-height: 530px;
+  --search-modal-width: 1100px;
+  --search-modal-min-height: 705px;
   --search-modal-bg-color: var(--modal-bg-color);
   --search-modal-box-shadow: var(--modal-box-shadow);
   --search-modal-border-radius: var(--border-radius-lg);
+  --search-modal-border: 1px solid var(--border-color-secondary);
+
+  --search-modal-header-bg-color: var(--bg-color-tonal); // @presenter Color
+  --search-modal-header-padding: var(--spacing-sm);
+
+  --search-modal-footer-padding: var(--spacing-sm);
+  --search-modal-footer-gap: var(--spacing-md);
 
   --search-highlight-bg-color: none; // @presenter Color
   --search-highlight-text-color: var(--color-info-base); // @presenter Color
@@ -27,6 +34,11 @@ export const search = css`
   --search-input-border: none;
   --search-input-border-radius: var(--border-radius); // @presenter BorderRadius
 
+  --search-group-title-padding: var(--spacing-sm);
+  --search-group-title-bg-color: var(--bg-color-tonal); // @presenter Color
+  --search-group-footer-padding: var(--spacing-sm);
+  --search-group-footer-text-color: var(--link-color-primary); // @presenter Color
+
   --search-item-text-color: var(--text-color-secondary); // @presenter Color
   --search-item-text-color-hover: var(--text-color-primary); // @presenter Color
   --search-item-title-font-size: var(--font-size-base); // @presenter FontSize
@@ -74,6 +86,40 @@ export const search = css`
   --search-suggested-item-bg-color-active: var(--layer-color); // @presenter Color
   --search-suggested-item-border-color-focused: var(--color-blue-4); // @presenter Color
 
+  --search-shortcuts-gap: var(--spacing-xs);
+
+  --search-message-font-size: var(--font-size-lg); // @presenter FontSize
+  --search-message-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --search-message-line-height: var(--line-height-lg); // @presenter LineHeight
+  --search-message-text-color: var(--text-color-secondary); // @presenter Color
+  --search-message-gap: var(--spacing-md);
+
+    /**
+  * @tokens Search filter
+  */
+  --search-filter-width: 450px;
+  --search-filter-bg-color: var(--search-modal-bg-color);
+  --search-filter-padding: var(--spacing-lg);
+  --search-filter-font-size: var(--font-size-base);
+  --search-filter-font-weight: var(--font-weight-regular);
+  --search-filter-line-height: var(--line-height-base);
+
+  --search-filter-header-padding: var(--spacing-md) 0;
+  --search-filter-header-text-color: var(--text-color-helper);
+  --search-filter-header-z-index: var(--z-index-raised);
+
+  --search-filter-fields-gap: var(--spacing-base);
+
+  --search-filter-field-select-option-gap: var(--spacing-unit);
+  --search-filter-field-select-option-text-padding: 0 0 0 var(--spacing-unit);
+  --search-filter-field-select-footer-padding: 0 0 0 var(--spacing-unit);
+  --search-filter-field-select-footer-text-color: var(--text-color-helper);
+
+  --search-filter-field-tags-gap: var(--spacing-unit);
+  --search-filter-field-tags-tag-margin: var(--spacing-unit) 0 0 0;
+
+  // @tokens End
+
   /**
   * @tokens Navbar Search Trigger
   */

package/src/components/Segmented/Segmented.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 
 import type { ReactElement } from 'react';
-import type { SelectOption } from '@redocly/theme/core/types/select-option';
+import type { SelectOption } from '@redocly/theme/core/types/select';
 
 import { typedMemo } from '@redocly/theme/core/hoc/typedMemo';
 
 export type SegmentedProps<T> = {
   options: SelectOption<T>[];
   value: T;
-  onChange: ({ label, value }: { label: string; value: T }) => void;
+  onChange: ({ label, value }: SelectOption<T>) => void;
   className?: string;
   size?: 'regular' | 'small';
 };