charmbracelet / lipgloss

Style definitions for nice terminal layouts 👄
MIT License
8.22k stars 231 forks source link

bug(table): computeHeight doesn't account for margins or padding. #400

Open bashbunni opened 1 month ago

bashbunni commented 1 month ago

Describe the bug If we set a height for the table, it leads to unexpected results when margins and padding are set.

To Reproduce Steps to reproduce the behavior: there is a failing test on https://github.com/charmbracelet/lipgloss/tree/fix-compute-height This is the test:

func TestSizing(t *testing.T) {
    t.Run("margin and padding with fixed width", func(t *testing.T) {
        want := 7
        table := New().
            Border(lipgloss.NormalBorder()).
            StyleFunc(func(row, col int) lipgloss.Style {
                switch {
                case row == HeaderRow:
                    return lipgloss.NewStyle().Align(lipgloss.Center)
                default:
                    return lipgloss.NewStyle().
                        Padding(1).
                        Margin(1).
                        Align(lipgloss.Right).
                        Background(lipgloss.Color("#874bfc"))
                }
            }).
            Headers("LANGUAGE", "FORMAL", "INFORMAL").
            Row("Chinese", "Nǐn hǎo", "Nǐ hǎo").
            Row("French", "Bonjour", "Salut").
            Row("Japanese", "こんにちは", "やあ").
            Row("Russian", "Zdravstvuyte", "Privet").
            Row("Spanish", "Hola", "¿Qué tal?").
            Width(50).
            Height(want)

        // TODO make this test pass. computeHeight doesn't account for margin
        // and padding, so we get an unexpected actual table height.
        got := table.String()
        if lipgloss.Height(got) != want {
            t.Fatalf("got an unexpected table height. Should be %d\n%s", want, got)
        }
    })
}

image

When we set Height, that should be the total height of the table including borders, text, and whitespace. We need to account for that in the render. The value of the height is the number of cells tall the table should be