feat(experiment): use chevron prompt for text inputs (#399)

Author: zimeg

internal/iostreams/charm.go

@@ -29,6 +29,7 @@ import (
 func buildInputForm(message string, cfg InputPromptConfig, input *string) *huh.Form {
 	field := huh.NewInput().
 		Title(message).
+		Prompt(style.Chevron() + " ").
 		Placeholder(cfg.Placeholder).
 		Value(input)
 	if cfg.Required {
@@ -106,6 +107,7 @@ func charmSelectPrompt(_ *IOStreams, _ context.Context, msg string, options []st
 func buildPasswordForm(message string, cfg PasswordPromptConfig, input *string) *huh.Form {
 	field := huh.NewInput().
 		Title(message).
+		Prompt(style.Chevron() + " ").
 		EchoMode(huh.EchoModePassword).
 		Value(input)
 	if cfg.Required {

internal/iostreams/charm_test.go

@@ -21,6 +21,7 @@ import (
 	tea "charm.land/bubbletea/v2"
 	huh "charm.land/huh/v2"
 	"github.com/charmbracelet/x/ansi"
+	"github.com/slackapi/slack-cli/internal/style"
 	"github.com/stretchr/testify/assert"
 )
 
@@ -39,6 +40,15 @@ func TestCharmInput(t *testing.T) {
 		assert.Contains(t, view, "Enter your name")
 	})
 
+	t.Run("renders the chevron prompt", func(t *testing.T) {
+		var input string
+		f := buildInputForm("Name?", InputPromptConfig{}, &input)
+		f.Update(f.Init())
+
+		view := ansi.Strip(f.View())
+		assert.Contains(t, view, style.Chevron())
+	})
+
 	t.Run("accepts typed input", func(t *testing.T) {
 		var input string
 		f := buildInputForm("Name?", InputPromptConfig{}, &input)
@@ -136,7 +146,7 @@ func TestCharmSelect(t *testing.T) {
 		f.Update(f.Init())
 
 		view := ansi.Strip(f.View())
-		assert.Contains(t, view, "❱ Foo")
+		assert.Contains(t, view, style.Chevron()+" Foo")
 	})
 
 	t.Run("cursor navigation moves selection", func(t *testing.T) {
@@ -147,8 +157,8 @@ func TestCharmSelect(t *testing.T) {
 
 		m, _ := f.Update(tea.KeyPressMsg{Code: tea.KeyDown})
 		view := ansi.Strip(m.View())
-		assert.Contains(t, view, "❱ Bar")
-		assert.False(t, strings.Contains(view, "❱ Foo"))
+		assert.Contains(t, view, style.Chevron()+" Bar")
+		assert.False(t, strings.Contains(view, style.Chevron()+" Foo"))
 	})
 
 	t.Run("submit selects the hovered option", func(t *testing.T) {
@@ -207,6 +217,15 @@ func TestCharmPassword(t *testing.T) {
 		assert.Contains(t, view, "Enter password")
 	})
 
+	t.Run("renders the chevron prompt", func(t *testing.T) {
+		var input string
+		f := buildPasswordForm("Enter password", PasswordPromptConfig{}, &input)
+		f.Update(f.Init())
+
+		view := ansi.Strip(f.View())
+		assert.Contains(t, view, style.Chevron())
+	})
+
 	t.Run("typed characters are masked in view", func(t *testing.T) {
 		var input string
 		f := buildPasswordForm("Password", PasswordPromptConfig{}, &input)
@@ -302,7 +321,7 @@ func TestCharmFormsUseSlackTheme(t *testing.T) {
 		f.Update(f.Init())
 
 		view := ansi.Strip(f.View())
-		assert.Contains(t, view, "❱ A")
+		assert.Contains(t, view, style.Chevron()+" A")
 	})
 
 	t.Run("multi-select form renders themed prefixes", func(t *testing.T) {

internal/style/charm_theme_test.go

@@ -23,9 +23,6 @@ import (
 	"runtime"
 	"strings"
 	"time"
-
-	"github.com/AlecAivazis/survey/v2"
-	"github.com/AlecAivazis/survey/v2/core"
 )
 
 const LocalRunNameTag = "(local)"
@@ -184,30 +181,6 @@ func HomePath(filepath string) string {
 	return filepath
 }
 
-// SurveyIcons returns customizations to the appearance of prompts
-func SurveyIcons() survey.AskOpt {
-	if !isStyleEnabled {
-		core.DisableColor = true
-	}
-
-	cursor := ">"
-	// Unfortunately "❱" does not display on Windows Powershell
-	// Limit "❱" to macOS until support is known for other operating systems
-	if isStyleEnabled && runtime.GOOS == "darwin" {
-		cursor = "❱"
-	}
-
-	// Customize the appearance of each survey prompt
-	return survey.WithIcons(func(icons *survey.IconSet) {
-		icons.SelectFocus.Text = cursor
-		icons.SelectFocus.Format = fmt.Sprintf("%d+b", blue)
-		icons.MarkedOption.Format = fmt.Sprintf("%d+b", blue)
-
-		icons.Question.Text = "?"
-		icons.Question.Format = fmt.Sprintf("%d+hb", gray)
-	})
-}
-
 // ExampleCommand contains a command with a descriptive meaning
 type ExampleCommand struct {
 	// Command is the command to be run, not including the process name

internal/style/format.go

@@ -20,7 +20,6 @@ import (
 	"strings"
 	"testing"
 
-	"github.com/AlecAivazis/survey/v2/core"
 	"github.com/stretchr/testify/assert"
 )
 
@@ -199,29 +198,6 @@ func TestTracef(t *testing.T) {
 	}
 }
 
-func TestSurveyIcons(t *testing.T) {
-	tests := map[string]struct {
-		styleEnabled bool
-	}{
-		"styles are not enabled": {
-			styleEnabled: false,
-		},
-		"styles are enabled": {
-			styleEnabled: true,
-		},
-	}
-
-	for name, tc := range tests {
-		t.Run(name, func(t *testing.T) {
-			core.DisableColor = false
-			isStyleEnabled = tc.styleEnabled
-
-			_ = SurveyIcons()
-			assert.NotEqual(t, tc.styleEnabled, core.DisableColor)
-		})
-	}
-}
-
 /*
 * Example commands
  */

internal/style/format_test.go

@@ -14,12 +14,18 @@
 
 package style
 
-// Slack brand theme for charmbracelet/huh prompts.
+// Slack brand theme for prompt styling.
 // Uses official Slack brand colors defined in colors.go.
 
 import (
+	"fmt"
+	"runtime"
+
 	huh "charm.land/huh/v2"
 	lipgloss "charm.land/lipgloss/v2"
+
+	"github.com/AlecAivazis/survey/v2"
+	"github.com/AlecAivazis/survey/v2/core"
 )
 
 // ThemeSlack returns a huh Theme styled with Slack brand colors.
@@ -49,7 +55,7 @@ func themeSlack(isDark bool) *huh.Styles {
 	// Select styles
 	t.Focused.SelectSelector = lipgloss.NewStyle().
 		Foreground(slackBlue).
-		SetString("❱ ")
+		SetString(Chevron() + " ")
 	t.Focused.Option = lipgloss.NewStyle().
 		Foreground(slackOptionText)
 	t.Focused.NextIndicator = lipgloss.NewStyle().
@@ -64,7 +70,7 @@ func themeSlack(isDark bool) *huh.Styles {
 	// Multi-select styles
 	t.Focused.MultiSelectSelector = lipgloss.NewStyle().
 		Foreground(slackYellow).
-		SetString("❱ ")
+		SetString(Chevron() + " ")
 	t.Focused.SelectedOption = lipgloss.NewStyle().
 		Foreground(slackGreen)
 	t.Focused.SelectedPrefix = lipgloss.NewStyle().
@@ -109,3 +115,31 @@ func themeSlack(isDark bool) *huh.Styles {
 
 	return t
 }
+
+// Chevron returns the select chevron character for the current platform.
+// Unfortunately "❱" does not display on Windows Powershell.
+// Limit "❱" to non-Windows until support is known for other operating systems.
+func Chevron() string {
+	if !isStyleEnabled || runtime.GOOS == "windows" {
+		return ">"
+	}
+	return "❱"
+}
+
+// SurveyIcons returns customizations to the appearance of survey prompts.
+func SurveyIcons() survey.AskOpt {
+	if !isStyleEnabled {
+		core.DisableColor = true
+	}
+
+	cursor := Chevron()
+
+	return survey.WithIcons(func(icons *survey.IconSet) {
+		icons.SelectFocus.Text = cursor
+		icons.SelectFocus.Format = fmt.Sprintf("%d+b", blue)
+		icons.MarkedOption.Format = fmt.Sprintf("%d+b", blue)
+
+		icons.Question.Text = "?"
+		icons.Question.Format = fmt.Sprintf("%d+hb", gray)
+	})
+}