Skip to content

ROU-12945: Fixed wrong design time presentations - #1223

Open
os-davidlourenco wants to merge 3 commits into
ROU-12714from
ROU-12945-6
Open

ROU-12945: Fixed wrong design time presentations#1223
os-davidlourenco wants to merge 3 commits into
ROU-12714from
ROU-12945-6

Conversation

@os-davidlourenco

Copy link
Copy Markdown
Contributor

This PR is for fixing incorrect design-time (Service Studio preview) presentation of Chat Message status and Dropdown arrow positioning on ODC.

What was happening

  • In Service Studio preview, Chat Message status layout broke when an If widget container was present inside .chat-message-status, causing misaligned status icons.
  • The dropdown arrow positioning rule in the ODC icon library was targeting all dropdown containers with a select element, including Custom dropdowns, causing incorrect arrow placement for Text Only (native select) dropdowns.

What was done

  • Added Service Studio preview styles so .chat-message-status uses inline-flex when it contains a .uieditor-if-widget-container, and aligned .uieditor-if-branch-widget children vertically.
  • Narrowed the dropdown arrow selector to only target native select dropdowns (> select.dropdown-display) instead of any container with a select child.

Test Steps

  1. Open a module in Service Studio with a Chat Message pattern that uses conditional logic (If widget) inside the message status area.
  2. Verify the status icon and conditional content display inline and aligned in the design-time preview.
  3. Add a Dropdown with Option Content set to Text Only (native select) inside a form and confirm the arrow icon is vertically centered.
  4. Add a Dropdown with Option Content set to Custom and confirm the arrow positioning is not affected by this change.
  5. Run npm run build and confirm lint passes with zero errors and warnings.

Screenshots

(prefer animated gif)

Checklist

  • tested locally
  • documented the code
  • clean all warnings and errors of eslint
  • requires changes in OutSystems (if so, provide a module with changes)
  • requires new sample page in OutSystems (if so, provide a module with changes)

@os-davidlourenco
os-davidlourenco requested a review from a team as a code owner August 20, 2026 15:41
@os-davidlourenco os-davidlourenco changed the title Rou 12945 6 ROU-12945: Fixed wrong design time presentations Aug 20, 2026
@os-davidlourenco os-davidlourenco added the bug Something isn't working label Aug 20, 2026
Comment thread src/scss/01-foundations/_icon-library-odc.scss Outdated
@sonarqubecloud

Copy link
Copy Markdown

@github-actions

Copy link
Copy Markdown

🖼️ Storybook: Chromatic UI tests result: ✅ Passed

Metric Value
Visual changes 106
Errors 0
Storybook Preview
Chromatic Build View Results

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

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants