search

adobe / aem-react-editable-components

SPA React Editable Components for Adobe Experience Manager
Apache License 2.0
61 stars 28 forks source link

[bug] Stylesystem broken after SPA 2.0 Upgrade #195

Closed friendlymahi closed 1 year ago

friendlymahi commented 1 year ago

Describe the bug As part of React Editable Comps v1.x we updated EditableComponent to include appliedCssClassNames prop, which shall be passed by the container to EditableComponent which shall wrap the mapped component with div tag that contains className values with inclusion of values from appliedCssClassNames. Due to this feature, stylesystem worked as desired since v1.1.7. This feature is broken with SPA 2.0

Package version v2.0.0 or above

To Reproduce Steps to reproduce the behavior:

  1. Use WKND tutorial to build AEM SPA with React Editable Components v1.x
  2. Upgrade React Editable Comps version to v2.0.5 and refactor the code as stated in README.md of https://github.com/adobe/aem-react-editable-components/tree/master/src/components
  3. Enable styles on one of the component
  4. Apply them to the component
  5. Styles doesn't get injected into the component when rendered by container or responsivegrid

For quick reference you may use the branches below to replicate the issue as shown in screenshots below.

SPA 1.x (React Editable Comps v1.1.11)

Code to deploy - https://github.com/friendlymahi/aem-guides-wknd-spa/tree/React/latest Text component has background that you can choose and you shall see skyblue color class appended

Inside AEM Editor:

Screenshot 2023-07-26 at 11 07 21 PM

View as Published Experience:

Screenshot 2023-07-26 at 11 47 31 PM

SPA 2.x (React Editable Comps v2.0.5)

Code to deploy - https://github.com/friendlymahi/aem-guides-wknd-spa/tree/React/2.0.0 Even though this branch is a fork of original repo from adobe, changes done for text component policy, etc are cascaded/merged from latest branch of the fork into this. Now simply redeploy the code from this branch

Inside AEM Editor:

Screenshot 2023-07-26 at 11 26 55 PM

View as Published Experience:

If you notice React Dev Comps extension, appliedCssClassNames is exposed in model prop and not directly passed as a prop as it was done in 1.x

Screenshot 2023-07-26 at 11 46 19 PM

Expected behavior Along with other base classes like responsive grid classes, custom styles/appliedCssClassNames shall be appended so the behavior is consistent.