From 6c59d3fe6f88d09526ab9a49e0a0e2f29c0a8456 Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Wed, 16 Apr 2025 17:23:10 +0300
Subject: [PATCH] docs: hide colon when a note's title has a punctuation
 (#12205)

---
 .../docs-ui/src/components/Note/Layout/index.tsx      | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/www/packages/docs-ui/src/components/Note/Layout/index.tsx b/www/packages/docs-ui/src/components/Note/Layout/index.tsx
index f2f3fa5084..d1b12493ae 100644
--- a/www/packages/docs-ui/src/components/Note/Layout/index.tsx
+++ b/www/packages/docs-ui/src/components/Note/Layout/index.tsx
@@ -10,6 +10,8 @@ type StringInfo = {
 
 type NoteLayoutProps = NoteProps
 
+const PUNCTIONATIONS = [".", ":", ";", ",", "!", "?"]
+
 export const NoteLayout = ({
   type,
   title,
@@ -84,6 +86,12 @@ export const NoteLayout = ({
     }
   }, [children, forceMultiline])
 
+  const showColon = useMemo(() => {
+    const lastChar = title?.charAt(title.length - 1) || ""
+
+    return !PUNCTIONATIONS.includes(lastChar)
+  }, [title])
+
   return (
     <div
       className={clsx(
@@ -107,7 +115,8 @@ export const NoteLayout = ({
       <div className="flex-1">
         <div className="text-small text-medusa-fg-subtle [&_ol]:!mb-0 [&_ul]:!mb-0">
           <span className={clsx("text-small-plus text-medusa-fg-base")}>
-            {title}:&nbsp;
+            {title}
+            {showColon ? ":" : ""}&nbsp;
           </span>
           {allStringChildren && (
             <MarkdownContent