Skip to content

Commit 4572c28

Browse files
ankormoreankorankormoreankor
committed
fix active tab lightning
1 parent b776a24 commit 4572c28

File tree

10 files changed

+22
-26
lines changed

10 files changed

+22
-26
lines changed

‎packages/pipeline-graph/src/pipeline-graph-internal.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export function PipelineGraphInternal(props: PipelineGraphInternalProps) {
6666

6767
// draw lines
6868
if (svgGroupRef.current) {
69-
let allPaths: string[] = []
69+
const allPaths: string[] = []
7070
connections.map(portPair => {
7171
const path = getPortsConnectionPath(rootContainerEl, portPair, config.edgeClassName)
7272
allPaths.push(path)
@@ -181,5 +181,3 @@ export function PipelineGraphInternal(props: PipelineGraphInternalProps) {
181181
</div>
182182
)
183183
}
184-
185-
export default PipelineGraphInternal

‎packages/pipeline-graph/src/pipeline-graph.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Canvas } from './components/canvas/canvas'
22
import GraphProvider from './context/graph-provider'
3-
import PipelineGraphInternal, { PipelineGraphInternalProps } from './pipeline-graph-internal'
3+
import { PipelineGraphInternal, PipelineGraphInternalProps } from './pipeline-graph-internal'
44
import { NodeContent } from './types/node-content'
55

66
import './pipeline-graph.css'

‎packages/ui/src/components/repo-subheader.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const RepoSubheader = ({
3939
}, [location.pathname])
4040

4141
return (
42-
<SandboxLayout.SubHeader className="top-14.5 h-11">
42+
<SandboxLayout.SubHeader className="top-14.5 h-11 overflow-hidden">
4343
<Tabs variant="navigation" value={activeTab}>
4444
<TabsList>
4545
<TabsTrigger role="link" value="summary" onClick={makeHandleTabChange(RepoTabsKeys.SUMMARY)}>

‎packages/ui/src/components/tabs.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const tabsTriggerVariants = cva(
3333
underline:
3434
'm-0 h-11 border-b-2 border-solid border-b-transparent px-0 font-normal data-[state=active]:border-primary',
3535
navigation:
36-
'm-0 -mb-px h-[44px] border-b border-solid border-b-transparent px-0 font-normal text-foreground-2 duration-150 ease-in-out hover:text-foreground-1 data-[state=active]:border-borders-9',
36+
'm-0 my-1 h-9 px-0 font-normal text-foreground-2 duration-150 ease-in-out after:absolute after:inset-[-0.25rem_0] after:block after:border-b after:border-solid after:border-b-transparent hover:text-foreground-1 data-[state=active]:after:border-borders-9',
3737
tabnav:
3838
'h-[36px] rounded-t-md border-x border-t border-transparent px-3.5 font-normal text-foreground-2 hover:text-foreground-1 data-[state=active]:border-borders-1 data-[state=active]:bg-background-1 data-[state=active]:text-foreground-1'
3939
}
@@ -116,7 +116,7 @@ const TabsTrigger = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Trigg
116116
{...props}
117117
>
118118
{context.variant === 'navigation' && (
119-
<span className="bg-tab-gradient-radial absolute left-1/2 top-1/2 -z-10 hidden h-[calc(100%+40px)] w-[calc(100%+60px)] -translate-x-1/2 -translate-y-1/2 group-data-[state=active]:block" />
119+
<span className="bg-tab-gradient-radial absolute left-1/2 top-1/2 -z-10 hidden h-[calc(100%+3rem)] w-[calc(100%+4.25rem)] -translate-x-1/2 -translate-y-1/2 group-data-[state=active]:block" />
120120
)}
121121
{children}
122122
</TabsPrimitive.Trigger>

‎packages/ui/src/views/layouts/PullRequestLayout.tsx

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,21 @@
11
import { useCallback } from 'react'
22
import { Outlet, useLocation, useNavigate } from 'react-router-dom'
33

4-
import { Badge, Icon, Spacer, Tabs, TabsList, TabsTrigger } from '@components/index'
4+
import { Badge, Icon, IconProps, Spacer, Tabs, TabsList, TabsTrigger } from '@components/index'
55
import { TabsTriggerProps } from '@radix-ui/react-tabs'
66
import { TranslationStore } from '@views/repo'
77
import { PullRequestHeader } from '@views/repo/pull-request/components/pull-request-header'
88
import { IPullRequestStore } from '@views/repo/pull-request/pull-request.types'
99

1010
import { SandboxLayout } from '..'
1111

12+
const TabTitleWithIcon = ({ icon, title }: { icon: IconProps['name']; title: string }) => (
13+
<div className="flex items-center gap-x-1">
14+
<Icon size={14} name={icon} />
15+
{title}
16+
</div>
17+
)
18+
1219
interface PullRequestLayoutProps {
1320
usePullRequestStore: () => IPullRequestStore
1421
spaceId?: string
@@ -78,25 +85,16 @@ const PullRequestLayout: React.FC<PullRequestLayoutProps> = ({
7885
<Tabs variant="tabnav">
7986
<TabsList className="left-1/2 w-[calc(100%+48px)] -translate-x-1/2 px-6">
8087
<TabsTrigger {...getTabProps(PullRequestTabsKeys.CONVERSATION)}>
81-
<div className="flex items-center gap-x-1">
82-
<Icon size={14} name="comments" />
83-
{t('views:pullRequests.conversation')}
84-
</div>
88+
<TabTitleWithIcon icon="comments" title={t('views:pullRequests.conversation', 'Conversation')} />
8589
</TabsTrigger>
8690
<TabsTrigger {...getTabProps(PullRequestTabsKeys.COMMITS)}>
87-
<div className="flex items-center gap-x-1">
88-
<Icon size={14} name="tube-sign" />
89-
{t('views:repos.commits')}
90-
</div>
91+
<TabTitleWithIcon icon="tube-sign" title={t('views:pullRequests.commits', 'Commits')} />
9192
<Badge variant="outline" size="xs" borderRadius="base">
9293
{pullRequest?.stats?.commits}
9394
</Badge>
9495
</TabsTrigger>
9596
<TabsTrigger {...getTabProps(PullRequestTabsKeys.CHANGES)}>
96-
<div className="flex items-center gap-x-1">
97-
<Icon size={14} name="changes" />
98-
{t('views:pullRequests.changes')}
99-
</div>
97+
<TabTitleWithIcon icon="changes" title={t('views:pullRequests.changes', 'Changes')} />
10098
<Badge variant="outline" size="xs" borderRadius="base">
10199
{pullRequest?.stats?.files_changed}
102100
</Badge>

‎packages/ui/src/views/profile-settings/profile-settings-tab-nav.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ function ProfileSettingsTabNav({
1818

1919
return (
2020
<>
21-
<SandboxLayout.SubHeader className="h-11">
21+
<SandboxLayout.SubHeader className="h-11 overflow-hidden">
2222
<Tabs variant="navigation" value={activeTab}>
2323
<TabsList fontSize="xs">
2424
<TabsTrigger role="link" value="general" onClick={makeHandleTabChange('general')}>

‎packages/ui/src/views/project/project-settings-tab-nav.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const ProjectSettingsTabNav: FC<ProjectSettingsTabNavProps> = ({ useTranslationS
1818

1919
return (
2020
<>
21-
<SandboxLayout.SubHeader className="h-11">
21+
<SandboxLayout.SubHeader className="h-11 overflow-hidden">
2222
<Tabs variant="navigation" value={activeTab}>
2323
<TabsList fontSize="xs">
2424
<TabsTrigger role="link" value="general" onClick={makeHandleTabChange('general')}>

‎packages/ui/src/views/repo/repo-layout/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export const RepoLayout = ({ useTranslationStore }: { useTranslationStore: () =>
3535

3636
return (
3737
<>
38-
<SandboxLayout.SubHeader className="h-11 ">
38+
<SandboxLayout.SubHeader className="h-11 overflow-hidden">
3939
<Tabs variant="navigation" value={activeTab}>
4040
<TabsList>
4141
<TabsTrigger role="link" value="summary" onClick={makeHandleTabChange(RepoTabsKeys.SUMMARY)}>

‎packages/ui/src/views/tailwind-values-exporter.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export const TailwindValuesExporter = () => <div className="top-14.5 h-14.5 sr-only" />
1+
export const TailwindValuesExporter = () => <div className="sr-only top-14.5 h-14.5 pt-14.5" />

‎packages/views/src/layouts/SandboxLayout.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ function Header({ children, className }: { children: React.ReactNode; className?
6767
function SubHeader({ children, className }: { children: React.ReactNode; className?: string }) {
6868
return (
6969
<header
70-
className={cn('bg-background fixed left-[220px] right-0 top-3.625rem z-40 h-[2.75rem]', className)}
70+
className={cn('bg-background fixed left-[220px] right-0 top-14.5 z-40 h-[2.75rem]', className)}
7171
role="banner"
7272
>
7373
{children}
@@ -93,7 +93,7 @@ function Main({
9393
hasLeftSubPanel?: boolean
9494
}) {
9595
const paddingTopClass =
96-
hasHeader && hasSubHeader ? `pt-[calc(55px+45px)]` : hasHeader ? 'pt-[55px]' : hasSubHeader ? 'pt-[2.75rem]' : ''
96+
hasHeader && hasSubHeader ? `pt-[calc(14.5rem+45px)]` : hasHeader ? 'pt-14.5' : hasSubHeader ? 'pt-[2.75rem]' : ''
9797

9898
const paddingLeftClass =
9999
hasLeftPanel && hasLeftSubPanel

0 commit comments

Comments
 (0)