davidl/tolaria
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: left-align property values in inspector

Browse Source
This commit is contained in:
lucaronin
2026-04-12 02:03:54 +02:00
parent 2441518cee
commit 867e97b199
8 changed files with 58 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/ColorInput.test.tsx
View File

@@ -48,6 +48,11 @@ describe('ColorSwatch', () => {
})
describe('ColorEditableValue', () => {
it('left-aligns the text display in view mode', () => {
render(<ColorEditableValue value="#3b82f6" isEditing={false} onStartEdit={vi.fn()} onSave={vi.fn()} onCancel={vi.fn()} />)
expect(screen.getByText('#3b82f6')).toHaveClass('text-left')
})
it('shows swatch when value is a valid hex color', () => {
render(<ColorEditableValue value="#3b82f6" isEditing={false} onStartEdit={vi.fn()} onSave={vi.fn()} onCancel={vi.fn()} />)
expect(screen.getByTestId('color-swatch')).toBeTruthy()

2
src/components/ColorInput.tsx
View File

@@ -102,7 +102,7 @@ export function ColorEditableValue({ value, isEditing, onStartEdit, onSave, onCa
<span className="inline-flex h-6 min-w-0 items-center gap-1.5">
{showSwatch && <ColorSwatch color={value} onChange={handlePickerChange} />}
<span
className="min-w-0 cursor-pointer truncate rounded px-1 text-right text-[12px] text-secondary-foreground transition-colors hover:bg-muted"
className="min-w-0 cursor-pointer truncate rounded px-1 text-left text-[12px] text-secondary-foreground transition-colors hover:bg-muted"
onClick={onStartEdit}
title={value || 'Click to edit'}
>

24
src/components/DynamicPropertiesPanel.test.tsx
View File

@@ -129,6 +129,30 @@ describe('DynamicPropertiesPanel', () => {
expect(screen.getByText('Luca')).toBeInTheDocument()
})
it('left-aligns mixed property value displays', () => {
render(
<DynamicPropertiesPanel
entry={makeEntry()}
content=""
frontmatter={{
Owner: 'Luca',
History_confidence: 0.84,
Date: '2026-04-11',
icon: 'rocket',
color: '#3b82f6',
Window_end: null,
}}
/>,
)
expect(screen.getByText('Luca').parentElement).toHaveClass('justify-start', 'text-left')
expect(screen.getByText('0.84').parentElement).toHaveClass('justify-start', 'text-left')
expect(screen.getByTestId('date-display')).toHaveClass('text-left')
expect(screen.getByTestId('icon-editable-display')).toHaveClass('text-left')
expect(screen.getByText('#3b82f6')).toHaveClass('text-left')
expect(screen.getByText('\u2014').parentElement).toHaveClass('justify-start', 'text-left')
})
it('hides Owner with wikilink value from Properties panel', () => {
render(
<DynamicPropertiesPanel

10
src/components/EditableValue.test.tsx
View File

@@ -42,6 +42,11 @@ describe('EditableValue', () => {
expect(value).toHaveClass('truncate')
})
it('left-aligns plain text values in view mode', () => {
render(<EditableValue value="Active" onSave={onSave} onCancel={onCancel} isEditing={false} onStartEdit={onStartEdit} />)
expect(screen.getByText('Active').parentElement).toHaveClass('justify-start', 'text-left')
})
it('shows input in editing mode', () => {
render(<EditableValue value="Active" onSave={onSave} onCancel={onCancel} isEditing={true} onStartEdit={onStartEdit} />)
const input = screen.getByDisplayValue('Active')
@@ -238,6 +243,11 @@ describe('UrlValue', () => {
expect(screen.getByTestId('url-link')).toHaveTextContent('https://example.com')
})
it('left-aligns URL values in view mode', () => {
render(<UrlValue value="https://example.com" onSave={onSave} onCancel={onCancel} isEditing={false} onStartEdit={onStartEdit} />)
expect(screen.getByTestId('url-link')).toHaveClass('justify-start', 'text-left')
})
it('opens URL via openExternalUrl on click', () => {
render(<UrlValue value="https://example.com" onSave={onSave} onCancel={onCancel} isEditing={false} onStartEdit={onStartEdit} />)
fireEvent.click(screen.getByTestId('url-link'))

4
src/components/EditableValue.tsx
View File

@@ -66,7 +66,7 @@ export function UrlValue({
return (
<span className="group/url flex w-full min-w-0 items-center gap-1">
<span
className="inline-flex h-6 min-w-0 flex-1 cursor-pointer items-center justify-end overflow-hidden rounded-md px-2 text-right text-[12px] text-[var(--accent-blue)] underline decoration-[var(--accent-blue)]/40 transition-colors hover:decoration-[var(--accent-blue)]"
className="inline-flex h-6 min-w-0 flex-1 cursor-pointer items-center justify-start overflow-hidden rounded-md px-2 text-left text-[12px] text-[var(--accent-blue)] underline decoration-[var(--accent-blue)]/40 transition-colors hover:decoration-[var(--accent-blue)]"
onClick={handleOpen}
title={value}
data-testid="url-link"
@@ -125,7 +125,7 @@ export function EditableValue({
return (
<span
className="inline-flex h-6 w-full min-w-0 cursor-pointer items-center justify-end overflow-hidden rounded-md px-2 text-right text-[12px] text-secondary-foreground transition-colors hover:bg-muted"
className="inline-flex h-6 w-full min-w-0 cursor-pointer items-center justify-start overflow-hidden rounded-md px-2 text-left text-[12px] text-secondary-foreground transition-colors hover:bg-muted"
onClick={onStartEdit}
title={value || 'Click to edit'}
>

14
src/components/IconEditableValue.test.tsx
View File

@@ -22,6 +22,20 @@ function renderIconValue(overrides: Partial<React.ComponentProps<typeof IconEdit
}
describe('IconEditableValue', () => {
it('left-aligns the icon display in view mode', () => {
render(
<IconEditableValue
value="rocket"
onSave={vi.fn()}
onCancel={vi.fn()}
isEditing={false}
onStartEdit={vi.fn()}
/>,
)
expect(screen.getByTestId('icon-editable-display')).toHaveClass('text-left')
})
it('shows searchable icon results with previews while editing', () => {
renderIconValue()

2
src/components/IconEditableValue.tsx
View File

@@ -170,7 +170,7 @@ export function IconEditableValue({
return (
<span
className="inline-flex h-6 min-w-0 max-w-full cursor-pointer items-center truncate rounded-md px-2 text-right text-[12px] text-secondary-foreground transition-colors hover:bg-muted"
className="inline-flex h-6 min-w-0 max-w-full cursor-pointer items-center truncate rounded-md px-2 text-left text-[12px] text-secondary-foreground transition-colors hover:bg-muted"
onClick={onStartEdit}
title={value || 'Click to edit'}
data-testid="icon-editable-display"

2
src/components/PropertyValueCells.tsx
View File

@@ -174,7 +174,7 @@ function DateValue({ value, onSave, autoOpen = false, onCancel }: {
>
<PopoverTrigger asChild>
<button
className={`inline-flex h-6 min-w-0 cursor-pointer items-center gap-1 border-none px-2 text-right text-[12px] font-medium transition-colors hover:opacity-80${formatted ? ' rounded-md bg-muted text-accent-foreground' : ' bg-transparent text-muted-foreground'}`}
className={`inline-flex h-6 min-w-0 cursor-pointer items-center gap-1 border-none px-2 text-left text-[12px] font-medium transition-colors hover:opacity-80${formatted ? ' rounded-md bg-muted text-accent-foreground' : ' bg-transparent text-muted-foreground'}`}
title={value}
data-testid="date-display"
>