@redocly/theme 0.64.0-next.1 → 0.64.0-next.2

package/src/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarControls.tsx

@@ -3,12 +3,11 @@ import styled from 'styled-components';
 
 import { CatalogSortButton } from '@redocly/theme/components/Catalog/CatalogSortButton';
 import { CatalogViewModeToggle } from '@redocly/theme/components/Catalog/CatalogViewModeToggle';
-import { SortOption } from '@redocly/theme/core';
 import { CatalogViewMode } from '@redocly/theme/core';
 
 type CatalogMobileTopBarControlsProps = {
-  setSortOption: (sortOption: SortOption | null) => void;
-  sortOption: SortOption | null;
+  setSortOption: (sortOption: string | null) => void;
+  sortOption: string | null;
   viewMode: CatalogViewMode;
   setViewMode: (viewMode: CatalogViewMode) => void;
 };

package/src/components/Catalog/CatalogPageDescription.tsx

@@ -58,7 +58,7 @@ const CatalogDescription = styled.p`
   color: var(--catalog-description-text-color);
   font-weight: var(--catalog-description-font-weight);
   font-size: var(--catalog-description-font-size);
-  margin: var(--catalog-description-margin);
+  margin: 0;
   line-height: var(--catalog-description-line-height);
   display: -webkit-box;
   -webkit-line-clamp: 3;

package/src/components/Catalog/CatalogSortButton.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
 
-import { SortOption } from '@redocly/theme/core/types';
 import { AscSortIcon } from '@redocly/theme/icons/AscSortIcon/AscSortIcon';
 import { DescSortIcon } from '@redocly/theme/icons/DescSortIcon/DescSortIcon';
 import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
@@ -10,16 +9,16 @@ import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMen
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type CatalogSortButtonProps = {
-  onSortChange: (sortOption: SortOption | null) => void;
-  currentSort?: SortOption | null;
+  onSortChange: (sortOption: string | null) => void;
+  currentSort?: string | null;
 };
 
 export function CatalogSortButton({
   onSortChange,
   currentSort,
 }: {
-  onSortChange: (sortOption: SortOption | null) => void;
-  currentSort?: SortOption | null;
+  onSortChange: (sortOption: string | null) => void;
+  currentSort?: string | null;
 }) {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
@@ -27,7 +26,7 @@ export function CatalogSortButton({
   const toggleSort = useCallback(
     (field: string): void => {
       const newSort = currentSort === `-${field}` ? field : `-${field}`;
-      onSortChange(newSort as SortOption);
+      onSortChange(newSort);
     },
     [currentSort, onSortChange],
   );

package/src/components/Catalog/CatalogTableView/CatalogDomainsCell.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { CatalogTagsWithTooltip } from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';
+import { CatalogTags } from '@redocly/theme/components/Catalog/CatalogTags';
+import { GraphIcon } from '@redocly/theme/icons/GraphIcon/GraphIcon';
 
 export type CatalogDomainsCellProps = {
   domains: string[];
@@ -9,15 +10,18 @@ export type CatalogDomainsCellProps = {
 export function CatalogDomainsCell({ domains }: CatalogDomainsCellProps) {
   return (
     <div data-component-name="Catalog/CatalogTableView/CatalogDomainsCell">
-      <CatalogTagsWithTooltip
+      <CatalogTags
         data-testid="catalog-domains-cell"
         items={domains}
         showPlaceholder={false}
         tagProps={{
+          variant: 'outline',
+          icon: <GraphIcon />,
           style: {
             fontSize: 'var(--font-size-base)',
             backgroundColor: 'transparent',
             borderRadius: 'var(--border-radius-xl)',
+            margin: 0,
           },
           textTransform: 'none',
         }}

package/src/components/Catalog/CatalogTableView/CatalogEntityCell.tsx

@@ -13,7 +13,7 @@ export type CatalogEntityCellProps<T extends Entity> = {
 export function CatalogEntityCell<T extends Entity>({ entity }: CatalogEntityCellProps<T>) {
   return (
     <EntityTitleCellWrapper data-component-name="Catalog/CatalogTableView/CatalogEntityCell">
-      <CatalogEntityTypeIcon entityType={entity.type} />
+      <CatalogEntityTypeIcon entityType={entity.type} size="large" defaultColors={true} />
       <EntityTitleContent>
         <EntityTitle data-component-name="Catalog/CatalogTableView/CatalogEntityTitle">
           <CatalogHighlight>{entity.title}</CatalogHighlight>
@@ -40,7 +40,7 @@ const EntityTitleContent = styled.div`
   flex-direction: column;
   max-width: calc(
     100% - var(--catalog-table-entity-title-content-offset)
-  ); /* Account for icon width (30px) + gap (12px) */
+  ); /* Account for icon width (32px) + gap (8px) */
   overflow: hidden;
 `;
 

package/src/components/Catalog/CatalogTableView/CatalogLastUpdateCell.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
+
+export type CatalogLastUpdateCellProps = {
+  lastModified: string;
+};
+
+function formatLastModified(isoString: string): string {
+  const date = new Date(isoString);
+  if (Number.isNaN(date.getTime())) {
+    return isoString;
+  }
+  return date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    timeZone: 'UTC',
+  });
+}
+
+function formatLastModifiedTooltip(isoString: string): string {
+  const date = new Date(isoString);
+  if (Number.isNaN(date.getTime())) {
+    return isoString;
+  }
+  return date.toLocaleString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false,
+    timeZone: 'UTC',
+  });
+}
+
+export function CatalogLastUpdateCell({
+  lastModified,
+}: CatalogLastUpdateCellProps): React.ReactElement {
+  return (
+    <CatalogLastUpdateCellWrapper data-component-name="Catalog/CatalogTableView/CatalogLastUpdateCell">
+      <Tooltip tip={formatLastModifiedTooltip(lastModified)} placement="bottom">
+        {formatLastModified(lastModified)}
+      </Tooltip>
+    </CatalogLastUpdateCellWrapper>
+  );
+}
+
+const CatalogLastUpdateCellWrapper = styled.div`
+  color: var(--text-color-helper);
+`;

package/src/components/Catalog/CatalogTableView/CatalogOwnersCell.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { CatalogTagsWithTooltip } from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';
+import { CatalogTags } from '@redocly/theme/components/Catalog/CatalogTags';
 
 export type CatalogOwnersCellProps = {
   owners: string[];
@@ -9,18 +9,21 @@ export type CatalogOwnersCellProps = {
 export function CatalogOwnersCell({ owners }: CatalogOwnersCellProps) {
   return (
     <div data-component-name="Catalog/CatalogTableView/CatalogOwnersCell">
-      <CatalogTagsWithTooltip
+      <CatalogTags
         data-testid="catalog-owners-cell"
         items={owners}
         showPlaceholder={false}
         tagProps={{
+          variant: 'outline',
           style: {
             fontSize: 'var(--font-size-base)',
             backgroundColor: 'transparent',
             borderRadius: 'var(--border-radius-xl)',
+            margin: 0,
           },
           textTransform: 'none',
         }}
+        showAvatars={true}
       />
     </div>
   );

package/src/components/Catalog/CatalogTableView/CatalogTableHeaderCell.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
 
-import { SortOption } from '@redocly/theme/core/types';
 import { CaretDownIcon } from '@redocly/theme/icons/CaretDownIcon/CaretDownIcon';
 import { CaretUpIcon } from '@redocly/theme/icons/CaretUpIcon/CaretUpIcon';
 import { useCatalogTableHeaderCellActions } from '@redocly/theme/core/hooks';
@@ -12,18 +11,20 @@ import {
 
 export type CatalogTableHeaderCellProps<T extends BaseEntity> = {
   column: CatalogColumn<T>;
-  currentSortOption?: SortOption | null;
+  currentSortOption?: string | null;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
 };
 
 export const CatalogTableHeaderCell = <T extends BaseEntity>({
   column,
+  currentSortOption,
   handleSortClick,
   isColumnSorted,
 }: CatalogTableHeaderCellProps<T>) => {
   const { handleCellClick, sortKey, isUpActive, isDownActive } = useCatalogTableHeaderCellActions({
     column,
+    currentSortOption,
     handleSortClick,
     isColumnSorted,
   });
@@ -88,7 +89,7 @@ const SortIndicator = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  margin-left: 8px;
+  margin-left: 4px;
   gap: 2px;
   color: var(--catalog-table-header-sort-indicator-color);
 `;

package/src/components/Catalog/CatalogTableView/CatalogTableView.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 import styled from 'styled-components';
 
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
-import type { SortOption, BffCatalogEntity } from '@redocly/theme/core/types';
+import type { BffCatalogEntity } from '@redocly/theme/core/types';
 
 import { CatalogOwnersCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogOwnersCell';
 import { CatalogDomainsCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogDomainsCell';
@@ -12,6 +12,7 @@ import { CatalogTagsCell } from '@redocly/theme/components/Catalog/CatalogTableV
 import { CatalogTableViewRow } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableViewRow';
 import { CatalogEntityTypeTag } from '@redocly/theme/components/Catalog/CatalogEntityTypeTag';
 import { breakpoints } from '@redocly/theme/core';
+import { CatalogLastUpdateCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogLastUpdateCell';
 
 export type BaseEntity = {
   id: string;
@@ -26,7 +27,7 @@ export type CatalogTableViewProps<T extends BaseEntity> = {
   entitiesCatalogConfig?: EntitiesCatalogConfig;
   catalogConfig: CatalogEntityConfig;
   columns?: CatalogColumn<T>[];
-  currentSortOption?: SortOption | null;
+  currentSortOption?: string | null;
   onRowClick?: (entity: T) => void;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
@@ -50,7 +51,7 @@ const baseColumns: CatalogColumn<BffCatalogEntity>[] = [
     title: 'Entity',
     render: (entity) => <CatalogEntityCell entity={entity} />,
     width: '3fr',
-    minWidth: '250px',
+    minWidth: '164px',
     sortable: true,
     sortKey: 'title',
   },
@@ -59,7 +60,7 @@ const baseColumns: CatalogColumn<BffCatalogEntity>[] = [
     title: 'Type',
     render: (entity) => <CatalogEntityTypeTag entityType={entity.type} />,
     width: '2fr',
-    minWidth: '120px',
+    minWidth: '162px',
     sortable: true,
     sortKey: 'type',
   },
@@ -70,7 +71,7 @@ const baseColumns: CatalogColumn<BffCatalogEntity>[] = [
       <CatalogDomainsCell domains={entity.domains?.map((domain) => domain.title) || []} />
     ),
     width: '2fr',
-    minWidth: '150px',
+    minWidth: '162px',
   },
   {
     key: 'owners',
@@ -79,14 +80,23 @@ const baseColumns: CatalogColumn<BffCatalogEntity>[] = [
       <CatalogOwnersCell owners={entity.owners?.map((owner) => owner.title) || []} />
     ),
     width: '2fr',
-    minWidth: '150px',
+    minWidth: '162px',
   },
   {
     key: 'tags',
     title: 'Tags',
     render: (entity) => <CatalogTagsCell entity={entity} />,
     width: '2fr',
-    minWidth: '120px',
+    minWidth: '160px',
+  },
+  {
+    key: 'lastUpdate',
+    title: 'Last update',
+    render: (entity) => <CatalogLastUpdateCell lastModified={entity.updatedAt} />,
+    width: '1fr',
+    minWidth: '112px',
+    sortable: true,
+    sortKey: 'updated_at',
   },
 ];
 

package/src/components/Catalog/CatalogTableView/CatalogTagsCell.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { BffCatalogEntity } from '@redocly/theme/core/types';
-import { CatalogTagsWithTooltip } from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';
+import { CatalogTags } from '@redocly/theme/components/Catalog/CatalogTags';
 
 export type CatalogTagsCellProps = {
   entity: BffCatalogEntity;
@@ -10,7 +10,7 @@ export type CatalogTagsCellProps = {
 export function CatalogTagsCell({ entity }: CatalogTagsCellProps) {
   return (
     <div data-component-name="Catalog/CatalogTableView/CatalogTagsCell">
-      <CatalogTagsWithTooltip
+      <CatalogTags
         data-testid="catalog-tags-cell"
         items={entity.tags || []}
         showPlaceholder={false}
@@ -18,6 +18,7 @@ export function CatalogTagsCell({ entity }: CatalogTagsCellProps) {
           style: {
             fontSize: 'var(--font-size-base)',
             borderRadius: 'var(--border-radius)',
+            margin: 0,
           },
           borderless: true,
           color: 'grey',

package/src/components/Catalog/CatalogTableView/CatalogUserEntityCell.tsx

@@ -48,8 +48,8 @@ const EntityTitle = styled.div`
 `;
 
 export const Email = styled.div`
-  font-size: var(--catalog-table-entity-summary-font-size);
-  line-height: var(--catalog-table-entity-summary-line-height);
+  font-size: var(--catalog-user-entity-cell-email-font-size);
+  line-height: var(--catalog-user-entity-cell-email-line-height);
   color: var(--color-blue-6);
   white-space: nowrap;
   overflow: hidden;

package/src/components/Catalog/CatalogTags.tsx

@@ -0,0 +1,115 @@
+import React, { JSX } from 'react';
+import styled from 'styled-components';
+
+import { CATALOG_TAG_MAX_LENGTH } from '@redocly/theme/core/constants';
+import { Tag, TagProps } from '@redocly/theme/components/Tag/Tag';
+import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
+import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { CatalogAvatar } from '@redocly/theme/components/Catalog/CatalogAvatar';
+
+export type CatalogTagsProps = {
+  items: string[];
+  itemsToShow?: number;
+  showPlaceholder?: boolean;
+  tagProps?: TagProps;
+  showAvatars?: boolean;
+  maxItemLength?: number;
+};
+
+export function CatalogTags({
+  items,
+  itemsToShow = 1,
+  showPlaceholder = false,
+  showAvatars,
+  tagProps,
+  maxItemLength = CATALOG_TAG_MAX_LENGTH,
+}: CatalogTagsProps): JSX.Element | null {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
+  if (!items || items.length === 0) {
+    if (showPlaceholder) {
+      return (
+        <CatalogTagsNotConnectedWrapper data-component-name="Catalog/CatalogTags">
+          {translate('catalog.notConnected', 'Not connected')}
+        </CatalogTagsNotConnectedWrapper>
+      );
+    }
+    return null;
+  }
+
+  const maxLength = showAvatars || tagProps?.icon ? maxItemLength - 3 : maxItemLength;
+  const isFirstItemTruncated = items[0]?.length > maxLength;
+  const anyItemHidden = items.length > itemsToShow;
+
+  const shouldUseVariantWithTooltip = anyItemHidden || isFirstItemTruncated;
+
+  if (shouldUseVariantWithTooltip) {
+    const displayedItems = items.slice(0, itemsToShow);
+    const remainingCount = items.length - itemsToShow;
+
+    return (
+      <Tooltip tip={items.join(', ')} placement="bottom" className="catalog">
+        <CatalogTagsWrapper data-component-name="Catalog/CatalogTags">
+          {displayedItems.map((item, index) => (
+            <Tag
+              key={`${item}-${index}`}
+              {...tagProps}
+              {...(showAvatars && {
+                icon: <CatalogAvatar value={item} size="small" />,
+                style: {
+                  ...tagProps?.style,
+                  paddingLeft: 'var(--catalog-tags-tag-left-padding)',
+                },
+              })}
+              textTransform="none"
+              maxLength={maxLength}
+            >
+              <CatalogHighlight>{item}</CatalogHighlight>
+            </Tag>
+          ))}
+
+          {remainingCount > 0 && <MoreTagsButton>+ {remainingCount}</MoreTagsButton>}
+        </CatalogTagsWrapper>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <CatalogTagsWrapper data-component-name="Catalog/CatalogTags">
+      {items.map((item, index) => (
+        <Tag
+          key={`${item}-${index}`}
+          {...tagProps}
+          {...(showAvatars && {
+            icon: <CatalogAvatar value={item} size="small" />,
+            style: {
+              ...tagProps?.style,
+              paddingLeft: 'var(--catalog-tags-tag-left-padding)',
+            },
+          })}
+          maxLength={maxLength}
+        >
+          <CatalogHighlight>{item}</CatalogHighlight>
+        </Tag>
+      ))}
+    </CatalogTagsWrapper>
+  );
+}
+
+const CatalogTagsWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+`;
+
+const MoreTagsButton = styled.span`
+  font-size: var(--catalog-tags-more-button-font-size);
+  margin-left: var(--catalog-tags-more-button-margin-left);
+`;
+
+const CatalogTagsNotConnectedWrapper = styled.span`
+  font-size: var(--catalog-tags-not-connected-font-size);
+  line-height: var(--catalog-tags-not-connected-line-height);
+  color: var(--catalog-tags-not-connected-color);
+`;

package/src/components/Catalog/variables.ts

@@ -47,7 +47,7 @@ export const catalog = css`
   --catalog-description-text-color: var(--text-color-secondary);
   --catalog-description-font-weight: var(--font-weight-regular);
   --catalog-description-font-size: var(--font-size-lg);
-  --catalog-description-margin: 0 0 var(--spacing-xl) 0;
+  --catalog-description-margin: 0 0 var(--spacing-base) 0;
   --catalog-description-line-height: var(--line-height-lg);
 
   /**
@@ -152,6 +152,7 @@ export const catalog = css`
   --catalog-tags-not-connected-font-size: var(--font-size-base);
   --catalog-tags-not-connected-line-height: var(--line-height-base);
   --catalog-tags-not-connected-color: var(--text-color-disabled);
+  --catalog-tags-tag-left-padding: 2px;
 
   /**
     * @tokens Catalog empty state
@@ -206,7 +207,7 @@ export const catalog = css`
     * @tokens Catalog card
     */
   --catalog-card-height: 241px;
-  --catalog-card-padding-vertical: var(--spacing-base);
+  --catalog-card-padding-vertical: var(--spacing-md);
   --catalog-card-padding-horizontal: var(--spacing-md);
   --catalog-card-gap: var(--spacing-sm);
   --catalog-card-text-color: var(--text-color-secondary);
@@ -281,7 +282,7 @@ export const catalog = css`
   /**
     * @tokens Catalog card footer
     */
-  --catalog-card-footer-height: 72px;
+  --catalog-card-footer-height: 68px;
 
   /**
     * @tokens Catalog card description
@@ -313,11 +314,6 @@ export const catalog = css`
   --catalog-page-badge-dot-size: 6px;
   --catalog-page-badge-dot-border-color: var(--color-static-white);
 
-  /**
-   * @tokens Catalog card metadata
-   */
-  --catalog-card-metadata-owner-tag-left-padding: 2px;
-
 
   /**
     * @tokens Catalog table
@@ -325,13 +321,13 @@ export const catalog = css`
   --catalog-table-border-color: var(--border-color-secondary);
   --catalog-table-header-bg-color: var(--layer-color);
   --catalog-table-header-font-weight: var(--font-weight-medium);
-  --catalog-table-header-cell-padding: 4px 8px;
-  --catalog-table-cell-padding: 4px 8px;
+  --catalog-table-header-cell-padding: 4px 6px 4px 8px;
+  --catalog-table-cell-padding: 4px 6px 4px 8px;
   --catalog-table-row-hover-bg-color: var(--bg-color-hover, rgba(0, 0, 0, 0.04));
   --catalog-table-empty-state-padding: 32px;
   --catalog-table-empty-state-color: var(--text-color-secondary);
-  --catalog-table-title-cell-gap: 12px;
-  --catalog-table-entity-title-content-offset: 42px;
+  --catalog-table-title-cell-gap: var(--spacing-xs);
+  --catalog-table-entity-title-content-offset: 40px;
 
   /**
     * @tokens Catalog table header
@@ -501,8 +497,6 @@ export const catalog = css`
   --catalog-history-pill-line-height: var(--line-height-base);
   --catalog-history-pill-text-color: var(--text-color-primary);
   --catalog-history-pill-min-width: calc(100% - 118px - var(--catalog-history-item-gap));
-
-
   // @tokens End
 
   /**
@@ -581,5 +575,19 @@ export const catalog = css`
   --catalog-history-sidebar-version-tag-border-radius: var(--border-radius-xl);
   --catalog-history-sidebar-revision-tag-border-radius: var(--border-radius-xl);
   // @tokens End
+
+  /**
+   * @tokens Catalog entity type icon
+   */
+  --catalog-table-icon-width-large: 32px;
+  --catalog-table-icon-height-large: 32px;
+  --catalog-table-icon-width-medium: 24px;
+  --catalog-table-icon-height-medium: 24px;
+
+  /**
+   * @tokens Catalog user entity cell
+   */
+  --catalog-user-entity-cell-email-font-size: var(--font-size-base);
+  --catalog-user-entity-cell-email-line-height: var(--line-height-base);
 `;
 /* eslint-enable theme/no-raw-colors-in-styles */