WorkRoot/WRNexusJS
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): component redesign pass and fixes, release ui 0.8.87

Browse Source 
Redesign
- Shared field foundation rules (duplicated across 15 form components and
  emitted globally) are now identical everywhere, so later copies no longer
  silently override earlier redesigns.
- Drawn checkbox and radio controls, white switch thumbs (the thumb was the
  text colour, a black blob in light mode), recessed field wells, keycap
  actions in Modal, Drawer, Popover, Toaster, Pagination, Stepper, DataTable.
- Menus (Dropdown, ContextMenu, Popover, Select dropdown, Navbar panels) share
  one flat raised panel with neutral hover rows and mono section labels.
- Alerts with an accent rail and icon chip; card headers without the grey
  band; accordion, collapse, list, list group, timeline, stats, metrics,
  chat, skeleton, avatar group, clipboard, splitter, section, sidebar,
  navbar and upload progress restyled.
- Chart rebuilt: nice y-axis ticks, gridlines, rounded bars, line and area
  modes, hover tooltips, hidden series leave the scale.

Fixes
- Checkbox and radio labels toggle their input again (empty for="" broke it).
- TimePicker kept every clicked time pressed; only the chosen hour and
  minute are pressed now, and nothing is pressed before a value exists.
- ColorPicker hex readout now follows the picked colour.
- Disabled FileInput no longer shows the native file-input text.
- Date and time panels float instead of pushing content.
- ContextMenu opened at the pointer closes on scroll.
- Drawer left/top/bottom placements slide from their own edge again.
- Image-only Card no longer renders an empty body strip.
- Timeline supports item.time, current/upcoming states, sizes and
  compact/alternate variants; showcase demos use distinct variants.
- ChatBubble: delivery receipts (sending/sent/delivered/read/failed/error)
  and meta aligned to its bubble.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
ClintchizandClaude Opus 5.5 committed 2026-09-30 16:18:13 +05:30
1 parent 5eae6f3b3c
commit 1bed8e4b74
93 files changed
+4439 -1915
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

examples/component-showcase/app/pages/components/chat-bubble.wrn
+139 -9
View File
@@ -5,7 +5,7 @@ page ChatBubbleDetail {
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_title = ctx.url.searchParams.get("pg_title") ?? ""
state playground_description = ctx.url.searchParams.get("pg_description") ?? ""
state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"text\":\"Hi Maya, is the new dashboard ready to review?\",\"direction\":\"incoming\",\"timestamp\":\"10:24\"},{\"text\":\"Yes! I have shared the latest version with you.\",\"direction\":\"outgoing\",\"timestamp\":\"10:25\",\"status\":\"Delivered\"},{\"text\":\"Thanks, I will take a look this afternoon.\",\"direction\":\"incoming\",\"timestamp\":\"10:26\"}]")
state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"text\":\"Hi Maya, is the new dashboard ready to review?\",\"direction\":\"incoming\",\"timestamp\":\"10:24\"},{\"text\":\"Yes! I have shared the latest version with you.\",\"direction\":\"outgoing\",\"timestamp\":\"10:25\",\"receipt\":\"read\"},{\"text\":\"Thanks, I will take a look this afternoon.\",\"direction\":\"incoming\",\"timestamp\":\"10:26\"},{\"text\":\"Great. The release notes are attached too.\",\"direction\":\"outgoing\",\"timestamp\":\"10:27\",\"receipt\":\"delivered\"},{\"text\":\"One more screenshot coming up.\",\"direction\":\"outgoing\",\"timestamp\":\"10:28\",\"receipt\":\"sent\"},{\"text\":\"Uploading the final export now.\",\"direction\":\"outgoing\",\"timestamp\":\"10:29\",\"receipt\":\"sending\"},{\"text\":\"Here is the invoice PDF.\",\"direction\":\"outgoing\",\"timestamp\":\"10:30\",\"receipt\":\"failed\",\"status\":\"Not delivered\",\"actionLabel\":\"Retry\"}]")
state playground_oneSided = (ctx.url.searchParams.get("pg_oneSided") ?? "false") === "true"
state playground_showAvatars = (ctx.url.searchParams.get("pg_showAvatars") ?? "false") === "true"
state playground_showMetadata = (ctx.url.searchParams.get("pg_showMetadata") ?? "true") === "true"
@@ -48,12 +48,38 @@ page ChatBubbleDetail {
"text": "Yes! I have shared the latest version with you.",
"direction": "outgoing",
"timestamp": "10:25",
"status": "Delivered"
"receipt": "read"
<span>&#125;</span>,
<span>&#123;</span>
"text": "Thanks, I will take a look this afternoon.",
"direction": "incoming",
"timestamp": "10:26"
<span>&#125;</span>,
<span>&#123;</span>
"text": "Great. The release notes are attached too.",
"direction": "outgoing",
"timestamp": "10:27",
"receipt": "delivered"
<span>&#125;</span>,
<span>&#123;</span>
"text": "One more screenshot coming up.",
"direction": "outgoing",
"timestamp": "10:28",
"receipt": "sent"
<span>&#125;</span>,
<span>&#123;</span>
"text": "Uploading the final export now.",
"direction": "outgoing",
"timestamp": "10:29",
"receipt": "sending"
<span>&#125;</span>,
<span>&#123;</span>
"text": "Here is the invoice PDF.",
"direction": "outgoing",
"timestamp": "10:30",
"receipt": "failed",
"status": "Not delivered",
"actionLabel": "Retry"
<span>&#125;</span>
]
view <span>&#123;</span>
@@ -79,12 +105,38 @@ page ChatBubbleDetail {
"text": "Yes! I have shared the latest version with you.",
"direction": "outgoing",
"timestamp": "10:25",
"status": "Delivered"
"receipt": "read"
&#125;,
&#123;
"text": "Thanks, I will take a look this afternoon.",
"direction": "incoming",
"timestamp": "10:26"
&#125;,
&#123;
"text": "Great. The release notes are attached too.",
"direction": "outgoing",
"timestamp": "10:27",
"receipt": "delivered"
&#125;,
&#123;
"text": "One more screenshot coming up.",
"direction": "outgoing",
"timestamp": "10:28",
"receipt": "sent"
&#125;,
&#123;
"text": "Uploading the final export now.",
"direction": "outgoing",
"timestamp": "10:29",
"receipt": "sending"
&#125;,
&#123;
"text": "Here is the invoice PDF.",
"direction": "outgoing",
"timestamp": "10:30",
"receipt": "failed",
"status": "Not delivered",
"actionLabel": "Retry"
&#125;
]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-chat-bubble-oneSided"><span><strong>one Sided</strong><small>boolean</small></span><input id="playground-chat-bubble-oneSided" name="pg_oneSided" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chat-bubble-showAvatars"><span><strong>show Avatars</strong><small>boolean</small></span><input id="playground-chat-bubble-showAvatars" name="pg_showAvatars" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chat-bubble-showMetadata"><span><strong>show Metadata</strong><small>boolean</small></span><input id="playground-chat-bubble-showMetadata" name="pg_showMetadata" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-chat-bubble-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-chat-bubble-ariaLabel" name="pg_ariaLabel" type="text" value="Conversation" /></label><label class="playground-field" for="playground-chat-bubble-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-chat-bubble-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-chat-bubble-class"><span><strong>class</strong><small>string</small></span><input id="playground-chat-bubble-class" name="pg_class" type="text" value="" /></label></div>
</form>
@@ -102,7 +154,7 @@ page ChatBubbleDetail {
<div id="chat-bubble-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","status":"Delivered"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
<div class="demo-render"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","receipt":"read"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"},{"text":"Great. The release notes are attached too.","direction":"outgoing","timestamp":"10:27","receipt":"delivered"},{"text":"One more screenshot coming up.","direction":"outgoing","timestamp":"10:28","receipt":"sent"},{"text":"Uploading the final export now.","direction":"outgoing","timestamp":"10:29","receipt":"sending"},{"text":"Here is the invoice PDF.","direction":"outgoing","timestamp":"10:30","receipt":"failed","status":"Not delivered","actionLabel":"Retry"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
</div>
<section class="demo-code" aria-label="Production default usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -117,12 +169,38 @@ page ChatBubbleDetail {
"text": "Yes! I have shared the latest version with you.",
"direction": "outgoing",
"timestamp": "10:25",
"status": "Delivered"
"receipt": "read"
<span>&#125;</span>,
<span>&#123;</span>
"text": "Thanks, I will take a look this afternoon.",
"direction": "incoming",
"timestamp": "10:26"
<span>&#125;</span>,
<span>&#123;</span>
"text": "Great. The release notes are attached too.",
"direction": "outgoing",
"timestamp": "10:27",
"receipt": "delivered"
<span>&#125;</span>,
<span>&#123;</span>
"text": "One more screenshot coming up.",
"direction": "outgoing",
"timestamp": "10:28",
"receipt": "sent"
<span>&#125;</span>,
<span>&#123;</span>
"text": "Uploading the final export now.",
"direction": "outgoing",
"timestamp": "10:29",
"receipt": "sending"
<span>&#125;</span>,
<span>&#123;</span>
"text": "Here is the invoice PDF.",
"direction": "outgoing",
"timestamp": "10:30",
"receipt": "failed",
"status": "Not delivered",
"actionLabel": "Retry"
<span>&#125;</span>
]
view <span>&#123;</span>
@@ -144,7 +222,7 @@ page ChatBubbleDetail {
<div id="chat-bubble-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","status":"Delivered"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
<div class="demo-render"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","receipt":"read"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"},{"text":"Great. The release notes are attached too.","direction":"outgoing","timestamp":"10:27","receipt":"delivered"},{"text":"One more screenshot coming up.","direction":"outgoing","timestamp":"10:28","receipt":"sent"},{"text":"Uploading the final export now.","direction":"outgoing","timestamp":"10:29","receipt":"sending"},{"text":"Here is the invoice PDF.","direction":"outgoing","timestamp":"10:30","receipt":"failed","status":"Not delivered","actionLabel":"Retry"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
</div>
<section class="demo-code" aria-label="Compact application usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -159,12 +237,38 @@ page ChatBubbleDetail {
"text": "Yes! I have shared the latest version with you.",
"direction": "outgoing",
"timestamp": "10:25",
"status": "Delivered"
"receipt": "read"
<span>&#125;</span>,
<span>&#123;</span>
"text": "Thanks, I will take a look this afternoon.",
"direction": "incoming",
"timestamp": "10:26"
<span>&#125;</span>,
<span>&#123;</span>
"text": "Great. The release notes are attached too.",
"direction": "outgoing",
"timestamp": "10:27",
"receipt": "delivered"
<span>&#125;</span>,
<span>&#123;</span>
"text": "One more screenshot coming up.",
"direction": "outgoing",
"timestamp": "10:28",
"receipt": "sent"
<span>&#125;</span>,
<span>&#123;</span>
"text": "Uploading the final export now.",
"direction": "outgoing",
"timestamp": "10:29",
"receipt": "sending"
<span>&#125;</span>,
<span>&#123;</span>
"text": "Here is the invoice PDF.",
"direction": "outgoing",
"timestamp": "10:30",
"receipt": "failed",
"status": "Not delivered",
"actionLabel": "Retry"
<span>&#125;</span>
]
view <span>&#123;</span>
@@ -186,7 +290,7 @@ page ChatBubbleDetail {
<div id="chat-bubble-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","status":"Delivered"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
<div class="demo-render"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","receipt":"read"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"},{"text":"Great. The release notes are attached too.","direction":"outgoing","timestamp":"10:27","receipt":"delivered"},{"text":"One more screenshot coming up.","direction":"outgoing","timestamp":"10:28","receipt":"sent"},{"text":"Uploading the final export now.","direction":"outgoing","timestamp":"10:29","receipt":"sending"},{"text":"Here is the invoice PDF.","direction":"outgoing","timestamp":"10:30","receipt":"failed","status":"Not delivered","actionLabel":"Retry"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
</div>
<section class="demo-code" aria-label="Rich configuration usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -201,12 +305,38 @@ page ChatBubbleDetail {
"text": "Yes! I have shared the latest version with you.",
"direction": "outgoing",
"timestamp": "10:25",
"status": "Delivered"
"receipt": "read"
<span>&#125;</span>,
<span>&#123;</span>
"text": "Thanks, I will take a look this afternoon.",
"direction": "incoming",
"timestamp": "10:26"
<span>&#125;</span>,
<span>&#123;</span>
"text": "Great. The release notes are attached too.",
"direction": "outgoing",
"timestamp": "10:27",
"receipt": "delivered"
<span>&#125;</span>,
<span>&#123;</span>
"text": "One more screenshot coming up.",
"direction": "outgoing",
"timestamp": "10:28",
"receipt": "sent"
<span>&#125;</span>,
<span>&#123;</span>
"text": "Uploading the final export now.",
"direction": "outgoing",
"timestamp": "10:29",
"receipt": "sending"
<span>&#125;</span>,
<span>&#123;</span>
"text": "Here is the invoice PDF.",
"direction": "outgoing",
"timestamp": "10:30",
"receipt": "failed",
"status": "Not delivered",
"actionLabel": "Retry"
<span>&#125;</span>
]
view <span>&#123;</span>