issues/195 - Stylesystem Bugfix : Code refactored as per new design

[friendlymahi]

Description

Existing code (v2.0.5) assumes appliedCssClassNames is available as a prop when obtaining component mapping. But with SPA 2.0 design the prop will be available only to children under EditableComponent. In addition, while authoring, when we change styles, model is updated, but EditableComponent doesn't recieve the new style info as our code is bound to model passed from parent e.g. container. With these inferences in mind, made changes below

• Accessing appliedCssClassNames via model prop as it is not available
• Enable applying styles dynamically while authoring
• Rely on model state for re-rendering with new classes while authoring

package.json with new version can be updated upon confirmation from approvers. Additional unit tests can be added if approvers deem necessary

Related Issue

195

Motivation and Context

Same as description, as we all understand the power of stylesystem and keeping this feature supported is critical for us to upgrade to SPA 2.0 where one may choose to do a hybrid of SPA implementations e.g an entire help section coming from AEM as-is and other pages from React app share some sections that are editable via AEM

How Has This Been Tested?

• Confirmed that the changes reflect when using Responsive Grid component and a normal container component covering scenarios of altering styles on container based comps and normal comps
• EditableComponent unit test has been modified with new structure of the data

Screenshots (if appropriate):

• Issue link can be visited before this fix
• After the PR is merged below is the behavior for the usecase explained in issue.

Inside AEM Editor with Changing Styles

Changed background of text from Skyblue to Gray

View as Published Experience

Types of changes

• [X] Bug fix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• [X] I have signed the Adobe Open Source CLA.
• [X] My code follows the code style of this project.
• [X] My change requires a change to the documentation.
• [ ] I have updated the documentation accordingly.
• [X] I have read the CONTRIBUTING document.
• [X] I have added tests to cover my changes.
• [X] All new and existing tests passed.

[codecov[bot]]

Codecov Report

Merging #196 (0b99c65) into master (c2deb32) will not change coverage. The diff coverage is 100.00%.

@@           Coverage Diff           @@
##           master     #196   +/-   ##
=======================================
  Coverage   98.88%   98.88%           
=======================================
  Files          14       14           
  Lines         180      180           
  Branches       78       78           
=======================================
  Hits          178      178           
  Misses          2        2           

Files Changed	Coverage Δ
src/core/EditableComponent.tsx	100.00% <100.00%> (ø)

:mega: We’re building smart automated test selection to slash your CI/CD build times. Learn more

[sonarcloud[bot]]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

0.0% Coverage
0.0% Duplication

[friendlymahi]

@sharanyavinod , @CezCz, @habansal , @niekraaijmakers , @vladbailescu - Requesting your help for moving this fix. Advise me if its not a valid usecase or if you want me to make any further changes, Thanks !

[friendlymahi]

Hello. Good Morning to you ! Can someone please share some feedback on this PR? Thanks !

[friendlymahi]

@sharanyavinod - Any feedback on this PR?

[friendlymahi]

Thanks @sharanyavinod . Can you please merge the PR in this case?

[friendlymahi]

Hello. Hope you are doing well. Any update on this request? Thanks

[github-actions[bot]]

:tada: This PR is included in version 2.1.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: