@redocly/theme 0.59.0-next.1 → 0.59.0-next.10

package/src/icons/ThumbDownFilledIcon/ThumbDownFilledIcon.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => {
+  const { color, ...restProps } = props;
+
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...restProps}
+    >
+      <path
+        d="M3.0625 0.875H0.875V7H3.0625V0.875Z"
+        fill={getCssColorVariable(color) || '#DCDDE5'}
+      />
+      <path
+        d="M10.0625 0.875H3.9375V7.35118L5.26846 9.34771L5.63828 11.9362C5.66886 12.1443 5.77308 12.3346 5.932 12.4725C6.09092 12.6103 6.29402 12.6866 6.5044 12.6875H6.5625C6.91048 12.6871 7.2441 12.5487 7.49016 12.3027C7.73621 12.0566 7.87462 11.723 7.875 11.375V8.75H11.375C11.839 8.74948 12.2838 8.56494 12.6119 8.23686C12.9399 7.90879 13.1245 7.46397 13.125 7V3.9375C13.1241 3.12555 12.8012 2.34712 12.227 1.77298C11.6529 1.19885 10.8744 0.875903 10.0625 0.875Z"
+        fill={getCssColorVariable(color) || '#DCDDE5'}
+      />
+    </svg>
+  );
+};
+
+export const ThumbDownFilledIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ThumbDownFilledIcon/ThumbDownFilledIcon',
+}))<IconProps>`
+  height: ${({ size }) => size || '14px'};
+  width: ${({ size }) => size || '14px'};
+  color: ${({ color }) => color && getCssColorVariable(color)};
+`;

package/src/icons/ThumbUpFilledIcon/ThumbUpFilledIcon.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => {
+  const { color, ...restProps } = props;
+
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...restProps}
+    >
+      <path d="M3.0625 7H0.875V13.125H3.0625V7Z" fill={getCssColorVariable(color) || '#DCDDE5'} />
+      <path
+        d="M10.0625 13.125H3.9375V6.64882L5.26846 4.65229L5.63828 2.06382C5.66886 1.85567 5.77308 1.66539 5.932 1.52753C6.09092 1.38967 6.29402 1.31338 6.5044 1.3125H6.5625C6.91048 1.31288 7.2441 1.45129 7.49016 1.69734C7.73621 1.9434 7.87462 2.27702 7.875 2.625V5.25H11.375C11.839 5.25052 12.2838 5.43506 12.6119 5.76314C12.9399 6.09121 13.1245 6.53603 13.125 7V10.0625C13.1241 10.8744 12.8012 11.6529 12.227 12.227C11.6529 12.8012 10.8744 13.1241 10.0625 13.125Z"
+        fill={getCssColorVariable(color) || '#DCDDE5'}
+      />
+    </svg>
+  );
+};
+
+export const ThumbUpFilledIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ThumbUpFilledIcon/ThumbUpFilledIcon',
+}))<IconProps>`
+  height: ${({ size }) => size || '14px'};
+  width: ${({ size }) => size || '14px'};
+  color: ${({ color }) => color && getCssColorVariable(color)};
+`;

package/src/index.ts

@@ -287,6 +287,7 @@ export * from '@redocly/theme/icons/RedoclyIcon/RedoclyIcon';
 export * from '@redocly/theme/icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon';
 export * from '@redocly/theme/icons/GenericIcon/GenericIcon';
 export * from '@redocly/theme/icons/ShareIcon/ShareIcon';
+export * from '@redocly/theme/icons/HashtagIcon/HashtagIcon';
 /* Layouts */
 export * from '@redocly/theme/layouts/RootLayout';
 export * from '@redocly/theme/layouts/PageLayout';

package/src/markdoc/components/Cards/Card.tsx

@@ -103,6 +103,7 @@ const ContentWrapper = styled.div`
   flex-direction: column;
   flex-shrink: 1;
   gap: var(--card-content-gap);
+  width: 100%;
 `;
 
 const Title = styled.h3<{ $isCardLink: boolean; $justifyContent: string }>`
@@ -146,28 +147,6 @@ const Body = styled.div<{ $lineClamp?: number }>`
   > *:last-child {
     margin-bottom: 0;
   }
-
-  /* Icon link styles */
-  & a {
-    display: inline-flex;
-    align-items: center;
-    line-height: 1;
-
-    & svg {
-      width: 1.2em;
-      height: 1.2em;
-      margin-right: 0.25em;
-      vertical-align: middle;
-
-      & g {
-        fill: var(--link-color-primary);
-      }
-    }
-  }
-
-  & a:visited > span > svg > g {
-    fill: var(--link-color-visited);
-  }
 `;
 
 const CardWrapper = styled.div.attrs<{
@@ -222,12 +201,6 @@ const CardWrapper = styled.div.attrs<{
       }
     }
   }
-
-  && ul {
-    list-style: none;
-    padding-left: 0;
-    margin: var(--spacing-xs) 0;
-  }
 `;
 
 const getCardWrapperClass = ($isCardLink: boolean, $variant?: string) => {

package/src/markdoc/components/Tabs/TabList.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import styled, { css } from 'styled-components';
 
 import type { JSX } from 'react';
@@ -17,6 +17,140 @@ type TabListProps = {
   size: TabsSize;
   activeTab: string;
   onTabChange: (tab: string) => void;
+  containerRef: React.RefObject<HTMLUListElement | null>;
+  onReadyChange?: (isReady: boolean) => void;
+};
+
+type UseHighlightBarAnimationProps = {
+  childrenArray: React.ReactElement<TabItemProps>[];
+  activeTab: string;
+  tabsContainerRef: React.RefObject<HTMLElement | null>;
+  visibleTabs: number[];
+  overflowTabs: number[];
+};
+
+/**
+ * Calculates optimal dropdown position relative to viewport to ensure visibility.
+ * Positions below the button by default, but moves above if insufficient space.
+ * Adjusts horizontal position to prevent overflow off screen edges.
+ */
+const calculateDropdownPosition = (
+  buttonRect: DOMRect,
+  dropdownRect: DOMRect,
+): { top: number; left: number } => {
+  const gap = 4;
+  const margin = 16;
+  const spaceBelow = window.innerHeight - buttonRect.bottom;
+  const spaceAbove = buttonRect.top;
+
+  // Position below button, or above if dropdown doesn't fit below
+  const top =
+    spaceBelow < dropdownRect.height + gap && spaceAbove > spaceBelow
+      ? buttonRect.top - gap
+      : buttonRect.bottom + gap;
+
+  // Align with button left edge, adjust if overflows screen
+  const idealLeft = buttonRect.left;
+  const rightEdge = idealLeft + dropdownRect.width;
+  const overflowsRight = rightEdge > window.innerWidth - margin;
+
+  const left = overflowsRight
+    ? window.innerWidth - dropdownRect.width - margin
+    : Math.max(margin, idealLeft);
+
+  return { top, left };
+};
+
+/**
+ * Manages dropdown positioning and updates on scroll/resize events for TabList.
+ */
+const useDropdownPosition = (
+  hasOverflow: boolean,
+  dropdownRef: React.RefObject<HTMLDivElement | null>,
+) => {
+  const [dropdownPosition, setDropdownPosition] = useState<{ top?: number; left?: number }>({});
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  const updateDropdownPosition = useCallback(() => {
+    if (!dropdownRef.current) return;
+
+    const button = dropdownRef.current.querySelector('button');
+    const dropdownMenu = dropdownRef.current.querySelector('div:last-child');
+    if (!button || !dropdownMenu) return;
+
+    const buttonRect = button.getBoundingClientRect();
+    const dropdownRect = (dropdownMenu as HTMLElement).getBoundingClientRect();
+
+    const position = calculateDropdownPosition(buttonRect, dropdownRect);
+    setDropdownPosition(position);
+  }, [dropdownRef]);
+
+  // Track when dropdown menu appears and recalculate position
+  useEffect(() => {
+    if (!hasOverflow || !isDropdownOpen || !dropdownRef.current) return;
+
+    const dropdownMenu = dropdownRef.current.querySelector('div:last-child') as HTMLElement;
+    if (!dropdownMenu) return;
+
+    // ResizeObserver tracks both initial render and size changes
+    const resizeObserver = new ResizeObserver(() => {
+      updateDropdownPosition();
+    });
+
+    resizeObserver.observe(dropdownMenu);
+
+    return () => resizeObserver.disconnect();
+  }, [hasOverflow, isDropdownOpen, dropdownRef, updateDropdownPosition]);
+
+  // Update position on scroll/resize
+  useEffect(() => {
+    if (!hasOverflow || !isDropdownOpen) return;
+
+    window.addEventListener('scroll', updateDropdownPosition, true);
+    window.addEventListener('resize', updateDropdownPosition);
+
+    return () => {
+      window.removeEventListener('scroll', updateDropdownPosition, true);
+      window.removeEventListener('resize', updateDropdownPosition);
+    };
+  }, [hasOverflow, isDropdownOpen, updateDropdownPosition]);
+
+  return {
+    dropdownPosition,
+    isDropdownOpen,
+    setIsDropdownOpen,
+    setDropdownPosition,
+    updateDropdownPosition,
+  };
+};
+
+const renderTab = (
+  child: React.ReactElement<TabItemProps>,
+  index: number,
+  size: TabsSize,
+  setTabRef: (element: HTMLButtonElement | null, index: number) => void,
+  handleKeyboard: (event: React.KeyboardEvent, index: number) => void,
+  onTabClick: (labelOrIndex: string | number) => void,
+) => {
+  const { label, icon } = child.props;
+  const tabId = getTabId(label, index);
+
+  return (
+    <Tab
+      key={`key-${tabId}`}
+      tabId={tabId}
+      label={label}
+      icon={icon}
+      size={size}
+      disabled={child.props.disable}
+      setRef={(el: HTMLButtonElement | null) => setTabRef(el, index)}
+      onKeyDown={(event) => handleKeyboard(event, index)}
+      onClick={() => {
+        child.props.onClick?.();
+        onTabClick(label);
+      }}
+    />
+  );
 };
 
 export function TabList({
@@ -24,106 +158,119 @@ export function TabList({
   size,
   activeTab,
   onTabChange,
+  containerRef,
+  onReadyChange,
 }: TabListProps): JSX.Element {
-  const tabsContainerRef = useRef<HTMLUListElement>(null);
-
-  const { allTabsHidden, overflowTabs, visibleTabs, handleKeyboard, onTabClick, setTabRef } =
-    useTabs({
-      activeTab,
-      onTabChange,
-      containerRef: tabsContainerRef,
-      totalTabs: childrenArray.length,
-    });
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const totalTabs = childrenArray.length;
+
+  const { overflowTabs, visibleTabs, handleKeyboard, onTabClick, setTabRef, isReady } = useTabs({
+    activeTab,
+    onTabChange,
+    containerRef,
+    totalTabs,
+  });
+
+  useEffect(() => {
+    onReadyChange?.(isReady);
+  }, [isReady, onReadyChange]);
 
   const { highlightStyle } = useHighlightBarAnimation({
     activeTab,
     childrenArray,
     overflowTabs,
-    tabsContainerRef,
+    tabsContainerRef: containerRef,
     visibleTabs,
   });
 
+  const hasOverflow = overflowTabs.length > 0;
+  const isMoreActive =
+    hasOverflow &&
+    overflowTabs.some((i) => childrenArray[i] && activeTab === childrenArray[i].props.label);
+
+  // Show as selector when no visible tabs (all tabs in dropdown)
+  const showAsSelector = visibleTabs.length === 0 && hasOverflow;
+
+  const { dropdownPosition, setIsDropdownOpen, setDropdownPosition } = useDropdownPosition(
+    hasOverflow,
+    dropdownRef,
+  );
+
   return (
-    <TabListContainer role="tablist" ref={tabsContainerRef}>
+    <TabListContainer role="tablist" ref={containerRef}>
       <HighlightBar size={size} style={highlightStyle}>
         <div />
       </HighlightBar>
+
       {childrenArray.map((child, index) => {
-        if (!visibleTabs.includes(index)) return null;
-        const { label, icon } = child.props;
-        const tabId = getTabId(label, index);
-        return (
-          <Tab
-            key={`key-${tabId}`}
-            tabId={tabId}
-            label={label}
-            icon={icon}
-            size={size}
-            disabled={child.props.disable}
-            setRef={(el: HTMLButtonElement | null) => setTabRef(el, index)}
-            onKeyDown={(event) => handleKeyboard(event, index)}
-            onClick={() => {
-              child.props.onClick?.();
-              onTabClick(label);
-            }}
-          />
-        );
+        // Show all tabs before ready (for measurement), then only visible ones
+        const shouldRender = !isReady || visibleTabs.includes(index);
+        if (!shouldRender) return null;
+        return renderTab(child, index, size, setTabRef, handleKeyboard, onTabClick);
       })}
-      <TabItem
-        size={size}
-        active={overflowTabs.some((index) => activeTab === childrenArray[index].props.label)}
-        tabIndex={0}
-      >
-        {overflowTabs.length > 0 && (
-          <Dropdown
-            trigger={
-              <TabButtonLink
-                size={size}
-                className={
-                  overflowTabs.some((index) => activeTab === childrenArray[index].props.label)
-                    ? 'active'
-                    : undefined
-                }
-              >
-                {allTabsHidden ? activeTab : 'More'}
-              </TabButtonLink>
-            }
-            alignment="start"
-            withArrow={true}
+
+      {hasOverflow && (
+        <TabItem
+          size={size}
+          active={isMoreActive || showAsSelector}
+          tabIndex={0}
+          className="dropdown-tab"
+        >
+          <DropdownWrapper
+            $top={dropdownPosition.top}
+            $left={dropdownPosition.left}
+            onClickCapture={() => {
+              setIsDropdownOpen(true);
+            }}
           >
-            <DropdownMenu>
-              {overflowTabs.map((index) => {
-                const { label } = childrenArray[index].props;
-                const tabId = getTabId(label, index);
-                return (
-                  <DropdownMenuItem
-                    key={`more-${tabId}`}
-                    active={activeTab === label}
-                    onAction={() => {
-                      childrenArray[index].props.onClick?.();
-                      onTabClick(index);
-                    }}
-                    disabled={childrenArray[index].props.disable}
-                  >
-                    {label}
-                  </DropdownMenuItem>
-                );
-              })}
-            </DropdownMenu>
-          </Dropdown>
-        )}
-      </TabItem>
+            <FixedPositionDropdown
+              ref={dropdownRef}
+              trigger={
+                <TabButtonLink
+                  size={size}
+                  className={isMoreActive || showAsSelector ? 'active' : undefined}
+                >
+                  {showAsSelector ? <TabButtonText>{activeTab}</TabButtonText> : 'More'}
+                </TabButtonLink>
+              }
+              alignment="start"
+              withArrow
+              onClose={() => {
+                setIsDropdownOpen(false);
+                setDropdownPosition({});
+              }}
+            >
+              <DropdownMenu>
+                {overflowTabs.map((index) => {
+                  const child = childrenArray[index];
+                  if (!child) return null;
+
+                  const { label } = child.props;
+                  const tabId = getTabId(label, index);
+
+                  return (
+                    <DropdownMenuItem
+                      key={`more-${tabId}`}
+                      active={activeTab === label}
+                      onAction={() => {
+                        child.props.onClick?.();
+                        onTabClick(index);
+                      }}
+                      disabled={child.props.disable}
+                    >
+                      {label}
+                    </DropdownMenuItem>
+                  );
+                })}
+              </DropdownMenu>
+            </FixedPositionDropdown>
+          </DropdownWrapper>
+        </TabItem>
+      )}
     </TabListContainer>
   );
 }
 
-type UseHighlightBarAnimationProps = {
-  childrenArray: React.ReactElement<TabItemProps>[];
-  activeTab: string;
-  tabsContainerRef: React.RefObject<HTMLElement | null>;
-  visibleTabs: number[];
-  overflowTabs: number[];
-};
 const useHighlightBarAnimation = (props: UseHighlightBarAnimationProps) => {
   const { childrenArray, activeTab, tabsContainerRef, visibleTabs, overflowTabs } = props;
 
@@ -141,35 +288,39 @@ const useHighlightBarAnimation = (props: UseHighlightBarAnimationProps) => {
       return;
     }
 
-    const activeTabElement: HTMLElement | null = container.querySelector(
-      `[data-label="${activeTab}"]`,
-    );
-    if (!activeTabElement) return;
-
+    // Remove active class from all tabs first
     container.querySelectorAll('[data-label]').forEach((el) => {
       el.classList.remove('active');
     });
 
-    const { offsetLeft, offsetWidth } = activeTabElement;
-
-    if (visibleTabs.includes(activeIndex)) {
-      activeTabElement.classList.add('active');
-      setHighlightStyle({ left: offsetLeft, width: offsetWidth });
-      return;
-    }
-
+    // Check if active tab is in overflow first
     if (overflowTabs.includes(activeIndex)) {
       const moreButton = container.querySelector('button');
       if (!moreButton) return;
 
       const moreButtonRect = moreButton.getBoundingClientRect();
       const containerRect = container.getBoundingClientRect();
+
       setHighlightStyle({
         left: moreButtonRect.left - containerRect.left,
         width: moreButtonRect.width,
       });
       return;
     }
+
+    // Active tab is visible, find its element
+    const activeTabElement: HTMLElement | null = container.querySelector(
+      `[data-label="${activeTab}"]`,
+    );
+    if (!activeTabElement) return;
+
+    const { offsetLeft, offsetWidth } = activeTabElement;
+
+    if (visibleTabs.includes(activeIndex)) {
+      activeTabElement.classList.add('active');
+      setHighlightStyle({ left: offsetLeft, width: offsetWidth });
+      return;
+    }
   }, [activeTab, childrenArray, visibleTabs, overflowTabs, tabsContainerRef]);
 
   return { highlightStyle };
@@ -181,15 +332,11 @@ export const TabListContainer = styled.ul`
   gap: var(--md-tabs-gap);
   width: 100%;
   min-width: 0;
-  position: relative;
 
   &::before {
     content: '';
     position: absolute;
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
+    inset: 0;
     border: var(--md-tabs-border);
     border-width: var(--md-tabs-border-width);
     pointer-events: none;
@@ -197,11 +344,17 @@ export const TabListContainer = styled.ul`
 
   && {
     padding: var(--md-tabs-padding);
-    margin-block-end: 0;
     margin: 0;
 
     & > li {
-      margin-bottom: 0px;
+      margin-bottom: 0;
+      flex-shrink: 0;
+
+      &.dropdown-tab {
+        flex-shrink: 1;
+        min-width: 0;
+        max-width: 100%;
+      }
     }
   }
 `;
@@ -212,7 +365,7 @@ export const TabItem = styled.li<{ active?: boolean; size: TabsSize; tabIndex?:
   cursor: pointer;
   align-items: center;
   padding: var(--md-tabs-tab-wrapper-padding);
-  z-index: 1;
+  z-index: var(--z-index-surface);
 
   ${({ active, size }) =>
     active
@@ -251,6 +404,51 @@ export const TabItem = styled.li<{ active?: boolean; size: TabsSize; tabIndex?:
   }
 `;
 
+const DropdownWrapper = styled.div.attrs<{ $top?: number; $left?: number }>((props) => ({
+  style: {
+    ...(props.$top !== undefined && { '--dropdown-top': `${props.$top}px` }),
+    ...(props.$left !== undefined && { '--dropdown-left': `${props.$left}px` }),
+  },
+}))<{ $top?: number; $left?: number }>`
+  position: static;
+  z-index: var(--z-index-raised);
+  width: 100%;
+  min-width: 0;
+`;
+
+const FixedPositionDropdown = styled(Dropdown)`
+  position: static;
+  width: 100%;
+  min-width: 0;
+
+  > div:first-child {
+    width: 100%;
+    min-width: 0;
+  }
+
+  > div:last-child {
+    position: fixed;
+    top: var(--dropdown-top, 0);
+    left: var(--dropdown-left, 0);
+    right: auto;
+    bottom: auto;
+    transform: none;
+    padding-top: 0;
+    max-width: min(400px, calc(100vw - 32px));
+    max-height: calc(100vh - var(--dropdown-top, 0) - 32px);
+    overflow-y: auto;
+    z-index: var(--z-index-raised);
+
+    ul {
+      li {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+`;
+
 const HighlightBar = styled.div<{ size: TabsSize }>`
   position: absolute;
   top: 0;
@@ -271,11 +469,20 @@ const HighlightBar = styled.div<{ size: TabsSize }>`
   }
 `;
 
+const TabButtonText = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+`;
+
 export const TabButtonLink = styled(Button)`
   color: var(--md-tabs-tab-text-color);
   font-family: var(--md-tabs-tab-font-family);
   font-style: var(--md-tabs-tab-font-style);
   background-color: var(--md-tabs-tab-bg-color);
+  width: 100%;
 
   transition:
     background-color 300ms ease-in-out,
@@ -295,9 +502,9 @@ export const TabButtonLink = styled(Button)`
 
   &.active {
     color: var(--md-tabs-active-tab-text-color);
-    font-size: var(--md-tabs-${({ size }) => size}-active-tab-font-size);
     font-family: var(--md-tabs-active-tab-font-family);
     font-style: var(--md-tabs-active-tab-font-style);
+    font-size: var(--md-tabs-${({ size }) => size}-active-tab-font-size);
     font-weight: var(--md-tabs-${({ size }) => size}-active-tab-font-weight);
     line-height: var(--md-tabs-${({ size }) => size}-active-tab-line-height);
     background-color: var(--md-tabs-active-tab-bg-color);
@@ -307,12 +514,12 @@ export const TabButtonLink = styled(Button)`
 
   &:hover {
     color: var(--md-tabs-hover-tab-text-color);
-    font-size: var(--md-tabs-${({ size }) => size}-hover-tab-font-size);
     font-family: var(--md-tabs-hover-tab-font-family);
     font-style: var(--md-tabs-hover-tab-font-style);
+    font-size: var(--md-tabs-${({ size }) => size}-hover-tab-font-size);
     font-weight: var(--md-tabs-${({ size }) => size}-hover-tab-font-weight);
-    background-color: var(--md-tabs-hover-tab-bg-color);
     line-height: var(--md-tabs-${({ size }) => size}-hover-tab-line-height);
+    background-color: var(--md-tabs-hover-tab-bg-color);
     border-radius: var(--md-tabs-${({ size }) => size}-hover-tab-border-radius);
     padding: var(--md-tabs-${({ size }) => size}-hover-tab-padding);
   }