From ddd997b4fa51b476b964cc6e8b50d7dd259bb48d Mon Sep 17 00:00:00 2001 From: Sachin Venugopalan Date: Thu, 23 Jul 2026 18:53:00 +0530 Subject: [PATCH 1/4] Changed the tab component and resued the same from the app --- .../e2e/components/playground.component.ts | 8 +- .../tests/playground/playground-tabs.spec.ts | 15 ++ .../src/assets/icons/ChevronsRightIcon.tsx | 22 +++ packages/oc-docs/src/assets/icons/DotIcon.tsx | 26 ++++ packages/oc-docs/src/assets/icons/index.ts | 2 + .../CollectionSettingsView.tsx | 1 + .../EnvironmentsView/EnvironmentsView.tsx | 2 +- .../FolderSettingsView/FolderSettingsView.tsx | 2 +- .../RequestPane/RequestPane.tsx | 1 + .../ResponsePane/ResponsePane.tsx | 2 + packages/oc-docs/src/ui/Tabs/StyledWrapper.ts | 77 ++++++++++ packages/oc-docs/src/ui/Tabs/Tabs.spec.tsx | 52 ++++--- packages/oc-docs/src/ui/Tabs/Tabs.tsx | 142 ++++++++++++++---- .../oc-docs/src/ui/Tabs/useResponsiveTabs.ts | Bin 0 -> 5354 bytes 14 files changed, 298 insertions(+), 54 deletions(-) create mode 100644 packages/oc-docs/e2e/tests/playground/playground-tabs.spec.ts create mode 100644 packages/oc-docs/src/assets/icons/ChevronsRightIcon.tsx create mode 100644 packages/oc-docs/src/assets/icons/DotIcon.tsx create mode 100644 packages/oc-docs/src/ui/Tabs/useResponsiveTabs.ts diff --git a/packages/oc-docs/e2e/components/playground.component.ts b/packages/oc-docs/e2e/components/playground.component.ts index c47858fa..71c3a6f4 100644 --- a/packages/oc-docs/e2e/components/playground.component.ts +++ b/packages/oc-docs/e2e/components/playground.component.ts @@ -112,7 +112,13 @@ export class PlaygroundComponent extends BaseComponent { } async selectTab(id: string): Promise { - await this.tab(id).click(); + const direct = this.tab(id); + if ((await direct.count()) > 0 && (await direct.isVisible())) { + await direct.click(); + return; + } + await this.page.getByTestId('tabs-more').click(); + await this.page.getByTestId(`tabs-more-${id}`).click(); } async close(): Promise { diff --git a/packages/oc-docs/e2e/tests/playground/playground-tabs.spec.ts b/packages/oc-docs/e2e/tests/playground/playground-tabs.spec.ts new file mode 100644 index 00000000..33377ddb --- /dev/null +++ b/packages/oc-docs/e2e/tests/playground/playground-tabs.spec.ts @@ -0,0 +1,15 @@ +import { test, expect } from '../../playwright'; + +test.describe('Playground request tabs — responsive overflow', () => { + test.use({ viewport: { width: 900, height: 800 } }); + + test('collapses overflowing tabs into a ⋯ dropdown and selects from it', async ({ page, playground }) => { + await playground.open('bottom'); + await playground.openRequest('get users'); + + await expect(page.getByTestId('tabs-more')).toBeVisible(); + + await playground.selectTab('tests'); + await expect(page.getByTestId('tabs-tab-tests')).toHaveAttribute('aria-selected', 'true'); + }); +}); diff --git a/packages/oc-docs/src/assets/icons/ChevronsRightIcon.tsx b/packages/oc-docs/src/assets/icons/ChevronsRightIcon.tsx new file mode 100644 index 00000000..44630e24 --- /dev/null +++ b/packages/oc-docs/src/assets/icons/ChevronsRightIcon.tsx @@ -0,0 +1,22 @@ +import React from 'react'; + +export const ChevronsRightIcon: React.FC<{ size?: number }> = ({ size = 18 }) => ( + +); + +export default ChevronsRightIcon; diff --git a/packages/oc-docs/src/assets/icons/DotIcon.tsx b/packages/oc-docs/src/assets/icons/DotIcon.tsx new file mode 100644 index 00000000..9eab4afb --- /dev/null +++ b/packages/oc-docs/src/assets/icons/DotIcon.tsx @@ -0,0 +1,26 @@ +import React from 'react'; + +export const DotIcon: React.FC<{ width?: number | string }> = ({ width = 10 }) => ( + +); + +export default DotIcon; diff --git a/packages/oc-docs/src/assets/icons/index.ts b/packages/oc-docs/src/assets/icons/index.ts index a54d4b20..8bab493d 100644 --- a/packages/oc-docs/src/assets/icons/index.ts +++ b/packages/oc-docs/src/assets/icons/index.ts @@ -27,3 +27,5 @@ export * from './SidebarToggleIcon'; export * from './SettingsIcon'; export * from './TrashIcon'; export * from './ExampleIcon'; +export * from './DotIcon'; +export * from './ChevronsRightIcon'; diff --git a/packages/oc-docs/src/components/Playground/Content/Views/CollectionSettingsView/CollectionSettingsView.tsx b/packages/oc-docs/src/components/Playground/Content/Views/CollectionSettingsView/CollectionSettingsView.tsx index d26defc5..f74d67ce 100644 --- a/packages/oc-docs/src/components/Playground/Content/Views/CollectionSettingsView/CollectionSettingsView.tsx +++ b/packages/oc-docs/src/components/Playground/Content/Views/CollectionSettingsView/CollectionSettingsView.tsx @@ -163,6 +163,7 @@ const CollectionSettings: React.FC = ({ collection }) =
({ ...tab, content:
{tab.content}
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvironmentsView.tsx b/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvironmentsView.tsx index cd3d8311..988c9944 100644 --- a/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvironmentsView.tsx +++ b/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvironmentsView.tsx @@ -217,7 +217,7 @@ const EnvironmentsView: React.FC = ({ collection, compact
{selectedEnvironment ? ( - + ) : (

Select an environment to view its variables

diff --git a/packages/oc-docs/src/components/Playground/Content/Views/FolderSettingsView/FolderSettingsView.tsx b/packages/oc-docs/src/components/Playground/Content/Views/FolderSettingsView/FolderSettingsView.tsx index 274c4464..b8fdca32 100644 --- a/packages/oc-docs/src/components/Playground/Content/Views/FolderSettingsView/FolderSettingsView.tsx +++ b/packages/oc-docs/src/components/Playground/Content/Views/FolderSettingsView/FolderSettingsView.tsx @@ -225,7 +225,7 @@ const FolderSettings: React.FC = ({ folder, onFolderChange
- +
); diff --git a/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/RequestPane/RequestPane.tsx b/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/RequestPane/RequestPane.tsx index 41eba746..4e516859 100644 --- a/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/RequestPane/RequestPane.tsx +++ b/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/RequestPane/RequestPane.tsx @@ -279,6 +279,7 @@ const RequestPane: React.FC = ({ item, onItemChange }) => { return ( = ({ response, isLoading }) => { return ( alpha content

}, @@ -12,42 +12,42 @@ const tabs: Tab[] = [ describe('Tabs', () => { it('renders an accessible tablist with a tab button per item', () => { - const root = useRenderToDom(); + const root = useRenderToDom(); expect(root.querySelector('[role="tablist"]')).not.toBeNull(); expect(root.querySelectorAll('[role="tab"]')).toHaveLength(3); }); it('shows the label and its count', () => { - const root = useRenderToDom(); - const tab = query(root, '[data-testid="t-tab-a"]'); + const root = useRenderToDom(); + const tab = getByTestId(root, 'example-tab-a'); expect(tab.text).toContain('Alpha'); expect(query(tab, '.tab-count').text).toBe('2'); }); it('activates the first tab by default and mounts only its panel', () => { - const root = useRenderToDom(); - expect(query(root, '[data-testid="t-tab-a"]').getAttribute('aria-selected')).toBe('true'); - expect(query(root, '[data-testid="t-tab-b"]').getAttribute('aria-selected')).toBe('false'); + const root = useRenderToDom(); + expect(getByTestId(root, 'example-tab-a').getAttribute('aria-selected')).toBe('true'); + expect(getByTestId(root, 'example-tab-b').getAttribute('aria-selected')).toBe('false'); expect(root.querySelector('[data-testid="alpha"]')).not.toBeNull(); expect(root.querySelector('[data-testid="beta"]')).toBeNull(); }); it('honours a controlled activeTab', () => { - const root = useRenderToDom(); - expect(query(root, '[data-testid="t-tab-c"]').getAttribute('aria-selected')).toBe('true'); + const root = useRenderToDom(); + expect(getByTestId(root, 'example-tab-c').getAttribute('aria-selected')).toBe('true'); expect(root.querySelector('[data-testid="gamma"]')).not.toBeNull(); expect(root.querySelector('[data-testid="alpha"]')).toBeNull(); }); it('honours defaultActiveTab', () => { - const root = useRenderToDom(); + const root = useRenderToDom(); expect(root.querySelector('[data-testid="beta"]')).not.toBeNull(); }); it('applies roving tabindex (only the active tab is tabbable)', () => { - const root = useRenderToDom(); - expect(query(root, '[data-testid="t-tab-a"]').getAttribute('tabindex')).toBe('0'); - expect(query(root, '[data-testid="t-tab-b"]').getAttribute('tabindex')).toBe('-1'); + const root = useRenderToDom(); + expect(getByTestId(root, 'example-tab-a').getAttribute('tabindex')).toBe('0'); + expect(getByTestId(root, 'example-tab-b').getAttribute('tabindex')).toBe('-1'); }); it('renders the active tab’s rightElement, falling back to the shared one', () => { @@ -63,24 +63,38 @@ describe('Tabs', () => { }); it('wires each tab to its panel via aria-controls / aria-labelledby', () => { - const root = useRenderToDom(); - const tab = query(root, '[data-testid="t-tab-a"]'); + const root = useRenderToDom(); + const tab = getByTestId(root, 'example-tab-a'); const panel = query(root, '[role="tabpanel"]'); expect(tab.getAttribute('aria-controls')).toBe(panel.getAttribute('id')); expect(panel.getAttribute('aria-labelledby')).toBe(tab.getAttribute('id')); }); it('defaults to the underline variant', () => { - const root = useRenderToDom(); - const wrapper = query(root, '[data-testid="t"]'); + const root = useRenderToDom(); + const wrapper = getByTestId(root, 'example'); expect(wrapper.classList.contains('tabs-variant-underline')).toBe(true); expect(wrapper.classList.contains('tabs-variant-button')).toBe(false); }); it('applies the button variant class when variant="button"', () => { - const root = useRenderToDom(); - const wrapper = query(root, '[data-testid="t"]'); + const root = useRenderToDom(); + const wrapper = getByTestId(root, 'example'); expect(wrapper.classList.contains('tabs-variant-button')).toBe(true); expect(wrapper.classList.contains('tabs-variant-underline')).toBe(false); }); + + it('applies the responsive variant class when variant="responsive"', () => { + const root = useRenderToDom(); + expect(getByTestId(root, 'example').classList.contains('tabs-variant-responsive')).toBe(true); + }); + + it('renders every tab in the responsive variant until the client measures the row', () => { + const root = useRenderToDom(); + // Each tab renders, addressed by its test id (not by role/class). + expect(getByTestId(root, 'example-tab-a').text).toContain('Alpha'); + expect(getByTestId(root, 'example-tab-b').text).toContain('Beta'); + expect(getByTestId(root, 'example-tab-c').text).toContain('Gamma'); + expect(queryByTestId(root, 'example-measure')).not.toBeNull(); + }); }); diff --git a/packages/oc-docs/src/ui/Tabs/Tabs.tsx b/packages/oc-docs/src/ui/Tabs/Tabs.tsx index 3832e918..421278f6 100644 --- a/packages/oc-docs/src/ui/Tabs/Tabs.tsx +++ b/packages/oc-docs/src/ui/Tabs/Tabs.tsx @@ -1,4 +1,8 @@ import React, { useCallback, useRef, useState, type ReactNode } from 'react'; +import MenuDropdown from '../MenuDropdown/MenuDropdown'; +import type { MenuDropdownHandle } from '../MenuDropdown/types'; +import { ChevronsRightIcon, DotIcon } from '../../assets/icons'; +import { useResponsiveTabs } from './useResponsiveTabs'; import { StyledWrapper } from './StyledWrapper'; export interface Tab { @@ -17,13 +21,24 @@ interface TabsProps { defaultActiveTab?: string; onTabChange?: (id: string) => void; rightElement?: ReactNode; - variant?: 'underline' | 'button'; + variant?: 'underline' | 'button' | 'responsive'; className?: string; testId?: string; ariaLabel?: string; keepMounted?: boolean; } +const renderIndicator = (tab: Tab): ReactNode => { + const indicator = tab.count ?? tab.contentIndicator; + if (indicator === undefined) return null; + if (typeof indicator === 'number') return {indicator}; + return ( + + ); +}; + export const Tabs: React.FC = ({ tabs, activeTab, @@ -38,10 +53,22 @@ export const Tabs: React.FC = ({ }) => { const [internalActive, setInternalActive] = useState(defaultActiveTab ?? tabs[0]?.id ?? ''); const tabRefs = useRef>({}); + const moreRef = useRef(null); const requested = activeTab ?? internalActive; const current = tabs.some((tab) => tab.id === requested) ? requested : (tabs[0]?.id ?? ''); + const isResponsive = variant === 'responsive'; + const { containerRef, rightRef, setMeasureRef, visibleIds, overflowIds } = useResponsiveTabs( + tabs.map((tab) => tab.id), + current, + isResponsive + ); + + const visibleTabs = isResponsive ? tabs.filter((tab) => visibleIds.includes(tab.id)) : tabs; + const overflowTabs = isResponsive ? tabs.filter((tab) => overflowIds.includes(tab.id)) : []; + const navTabs = visibleTabs; + const activate = useCallback( (id: string) => { if (activeTab === undefined) setInternalActive(id); @@ -52,17 +79,17 @@ export const Tabs: React.FC = ({ const focusSibling = useCallback( (fromIndex: number, step: number) => { - const total = tabs.length; + const total = navTabs.length; for (let i = 1; i <= total; i += 1) { - const tab = tabs[(fromIndex + step * i + total) % total]; - if (!tab.disabled) { + const tab = navTabs[(fromIndex + step * i + total) % total]; + if (tab && !tab.disabled) { activate(tab.id); tabRefs.current[tab.id]?.focus(); return; } } }, - [tabs, activate] + [navTabs, activate] ); const onKeyDown = (event: React.KeyboardEvent, index: number) => { @@ -84,38 +111,89 @@ export const Tabs: React.FC = ({ const tabButtonId = (id: string) => `${testId}-tab-${id}`; const panelId = (id: string) => `${testId}-panel-${id}`; + const renderTabButton = (tab: Tab, navIndex: number) => { + const isActive = tab.id === current; + return ( + + ); + }; + + const overflowItems = overflowTabs.map((tab) => ({ + id: tab.id, + label: ( + + {tab.label} + {renderIndicator(tab)} + + ), + ariaLabel: tab.label, + onClick: () => { + activate(tab.id); + moreRef.current?.hide(); + } + })); + return ( - +
- {tabs.map((tab, index) => { - const isActive = tab.id === current; - const indicator = tab.count ?? tab.contentIndicator; - return ( - - ); - })} + + )}
- {rightContent !== undefined &&
{rightContent}
} + {rightContent !== undefined && ( +
+ {rightContent} +
+ )}
{keepMounted ? tabs.map((tab) => ( diff --git a/packages/oc-docs/src/ui/Tabs/useResponsiveTabs.ts b/packages/oc-docs/src/ui/Tabs/useResponsiveTabs.ts new file mode 100644 index 0000000000000000000000000000000000000000..a5dcf5dd4941d8d6919e2dbed8f747489ba12218 GIT binary patch literal 5354 zcmbVQ+in|265VHgMI{f>P@$*r582UhdbYcVG-C_c z_q^sm_Mh@4In|e$p=9qmF${60FICl5r%qLmS~uD_dP}X9FGW=?M1DW!my5ELx$}=R zS^D1_C!C}QDve&#p^+kYhtCcUPEP0tRk#&p&6^P!X{Fi7f=X@3tt2@kRHf=Aefrxk z|E0Ay@>42|ZVJ7vF{zeIX~rb#f&|$$OkjbHG{;UX2(Nl8>Rgi5nCBt45{|5Lmauo_ zNJ9$LEOc8J!t6+Iq$#lr^8yow#bHlPOX(cjkyol|WHF&DWsEk~Z?}!ec@iftXtATO zOFP_B(|HAm~ z`PZ+{U%k5i;rzRoJp1L};H#3@<$p#X1Bz^HGL(Xln#KYer+LwexP}fEm4o zKsq8q&}3E8Z~yt#Phx_W_=5;&o+F5NvIgi7?6nlOWv^g{wz{nl7D>4>d0PoHp`#NB zA>51t-Pd_p#XY=slR3^vQ3 zos=c{Ca>Cpq2smt9e+eK)>0mm%;yITUeQVwg{-ED|$zwKc{=a4N+pkB$PbF`^?oAaF1OM7Zx`rYbdr3`pC%;Ic#Dm}D)0EDS{E0*CEO zi4+5RVwMT2I;3!ZOoQg~arR~&#thT2DJ9=WZ-{4w4%_dU$y}S_dEnpidlKjDEPML^ z>P%|kfuWV`5kDKoCwXgt6$b?v0O6)>^FHSgIqAOdQt&Pq<7;cQV}5tm$qk2{r<}Pg ztlxhfiyYoRAYkqZKk46Nji51A`wT`Bhc=PH|K$;m9RC}5G#z}d3bsd9>@lK;vHzLh z;fL!F>dJ{vp175HnJT?hIj34-sp6E{h^j@V`s76_0?y3CV9q+ss~Qx9i2!^SX`R^d zA7HPmF2Eg<^?DI=Y$4GTF!sT;Xcdqon%fEmtV1(%OTKDN%>_r-!O)O^A@@U-GxFcC zj5D;Bu;4h%u_*FX4$20U^t~J*qY_XhC_f*9=6Tl9@mUt0BgRZxoBRo1#s!d)c0i`!wuN3Ln5_=xkEl`zGm$fCumL==n%< zgC1esf;VcW6b70n9{%C_oNhy>z=vLI+_4mT;6mb&0f{AEG-Or+LNo@V~80?kVVM0C5(I{(> zplKu;_u<@pEGqe9Agdel!X5@q0qFRjau;}c@{?9|cKDY=tU|OAYi>=}O$#(^xoDZL zBd(?88`E-GNi+i-Z;n4~LE2G=x3NI+T zsErKKt|+1N@LlpQ^x14=rBFT#0w5(dt&!D^fykAy4cGEvp%3?Q=m6P50rsE*7gQ){ zaMg~HiWCkX9#UQO$oDlWww65>KRUkqWp5CgM-v?sKOFBr#l<}xmIfDp1U&W;=e1f3 zr*!=dkH;f-?oQ=AOB^2Maa@{ znGT&1F7mOR=di~w01;v_!s*iq?o1ySJZ>-Cu92u2kJ>YCF%IzsN0$6?;jnKudgt}_ z4H||)yAhIqzn|Hc!==o-=oFXY^#TVBw_`+vZx=y8AS<2vMoh`=BWw4-8H!TyJol*o zD=K^#zw%FGAlyYzhN69w_`vlzL@%Ov4=ite8vRjAI~|3x5MLup6J3MGxV!H#77-Pd z26df9h*7u)q&r)9LzZ22Uoyf_ Date: Thu, 23 Jul 2026 18:56:23 +0530 Subject: [PATCH 2/4] Fixed unit test case failing issue --- .../Docs/Sidebar/SidebarNavLink/SidebarNavLink.spec.tsx | 9 +++++---- .../Content/Views/Common/HeadersTab/HeadersTab.spec.tsx | 5 +++-- .../Content/Views/Common/ScriptsTab/ScriptsTab.spec.tsx | 4 ++-- 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/packages/oc-docs/src/components/Docs/Sidebar/SidebarNavLink/SidebarNavLink.spec.tsx b/packages/oc-docs/src/components/Docs/Sidebar/SidebarNavLink/SidebarNavLink.spec.tsx index c2e05b3a..1b4f0021 100644 --- a/packages/oc-docs/src/components/Docs/Sidebar/SidebarNavLink/SidebarNavLink.spec.tsx +++ b/packages/oc-docs/src/components/Docs/Sidebar/SidebarNavLink/SidebarNavLink.spec.tsx @@ -52,11 +52,12 @@ describe('SidebarNavLink', () => { expect(html).not.toContain('navlink-label mono'); }); - it('indents by level via margin (chevron + gap step of 19px) with a uniform 8px inner pad', () => { + it('indents by level via margin (one 19px chevron+gap step per level) with a uniform 8px inner pad', () => { const html = renderToStaticMarkup(); - // level*19 + 4 = 42px -> 42/16 = 2.625rem margin; the 8px (0.5rem) pad is uniform - // across folders and leaves so glyphs line up under their parent. - expect(html).toContain('margin-left:2.625rem'); + // Each level is one 19px chevron+gap step: level*19 = 38px -> 38/16 = 2.375rem margin. + // The 8px (0.5rem) pad is uniform across folders and leaves so glyphs line up + // under their parent. + expect(html).toContain('margin-left:2.375rem'); expect(html).toContain('padding-left:0.5rem'); }); }); diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/HeadersTab/HeadersTab.spec.tsx b/packages/oc-docs/src/components/Playground/Content/Views/Common/HeadersTab/HeadersTab.spec.tsx index 232580be..03464547 100644 --- a/packages/oc-docs/src/components/Playground/Content/Views/Common/HeadersTab/HeadersTab.spec.tsx +++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/HeadersTab/HeadersTab.spec.tsx @@ -24,11 +24,12 @@ describe('HeadersTab', () => { expect(values).toContain('text/html'); }); - it('renders the default title and a provided description', () => { + it('renders the provided description with no standalone title heading', () => { const root = useRenderToDom( ); - expect(query(root, '.title').text.trim()).toBe('Headers'); + // The tab shows only the description; there is no separate title heading. + expect(root.querySelector('.title')).toBeNull(); expect(query(root, '.description').text.trim()).toBe('Request headers sent with the call'); expect(root.querySelector('[data-testid="bulk-edit-toggle"]')).toBeTruthy(); }); diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/ScriptsTab/ScriptsTab.spec.tsx b/packages/oc-docs/src/components/Playground/Content/Views/Common/ScriptsTab/ScriptsTab.spec.tsx index 8e38a97e..b4d86885 100644 --- a/packages/oc-docs/src/components/Playground/Content/Views/Common/ScriptsTab/ScriptsTab.spec.tsx +++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/ScriptsTab/ScriptsTab.spec.tsx @@ -18,9 +18,9 @@ describe('ScriptsTab', () => { expect(query(root, '[data-testid="scripts-tabs-tab-post-response"]').text.trim()).toBe('Post response'); }); - it('renders the default title and the Tests section', () => { + it('renders the Tests section with no standalone title heading', () => { const root = useRenderToDom(); - expect(query(root, '.title').text.trim()).toBe('Scripts'); + expect(root.querySelector('.title')).toBeNull(); expect(query(root, '.label').text.trim()).toBe('Tests'); }); From bcd9805a880d9f7c1fd9d0126e3438f0c4809e53 Mon Sep 17 00:00:00 2001 From: Sachin Venugopalan Date: Thu, 23 Jul 2026 19:04:49 +0530 Subject: [PATCH 3/4] Style fix --- packages/oc-docs/src/ui/Tabs/StyledWrapper.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/oc-docs/src/ui/Tabs/StyledWrapper.ts b/packages/oc-docs/src/ui/Tabs/StyledWrapper.ts index 97642236..9638da36 100644 --- a/packages/oc-docs/src/ui/Tabs/StyledWrapper.ts +++ b/packages/oc-docs/src/ui/Tabs/StyledWrapper.ts @@ -64,11 +64,15 @@ export const StyledWrapper = styled.div` border-radius: 2px; } .tab-count { - margin-left: 0.1875rem; + display: inline-flex; + align-items: center; + vertical-align: baseline; + margin-left: 0.125rem; font-size: 0.625rem; + font-weight: 500; line-height: 1; letter-spacing: 0; - color: var(--text-secondary); + color: inherit; } .tab-status-dot { display: inline-flex; From a47a92f32dbfac3973ec25630885eec24d9482ea Mon Sep 17 00:00:00 2001 From: Sachin Venugopalan Date: Thu, 23 Jul 2026 21:07:03 +0530 Subject: [PATCH 4/4] Comments addressed --- .../oc-docs/src/ui/Tabs/useResponsiveTabs.ts | Bin 5354 -> 5354 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/packages/oc-docs/src/ui/Tabs/useResponsiveTabs.ts b/packages/oc-docs/src/ui/Tabs/useResponsiveTabs.ts index a5dcf5dd4941d8d6919e2dbed8f747489ba12218..6dc4a8765d3f7470b62671b32cee6fcc03f507b0 100644 GIT binary patch delta 14 VcmaE*`ATy`KR=_+<_Y{!tN<^)1ycY3 delta 14 VcmaE*`ATy`KR+YG<_Y{!tN<>x1t$Oi