Elgato_dark/console
1
0
Fork 0
mirror of https://github.com/graphql-hive/console synced 2026-05-23 09:08:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Fix cutoff tab text by providing a ReactNode (#6505)

Browse source
This commit is contained in:
Piotr Monwid-Olechnowicz 2025-02-12 17:55:23 +01:00 committed by GitHub
parent 1d43b246d1
commit c4fa4a187d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 15 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/web/docs/src/app/gateway/gateway-feature-tabs.tsx
View file

@ -61,6 +61,14 @@ export function GatewayFeatureTabs(props: { className?: string }) {
'border-blue-200 [--tab-bg-dark:theme(colors.blue.300)] [--tab-bg:theme(colors.blue.200)]',
props.className,
)}
tabTexts={{
'Observability & Performance Monitoring': (
<span>
Observability & Performance{' '}
<span className="[@media(width<420px)]:hidden">Monitoring</span>
</span>
),
}}
>
<FeatureTab
title="Observability & Performance Monitoring"

9
packages/web/docs/src/components/feature-tabs.tsx
View file

@ -1,6 +1,6 @@
'use client';
import { createContext, useContext, useState } from 'react';
import { createContext, ReactNode, useContext, useState } from 'react';
import Image, { StaticImageData } from 'next/image';
import NextLink from 'next/link';
import { ChevronDownIcon } from '@radix-ui/react-icons';
@ -20,6 +20,10 @@ export interface FeatureTabsProps<T extends string> {
highlights: Record<T, Highlight[]>;
icons: React.ReactNode[];
children: React.ReactNode;
/**
* On very narrow screens, we shorten the tab names.
*/
tabTexts?: Partial<Record<T, ReactNode>>;
}
export function FeatureTabs<T extends string>({
@ -27,6 +31,7 @@ export function FeatureTabs<T extends string>({
highlights,
icons,
children,
tabTexts = {},
}: FeatureTabsProps<T>) {
const tabs = Object.keys(highlights) as T[];
const [currentTab, setCurrentTab] = useState<T>(tabs[0]);
@ -64,7 +69,7 @@ export function FeatureTabs<T extends string>({
className='hive-focus rdx-state-active:text-green-1000 rdx-state-active:border-[--tab-bg-dark] rdx-state-active:bg-white max-sm:rdx-state-inactive:hidden group-focus-within:rdx-state-inactive:flex max-sm:rdx-state-inactive:rounded-none max-sm:group-focus-within:rdx-state-inactive:border-y-[--tab-bg] max-sm:group-focus-within:[&:nth-child(2)]:rdx-state-active:rounded-none max-sm:group-focus-within:[&:nth-child(2)]:rdx-state-active:border-y-[--tab-bg] max-sm:group-focus-within:first:rdx-state-active:border-b-[--tab-bg] max-sm:group-focus-within:first:rdx-state-active:rounded-b-none max-sm:rdx-state-inactive:pointer-events-none max-sm:rdx-state-inactive:group-focus-within:pointer-events-auto z-10 flex flex-1 items-center justify-center gap-2.5 rounded-lg border-transparent p-4 text-base font-medium leading-6 text-green-800 max-sm:border max-sm:border-[--tab-bg-dark] max-sm:bg-[--tab-bg] max-sm:group-focus-within:aria-selected:z-20 max-sm:group-focus-within:aria-selected:ring-4 sm:rounded-[15px] sm:border sm:text-xs sm:max-lg:p-3 sm:max-[721px]:p-2 md:text-sm lg:text-base max-sm:group-focus-within:[&:last-child]:border-t-[--tab-bg] max-sm:group-focus-within:[&:nth-child(3)]:rounded-t-none [&>svg]:shrink-0 max-sm:group-focus-within:[&[data-state="inactive"]:first-child]:rounded-t-lg max-sm:group-focus-within:[&[data-state="inactive"]:first-child]:border-t-[--tab-bg-dark] [&[data-state="inactive"]>:last-child]:invisible max-sm:group-focus-within:[[data-state="active"]+&:last-child]:rounded-b-lg max-sm:group-focus-within:[[data-state="active"]+&:last-child]:border-b-[--tab-bg-dark] max-sm:group-focus-within:[[data-state="inactive"]+&:last-child[data-state="inactive"]]:rounded-b-lg max-sm:group-focus-within:[[data-state="inactive"]+&:last-child[data-state="inactive"]]:border-b-[--tab-bg-dark]'
>
{icons[i]}
{tab}
{tabTexts[tab] || tab}
<ChevronDownIcon className="ml-auto size-6 text-green-800 transition group-focus-within:rotate-90 sm:hidden" />
</Tabs.Trigger>
);