DivHStacked / DivVStacked don't accept a gap parameter

Open Beginner friendly
#163 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
78/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Quiet
Tech stack
python, tailwindcss
Domain
frontend

Research direction

Start at the definitions of DivHStacked and DivVStacked and inspect how their existing class lists and cls arguments are assembled. Verify the change with the reproduction cases: gap=4 and gap=2 should apply the corresponding Tailwind classes while omitting the class when gap is not provided.

Written by the indexing model from the issue text.

Description

Summary

DivHStacked and DivVStacked don't accept a gap parameter, so callers that need a non-default gap must either write the Tailwind class manually or maintain wrapper components that do the translation.

Reproduction

from monsterui.franken import DivHStacked
DivHStacked(A, B, gap=4)   # TypeError — unexpected keyword argument

Expected behaviour

DivHStacked(A, B, gap=4)   # renders with class "gap-4" applied
DivVStacked(A, B, gap=2)   # renders with class "gap-2" applied

Current workaround

Downstream code maintains wrapper components solely to translate gap=int into the corresponding Tailwind class:

def DivHStacked(*c, gap: int = 2, cls: str = "", **kwargs):
    classes = [f"flex items-center gap-{gap}"]
    if cls:
        classes.append(cls)
    return Div(*c, cls=" ".join(classes), **kwargs)

These wrappers exist only because the originals don't support gap — they add no semantic value of their own.

Suggested fix

Accept an optional gap: int | None = None keyword on both DivHStacked and DivVStacked and append f"gap-{gap}" to the class list when provided.

Dominant language
Jupyter Notebook
Stars
523
Forks
33
Avg merge
1m
Merged PRs (30d)
1

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from AnswerDotAI/MonsterUI

All issues in AnswerDotAI/MonsterUI

Similar issues

More Web Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.