Merge pull request #142 from goodeats/139-tooltips

tooltips

app/components/layout/dialog/dialog-form.tsx

@@ -0,0 +1,15 @@
+import { createContainerComponent } from '../utils'
+
+const DialogContentGrid = createContainerComponent({
+	defaultTagName: 'div',
+	defaultClassName: 'grid gap-4 py-4',
+	displayName: 'DialogContentGrid',
+})
+
+const DialogFormsContainer = createContainerComponent({
+	defaultTagName: 'div',
+	defaultClassName: 'grid gap-2',
+	displayName: 'DialogFormsContainer',
+})
+
+export { DialogContentGrid, DialogFormsContainer }

app/components/layout/dialog/index.ts

@@ -0,0 +1 @@
+export * from './dialog-form'

app/components/layout/panel.tsx

@@ -64,6 +64,12 @@ const PanelRowValuesContainer = createContainerComponent({
 	displayName: 'PanelRowValuesContainer',
 })
 
+const PanelRowIconContainer = createContainerComponent({
+	defaultTagName: 'div',
+	defaultClassName: 'm-2 mr-0 flex h-8 w-8 items-center justify-center',
+	displayName: 'PanelRowIconContainer',
+})
+
 // similar to a <nav> for the panel,
 // but no page navigation is occurring so just div
 // flex shrink to let values take up remaining space
@@ -81,5 +87,6 @@ export {
 	PanelTitle,
 	PanelRowReorderContainer,
 	PanelRowValuesContainer,
+	PanelRowIconContainer,
 	PanelRowActionsContainer,
 }

app/components/shared/index.ts

@@ -4,7 +4,6 @@ export * from './dialog-form'
 export * from './footer'
 export * from './form'
 export * from './page-layout'
-export * from './panel'
 export * from './side-nav'
 export * from './side-nav-form'
 export * from './side-nav-forms-list'

app/components/templates/panel/dashboard-entity-panel.actions.delete.tsx

@@ -1,4 +1,5 @@
 import { memo, useCallback } from 'react'
+import { type IDesign } from '#app/models/design/design.server'
 import { ArtworkVersionDesignDelete } from '#app/routes/resources+/api.v1+/artwork-version.design.delete'
 import { LayerDesignDelete } from '#app/routes/resources+/api.v1+/layer.design.delete'
 import {
@@ -24,11 +25,16 @@ const ArtworkVersionDeleteChildEntityForm = memo(
 			case EntityType.DESIGN:
 				return (
 					<ArtworkVersionDesignDelete
-						designId={entity.id}
+						design={entity as IDesign}
 						versionId={parent.id}
 					/>
 				)
 			case EntityType.LAYER:
+				// artwork version layer delete not on panel actions
+				// could be too easy to click and create a cascade of actions
+				// delete is inside popover
+				// keeping this here so if it shows up somehow,
+				// it will stick out sorely and this decision will be remembered
 				return 'av l'
 			default:
 				console.log('unknown artwork version entity type', entityType)
@@ -43,7 +49,9 @@ const LayerDeleteChildEntityForm = memo(
 	({ entityType, entity, parent }: DeleteChildEntityFormProps) => {
 		switch (entityType) {
 			case EntityType.DESIGN:
-				return <LayerDesignDelete designId={entity.id} layerId={parent.id} />
+				return (
+					<LayerDesignDelete design={entity as IDesign} layerId={parent.id} />
+				)
 			default:
 				console.log('unknown layer entity type', entityType)
 				return null

app/components/templates/panel/dashboard-entity-panel.icons.tsx

@@ -1,3 +1,4 @@
+import { PanelRowIconContainer } from '#app/components/layout'
 import { Icon, type IconName } from '#app/components/ui/icon'
 
 export const PanelEntityIcon = ({
@@ -10,14 +11,14 @@ export const PanelEntityIcon = ({
 	text: string
 }) => {
 	return (
-		<div className="m-2 mr-0 flex h-8 w-8 items-center justify-center">
+		<PanelRowIconContainer>
 			{icon ? (
 				<Icon name={icon}>
 					<span className="sr-only">{text}</span>
 				</Icon>
 			) : symbol ? (
 				<span className="text-body-xs leading-none">{symbol}</span>
 			) : null}
-		</div>
+		</PanelRowIconContainer>
 	)
 }

app/components/templates/panel/dashboard-entity-panel.values.design.line.tsx

@@ -12,8 +12,11 @@ import {
 	type lineBasisTypeEnum,
 	lineFormatIcon,
 	type lineFormatTypeEnum,
+	lineFormatIconTooltip,
+	lineBasisIconTooltip,
 } from '#app/schema/line'
 import { SidebarPanelRowValuesContainer } from '..'
+import { TooltipForContent } from '../tooltip'
 import { PanelEntityIcon } from './dashboard-entity-panel.icons'
 import { PanelEntityPopover } from './dashboard-entity-panel.popover'
 
@@ -59,8 +62,13 @@ const EntityFormatIcon = memo(({ entity }: EntityProps) => {
 	const { line } = entity as IDesignWithLine
 	const { format } = line
 	const symbol = lineFormatIcon(format as lineFormatTypeEnum)
+	const tooltipText = lineFormatIconTooltip(format as lineFormatTypeEnum)
 
-	return <PanelEntityIcon symbol={symbol} text={`Line format: ${format}`} />
+	return (
+		<TooltipForContent tooltipText={tooltipText}>
+			<PanelEntityIcon symbol={symbol} text={`Line format: ${format}`} />
+		</TooltipForContent>
+	)
 })
 EntityFormatIcon.displayName = 'EntityFormatIcon'
 
@@ -70,8 +78,13 @@ const EntityBasisIcon = memo(({ entity }: EntityProps) => {
 
 	if (format === LineFormatTypeEnum.PIXEL) return null
 	const icon = lineBasisIcon(basis as lineBasisTypeEnum) as IconName
+	const tooltipText = lineBasisIconTooltip(basis as lineBasisTypeEnum)
 
-	return <PanelEntityIcon icon={icon} text={`Line basis: ${basis}`} />
+	return (
+		<TooltipForContent tooltipText={tooltipText}>
+			<PanelEntityIcon icon={icon} text={`Line basis: ${basis}`} />
+		</TooltipForContent>
+	)
 })
 EntityBasisIcon.displayName = 'EntityBasisIcon'
 

app/components/templates/panel/dashboard-entity-panel.values.design.rotate.tsx

@@ -6,6 +6,7 @@ import { DesignTypeRotateValue } from '#app/routes/resources+/api.v1+/design.typ
 import { type IEntity } from '#app/schema/entity'
 import { RotateBasisTypeEnum } from '#app/schema/rotate'
 import { SidebarPanelRowValuesContainer } from '..'
+import { TooltipForContent } from '../tooltip'
 import { PanelEntityIcon } from './dashboard-entity-panel.icons'
 import { PanelEntityPopover } from './dashboard-entity-panel.popover'
 
@@ -53,8 +54,13 @@ const EntityBasisIcon = memo(({ entity }: EntityProps) => {
 
 	if (basis !== RotateBasisTypeEnum.DEFINED) return null
 	const symbol = '°'
+	const tooltipText = 'Degrees'
 
-	return <PanelEntityIcon symbol={symbol} text={`Rotate basis: ${basis}`} />
+	return (
+		<TooltipForContent tooltipText={tooltipText}>
+			<PanelEntityIcon symbol={symbol} text={`Rotate basis: ${basis}`} />
+		</TooltipForContent>
+	)
 })
 EntityBasisIcon.displayName = 'EntityBasisIcon'
 

app/components/templates/panel/dashboard-entity-panel.values.design.size.tsx

@@ -12,8 +12,11 @@ import {
 	type sizeBasisTypeEnum,
 	sizeFormatIcon,
 	type sizeFormatTypeEnum,
+	sizeFormatIconTooltip,
+	sizeBasisIconTooltip,
 } from '#app/schema/size'
 import { SidebarPanelRowValuesContainer } from '..'
+import { TooltipForContent } from '../tooltip'
 import { PanelEntityIcon } from './dashboard-entity-panel.icons'
 import { PanelEntityPopover } from './dashboard-entity-panel.popover'
 
@@ -60,8 +63,13 @@ const EntityFormatIcon = memo(({ entity }: EntityProps) => {
 	const { format } = size
 
 	const symbol = sizeFormatIcon(format as sizeFormatTypeEnum)
+	const tooltipText = sizeFormatIconTooltip(format as sizeFormatTypeEnum)
 
-	return <PanelEntityIcon symbol={symbol} text={`Size format: ${format}`} />
+	return (
+		<TooltipForContent tooltipText={tooltipText}>
+			<PanelEntityIcon symbol={symbol} text={`Size format: ${format}`} />
+		</TooltipForContent>
+	)
 })
 EntityFormatIcon.displayName = 'EntityFormatIcon'
 
@@ -71,8 +79,13 @@ const EntityBasisIcon = memo(({ entity }: EntityProps) => {
 
 	if (format === SizeFormatTypeEnum.PIXEL) return undefined
 	const icon = sizeBasisIcon(basis as sizeBasisTypeEnum) as IconName
+	const tooltipText = sizeBasisIconTooltip(basis as sizeBasisTypeEnum)
 
-	return <PanelEntityIcon icon={icon} text={`Line basis: ${basis}`} />
+	return (
+		<TooltipForContent tooltipText={tooltipText}>
+			<PanelEntityIcon icon={icon} text={`Line basis: ${basis}`} />
+		</TooltipForContent>
+	)
 })
 EntityBasisIcon.displayName = 'EntityBasisIcon'
 

app/components/templates/tooltip/index.ts

@@ -0,0 +1,2 @@
+export * from './tooltip-for-content'
+export * from './tooltip-hydrated'

app/components/templates/tooltip/tooltip-for-content.tsx

@@ -0,0 +1,27 @@
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from '#app/components/ui/tooltip'
+
+// use only for content that is not interactive
+// like a button or link
+// for buttons or links, use TooltipHydrated
+
+export const TooltipForContent = ({
+	tooltipText,
+	children,
+}: {
+	tooltipText: string
+	children: JSX.Element
+}) => {
+	return (
+		<TooltipProvider>
+			<Tooltip>
+				<TooltipTrigger>{children}</TooltipTrigger>
+				<TooltipContent>{tooltipText}</TooltipContent>
+			</Tooltip>
+		</TooltipProvider>
+	)
+}

app/components/templates/tooltip/tooltip-hydrated.tsx

@@ -0,0 +1,31 @@
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from '#app/components/ui/tooltip'
+
+// tooltip button, for example, needs to wait for hydration to avoid SSR issues
+// before hydration, render the button without the tooltip
+// after hydration, render the button with the tooltip
+
+export const TooltipHydrated = ({
+	tooltipText,
+	isHydrated,
+	children,
+}: {
+	tooltipText: string
+	isHydrated: boolean
+	children: JSX.Element
+}) => {
+	if (!isHydrated) return children
+
+	return (
+		<TooltipProvider>
+			<Tooltip>
+				<TooltipTrigger asChild>{children}</TooltipTrigger>
+				<TooltipContent>{tooltipText}</TooltipContent>
+			</Tooltip>
+		</TooltipProvider>
+	)
+}