feat(help): add styled whitespace with configurable background

Added WhitespaceStyle fields to both short and full help Styles struct,
llowing customization of whitespace appearance between keys and descriptions.
Previously whitespace was unstyled, now it matches the aesthetic of other
elements and can be customized (e.g. with background colors for testing).

- Added ShortWhitespace and FullWhitespace to Styles struct
- Modified ShortHelpView to use styled whitespace between key and desc
- Modified FullHelpView to use styled whitespace between key and desc
- Added tests to verify whitespace styling behavior

Fixes charmbracelet#571

help/help.go

@@ -31,14 +31,16 @@ type Styles struct {
 	Ellipsis lipgloss.Style
 
 	// Styling for the short help
-	ShortKey       lipgloss.Style
-	ShortDesc      lipgloss.Style
-	ShortSeparator lipgloss.Style
+	ShortKey        lipgloss.Style
+	ShortDesc       lipgloss.Style
+	ShortSeparator  lipgloss.Style
+	ShortWhitespace lipgloss.Style
 
 	// Styling for the full help
-	FullKey       lipgloss.Style
-	FullDesc      lipgloss.Style
-	FullSeparator lipgloss.Style
+	FullKey        lipgloss.Style
+	FullDesc       lipgloss.Style
+	FullSeparator  lipgloss.Style
+	FullWhitespace lipgloss.Style
 }
 
 // Model contains the state of the help view.
@@ -78,13 +80,15 @@ func New() Model {
 		FullSeparator:  "    ",
 		Ellipsis:       "…",
 		Styles: Styles{
-			ShortKey:       keyStyle,
-			ShortDesc:      descStyle,
-			ShortSeparator: sepStyle,
-			Ellipsis:       sepStyle,
-			FullKey:        keyStyle,
-			FullDesc:       descStyle,
-			FullSeparator:  sepStyle,
+			ShortKey:        keyStyle,
+			ShortDesc:       descStyle,
+			ShortSeparator:  sepStyle,
+			ShortWhitespace: sepStyle,
+			Ellipsis:        sepStyle,
+			FullKey:         keyStyle,
+			FullDesc:        descStyle,
+			FullSeparator:   sepStyle,
+			FullWhitespace:  sepStyle,
 		},
 	}
 }
@@ -132,7 +136,8 @@ func (m Model) ShortHelpView(bindings []key.Binding) string {
 
 		// Item
 		str := sep +
-			m.Styles.ShortKey.Inline(true).Render(kb.Help().Key) + " " +
+			m.Styles.ShortKey.Inline(true).Render(kb.Help().Key) +
+			m.Styles.ShortWhitespace.Inline(true).Render(" ") +
 			m.Styles.ShortDesc.Inline(true).Render(kb.Help().Desc)
 		w := lipgloss.Width(str)
 
@@ -197,7 +202,7 @@ func (m Model) FullHelpView(groups [][]key.Binding) string {
 		col := lipgloss.JoinHorizontal(lipgloss.Top,
 			sep,
 			m.Styles.FullKey.Render(strings.Join(keys, "\n")),
-			" ",
+			m.Styles.FullWhitespace.Render(" "),
 			m.Styles.FullDesc.Render(strings.Join(descriptions, "\n")),
 		)
 		w := lipgloss.Width(col)

help/help_whitespace_test.go

@@ -0,0 +1,102 @@
+package help
+
+import (
+	"fmt"
+	"testing"
+
+	"github.com/charmbracelet/bubbles/key"
+	"github.com/charmbracelet/lipgloss"
+	"github.com/charmbracelet/x/exp/golden"
+)
+
+func TestWhitespaceStyle(t *testing.T) {
+	m := New()
+	m.FullSeparator = " | "
+
+	// Set a distinctive background color for whitespace to make it visible in tests
+	whitespaceBg := lipgloss.Color("#FF0000")
+	m.Styles.ShortWhitespace = m.Styles.ShortWhitespace.Background(whitespaceBg)
+	m.Styles.FullWhitespace = m.Styles.FullWhitespace.Background(whitespaceBg)
+
+	// Standard keys setup
+	k := key.WithKeys("x")
+	kb := [][]key.Binding{
+		{
+			key.NewBinding(k, key.WithHelp("enter", "continue")),
+		},
+		{
+			key.NewBinding(k, key.WithHelp("esc", "back")),
+			key.NewBinding(k, key.WithHelp("?", "help")),
+		},
+		{
+			key.NewBinding(k, key.WithHelp("H", "home")),
+			key.NewBinding(k, key.WithHelp("ctrl+c", "quit")),
+			key.NewBinding(k, key.WithHelp("ctrl+l", "log")),
+		},
+	}
+
+	// Test both views at different widths
+	for _, w := range []int{20, 30, 40} {
+		t.Run(fmt.Sprintf("full_help_width_%d", w), func(t *testing.T) {
+			m.Width = w
+			s := m.FullHelpView(kb)
+			golden.RequireEqual(t, []byte(s))
+		})
+
+		t.Run(fmt.Sprintf("short_help_width_%d", w), func(t *testing.T) {
+			m.Width = w
+			// Flatten the bindings for short help
+			var shortBindings []key.Binding
+			for _, group := range kb {
+				shortBindings = append(shortBindings, group...)
+			}
+			s := m.ShortHelpView(shortBindings)
+			golden.RequireEqual(t, []byte(s))
+		})
+	}
+
+// Test with a disabled item and custom style
+for _, tc := range []struct {
+    name     string
+    setupFn  func()
+    bindings [][]key.Binding
+}{
+    {
+        name: "disabled_item",
+        setupFn: func() {
+            m.Width = 40
+        },
+        bindings: [][]key.Binding{{
+            key.NewBinding(k, key.WithHelp("enter", "continue")),
+            key.NewBinding(k, key.WithHelp("ctrl+c", "quit"), key.WithDisabled()),
+        }},
+    },
+    {
+        name: "custom_style",
+        setupFn: func() {
+            m.Width = 40
+            customBg := lipgloss.Color("#00FF00")
+            m.Styles.FullWhitespace = m.Styles.FullWhitespace.Background(customBg)
+            m.Styles.ShortWhitespace = m.Styles.ShortWhitespace.Background(customBg)
+        },
+        bindings: kb,
+    },
+} {
+    t.Run(tc.name+"_full", func(t *testing.T) {
+        tc.setupFn()
+        s := m.FullHelpView(tc.bindings)
+        golden.RequireEqual(t, []byte(s))
+    })
+
+    t.Run(tc.name+"_short", func(t *testing.T) {
+        tc.setupFn()
+        // Flatten the bindings for short help
+        var shortBindings []key.Binding
+        for _, group := range tc.bindings {
+            shortBindings = append(shortBindings, group...)
+        }
+        s := m.ShortHelpView(shortBindings)
+        golden.RequireEqual(t, []byte(s))
+    })
+}
+}

help/testdata/TestWhitespaceStyle/custom_style_full.golden

@@ -0,0 +1,3 @@
+enter continue | esc back | H      home
+                 ?   help   ctrl+c quit
+                            ctrl+l log 

help/testdata/TestWhitespaceStyle/custom_style_short.golden

@@ -0,0 +1 @@
+enter continue • esc back • ? help …

help/testdata/TestWhitespaceStyle/disabled_item_full.golden

@@ -0,0 +1 @@
+enter continue

help/testdata/TestWhitespaceStyle/disabled_item_short.golden

@@ -0,0 +1 @@
+enter continue

help/testdata/TestWhitespaceStyle/full_help_width_20.golden

@@ -0,0 +1 @@
+enter continue …

help/testdata/TestWhitespaceStyle/full_help_width_30.golden

@@ -0,0 +1,2 @@
+enter continue | esc back …
+                 ?   help  

help/testdata/TestWhitespaceStyle/full_help_width_40.golden

@@ -0,0 +1,3 @@
+enter continue | esc back | H      home
+                 ?   help   ctrl+c quit
+                            ctrl+l log 

help/testdata/TestWhitespaceStyle/short_help_width_20.golden

@@ -0,0 +1 @@
+enter continue …

help/testdata/TestWhitespaceStyle/short_help_width_30.golden

@@ -0,0 +1 @@
+enter continue • esc back …

help/testdata/TestWhitespaceStyle/short_help_width_40.golden

@@ -0,0 +1 @@
+enter continue • esc back • ? help …