refactor(playground): change grid tooltip label

contember · Mar 25, 2024 · a22bc0f · a22bc0f
1 parent 82ef462
commit a22bc0f
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 12 deletions.
diff --git a/packages/playground/admin/lib/components/datagrid/columns.tsx b/packages/playground/admin/lib/components/datagrid/columns.tsx
@@ -7,6 +7,7 @@ import { Field, HasMany, HasOne } from '@contember/react-binding'
 import { createHasManyFilter, DataViewFilterHandler } from '@contember/react-dataview'
 import { SugaredQualifiedEntityList } from '@contember/interface'
 import { Button } from '../ui/button'
+import { DataGridTooltipLabel } from './ui'
 
 export interface DataViewColumnCommonArgs {
 	field: string
@@ -66,12 +67,12 @@ export const createHasOneColumn = ({ field, label, tooltipActions, filterOptions
 		field,
 		filterName: field,
 		cell: (
-			<div className={'-mx-3'}>
+			<div>
 				<HasOne field={field}>
 					<DataGridRelationFieldTooltip filter={args.filterName ?? field} actions={tooltipActions}>
-						<Button variant={'ghost'} size={'sm'}>
+						<DataGridTooltipLabel>
 							{value}
-						</Button>
+						</DataGridTooltipLabel>
 					</DataGridRelationFieldTooltip>
 				</HasOne>
 			</div>
@@ -106,12 +107,12 @@ export const createHasManyColumn = ({ field, label, tooltipActions, filterOption
 		field,
 		filterName: field,
 		cell: (
-			<div className={'-mx-3'}>
+			<div className={'flex flex-wrap gap-2'}>
 				<HasMany field={field}>
 					<DataGridRelationFieldTooltip filter={args.filterName ?? field} actions={tooltipActions}>
-						<Button variant={'ghost'} size={'sm'}>
+						<DataGridTooltipLabel>
 							{value}
-						</Button>
+						</DataGridTooltipLabel>
 					</DataGridRelationFieldTooltip>
 				</HasMany>
 			</div>
@@ -211,10 +212,12 @@ export const createEnumColumn = ({ field, label, options, filterLabel, ...args }
 			<div className={'-mx-3'}>
 				<Field<string> field={field} format={it => it ? (
 					<DataGridEnumFieldTooltip value={it} filter={args.filterName ?? field}>
-						{options[it]}
+						<DataGridTooltipLabel>
+							{options[it]}
+						</DataGridTooltipLabel>
 					</DataGridEnumFieldTooltip>
-				) : null}
-				/>
+					) : null}
+					/>
 			</div>),
 		header: label,
 		hidingName: field,

diff --git a/packages/playground/admin/lib/components/datagrid/filters/enum.tsx b/packages/playground/admin/lib/components/datagrid/filters/enum.tsx
@@ -32,9 +32,7 @@ export const DataGridEnumFieldTooltip = ({ filter, children, actions, value }: {
 	<TooltipProvider>
 		<Tooltip>
 			<TooltipTrigger asChild>
-				<Button variant={'ghost'} size={'sm'}>
-					{children}
-				</Button>
+				{children}
 			</TooltipTrigger>
 			<TooltipContent variant={'blurred'}>
 				<div className={'flex gap-1'}>

diff --git a/packages/playground/admin/lib/components/datagrid/ui.tsx b/packages/playground/admin/lib/components/datagrid/ui.tsx
@@ -6,6 +6,10 @@ import { cn } from '../../utils/cn'
 import { dict } from '../../dict'
 import { uic } from '../../utils/uic'
 
+export const DataGridTooltipLabel = uic('span', {
+	baseClass: 'cursor-pointer border-dashed border-b border-b-gray-400 hover:border-gray-800',
+})
+
 /**
  * Button in a tooltip that triggers the filter action
  */