swar-mukh commented 2 years ago

:beetle: Bug report

Describe the bug

Not sure if this affects other components, but am going to report for ly-button component. When a button marked with ly-button directive is placed inside a div, it works fine, but if placed inside a grid, doesn't show any styling, at all.

Minimal Reproduction

Following is the code:

<div>
  <button ly-button bg="primary">Add Member</button> <!-- Line 1 -->
  <ly-paper lyP="1em" elevation="2" lyWidth="400">
    <h3 lyTyp="title">My App</h3>
    <div lyTyp="body1" lyMt="2">
      <ly-grid container spacing="16">
        <ly-grid item col="8">
          <ly-field lyWidth="1">
            <ly-label>Member</ly-label>
            <input lyNativeControl value="John Smith" />
          </ly-field>
        </ly-grid>
        <ly-grid item col>
          <button ly-button raised bg="primary">Add Member</button> <!-- Line 2 -->
        </ly-grid>
      </ly-grid>
    </div>
  </ly-paper>
</div>

Steps to reproduce the behavior:

If Line 1 is deleted/commented, button at Line 2 doesn't exhibit any styling (Image A below)
If both Line 1 and Line 2 is kept, both buttons exhibit proper styling (Image B below)
If Line 2 is deleted/commented, button at Line 1 exhibits proper styling

Exception or Error

Screenshots

Which versions of Angular, Alyle UI, OS, TypeScript, browsers are affected?

Alyle UI Version: v13.2.2

Angular Version:


     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 14.1.2
Node: 14.20.0
Package Manager: yarn 1.22.5
OS: linux x64

Angular: 14.1.2
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1401.2
@angular-devkit/build-angular   14.1.2
@angular-devkit/core            14.1.2
@angular-devkit/schematics      14.1.2
@schematics/angular             14.1.2
ng-packagr                      14.1.0
rxjs                            7.5.6
typescript                      4.7.4

Enlcxx commented 2 years ago

Hi @swarmukhdefault, I have not been able to reproduce the bug. The bug occurs when a button is first created inside a <ly-grid item>??, or occurs anywhere? StackBlitz From what I see there is a bug initializing some styles for the buttons at https://github.com/A-l-y-l-e/Alyle-UI/blob/master/src/lib/src/common/build-common-behaviors.ts

But i can't reproduce it to fix it. Can you send me a .zip of the bug it can be very helpful.