Rendering parts of a string in bold causes background of rest to be reset

[devversion]

Hi everyone,

I'm just starting to pick up Bubbletea, and it's pretty great, but I've ran into an issue and I'm not sure it's a bug, or if I'm doing something wrong.

Consider a script like this, intending to render this:

i.e. two boxes with gray background and a simple text inside. This text should have the first word bold, and the text afterwards not. I have the logic like followed:

	boldStyle = lipgloss.NewStyle().Bold(true)

// ...

	// Boxes style.
	boxStyle := lipgloss.NewStyle().
		Width(uiWidth/2-4).
		Margin(0, 2).
		Padding(0, 1).
		Height(5).
		Background(lipgloss.Color("#424242"))

        // Box text
	targetLabel := boldStyle.Render("Targeting:")
	targetValue := " "
	targetValue += "(no data yet)"

        // Initially I was just using string concatenation here, but doing this was one thing I found. Didn't help.
	metadataText := lipgloss.JoinHorizontal(lipgloss.Top, targetLabel, targetValue)

	metadataBoxStyle := boxStyle
	metadataBoxText := metadataBoxStyle.Render(metadataText)
	metadataBoxText2 := metadataBoxStyle.Render(metadataText)

	// Render two boxes side by side.
	res := ""
	res += lipgloss.JoinHorizontal(lipgloss.Top, metadataBoxText, metadataBoxText2)
	res += "\n

The problem is that somehow in the image, the text after the bold text is loosing the background of the box.

Full code is here: https://gist.github.com/devversion/93c472f209579659c527d1348e984db7

[devversion]

I suspect it's related to #144, but maybe this post will re-activate some push on this. I'd be happy to play with a pull request for this.

[meowgorithm]

Hi! The easiest way to do this is to simply make sure all your styles have the same background. There's a few ways to do it, but what I like to do is make a style with a background color and then spawn new styles off of that.

Here’s a diff to achieve that (and here’s a full example).

diff --git a/main.go b/main.go
index 93d8b73..b1c7db7 100644
--- a/main.go
+++ b/main.go
@@ -8,8 +8,15 @@ import (
 )
 
 var (
+	baseStyle = lipgloss.NewStyle().
+			Background(lipgloss.Color("#424242"))
+	boxStyle = baseStyle.
+			Margin(0, 2).
+			Padding(0, 1).
+			Height(5).
+			Background(lipgloss.Color("#424242"))
 	logoColor = lipgloss.Color("#297bff")
-	boldStyle = lipgloss.NewStyle().Bold(true)
+	boldStyle = baseStyle.Bold(true)
 )
 
 type model struct {
@@ -38,22 +45,14 @@ func (m *model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 func (m *model) View() string {
 	uiWidth := int(float64(m.terminalWidth) * 0.75)
 
-	// Boxes style.
-	boxStyle := lipgloss.NewStyle().
-		Width(uiWidth/2-4).
-		Margin(0, 2).
-		Padding(0, 1).
-		Height(5).
-		Background(lipgloss.Color("#424242"))
-
 	// Show number of matched targets.
 	targetLabel := boldStyle.Render("Targeting:")
-	targetValue := " "
-	targetValue += "(no data yet)"
+	targetValue := baseStyle.Render(" ")
+	targetValue += baseStyle.Render("(no data yet)")
 
 	metadataText := lipgloss.JoinHorizontal(lipgloss.Top, targetLabel, targetValue)
 
-	metadataBoxStyle := boxStyle
+	metadataBoxStyle := boxStyle.Width(uiWidth/2 - 4)
 	metadataBoxText := metadataBoxStyle.Render(metadataText)
 	metadataBoxText2 := metadataBoxStyle.Render(metadataText)

[devversion]

Thank you, appreciate your time! — This seems reasonable. I guess I was expecting lipgloss to automatically "inherit" the background for me.