fix: update empty states to match design system

[barinali]

Relates to camunda/camunda-modeler#5781

Proposed Changes

This pull request aims to bring consistency in empty states between panels.

Beware that the empty state content is vertically centered in its white space. So, alignment consistency between panels is not expected in this case. We have also considered not vertically centering it, but giving a fixed top space/gap, which would have to be maintained as panels are developed and hence, an overhead. So we did not favor it for now.

While Figma asks for 12px font-size, I have found it pretty small and went ahead with 14px for now.

npx @bpmn-io/sr camunda/camunda-modeler -l bpmn-io/variable-outline#issue-5781-update-empty-state -l camunda/task-testing#issue-5781-update-empty-states

Before

After

Checklist

Ensure you provide everything we need to review your contribution:

• Your contribution meets the definition of done
• Any new additions or modifications are consistent with the existing UI and UX patterns
• Pull request description establishes context:
  • Link to related issue(s), i.e. Closes {LINK_TO_ISSUE} or Related to {LINK_TO_ISSUE}
  • Brief textual description of the changes
  • Screenshots or short videos showing UI/UX changes
  • Steps to try out, i.e. using the @bpmn-io/sr tool

[Copilot]

Pull request overview

This PR aligns Task Testing panel and Output panel empty states with the design system by updating empty-state structure, styling, and selection messaging.

Changes:

• Update useSelectedElement to return a structured selectionInfo object (optional title + message) instead of a plain message string.
• Refresh empty-state markup and SCSS for Task Testing and Output to match the design system (icons, typography, spacing, centering).
• Adjust tests and changelog entry to reflect the updated empty-state behavior/content.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
lib/hooks/useSelectedElement.js	Changes hook return type to structured selectionInfo for richer empty-state messaging.
lib/components/TaskTesting/TaskTesting.js	Renders updated empty state using icon wrapper + optional title + description text.
lib/components/Output/Output.jsx	Updates Output empty-state markup to match new structure/typography expectations.
lib/style/style.scss	Adds/adjusts empty-state styling (layout, typography, icon sizing) and flex behavior.
test/hooks/useSelectedElement.spec.js	Updates expectations for selectionInfo object shape and messaging.
test/components/TaskTesting/TaskTesting.spec.js	Updates render assertion to the new empty-state message text.
CHANGELOG.md	Adds unreleased changelog entry for the empty-state update.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[AlekseyManetov]

Overall looks good! Please address Copilot comment and we can merge it.