+
{showCreateOption && (
)}
{filteredSuggestions.map((suggestion, index) => {
@@ -304,11 +302,9 @@ export function EditableTags({
key={suggestion}
type="button"
onClick={() => addTag(suggestion)}
- className={cn(
- 'w-full text-left px-space-md py-space-sm cursor-pointer rounded-radius-sm text-size-sm',
- optionIndex === focusedIndex
- ? 'bg-background-secondary'
- : 'hover:bg-background-transparent-neutral-muted'
+ {...stylex.props(
+ styles.suggestion,
+ optionIndex === focusedIndex ? styles.highlighted : styles.hovered
)}
>
{suggestion}
@@ -317,8 +313,8 @@ export function EditableTags({
})}
) : inputValue.trim() ? (
-
-
+
+
No tags match that query.
{!allowTagCreation && (
@@ -333,12 +329,99 @@ export function EditableTags({
{isEditing && (
-
+
)}
);
}
+
+const spin = stylex.keyframes({to: {transform: 'rotate(360deg)'}});
+const styles = stylex.create({
+ spinningIcon: {
+ animationName: spin,
+ animationDuration: '1s',
+ animationTimingFunction: 'linear',
+ animationIterationCount: 'infinite',
+ },
+ labelRow: {
+ marginBottom: space.md,
+ gap: space.xs,
+ display: 'flex',
+ alignItems: 'center',
+ },
+ label: {fontSize: fontSize.md, color: content.secondary, fontWeight: 600},
+ icon: {height: 16, width: 16},
+ draftTags: {gap: space.sm, display: 'flex', flexWrap: 'wrap', alignItems: 'center'},
+ closeIcon: {height: 14, width: 14},
+ input: {
+ paddingInline: space.sm,
+ paddingBlock: space.xs,
+ fontSize: fontSize.sm,
+ color: {default: null, '::placeholder': content.disabled},
+ minWidth: '100px',
+ flex: '1',
+ backgroundColor: 'transparent',
+ },
+ tags: {gap: space.sm, display: 'flex', flexWrap: 'wrap'},
+ empty: {fontSize: fontSize.sm, color: content.disabled, fontStyle: 'italic'},
+ error: {fontSize: fontSize.sm, color: content.danger, marginTop: space.sm},
+ dropdown: {
+ marginTop: space.xs,
+ borderRadius: radius.md,
+ backgroundColor: background.primary,
+ position: 'absolute',
+ right: 0,
+ left: 0,
+ zIndex: 50,
+ borderWidth: 1,
+ borderStyle: 'solid',
+ borderColor: border.secondary,
+ boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+ },
+ options: {
+ padding: space.sm,
+ maxHeight: '200px',
+ scrollbarWidth: 'none',
+ overflowY: 'auto',
+ display: {default: null, '::-webkit-scrollbar': 'none'},
+ },
+ createLabel: {marginTop: '1px', marginBottom: 'auto'},
+ noMatches: {
+ fontSize: fontSize.sm,
+ color: content.secondary,
+ paddingInline: space.md,
+ paddingBlock: space.lg,
+ textAlign: 'center',
+ },
+ backdrop: {position: 'fixed', inset: 0, zIndex: 40, backgroundColor: 'transparent'},
+ invisible: {visibility: 'hidden'},
+ relative: {position: 'relative'},
+ raised: {zIndex: 50},
+ emptyMessage: {marginBottom: space.sm},
+ createOption: {
+ width: '100%',
+ textAlign: 'left',
+ paddingInline: space.md,
+ paddingBlock: space.sm,
+ cursor: 'pointer',
+ borderRadius: radius.sm,
+ fontSize: fontSize.sm,
+ display: 'flex',
+ alignItems: 'center',
+ gap: space.sm,
+ },
+ highlighted: {backgroundColor: background.secondary},
+ hovered: {
+ backgroundColor: {default: null, ':hover': background.transparentNeutralMuted},
+ },
+ creating: {cursor: 'wait', opacity: 0.7},
+ suggestion: {
+ width: '100%',
+ textAlign: 'left',
+ paddingInline: space.md,
+ paddingBlock: space.sm,
+ cursor: 'pointer',
+ borderRadius: radius.sm,
+ fontSize: fontSize.sm,
+ },
+});
diff --git a/frontend/src/components/EditableTextField.test.tsx b/frontend/src/components/EditableTextField.test.tsx
index 113678bb..46a1023e 100644
--- a/frontend/src/components/EditableTextField.test.tsx
+++ b/frontend/src/components/EditableTextField.test.tsx
@@ -13,15 +13,15 @@ describe('EditableTextField', () => {
expect(display).toBeInTheDocument();
});
- it('wraps long unbroken content in the rendered display', async () => {
+ it('renders long unbroken content in the display', async () => {
const longToken = 'https://example.com/' + 'a'.repeat(200);
render(
{}} />);
const display = await screen.findByText(longToken);
- expect(display).toHaveClass('break-words');
+ expect(display).toHaveTextContent(longToken);
});
- it('wraps long content in the labeled/multiline display', async () => {
+ it('renders long content in the labeled multiline display', async () => {
const longToken = 'x'.repeat(300);
render(
{
);
const display = await screen.findByText(longToken);
- expect(display).toHaveClass('break-words');
+ expect(display).toHaveTextContent(longToken);
});
it('shows trigger button', async () => {
@@ -62,16 +62,13 @@ describe('EditableTextField', () => {
render();
- // Enter edit mode
const trigger = await screen.findByLabelText('Edit');
await user.click(trigger);
- // Edit text
const input = await screen.findByDisplayValue('Original');
await user.clear(input);
await user.type(input, 'Updated');
- // Save
const saveButton = await screen.findByText('Save');
await user.click(saveButton);
@@ -85,19 +82,15 @@ describe('EditableTextField', () => {
render( {}} />);
- // Enter edit mode
const trigger = await screen.findByLabelText('Edit');
await user.click(trigger);
- // Edit text
const input = await screen.findByDisplayValue('Original');
await user.type(input, ' Changed');
- // Cancel
const cancelButton = await screen.findByText('Cancel');
await user.click(cancelButton);
- // Should exit edit mode
await waitFor(() => {
expect(screen.queryByDisplayValue('Original Changed')).not.toBeInTheDocument();
});
@@ -114,24 +107,19 @@ describe('EditableTextField', () => {
/>
);
- // Enter edit mode
const trigger = await screen.findByLabelText('Edit');
await user.click(trigger);
- // Enter invalid text (too short)
const input = await screen.findByDisplayValue('Test');
await user.clear(input);
await user.type(input, 'Hi');
- // Try to save
const saveButton = await screen.findByText('Save');
await user.click(saveButton);
- // Should show validation error
const error = await screen.findByText('Must be at least 5 characters');
expect(error).toBeInTheDocument();
- // Should stay in edit mode
expect(input).toBeInTheDocument();
});
@@ -143,26 +131,21 @@ describe('EditableTextField', () => {
render();
- // Enter edit mode
const trigger = await screen.findByLabelText('Edit');
await user.click(trigger);
- // Edit the text
const input = await screen.findByDisplayValue('Test');
await user.type(input, ' Updated');
- // Try to save
const saveButton = await screen.findByText('Save');
await user.click(saveButton);
- // Should show error
await waitFor(() => {
const error = screen.getByRole('alert');
expect(error).toBeInTheDocument();
expect(error).toHaveTextContent('Save failed');
});
- // Should stay in edit mode
expect(input).toBeInTheDocument();
});
@@ -171,11 +154,9 @@ describe('EditableTextField', () => {
render( {}} multiline={true} />);
- // Enter edit mode
const trigger = await screen.findByLabelText('Edit');
await user.click(trigger);
- // Should render textarea
const textarea = await screen.findByDisplayValue('Line 1');
expect(textarea.tagName).toBe('TEXTAREA');
});
@@ -186,18 +167,14 @@ describe('EditableTextField', () => {
render();
- // Enter edit mode
const trigger = await screen.findByLabelText('Edit');
await user.click(trigger);
- // Save without changes
const saveButton = await screen.findByText('Save');
await user.click(saveButton);
- // Should not call onSave
expect(onSave).not.toHaveBeenCalled();
- // Should exit edit mode
await waitFor(() => {
expect(screen.queryByDisplayValue('Unchanged')).not.toBeInTheDocument();
});
@@ -213,27 +190,21 @@ describe('EditableTextField', () => {
render();
- // Enter edit mode
const trigger = await screen.findByLabelText('Edit');
await user.click(trigger);
- // Edit text
const input = await screen.findByDisplayValue('Test');
await user.type(input, ' Updated');
- // Click save
const saveButton = await screen.findByText('Save');
await user.click(saveButton);
- // Should show saving state (button is disabled)
await waitFor(() => {
expect(saveButton).toBeDisabled();
});
- // Resolve save
resolveSave!();
- // Should exit edit mode
await waitFor(() => {
expect(screen.queryByDisplayValue('Test Updated')).not.toBeInTheDocument();
});
diff --git a/frontend/src/components/EditableTextField.tsx b/frontend/src/components/EditableTextField.tsx
index 041a2ccd..e535ed04 100644
--- a/frontend/src/components/EditableTextField.tsx
+++ b/frontend/src/components/EditableTextField.tsx
@@ -1,91 +1,86 @@
-import React, {useCallback, useEffect, useRef, useState} from 'react';
-import {cva} from 'class-variance-authority';
+import React, {useCallback, useEffect, useLayoutEffect, useRef, useState} from 'react';
+import * as stylex from '@stylexjs/stylex';
import {Pencil} from 'lucide-react';
-import {cn} from 'utils/cn';
import {z} from 'zod';
-import {Button} from './Button';
+import type {StyledProps} from '../styles/props';
+import {
+ background,
+ border,
+ content,
+ fontWeight,
+ radius,
+ space,
+} from '../styles/tokens.stylex';
-const displayContainerStyles = cva(['flex', 'items-center', 'gap-space-xs']);
+import {Button} from './Button';
-const displayStyles = cva(['transition-opacity'], {
- variants: {
- editing: {
- true: ['hidden'],
- false: [],
- },
+const styles = stylex.create({
+ root: {position: 'relative'},
+ displayContainer: {
+ display: 'flex',
+ alignItems: 'center',
+ gap: space.xs,
+ transitionProperty: 'opacity',
+ transitionDuration: '150ms',
},
-});
-
-// Label layout styles
-const labelContainerStyles = cva(['flex', 'items-center', 'gap-space-xs', 'mb-space-md']);
-
-const labelStyles = cva(['font-medium', 'text-content-secondary', 'text-sm']);
-
-const inputStyles = cva(
- [
- 'w-full',
- 'px-space-md',
- 'py-space-sm',
- 'rounded-radius-md',
- 'border-2',
- 'border-border-primary',
- 'focus:border-content-accent',
- 'focus:outline-none',
- 'text-content-primary',
- 'bg-background-primary',
- 'transition-colors',
- 'm-0',
- ],
- {
- variants: {
- error: {
- true: ['border-content-danger', 'focus:border-content-danger'],
- false: [],
- },
- hidden: {
- true: ['hidden'],
- false: [],
- },
- },
- }
-);
-
-const actionsStyles = cva(['flex', 'items-center', 'gap-space-sm'], {
- variants: {
- hidden: {
- true: ['hidden'],
- false: [],
- },
+ hidden: {display: 'none'},
+ invisible: {visibility: 'hidden'},
+ labelContainer: {
+ display: 'flex',
+ alignItems: 'center',
+ gap: space.xs,
+ marginBottom: space.md,
},
-});
-
-const messageStyles = cva(['text-sm', 'mt-space-xs'], {
- variants: {
- type: {
- error: ['text-content-danger'],
- success: ['text-content-success'],
- },
+ label: {
+ fontWeight: fontWeight.medium,
+ color: content.secondary,
+ fontSize: 14,
+ lineHeight: '20px',
},
+ display: {overflowWrap: 'break-word'},
+ fullWidth: {flex: '1', minWidth: 0},
+ inline: {display: 'inline'},
+ multiline: {whiteSpace: 'pre-wrap'},
+ placeholder: {color: content.disabled, fontStyle: 'italic'},
+ input: {
+ width: '100%',
+ paddingInline: space.md,
+ paddingBlock: space.sm,
+ borderRadius: radius.md,
+ borderWidth: 2,
+ borderStyle: 'solid',
+ borderColor: {default: border.primary, ':focus': content.accent},
+ color: content.primary,
+ backgroundColor: background.primary,
+ transitionProperty: 'color, background-color, border-color',
+ transitionDuration: '150ms',
+ margin: 0,
+ },
+ invalid: {borderColor: {default: content.danger, ':focus': content.danger}},
+ textarea: {minHeight: 80, resize: 'none', overflow: 'hidden'},
+ textareaHeight: (height: number | undefined) => ({
+ height: height === undefined ? 'auto' : height,
+ }),
+ actions: {display: 'flex', alignItems: 'center', gap: space.sm},
+ stackedActions: {marginTop: space.sm},
+ message: {fontSize: 14, lineHeight: '20px', marginTop: space.xs, color: content.danger},
+ icon: {width: 16, height: 16},
});
-export interface EditableTextFieldProps {
- // Required
+export interface EditableTextFieldProps extends StyledProps