feat: Add phone-question-mark icon to IconElement in ui-kit

[gabriellsh]

Proposed changes (including videos or screenshots)

Issue(s)

VGA-118

Steps to test or reproduce

Further comments

Summary by CodeRabbit

• New Features
  • Added 'phone-question-mark' icon to the available icon set with warning variant support
  • Icon display now supports both framed and non-framed presentation modes for improved visual flexibility
  • Enhanced info card component with secondary background styling option

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[dionisio-bot]

Looks like this PR is ready to merge! 🎉
If you have any trouble, please check the PR guidelines

[changeset-bot]

⚠️ No Changeset found

Latest commit: 7f900a3

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

Walkthrough

This change adds support for the 'phone-question-mark' icon by uncommenting it in the AvailableIcons type union. The infoCard story payloads are updated to demonstrate this new icon in both framed and non-framed variants, and one row's background is changed from default to secondary.

Changes

Cohort / File(s)	Summary
Type Definitions packages/ui-kit/src/blocks/elements/IconElement.ts	Expands AvailableIcons union to include 'phone-question-mark' as a supported icon option by removing it from a commented state
Story Payloads packages/fuselage-ui-kit/src/stories/payloads/infoCard.ts	Adds framed warning variant of phone-question-mark icon to first row, changes second row background to secondary, and adds non-framed phone-question-mark variant to second row

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

• Single type option addition with no logic changes
• Story payload updates are straightforward property additions
• Key consideration: verify that 'phone-question-mark' icon is properly implemented in the icon system (likely addressed by related PR #37726)

Possibly related PRs

• feat: Add framed optional property for IconElement ui-kit component #37726: Introduces the framed property and FrameableIconElement that this PR leverages in story payloads
• feat: Introduce info_card, icon and icon_button to ui-kit  #37398: Prior modifications to the same IconElement type and infoCard payload files that this PR extends

Suggested labels

stat: ready to merge, stat: QA assured

Suggested reviewers

• tassoevan

Poem

🐰 A question mark by phone, now framed so bright,
The icon emerges from comment's twilight,
Stories dance with secondary rows anew,
UI kit blooms with options tried and true! 📞✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title directly matches the main change in the changeset: adding the 'phone-question-mark' icon to IconElement's AvailableIcons union and using it in story payloads.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/iconElementIcon

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 65214b6 and 0460a39.

📒 Files selected for processing (2)

• packages/fuselage-ui-kit/src/stories/payloads/infoCard.ts (1 hunks)
• packages/ui-kit/src/blocks/elements/IconElement.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx,js}

📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)

**/*.{ts,tsx,js}: Write concise, technical TypeScript/JavaScript with accurate typing in Playwright tests
Avoid code comments in the implementation

Files:

• packages/ui-kit/src/blocks/elements/IconElement.ts
• packages/fuselage-ui-kit/src/stories/payloads/infoCard.ts

🧠 Learnings (1)

📚 Learning: 2025-11-17T15:07:13.273Z

Learnt from: gabriellsh
Repo: RocketChat/Rocket.Chat PR: 37398
File: packages/fuselage-ui-kit/src/surfaces/FuselageSurfaceRenderer.tsx:357-363
Timestamp: 2025-11-17T15:07:13.273Z
Learning: In packages/fuselage-ui-kit/src/surfaces/FuselageSurfaceRenderer.tsx, IconElement is a presentational, non-actionable element that does not require wrapping in AppIdProvider, similar to plain_text and mrkdwn renderers. Only actionable elements (those with actions, actionId, or interactive behavior) should be wrapped in AppIdProvider.

Applied to files:

• packages/ui-kit/src/blocks/elements/IconElement.ts
• packages/fuselage-ui-kit/src/stories/payloads/infoCard.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: CodeQL-Build

🔇 Additional comments (2)

packages/fuselage-ui-kit/src/stories/payloads/infoCard.ts (2)

58-58: LGTM! New icon usage is consistent.

The phone-question-mark icon is properly demonstrated in both framed (line 58) and non-framed (line 68) variants with appropriate variant styling. This aligns well with the updated type definition.

Also applies to: 68-68

---

63-63: Background changed to 'secondary'.

The background color was changed from 'default' to 'secondary' for the non-framed icons row. This appears intentional to provide visual contrast for demonstration purposes.

[github-actions]

📦 Docker Image Size Report

📈 Changes

Service	Current	Baseline	Change	Percent
sum of all images	1.2GiB	1.2GiB	+12MiB
rocketchat	358MiB	347MiB	+12MiB
omnichannel-transcript-service	132MiB	132MiB	-1.1KiB
queue-worker-service	132MiB	132MiB	-724B
ddp-streamer-service	126MiB	126MiB	+2.6KiB
account-service	113MiB	113MiB	+898B
authorization-service	111MiB	111MiB	+320B
stream-hub-service	110MiB	110MiB	+58B
presence-service	110MiB	110MiB	+83B

📊 Historical Trend

---
config:
  theme: "dark"
  xyChart:
    width: 900
    height: 400
---
xychart
  title "Image Size Evolution by Service (Last 30 Days + This PR)"
  x-axis ["11/15 22:28", "11/16 01:28", "11/17 23:50", "11/18 22:53", "11/19 23:02", "11/21 16:49", "11/24 17:34", "11/27 22:32", "11/28 19:05", "12/01 23:01", "12/02 21:57", "12/03 21:00", "12/04 18:17", "12/05 21:56", "12/08 20:15", "12/09 22:17", "12/10 23:26", "12/11 21:56", "12/12 22:45", "12/13 01:34", "12/15 22:31", "12/16 22:18", "12/17 21:04", "12/18 23:12", "12/19 14:46", "12/19 15:41 (PR)"]
  y-axis "Size (GB)" 0 --> 0.5
  line "account-service" [0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11]
  line "authorization-service" [0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11]
  line "ddp-streamer-service" [0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12]
  line "omnichannel-transcript-service" [0.14, 0.14, 0.14, 0.14, 0.14, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13]
  line "presence-service" [0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11]
  line "queue-worker-service" [0.14, 0.14, 0.14, 0.14, 0.14, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13]
  line "rocketchat" [0.36, 0.36, 0.35, 0.35, 0.35, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.35]
  line "stream-hub-service" [0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11]

Loading

Statistics (last 25 days):

• 📊 Average: 1.5GiB
• ⬇️ Minimum: 1.2GiB
• ⬆️ Maximum: 1.6GiB
• 🎯 Current PR: 1.2GiB

ℹ️ About this report

This report compares Docker image sizes from this build against the develop baseline.

• Tag: pr-37865
• Baseline: develop
• Timestamp: 2025-12-19 15:41:41 UTC
• Historical data points: 25

---

Updated: Fri, 19 Dec 2025 15:41:42 GMT

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 67.70%. Comparing base (17496df) to head (7f900a3).
⚠️ Report is 1 commits behind head on develop.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #37865      +/-   ##
===========================================
+ Coverage    67.68%   67.70%   +0.01%     
===========================================
  Files         3474     3474              
  Lines       113852   113852              
  Branches     20938    20938              
===========================================
+ Hits         77065    77084      +19     
+ Misses       34604    34585      -19     
  Partials      2183     2183              

Flag	Coverage Δ
e2e	57.18% <ø> (+0.03%)	⬆️
e2e-api	44.04% <ø> (+0.05%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.