Arkadiusz Idzikowski staff commented 2 weeks ago

The changes you made in angular.json should not affect the styles in any way. These settings are only used to silence the warnings with information about the import syntax deprecation.

Do you use exactly the same syntax in both versions of the app? The import syntax is now marked as deprecated but it is still valid and you should use it to add MDB styles.

There must be a difference in the styles of those two buttons when you inspect both elements in the browser dev tools. Could you please check that and provide some more information about the problem?

allancmello premium commented 1 week ago

Hi Arkadiusz,

Nothing was changed in the migration, what was changed was the use of MDB version 8.

Only the outline buttons are problematic hover color, the other button options are normal.

Code Html:

      <div class="d-flex w-100 justify-content-center">
        <button type="button" class="btn btn-outline-warning btn-rounded" mdbRipple rippleColor="dark">
          <a class="font-weight-bold text-white sombra-dark">Seja um Parceiro</a>
        </button>
      </div>

SCSS code the button from console DevTools:

.btn-outline-warning {
--mdb-btn-bg: transparent;
--mdb-btn-color: #e4a11b;
--mdb-btn-hover-bg: rgb(253.65, 250.3, 243.6);
--mdb-btn-hover-color: rgb(216.6, 152.95, 25.65);
--mdb-btn-focus-bg: rgb(253.65, 250.3, 243.6);
--mdb-btn-focus-color: rgb(216.6, 152.95, 25.65);
--mdb-btn-active-bg: rgb(253.65, 250.3, 243.6);
--mdb-btn-active-color: rgb(205.2, 144.9, 24.3);
--mdb-btn-outline-border-color: #e4a11b;
--mdb-btn-outline-focus-border-color: rgb(182.4, 128.8, 21.6);
--mdb-btn-outline-hover-border-color: rgb(182.4, 128.8, 21.6);
border-color: var(--mdb-btn-outline-border-color);

}

allancmello premium commented 1 week ago

Arkadiusz, my last test.

I run one last test to check if the problem is with Angular, as in version 18 with mdb5, hover works without problems.

I deleted node-modules and packge-lock.json, copied all the code without changing anything to a new directory, changed packge.json from version 7.1 to v8 with the same version of Angular 18.

I cleared the npm cache and reinstalled the modules with npm i, and the same problem appeared. In other words, the problem is in mdb-angular-ui-kit-8.

In version mdb-angular-ui-kit-7.1, regardless of the Angular version, hovering for outline buttons works perfectly.

allancmello premium commented 1 week ago

Hi Arkaduisz,

This is a test with the new version of mdb-angular-ui-kit-9, with a clean app, an minimum example of MDB5 itself. And the problem persists, that said, the problem is in MDB5 and not in my project.

Follow the screens to help you understand better.

    /* You can add global styles to this file, and also import other style files */
@import "@fortawesome/fontawesome-free/css/all.css";

// Importação de variáveis padrão MDB
$tooltip-bg: #000;
$tooltip-border-radius: 0.75rem;
$tooltip-padding-x: 5px;

@import 'mdb-angular-ui-kit/assets/scss/mdb.scss';

.sombra-dark {
    text-shadow: 0.05em 0.05em 0.15em #070707;
}

.bg-home {
    background-color: #000;
    min-height: 100%;
    min-width: 100%;
}



     App.component.html:
<div class="container full-page-container bg-home">
      <div
        class="d-flex justify-content-center align-items-center"
        style="height: 100vh"
      >
        <div class="text-center">
          <img
            class="mb-4"
            src="https://mdbootstrap.com/img/logo/mdb-transparent-250px.png"
            style="width: 250px; height: 90px"
          />
          <h5 class="mb-3">
            Thank you for using our product. We're glad you're with us.
          </h5>
          <p class="mb-3" mdbTooltip="Testando mdbTooltip">MDB Team</p>
          <div class="d-grid gap-2 mt-2">
            <button type="button" class="btn btn-outline-warning mt-2" type="submit"
              data-mdb-ripple-color="dark" mdbRipple rippleColor="dark">
              <a class="font-weight-bold text-danger sombra-dark">Confirmar</a>
            </button>
          </div>
        </div>
      </div>
    </div>

It's frustrating when things don't work out. It's laborious and costly to waste hours investigating "simple" problems that shouldn't exist. I don't feel comfortable migrating from version 7.1 to version 9, as I haven't even managed to complete the migration to version 8. Anyway, I await your feedback.

allancmello premium commented 1 week ago

After many hours of late-night research, I discovered the cause of the bugs.

In Angular 20 with Zoneless (and not zone.js), the components don't behave as they should.Components that depend on the "BrowserAnimations" module in NgModules mode and "provideAnimations" in Standalone mode exhibit some kind of unexpected behavior.

In both modes (Standalone/NgModules), the use of animations conceptually in previous versions is deprecated, so components with MDB5 animations, such as the Tooltip and buttons (btn-outline), don't work.

However, in an Angular 20 app using zone.js, even though they're marked as deprecated, the components "work," despite anomalies, such as the "btn-outline" button.

Remember when you asked me if this only happens in Standalone mode?

It happens in both modes, but with different behaviors due to the declaration of the "Animations" module and whether or not Zoneless is used.

Arkadiusz, I hope this can help you find a solution for using MDB5 with Zoneless and the deprecated animation mode in Angular 17 above.

allancmello premium commented 1 week ago

Arkadiusz,

Exactly that!

When removing "provideZonelessChangeDetection()" and using zone.js (import zone.js) the "Tooltip" component started working again, but the "btn-outline" button still has the "hover" anomaly when hovering over it.

I hope I helped.

Arkadiusz Idzikowski staff commented 1 week ago

In case of any problems with Angular change detection we recommend to try to use the change detection with Zone.js as some MDB components may still rely on the updates provided by this library to update the component state. The same goes for the provideAnimations or BrowserAnimationsModule. These modules are deprecated now but they are still available in Angular v20.

As for the button animation issues, I think they are directly related to styles and no other settings should matter here, because this component does not use any JavaScript code.

If I understand correctly, you are using some custom styles, because the button visible in the attached image looks slightly different than the default MDB oultine button (please correct me if I'm wrong). Perhaps due to minor style changes in newer MDB versions, your custom styles don't work the same as in version 7.

In this case please try to: 1. Create a new Angular application and configure MDB Angular library 2. Add a default MDB oultine button without any modifications 3. Try to gradually add your own custom styles related to changing the button's appearance

allancmello premium commented 5 days ago

Hey Arcadiusz,

Did you see the example I sent you of MDB 5 itself? It's the pure example that comes without any of my custom CSS.Therefore, the hover issue with the outline button is in the component's CSS.I did exactly what you asked two days ago, using a clean example from mdb-angular-ui-kit-9.

Search here and above for the message from two days ago containing:

"This is a test with the new version of mdb-angular-ui-kit-9, with a clean app, an minimum example of MDB5 itself. And the problem persists, that said, the problem is in MDB5 and not in my project."

Arkadiusz Idzikowski staff commented 4 days ago

I saw the examples you linked earlier, but based on the screenshot from version 7, I compared components in different versions using a light background, which made the problem less visible.

You're right, I apologize for the confusion. This problem is caused by a change in the MDB styles we introduced in version 8 to adapt the components to the new theming system. Since this version, outline buttons have an additional style on the hover that adds a light background.

To fix this problem while using a custom colored background in v8 or v9, you would need to either remove the additional background color on the button or adjust it to your needs. Please see my answer to learn how to easily override this value.