vue-formulate icon indicating copy to clipboard operation
vue-formulate copied to clipboard

CSS classmap/prop for repeatable group add button

Open cdowdy opened this issue 3 years ago • 1 comments

currently I see (and I very well could have overlooked and if so I apologize just point the right way and I'll close :) ) no way to apply a class to a button in a repeatable group.

You can get around this by registering and creating a slot component or a scoped slot but that's a lot of "overhead" to apply a class in my opinion.

the input and element class keys wont apply to the button element itself (ie. the <button type="button" ... > html tag and the groupAddMore prop applies to the wrapper.

<div class="formulate-input-group-add-more">
    <div data-classification="button" data-type="button" class="formulate-input">
        <div class="formulate-input-wrapper">
            <div data-type="button" class="formulate-input-element formulate-input-element--button">
                <button type="button" data-minor="" data-ghost="" id="formulate-global-223"> <!-- would like to add a class here -->
                    <span class="formulate-input-element--button--label">Add A Custom Ingredient</span>
                </button>
            </div>
        </div>
    </div>
</div>

Essentially I was looking for something along the lines of addButton-class type prop that could sit along side the add-label prop which would directly apply to the actual button tag.

<button type="button" data-minor="" data-ghost="" id="formulate-global-id" class="addButton-class-prop"></button>

cdowdy avatar Aug 16 '21 18:08 cdowdy

seems reasonable to me 👍

justin-schroeder avatar Aug 16 '21 18:08 justin-schroeder