[Do NOT Merge] Mini editor widget - #680
Conversation
The Spectrum wrapper layer (createExpress* factories, loaders, theme util, override styles) is already consumed by non-color code (font-generator, swp-demo), so its home under color-shared/ was a misnomer. Move it to a neutral scripts/shared/spectrum/ so both the color blocks and other widgets import it from one shared location. Path-only refactor — no behavior change: - git mv scripts/color-shared/spectrum -> scripts/shared/spectrum (and mirror the test dir) - update external consumers (color-* blocks, font-generator, swp-demo, color-swatch-rail) and internal color-shared consumers to the new path - fix the moved components' back-references to color-shared/utils - update .eslintrc ignore pattern Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
A configurable in-page editing surface (Figma: Discover Pages -> Mini Editor, CCEX-306248) built on the shared Express Spectrum wrappers: - right-aligned top action bar (Share / Edit / Download) - center generic content slot with optional prev/next nav pills - bottom control bar: single-select font toggle group + circular background swatches, separated by a divider No dark-mode toggle by design. All labels come from config; well-known action ids get default icons. Widget-scoped CSS overrides match the spec (outlined Share pill, white elevated selected font tile, circular swatches with accent ring). Includes README + standalone demo page. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
A two-column hero based on ax-marquee-dynamic-hero: authored content (heading, sub-copy, CTA, optional logo) on the left; the mini-editor widget on the right. The authored image sits in the widget's preview canvas and the user recolors the canvas background behind it via background swatches. Top Share/Edit/Download actions are shown (visual only); no font toggles. Labels come from placeholders (replaceKeyArray); the background palette is baked in for now. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Bundle the demo cupcake PNG and use it as the editor preview instead of an authored image (DA image upload wasn't working); target the block's content/media cells by index so layout is robust. - Constrain the editor panel width (max 380px) and its preview image height so the authored text content stays the left-hand hero and the editor is a supporting panel on the right, not center stage. - Widget: pin slotted action-bar icons to a uniform 20px so the share/edit/download icons no longer render at mismatched sizes. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Normalize action-icon glyph sizes: the S2 share/download icons carry built-in padding (20px glyph in a 32 viewBox), so render them at 26px vs the tighter 18px edit icon so all three read at the same visual size (fixes the download icon looking too small). - Capitalize the Share label for consistent casing regardless of the placeholder value. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Overlay two editable text bars ("Happy Birthday" and "From ___ To ___")
on the preview image's pill bars; both are contenteditable so the user
can type their own greeting/names. Build the preview as a positioned
container (image + absolutely-positioned bars) passed as widget content.
- Enlarge the padded S2 share/download icons (separate per-action rules)
so the download glyph is no longer tiny and all three read consistently.
- Enlarge action buttons to 40px and vertically center the Share label.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Replace the two generic editable bars with the target card layout:
- a large editable "Happy Birthday" display title (brown italic serif)
in the open area above the pills
- FROM / TO fields on the two pill bars: a fixed label ("FROM :" / "TO:")
plus an editable value the user fills with names
All three regions are contenteditable so the user can edit the greeting
and names. Positions are tuned to the bundled cupcake image.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
sp-action-button hard-caps its slotted icon width at 20px, and the S2 download glyph fills only ~50% of its viewBox, so it rendered tiny next to the edit pencil. Scale the download glyph up visually (transform) so all three action icons read at a consistent size. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The FROM/TO fields sat slightly above the image's pill bars; shift both down (~1.4%) so the text is vertically centered on the pills. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The 30px share icon was taller than the label line and pushed "Share" above center. Keep the share icon at its 20px layout box (so it no longer skews the row) and scale the glyph up visually instead, matching the download treatment. Label now centers within the pill. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Clicking Share, Edit, or Download now opens the target Adobe Express project with the current editor state captured as query params, read live at click time: - action = share | edit | download - title = the "Happy Birthday" text - from / to = the FROM/TO field values - bg = the selected background color (hex) The base project URL keeps its category=search param; the params are appended. Reading these params is handled in a separate codebase. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Prep for the project-x "discover editor" entry feature: gate with referrer=express-discover and namespace the payload (axme_action, axme_title, axme_from, axme_to, axme_bg) so it won't collide with the reserved from/action routing params on the Express side. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Remaining comments which cannot be posted as a review comment to avoid GitHub Rate Limit
eslint
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
There was a problem hiding this comment.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
There was a problem hiding this comment.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
There was a problem hiding this comment.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
There was a problem hiding this comment.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
There was a problem hiding this comment.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
There was a problem hiding this comment.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
There was a problem hiding this comment.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
There was a problem hiding this comment.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
There was a problem hiding this comment.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
There was a problem hiding this comment.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
1 participant
Summary
Briefly describe the features or fixes introduced in this PR.
Jira Ticket
Resolves: MWPW-NUMBER
Test URLs
Verification Steps
Potential Regressions
Additional Notes
(If applicable) Add context, related PRs, or known issues here.