Skip to content

Commit 9568c95

Browse files
ankormoreankorankormoreankor
authored
fix link wrapping in table (#2111)
* fix link wrapping in table * fixes * fixes * fix time ago trigger focus * fixes
1 parent b67e575 commit 9568c95

File tree

9 files changed

+50
-47
lines changed

9 files changed

+50
-47
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { Link, LinkProps } from './link'
1111
const PopoverRoot = PopoverPrimitive.Root
1212

1313
const PopoverTrigger = PopoverPrimitive.Trigger
14+
type PopoverTriggerProps = PopoverPrimitive.PopoverTriggerProps
1415

1516
const PopoverAnchor = PopoverPrimitive.Anchor
1617

@@ -95,4 +96,4 @@ const Popover = Object.assign(PopoverComponent, {
9596
Anchor: PopoverAnchor
9697
})
9798

98-
export { Popover }
99+
export { Popover, PopoverTriggerProps }

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

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ TableRoot.displayName = 'TableRoot'
5656

5757
const TableHeader = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(
5858
({ className, ...props }, ref) => (
59-
<thead ref={ref} className={cn('cn-table-v2-header pointer-events-none select-none', className)} {...props} />
59+
<thead ref={ref} className={cn('cn-table-v2-header select-none', className)} {...props} />
6060
)
6161
)
6262
TableHeader.displayName = 'TableHeader'
@@ -230,15 +230,10 @@ const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
230230

231231
if (shouldRenderLink) {
232232
return (
233-
<td ref={ref} className={cn('cn-table-v2-cell !p-0', className)} {...props}>
234-
<Link
235-
to={to || ''}
236-
variant="secondary"
237-
{...(linkProps || {})}
238-
className={cn('cn-table-v2-cell-link', linkProps?.className)}
239-
>
240-
{children}
241-
</Link>
233+
<td ref={ref} className={cn('cn-table-v2-cell', className)} {...props}>
234+
<Link to={to || ''} {...(linkProps || {})} className={cn('cn-table-v2-cell-link', linkProps?.className)} />
235+
236+
{children}
242237
</td>
243238
)
244239
}

‎packages/ui/src/components/time-ago-card.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { FC, forwardRef, Fragment, memo, MouseEvent, Ref, useCallback, useState } from 'react'
22

3-
import { Popover, StatusBadge, Text, TextProps } from '@/components'
3+
import { Popover, PopoverTriggerProps, StatusBadge, Text, TextProps } from '@/components'
44
import { cn } from '@utils/cn'
55
import { LOCALE } from '@utils/TimeUtils'
66
import { formatDistanceToNow } from 'date-fns'
@@ -143,6 +143,7 @@ interface TimeAgoCardProps {
143143
}
144144
triggerClassName?: string
145145
contentClassName?: string
146+
triggerProps?: Omit<PopoverTriggerProps, 'className'>
146147
}
147148

148149
export const TimeAgoCard = memo(
@@ -156,7 +157,8 @@ export const TimeAgoCard = memo(
156157
afterCutoffPrefix,
157158
textProps,
158159
triggerClassName,
159-
contentClassName
160+
contentClassName,
161+
triggerProps
160162
},
161163
ref
162164
) => {
@@ -193,7 +195,7 @@ export const TimeAgoCard = memo(
193195
return (
194196
<Popover.Root open={isOpen} onOpenChange={setIsOpen}>
195197
<Popover.Trigger
196-
tabIndex={-1}
198+
{...triggerProps}
197199
className={cn('cn-time-ago-card-trigger', triggerClassName)}
198200
ref={ref}
199201
onMouseEnter={handleMouseEnter}

‎packages/ui/src/views/connectors/connectors-list/connectors-list.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -146,13 +146,13 @@ export function ConnectorsList({
146146
<Table.Cell className="content-center">
147147
{lastModifiedAt ? <TimeAgoCard timestamp={lastModifiedAt} /> : null}
148148
</Table.Cell>
149-
<Table.Cell className="content-center !p-1.5" disableLink>
149+
<Table.Cell className="content-center !p-1.5">
150150
<Favorite
151151
isFavorite={isFavorite}
152152
onFavoriteToggle={(favorite: boolean) => onToggleFavoriteConnector(identifier, !favorite)}
153153
/>
154154
</Table.Cell>
155-
<Table.Cell className="content-center !p-0" disableLink>
155+
<Table.Cell className="content-center !p-0">
156156
<MoreActionsTooltip
157157
actions={[
158158
{

‎packages/ui/src/views/repo/components/summary/summary.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -176,18 +176,19 @@ export const Summary = ({
176176
{file.lastCommitMessage ? (
177177
<Text className="line-clamp-1">{file.lastCommitMessage}</Text>
178178
) : (
179-
<Skeleton.Box className="w-full h-5" />
179+
<Skeleton.Box className="h-5 w-full" />
180180
)}
181181
</Table.Cell>
182-
<Table.Cell className="text-right" disableLink>
182+
<Table.Cell className="text-right">
183183
{file.timestamp ? (
184184
<TimeAgoCard
185185
timestamp={file.timestamp}
186186
dateTimeFormatOptions={{ dateStyle: 'medium' }}
187187
textProps={{ color: 'foreground-3', wrap: 'nowrap', align: 'right' }}
188+
triggerProps={{ tabIndex: -1 }}
188189
/>
189190
) : (
190-
<Skeleton.Box className="w-full h-5" />
191+
<Skeleton.Box className="h-5 w-full" />
191192
)}
192193
</Table.Cell>
193194
</Table.Row>

‎packages/ui/src/views/repo/repo-branch/components/branch-list.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export const BranchesList: FC<BranchListPageProps> = ({
6868
<Table.Head className="w-[15%] whitespace-nowrap">
6969
<Text variant="caption-strong">{t('views:repos.pullRequest', 'Pull Request')}</Text>
7070
</Table.Head>
71-
<Table.Head className="w-[7%]" />
71+
<Table.Head className="w-[68px]" />
7272
</Table.Row>
7373
</Table.Header>
7474

@@ -100,7 +100,7 @@ export const BranchesList: FC<BranchListPageProps> = ({
100100
/>
101101
</Table.Cell>
102102

103-
<Table.Cell disableLink>
103+
<Table.Cell>
104104
<Layout.Flex align="center" gapX="xs">
105105
<AvatarWithTooltip name={branch?.user?.name} src={branch?.user?.avatarUrl} size="xs" rounded />
106106
<TimeAgoCard
@@ -138,13 +138,15 @@ export const BranchesList: FC<BranchListPageProps> = ({
138138
{/* calculated divergence bar & default branch */}
139139
<Table.Cell>
140140
{branch?.behindAhead?.default ? (
141-
<Tag className="m-auto" value={t('views:repos.default', 'Default')} rounded />
141+
<Layout.Flex>
142+
<Tag className="m-auto" value={t('views:repos.default', 'Default')} rounded />
143+
</Layout.Flex>
142144
) : (
143145
<DivergenceGauge className="m-auto" behindAhead={branch?.behindAhead || {}} />
144146
)}
145147
</Table.Cell>
146148

147-
<Table.Cell disableLink>
149+
<Table.Cell>
148150
{branch.pullRequests && branch.pullRequests.length > 0 && branch.pullRequests[0].number && (
149151
<Link
150152
noHoverUnderline
@@ -180,7 +182,7 @@ export const BranchesList: FC<BranchListPageProps> = ({
180182
</Link>
181183
)}
182184
</Table.Cell>
183-
<Table.Cell className="text-right" disableLink>
185+
<Table.Cell className="text-right">
184186
<MoreActionsTooltip
185187
iconName="more-horizontal"
186188
actions={[

‎packages/ui/src/views/repo/repo-tags/components/repo-tags-list.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -120,11 +120,11 @@ export const RepoTagsList: FC<RepoTagsListProps> = ({
120120
<Table.Header>
121121
<Table.Row>
122122
<Table.Head className="w-[15%]">{t('views:repos.tag', 'Tag')}</Table.Head>
123-
<Table.Head className="w-[33%]">{t('views:repos.description', 'Description')}</Table.Head>
124-
<Table.Head className="w-[15%]">{t('views:repos.commit', 'Commit')}</Table.Head>
123+
<Table.Head className="w-[30%]">{t('views:repos.description', 'Description')}</Table.Head>
124+
<Table.Head className="w-48">{t('views:repos.commit', 'Commit')}</Table.Head>
125125
<Table.Head className="w-[15%]">{t('views:repos.tagger', 'Tagger')}</Table.Head>
126126
<Table.Head className="w-[15%]">{t('views:repos.creationDate', 'Creation date')}</Table.Head>
127-
<Table.Head className="w-[7%]" />
127+
<Table.Head className="w-[68px]" />
128128
</Table.Row>
129129
</Table.Header>
130130

@@ -139,10 +139,10 @@ export const RepoTagsList: FC<RepoTagsListProps> = ({
139139
{tag?.message}
140140
</Text>
141141
</Table.Cell>
142-
<Table.Cell disableLink>
142+
<Table.Cell>
143143
<CommitCopyActions sha={tag.commit?.sha ?? ''} toCommitDetails={toCommitDetails} />
144144
</Table.Cell>
145-
<Table.Cell disableLink>
145+
<Table.Cell>
146146
<Layout.Horizontal gap="xs">
147147
{tag.tagger?.identity.name ? (
148148
<>
@@ -164,7 +164,7 @@ export const RepoTagsList: FC<RepoTagsListProps> = ({
164164
/>
165165
) : null}
166166
</Table.Cell>
167-
<Table.Cell className="text-right" disableLink>
167+
<Table.Cell className="text-right">
168168
<MoreActionsTooltip
169169
actions={getTableActions(tag).map(action => ({
170170
...action,

‎packages/ui/src/views/repo/webhooks/webhook-list/components/repo-webhook-list.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export function RepoWebhookList({
3838
const webhooksUrl = toRepoWebhookDetails ? toRepoWebhookDetails({ webhookId: webhook.id }) : `${webhook.id}`
3939
return (
4040
<Table.Row to={webhooksUrl} key={webhook.id}>
41-
<Table.Cell className="!pr-0" disableLink>
41+
<Table.Cell className="!pr-0">
4242
<Switch checked={webhook.enabled} onClick={() => handleEnableWebhook(webhook.id, !webhook.enabled)} />
4343
</Table.Cell>
4444

‎packages/ui/tailwind-utils-config/components/table-v2.ts

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,11 @@ export default {
7373
'@apply border-b border-cn-3 transition-colors overflow-hidden': '',
7474
'@apply last:border-b-0': '',
7575

76+
'&:has(.cn-table-v2-cell-link:focus-visible)': {
77+
outline: 'var(--cn-focus)',
78+
outlineOffset: 'calc(2px*-1)'
79+
},
80+
7681
'&:where(.row-link-no-underline)': {
7782
'@apply [&_.cn-table-v2-cell-link]:no-underline': ''
7883
},
@@ -116,32 +121,29 @@ export default {
116121

117122
// Data cell
118123
'&-cell': {
124+
position: 'relative',
119125
'@apply align-middle': '',
120126
'@apply [&:has([role=checkbox])]:py-0 [&:has([role=checkbox])]:!pr-0 [&>[role=checkbox]]:translate-y-[2px]': '',
121127
'@apply [&:has([role=button])]:py-0 [&:has([role=button])]:!pr-0': '',
122128
paddingLeft: 'var(--cn-table-cell-px)',
123129
paddingRight: 'var(--cn-table-cell-px)',
124-
gap: 'var(--cn-table-cell-gap)'
130+
gap: 'var(--cn-table-cell-gap)',
131+
132+
'a, button': {
133+
position: 'relative',
134+
zIndex: '1'
135+
}
125136
},
126137

127138
// Cell link
128139
'&-cell-link': {
129-
'@apply block w-full h-full flex items-center no-underline inset-0 text-cn-foreground-2': '',
130-
paddingLeft: 'var(--cn-table-cell-px)',
131-
paddingRight: 'var(--cn-table-cell-px)'
132-
},
140+
position: 'absolute !important',
141+
inset: '0',
142+
zIndex: '0 !important',
133143

134-
'&:where(.cn-table-v2-normal) .cn-table-v2-cell-link': {
135-
paddingTop: 'var(--cn-table-cell-py-normal)',
136-
paddingBottom: 'var(--cn-table-cell-py-normal)'
137-
},
138-
'&:where(.cn-table-v2-relaxed) .cn-table-v2-cell-link': {
139-
paddingTop: 'var(--cn-table-cell-py-relaxed)',
140-
paddingBottom: 'var(--cn-table-cell-py-relaxed)'
141-
},
142-
'&:where(.cn-table-v2-compact) .cn-table-v2-cell-link': {
143-
paddingTop: 'var(--cn-table-cell-py-compact)',
144-
paddingBottom: 'var(--cn-table-cell-py-compact)'
144+
'&:focus-within': {
145+
outline: 'none'
146+
}
145147
},
146148

147149
// Caption

0 commit comments

Comments
 (0)