Responsive 'LgPaddingDirective' and 'LgMarginDirective' don't work all the time as expected, when used with more than one breakpoint

[AlexandruHoisan]

Prerequisites

• I have checked the open Issues to see if this has already been raised
• I have searched the closed Issues to see if a similar bug has been fixed in the past

Description

This bug affects:

• GitHub workflows
• Component
• Config
• Performance
• Tooling / Frameworks
• Documentation
• Something else
  This bug affect 2 Directives

Steps to Reproduce

1. Use the lgMargin or the lgPadding directives, with responsive breakpoints and more than one breakpoint.
   Eg.: [lgMarginRight]="{ xs: 'none', md: 'xs', lg: 'md' }"
2. Refresh the page a couple of times and you'll see that sometimes it wont apply them correctly:
   Eg: it sets the 'xs' one on 'md' or 'lg' screens.

Expected behaviour:

Should set the correct margins and paddings based on the given breakpoints and the viewport.

Actual behaviour:

Sometimes sets the wrong margins and paddings based on the given breakpoints and the viewport.

Recurrence frequency:

• Occurs every time
• Occurs intermittently
• Unsure

Package version

• This problem started happening recently
• This problem started happening a while ago
• Unsure

Configuration and environment

• This pertains to local development
• This pertains to the CI
• This pertains to Storybook

Additional Information

I first encountered this when I had a combination of Grid directives alongside those padding and margin directives, and we thought initially that there is an issue with using those together, but later on we saw the same behaviour on some elements that were not using the grid.

If the Directive is used with only one breakpoint it works fine, but the issue appears once you have more than one breakpoint, and it's intermitent.

As a workaround we applied those styles directly in the CSS using canopy breakpoints and spacing values.

Attached are some screen shots with the issue:

[pauleustice]

@ashB100 to investigate further

[taraculpin]

I'm able to reproduce this every time when running the mock server and using partyId BBS77KXY0. In the below screenshot I've added this code to the two quick actions and removed the hardcoded css from the psp product card stylesheet:

[lgPaddingTop]="{ xs: 'none', md: 'none', lg: 'md' }"
[lgMarginTop]="{ xs: 'none', md: 'xs', lg: 'lg' }"

However, as you can see in the screenshot, it's displaying the margin and padding for a md screen instead of lg. I've attempted to recreate this using the same steps with a retail protection party id and other annuities party ids as well as when running canopy locally but in those cases they are all picking up that it's a lg screensize correctly.

I also had a look at the code in the DynamicStyleService as suggested by Ashnita, but couldn't see anything obvious that would be causing this. Might need someone else to take a look.

[pauleustice]

@ashB100 to investigate further when she has time. Thanks Ashnita!