Editor's Path Properties has 'Stitch type' but the help text is not visible — user picking a stitch type doesn't see 'this is best for text and borders' until they read the help page #384

New issue

Closed

opened 2026-10-04 04:01:01 +00:00 by Mark · 1 comment

Mark commented

2026-10-04 04:01:01 +00:00

Owner

Finding"

grep -rn 'stitchHelp\|stitchDescription' src/components/editor/EditorRightPanel.tsx returns 0. The Path Properties doesn't show help text for the stitch type.

A user picking a stitch type:

Sees "Satin", "Fill", "Running", etc.
Doesn't know "this is best for..."
Has to read the help page

The fix is a small help text below the dropdown.

This is similar to #359 but more general (the dropdown is in multiple places).

Where

Path Properties: src/components/editor/EditorRightPanel.tsx
No help text: grep -rn 'stitchHelp' src/components/editor/ returns 0
The Help page: per Help.tsx:80-100

Suggested fix shape

Data: add descriptions for each stitch type:

const STITCH_DESCRIPTIONS: Record<UserFacingStitchType, string> = {
  satin: 'Best for text, borders, and narrow columns.',
  fill: 'Best for large solid areas, backgrounds, and shapes.',
  running: 'Best for outlines, detail lines, and quilting guides.',
  'cross-stitch': 'Best for X-pattern fills, decorative areas, traditional.',
  zigzag: 'Best for wide fills, applique tack-down, decorative edges.',
};

UI: below the dropdown, show the description:

<SelectField
  label="Stitch type"
  value={p.stitchType}
  options={...}
  onChange={...}
/>
<p className="text-[10px]" style={{ color: '#6B6560' }}>
  {STITCH_DESCRIPTIONS[p.stitchType]}
</p>

Use cases:

The user wants to pick the right type
New users learning

Severity**

Low. The user can read the help. New users notice the gap.

Discovered by

Gap analysis (2026-10-02) of editor path properties.

The Help page (per Help.tsx:80-100) has the descriptions.
#348 (open) — Stitch type labels. Same surface.
Figma has tooltips. The editor's gap is the parallel.

## Finding" `grep -rn 'stitchHelp\|stitchDescription' src/components/editor/EditorRightPanel.tsx` returns 0. The Path Properties doesn't show help text for the stitch type. A user picking a stitch type: - Sees "Satin", "Fill", "Running", etc. - Doesn't know "this is best for..." - Has to read the help page The fix is a small help text below the dropdown. This is similar to #359 but more general (the dropdown is in multiple places). ## Where - Path Properties: `src/components/editor/EditorRightPanel.tsx` - No help text: `grep -rn 'stitchHelp' src/components/editor/` returns 0 - The Help page: per `Help.tsx:80-100` ## Suggested fix shape 1. **Data**: add descriptions for each stitch type: ```ts const STITCH_DESCRIPTIONS: Record<UserFacingStitchType, string> = { satin: 'Best for text, borders, and narrow columns.', fill: 'Best for large solid areas, backgrounds, and shapes.', running: 'Best for outlines, detail lines, and quilting guides.', 'cross-stitch': 'Best for X-pattern fills, decorative areas, traditional.', zigzag: 'Best for wide fills, applique tack-down, decorative edges.', }; ``` 2. **UI**: below the dropdown, show the description: ```tsx <SelectField label="Stitch type" value={p.stitchType} options={...} onChange={...} /> <p className="text-[10px]" style={{ color: '#6B6560' }}> {STITCH_DESCRIPTIONS[p.stitchType]} </p> ``` 3. **Use cases**: - The user wants to pick the right type - New users learning ## Severity** Low. The user can read the help. New users notice the gap. ## Discovered by Gap analysis (2026-10-02) of editor path properties. ## Related** - The Help page (per `Help.tsx:80-100`) has the descriptions. - #348 (open) — Stitch type labels. Same surface. - Figma has tooltips. The editor's gap is the parallel.

Mark added the

feature-request

triage-approved

labels

2026-10-04 04:01:01 +00:00

Mark commented

2026-10-05 18:51:45 +00:00

Author

Owner

Closing as already-shipped. Issue #369 (commit ed06847, landed on origin/main) added the "currently selected stitch type" summary panel above the dropdown in EditorRightPanel.tsx (lines 5390-5428). The panel renders:

The stitch-type pattern icon (SatinPattern/FillPattern/etc.)
The label (STITCH_LABELS[satin], e.g. "Satin Stitch (Tatami)")
The "Best for: ..." line (STITCH_DESCRIPTIONS[satin], e.g. "Best for: text, borders, narrow columns")

Data lives in src/components/workspace/pathDefaults.ts:58 as the single source of truth (also referenced by the Help page, so both surfaces agree).

Verified by src/components/editor/issue-369.test.tsx (4 tests, all passing): renders the label+description, updates on selection change, hides on Mixed selection, renders a summary for each of the five user-facing stitch types.

The shape is a summary panel above the dropdown rather than a <p> below it, but the user-visible outcome matches the ask: a user picking a stitch type now sees "Best for: text, borders, narrow columns" without opening the Help page.

Closing as already-shipped. Issue #369 (commit `ed06847`, landed on `origin/main`) added the "currently selected stitch type" summary panel above the dropdown in `EditorRightPanel.tsx` (lines 5390-5428). The panel renders: - The stitch-type pattern icon (`SatinPattern`/`FillPattern`/etc.) - The label (`STITCH_LABELS[satin]`, e.g. "Satin Stitch (Tatami)") - The "Best for: ..." line (`STITCH_DESCRIPTIONS[satin]`, e.g. "Best for: text, borders, narrow columns") Data lives in `src/components/workspace/pathDefaults.ts:58` as the single source of truth (also referenced by the Help page, so both surfaces agree). Verified by `src/components/editor/issue-369.test.tsx` (4 tests, all passing): renders the label+description, updates on selection change, hides on Mixed selection, renders a summary for each of the five user-facing stitch types. The shape is a summary panel *above* the dropdown rather than a `<p>` below it, but the user-visible outcome matches the ask: a user picking a stitch type now sees "Best for: text, borders, narrow columns" without opening the Help page.

Mark closed this issue

2026-10-05 18:52:17 +00:00