input-group-addon replaced by input-group-prepend and -append

[Erwane]

This is a (multiple allowed):

• bug

• enhancement

• question

• CakePHP Version: 3.7.4

• Plugin Version/Branch: dev-4.0.1-alpha, updated today

• Bootstrap 4.3.1 SASS

What you did

echo $this->Form->control('username', [
    'label' => false,
    'placeholder' => __("email"),
    'prepend' => '@',
]); ?>

What happened

<div class="form-group text">
    <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" name="username" class="form-control" placeholder="email" id="username" />
    </div>
</div>

What you expected to happen

<div class="form-group text">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text">@</span>
        </div>
        <input type="text" name="username" class="form-control" placeholder="email" id="username">
    </div>
</div>

Related to bootstrap 4 documentation :
https://getbootstrap.com/docs/4.0/migration/#input-groups

Thanks for you amazing work ;)

[Erwane]

Working on a PR

[Erwane]

PR submitted and all tests passed ;)

[gfx3]

@Erwane after your commits it stopped working with older version of Bootstrap. We're using version 3.3.6 in our backend application... Have you tested it with 3.x?

[Holt59]

@gfx3 This has been merged on the 4.0.1-alpha branch which is dedicated to Bootstrap 4, so this should not affect you. Which branch / version are you using?

[gfx3]

@Holt59 you're correct - we're using 4.0.1-alpha because of use Bootstrap 4.x on Frontend of application, however we still got old version of Bootstrap on our backend 3.3.6 as I mentioned. Everything worked fine before and after I came back to project it turned out that addon classes changed by passing $type variable. We have to set it to version #a1973880a474db35fafb4ea76d886a17c70576eb to make it work as it was...

[Erwane]

It's not compatible with 3.x :(

[Holt59]

@gfx3 I cannot enforce compatibility with Bootstrap 3.x in the 4.0.1, it's not its goal, and there are plenty of components that are incompatible (panel -> card).

You should be able to use both versions of the helper by aliasing them (e.g., Bootstrap3 and Bootstrap4) and then load the one you need depending on where you are.

[gfx3]

@Holt59, good point. Thanks for hint. :)