Skip to content

Commit 8e2e30a

Browse files
hyperz11143081j
hyperz111
and
43081j
authored
fix: fix autocomplete guide line color when validate (#428)
Co-authored-by: James Garbutt <43081j@users.noreply.github.com>
1 parent 9b92161 commit 8e2e30a

File tree

4 files changed

+60
-52
lines changed

4 files changed

+60
-52
lines changed

‎.changeset/sweet-garlics-win.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@clack/prompts": patch
3+
---
4+
5+
fix: fix autocomplete bar color when validate

‎packages/prompts/src/autocomplete.ts‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,8 @@ export const autocomplete = <Value>(opts: AutocompleteOptions<Value>) => {
112112
}
113113

114114
default: {
115+
const guidePrefix = `${(this.state === 'error' ? color.yellow : color.cyan)(S_BAR)} `;
116+
const guidePrefixEnd = (this.state === 'error' ? color.yellow : color.cyan)(S_BAR_END);
115117
// Display cursor position - show plain text in navigation mode
116118
let searchText = '';
117119
if (this.isNavigating || showPlaceholder) {
@@ -132,15 +134,15 @@ export const autocomplete = <Value>(opts: AutocompleteOptions<Value>) => {
132134
// No matches message
133135
const noResults =
134136
this.filteredOptions.length === 0 && userInput
135-
? [`${color.cyan(S_BAR)} ${color.yellow('No matches found')}`]
137+
? [`${guidePrefix}${color.yellow('No matches found')}`]
136138
: [];
137139

138140
const validationError =
139-
this.state === 'error' ? [`${color.yellow(S_BAR)} ${color.yellow(this.error)}`] : [];
141+
this.state === 'error' ? [`${guidePrefix}${color.yellow(this.error)}`] : [];
140142

141143
headings.push(
142-
`${color.cyan(S_BAR)}`,
143-
`${color.cyan(S_BAR)} ${color.dim('Search:')}${searchText}${matches}`,
144+
`${guidePrefix.trimEnd()}`,
145+
`${guidePrefix}${color.dim('Search:')}${searchText}${matches}`,
144146
...noResults,
145147
...validationError
146148
);
@@ -153,8 +155,8 @@ export const autocomplete = <Value>(opts: AutocompleteOptions<Value>) => {
153155
];
154156

155157
const footers = [
156-
`${color.cyan(S_BAR)} ${color.dim(instructions.join(' • '))}`,
157-
`${color.cyan(S_BAR_END)}`,
158+
`${guidePrefix}${color.dim(instructions.join(' • '))}`,
159+
`${guidePrefixEnd}`,
158160
];
159161

160162
// Render options with selection
@@ -184,7 +186,7 @@ export const autocomplete = <Value>(opts: AutocompleteOptions<Value>) => {
184186
// Return the formatted prompt
185187
return [
186188
...headings,
187-
...displayOptions.map((option) => `${color.cyan(S_BAR)} ${option}`),
189+
...displayOptions.map((option) => `${guidePrefix}${option}`),
188190
...footers,
189191
].join('\n');
190192
}
@@ -282,6 +284,7 @@ export const autocompleteMultiselect = <Value>(opts: AutocompleteMultiSelectOpti
282284
return `${title}${color.gray(S_BAR)} ${color.strikethrough(color.dim(userInput))}`;
283285
}
284286
default: {
287+
const barColor = this.state === 'error' ? color.yellow : color.cyan;
285288
// Instructions
286289
const instructions = [
287290
`${color.dim('↑/↓')} to navigate`,
@@ -293,22 +296,22 @@ export const autocompleteMultiselect = <Value>(opts: AutocompleteMultiSelectOpti
293296
// No results message
294297
const noResults =
295298
this.filteredOptions.length === 0 && userInput
296-
? [`${color.cyan(S_BAR)} ${color.yellow('No matches found')}`]
299+
? [`${barColor(S_BAR)} ${color.yellow('No matches found')}`]
297300
: [];
298301

299302
const errorMessage =
300-
this.state === 'error' ? [`${color.cyan(S_BAR)} ${color.yellow(this.error)}`] : [];
303+
this.state === 'error' ? [`${barColor(S_BAR)} ${color.yellow(this.error)}`] : [];
301304

302305
// Calculate header and footer line counts for rowPadding
303306
const headerLines = [
304307
...title.split('\n'),
305-
`${color.cyan(S_BAR)} ${color.dim('Search:')} ${searchText}${matches}`,
308+
`${barColor(S_BAR)} ${color.dim('Search:')} ${searchText}${matches}`,
306309
...noResults,
307310
...errorMessage,
308311
];
309312
const footerLines = [
310-
`${color.cyan(S_BAR)} ${color.dim(instructions.join(' • '))}`,
311-
`${color.cyan(S_BAR_END)}`,
313+
`${barColor(S_BAR)} ${color.dim(instructions.join(' • '))}`,
314+
`${barColor(S_BAR_END)}`,
312315
];
313316

314317
// Get limited options for display
@@ -325,7 +328,7 @@ export const autocompleteMultiselect = <Value>(opts: AutocompleteMultiSelectOpti
325328
// Build the prompt display
326329
return [
327330
...headerLines,
328-
...displayOptions.map((option) => `${color.cyan(S_BAR)} ${option}`),
331+
...displayOptions.map((option) => `${barColor(S_BAR)} ${option}`),
329332
...footerLines,
330333
].join('\n');
331334
}

‎packages/prompts/test/__snapshots__/autocomplete.test.ts.snap‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -429,15 +429,15 @@ exports[`autocompleteMultiselect > renders error when empty selection & required
429429
"<erase.down>",
430430
"▲ Select a fruit
431431
432-
[36m│[39m [2mSearch:[22m [7m[8m_[28m[27m
433-
[36m│[39m [33mPlease select at least one item[39m
434-
[36m│[39m [2m◻[22m Apple
435-
[36m│[39m [2m◻[22m [2mBanana[22m
436-
[36m│[39m [2m◻[22m [2mCherry[22m
437-
[36m│[39m [2m◻[22m [2mGrape[22m
438-
[36m│[39m [2m◻[22m [2mOrange[22m
439-
[36m│[39m [2m[2m↑/↓[22m[2m to navigate • [2mTab:[22m[2m select • [2mEnter:[22m[2m confirm • [2mType:[22m[2m to search[22m
440-
[36m└[39m",
432+
[33m│[39m [2mSearch:[22m [7m[8m_[28m[27m
433+
[33m│[39m [33mPlease select at least one item[39m
434+
[33m│[39m [2m◻[22m Apple
435+
[33m│[39m [2m◻[22m [2mBanana[22m
436+
[33m│[39m [2m◻[22m [2mCherry[22m
437+
[33m│[39m [2m◻[22m [2mGrape[22m
438+
[33m│[39m [2m◻[22m [2mOrange[22m
439+
[33m│[39m [2m[2m↑/↓[22m[2m to navigate • [2mTab:[22m[2m select • [2mEnter:[22m[2m confirm • [2mType:[22m[2m to search[22m
440+
[33m└[39m",
441441
"<cursor.backward count=999><cursor.up count=11>",
442442
"<cursor.down count=1>",
443443
"<erase.down>",

‎packages/prompts/test/__snapshots__/path.test.ts.snap‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -44,12 +44,12 @@ exports[`text (isCI = false) > cannot submit unknown value 1`] = `
4444
"<cursor.down count=1>",
4545
"<erase.down>",
4646
"▲ foo
47-
[36m│[39m
48-
[36m│[39m [2mSearch:[22m /tmp/_█
49-
[36m│[39m [33mNo matches found[39m
47+
[33m│[39m
48+
[33m│[39m [2mSearch:[22m /tmp/_█
49+
[33m│[39m [33mNo matches found[39m
5050
│ Please select a path
51-
[36m│[39m [2m[2m↑/↓[22m[2m to select • [2mEnter:[22m[2m confirm • [2mType:[22m[2m to search[22m
52-
[36m└[39m",
51+
[33m│[39m [2m[2m↑/↓[22m[2m to select • [2mEnter:[22m[2m confirm • [2mType:[22m[2m to search[22m
52+
[33m└[39m",
5353
"<cursor.backward count=999><cursor.up count=7>",
5454
"<cursor.down count=1>",
5555
"<erase.down>",
@@ -211,12 +211,12 @@ exports[`text (isCI = false) > validation errors render and clear (using Error)
211211
"<cursor.down count=1>",
212212
"<erase.down>",
213213
"▲ foo
214-
[36m│[39m
215-
[36m│[39m [2mSearch:[22m /tmp/r█
214+
[33m│[39m
215+
[33m│[39m [2mSearch:[22m /tmp/r█
216216
│ should be /tmp/bar
217-
[36m│[39m [32m●[39m /tmp/root.zip
218-
[36m│[39m [2m[2m↑/↓[22m[2m to select • [2mEnter:[22m[2m confirm • [2mType:[22m[2m to search[22m
219-
[36m└[39m",
217+
[33m│[39m [32m●[39m /tmp/root.zip
218+
[33m│[39m [2m[2m↑/↓[22m[2m to select • [2mEnter:[22m[2m confirm • [2mType:[22m[2m to search[22m
219+
[33m└[39m",
220220
"<cursor.backward count=999><cursor.up count=7>",
221221
"<cursor.down count=1>",
222222
"<erase.down>",
@@ -267,12 +267,12 @@ exports[`text (isCI = false) > validation errors render and clear 1`] = `
267267
"<cursor.down count=1>",
268268
"<erase.down>",
269269
"▲ foo
270-
[36m│[39m
271-
[36m│[39m [2mSearch:[22m /tmp/r█
270+
[33m│[39m
271+
[33m│[39m [2mSearch:[22m /tmp/r█
272272
│ should be /tmp/bar
273-
[36m│[39m [32m●[39m /tmp/root.zip
274-
[36m│[39m [2m[2m↑/↓[22m[2m to select • [2mEnter:[22m[2m confirm • [2mType:[22m[2m to search[22m
275-
[36m└[39m",
273+
[33m│[39m [32m●[39m /tmp/root.zip
274+
[33m│[39m [2m[2m↑/↓[22m[2m to select • [2mEnter:[22m[2m confirm • [2mType:[22m[2m to search[22m
275+
[33m└[39m",
276276
"<cursor.backward count=999><cursor.up count=7>",
277277
"<cursor.down count=1>",
278278
"<erase.down>",
@@ -345,12 +345,12 @@ exports[`text (isCI = true) > cannot submit unknown value 1`] = `
345345
"<cursor.down count=1>",
346346
"<erase.down>",
347347
"▲ foo
348-
[36m│[39m
349-
[36m│[39m [2mSearch:[22m /tmp/_█
350-
[36m│[39m [33mNo matches found[39m
348+
[33m│[39m
349+
[33m│[39m [2mSearch:[22m /tmp/_█
350+
[33m│[39m [33mNo matches found[39m
351351
│ Please select a path
352-
[36m│[39m [2m[2m↑/↓[22m[2m to select • [2mEnter:[22m[2m confirm • [2mType:[22m[2m to search[22m
353-
[36m└[39m",
352+
[33m│[39m [2m[2m↑/↓[22m[2m to select • [2mEnter:[22m[2m confirm • [2mType:[22m[2m to search[22m
353+
[33m└[39m",
354354
"<cursor.backward count=999><cursor.up count=7>",
355355
"<cursor.down count=1>",
356356
"<erase.down>",
@@ -512,12 +512,12 @@ exports[`text (isCI = true) > validation errors render and clear (using Error) 1
512512
"<cursor.down count=1>",
513513
"<erase.down>",
514514
"▲ foo
515-
[36m│[39m
516-
[36m│[39m [2mSearch:[22m /tmp/r█
515+
[33m│[39m
516+
[33m│[39m [2mSearch:[22m /tmp/r█
517517
│ should be /tmp/bar
518-
[36m│[39m [32m●[39m /tmp/root.zip
519-
[36m│[39m [2m[2m↑/↓[22m[2m to select • [2mEnter:[22m[2m confirm • [2mType:[22m[2m to search[22m
520-
[36m└[39m",
518+
[33m│[39m [32m●[39m /tmp/root.zip
519+
[33m│[39m [2m[2m↑/↓[22m[2m to select • [2mEnter:[22m[2m confirm • [2mType:[22m[2m to search[22m
520+
[33m└[39m",
521521
"<cursor.backward count=999><cursor.up count=7>",
522522
"<cursor.down count=1>",
523523
"<erase.down>",
@@ -568,12 +568,12 @@ exports[`text (isCI = true) > validation errors render and clear 1`] = `
568568
"<cursor.down count=1>",
569569
"<erase.down>",
570570
"▲ foo
571-
[36m│[39m
572-
[36m│[39m [2mSearch:[22m /tmp/r█
571+
[33m│[39m
572+
[33m│[39m [2mSearch:[22m /tmp/r█
573573
│ should be /tmp/bar
574-
[36m│[39m [32m●[39m /tmp/root.zip
575-
[36m│[39m [2m[2m↑/↓[22m[2m to select • [2mEnter:[22m[2m confirm • [2mType:[22m[2m to search[22m
576-
[36m└[39m",
574+
[33m│[39m [32m●[39m /tmp/root.zip
575+
[33m│[39m [2m[2m↑/↓[22m[2m to select • [2mEnter:[22m[2m confirm • [2mType:[22m[2m to search[22m
576+
[33m└[39m",
577577
"<cursor.backward count=999><cursor.up count=7>",
578578
"<cursor.down count=1>",
579579
"<erase.down>",

0 commit comments

Comments
 (0)