feat: align button

[sharmadhiraj86]

Fixes #1940

• This PR contains CSS changes
• This PR does not contain CSS changes

Description

The proposed changes align the button to the center in the case of loading button .

Notes

Screenshots

Checklist

• I verify the build is in a non-broken state
• I verify all changes are within scope of the linked issue

• I regenerated all CSS files under dist folder
• I tested the UI in all supported browsers
• I did a visual regression check of the components impacted by doing a Percy build and approved the build
• I tested the UI in dark mode and RTL mode
• I added/updated/removed Storybook coverage as appropriate

[agliga]

Thanks for you contribution
Couple of issues:

First you shouldn't be modifing the dist files. Those are auto generated. You should modify the src less files and then run npm run build to generate the dist files.
Second, that will be modifying any form buttons as well. This will break other non loading components.
Third, can you add a storybook example for this if there isn't one?

Fianlly please target 15.3.0 branch.

[sharmadhiraj86]

• I have made the corresponding changes in the src file and removed the code that I have added previously in the dist files.

• Can you let me know where all I need to validate if there is any changes.

• Can you let me know how I can add a story book example. @agliga

[agliga]

• I have made the corresponding changes in the src file and removed the code that I have added previously in the dist files.

So you need to add the dist files too. But you need to run npm run build so that it will generate the dist files. Please run that so that it compiles correctly.

• Can you let me know where all I need to validate if there is any changes.

Yes, please launch the page using npm start and npm run storybook in order to see the changes

• Can you let me know how I can add a story book example. @agliga

Sure, you should edit the button.stories.js file and add an example of what needs to be changed.

FYI, this change is breaking our existing code. If you want to fix loading button, you need to target that specifically. Start with the usecase in storybook. Build it out and then fix for that only.

If I have a 400px form button, this is what it should look like:

With your change, it looks like this:

So you need to make sure it is fixing the issue but not breaking other components.

[agliga]

Closing, we have a fix for this already. Thanks for the contribution anyways.
#1960