Skip to content

Clean up storybook stories design and UX#3828

Open
idaiv wants to merge 6 commits into
2026.xfrom
stories-update
Open

Clean up storybook stories design and UX#3828
idaiv wants to merge 6 commits into
2026.xfrom
stories-update

Conversation

@idaiv

@idaiv idaiv commented Jun 29, 2026

Copy link
Copy Markdown
Contributor

Changes in this pull request

Resolves #https://github.com/pimcore/product-management/issues/1281

Additional info

Stories — Removed / Cleaned Up

  • Image — removed WithPreview story variant
  • ImagePreview — deleted story file entirely
  • ImageZoom — deleted story file entirely
  • Empty — deleted story file entirely
  • Media folder — deleted all 4 Pimcore-specific media stories (PimcoreImage, PimcoreDocument, PimcoreVideo, PimcoreAudio) and the folder
  • Toolbar — removed LeftAligned and RightAligned story variants
  • Form — removed HorizontalForm story variant

Stories — Reorganised

  • InputModal — moved from Components/Data Entry  Components/Feedback, matching all other modals

Stories — New / Updated

  • ButtonGroup — added ImageZoomExample story variant (replaces the standalone ImageZoom story)
  • Progress — added CircularSuccess and CircularReject variants using custom Pimcore icons (check, close) at 38×38px with colorSuccess/colorError tokens
  • Progress — added Scores variant using DQM-inspired horizontal progress bars with the correct Studio UI default color palette (A–D grades)
  • InputModal  Input and InputWithInitialValue variants: primary button renamed to Confirm
  • InputModal  Confirmation variant: Pimcore alert icon at 22×22px, primary = Confirm, secondary = Discard

Icon Library — New Icons Added

Four new SVG icons registered in the icon library (index.ts):

Name | File -- | -- close-outline | close-outline.inline.svg info-outline | info-outline.inline.svg question-mark-outline | question-mark-outline.inline.svg check | check.inline.svg

check.inline.svg uses fill="currentColor" so it correctly inherits color from CSS.


Alert Modal — Icons & Button Text

  • info → Pimcore info icon
  • error → Pimcore close-filled icon
  • warn → Pimcore alert icon
  • success → Pimcore checkmark icon
  • All types now show OK as the button label (alert-modal.ok-text)

Translations — 7 Language Files Updated

Added two new keys across en, de, es, fr, it, no, sv:

  • success: — translated per language
  • alert-modal.ok-text: OK — same in all languages

idaiv and others added 2 commits June 29, 2026 13:43
Stories:
- Remove WithPreview variant from Image stories
- Delete ImagePreview, ImageZoom, Empty and Media (PimcoreImage/Audio/Video/Document) stories
- Move ImageZoom as ImageZoomExample variant into ButtonGroup stories
- Remove LeftAligned and RightAligned variants from Toolbar stories
- Remove HorizontalForm variant from Form stories
- Move InputModal stories from Data Entry to Feedback category
- Add CircularSuccess/Reject custom icons and Scores variant to Progress stories

Icons:
- Add close-outline, info-outline, question-mark-outline, check SVGs and register in icon library

AlertModal:
- Replace Ant Design default icons with Pimcore icons per type (info/error/warn/success)
- Add OK button text via alert-modal.ok-text translation key

Translations (en/de/es/fr/it/no/sv):
- Add missing success key
- Add alert-modal.ok-text: OK

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@idaiv idaiv requested a review from markus-moser June 29, 2026 14:35
@sonarqubecloud

Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant