Skip to content

fix: follow required marker styling convention #4533

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Calcium-Ion merged 1 commit into from
Apr 29, 2026
+43 −1
Merged

fix: follow required marker styling convention #4533

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 43 additions & 1 deletion web/default/src/components/ui/label.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,48 @@ import * as React from 'react'
import * as LabelPrimitive from '@radix-ui/react-label'
import { cn } from '@/lib/utils'

const requiredMarkerPattern = /\s\*$/

function renderRequiredMarker(text: string, key?: React.Key) {
if (!requiredMarkerPattern.test(text)) {
return text
}

return (
<span key={key}>
{text.slice(0, -1)}
<span className='text-destructive'>*</span>
</span>
Comment on lines +7 to +18

@coderabbitai coderabbitai Bot Apr 29, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Broaden the required-marker matcher.

/\s\*$/ only catches labels with exactly one whitespace character before *. Labels like Name*, labels using non-breaking spaces, or other formatted variants will still render an unstyled asterisk.

🔧 Suggested fix 
-const requiredMarkerPattern = /\s\*$/
+const requiredMarkerPattern = /\s*\*$/

 function renderRequiredMarker(text: string, key?: React.Key) {
   if (!requiredMarkerPattern.test(text)) {
     return text
   }

   return (
     <span key={key}>
-      {text.slice(0, -1)}
+      {text.replace(/\s*\*$/, '')}
       <span className='text-destructive'>*</span>
     </span>
   )
 }
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@web/default/src/components/ui/label.tsx` around lines 7 - 18, The
required-marker regex is too narrow (only matches a single space before '*') so
update requiredMarkerPattern and the trimming logic to accept zero-or-more
whitespace (including non-breaking spaces) before the asterisk; e.g. replace the
pattern with /\s*\*$/ and change renderRequiredMarker to derive the label text
by removing that trailing whitespace+asterisk (e.g. via text.replace(/\s*\*$/,
'')) before rendering the visible '*' in a styled span; keep the function name
renderRequiredMarker and the visible span with className 'text-destructive'.

)
}

function renderLabelChildren(children: React.ReactNode) {
const childArray = React.Children.toArray(children)

if (childArray.length === 0) {
return children
}

if (
childArray.every(
(child) => typeof child === 'string' || typeof child === 'number'
)
) {
return renderRequiredMarker(childArray.join(''))
}

return childArray.map((child, index) => {
if (typeof child === 'string' || typeof child === 'number') {
return renderRequiredMarker(String(child), index)
}

return child
})
}

function Label({
className,
children,
...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
return (
Expand All @@ -16,7 +56,9 @@ function Label({
className
)}
{...props}
/>
>
{renderLabelChildren(children)}
</LabelPrimitive.Root>
)
}

Expand Down