@tldraw/commenting 0.0.0-bootstrap → 5.3.0-internal.1640468db8fd

package/src/ui/comment-pin.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import { CSSProperties, ReactNode } from 'react'
 
 /** @public */
 export interface CommentPinProps {
@@ -8,14 +8,45 @@ export interface CommentPinProps {
 	resolved?: boolean
 	/** The pin's thread is open — shows the active/selected indicator state. */
 	open?: boolean
+	/** Background color (any CSS color). Falls back to the default pin tint.
+	 *  Ignored while resolved — resolved pins are always grey. */
+	color?: string
 }
 
+/* An inline check, not a text glyph — the '✓' character sits off-baseline and varies by font. */
+const resolvedCheck = (
+	<svg
+		viewBox="0 0 24 24"
+		width="15"
+		height="15"
+		fill="none"
+		stroke="currentColor"
+		strokeWidth="2.5"
+		strokeLinecap="round"
+		strokeLinejoin="round"
+		aria-hidden="true"
+	>
+		<path d="M4 12.5l5 5L20 6.5" />
+	</svg>
+)
+
 /** A canvas comment marker: shows its `children` (or a check when resolved). Purely
  * presentational — it reflects open/resolved state via CSS; wrap it to make it clickable.
  * @public @react */
-export function CommentPin({ children, resolved, open }: CommentPinProps) {
-	const className = ['cmt-pin', resolved && 'cmt-pin--resolved', open && 'cmt-pin--open']
+export function CommentPin({ children, resolved, open, color }: CommentPinProps) {
+	const className = [
+		'tlui-cmt-pin',
+		resolved && 'tlui-cmt-pin--resolved',
+		open && 'tlui-cmt-pin--open',
+	]
 		.filter(Boolean)
 		.join(' ')
-	return <div className={className}>{resolved ? '✓' : children}</div>
+	// A custom property rather than backgroundColor, so the open ring follows the tint too.
+	const style =
+		color && !resolved ? ({ '--tlui-cmt-pin-color': color } as CSSProperties) : undefined
+	return (
+		<div className={className} style={style}>
+			{resolved ? resolvedCheck : children}
+		</div>
+	)
 }

package/src/ui/comment-text.tsx

@@ -8,5 +8,5 @@ export interface CommentTextProps {
 
 /** A comment's body, rendered as markdown (bold, italic, code, links, lists). @public @react */
 export function CommentText({ text }: CommentTextProps) {
-	return <div className="cmt-text">{renderMarkdown(text)}</div>
+	return <div className="tlui-cmt-text">{renderMarkdown(text)}</div>
 }

package/src/ui/comment-thread.tsx

@@ -33,17 +33,19 @@ export function CommentThread({
 	renderComment,
 }: CommentThreadProps) {
 	return (
-		<div className="cmt-thread">
+		<div className="tlui-cmt-thread">
 			{(header !== undefined || headerActions !== undefined) && (
-				<div className="cmt-thread__header">
-					<span className="cmt-thread__title">{header}</span>
+				<div className="tlui-cmt-thread__header">
+					<span className="tlui-cmt-thread__title">{header}</span>
 					{headerActions !== undefined && (
-						<div className="cmt-thread__actions">{headerActions}</div>
+						<div className="tlui-cmt-thread__actions">{headerActions}</div>
 					)}
 				</div>
 			)}
-			{resolvedBanner !== undefined && <div className="cmt-thread__resolved">{resolvedBanner}</div>}
-			<div className="cmt-thread__list">
+			{resolvedBanner !== undefined && (
+				<div className="tlui-cmt-thread__resolved">{resolvedBanner}</div>
+			)}
+			<div className="tlui-cmt-thread__list">
 				{comments.map((comment, i) => (
 					<div key={i}>
 						{renderComment ? renderComment(comment, i) : <CommentCard {...comment} />}

package/src/ui/comments-list.tsx

@@ -1,11 +1,12 @@
 import { ReactNode } from 'react'
 import { Avatar } from './avatar'
 import { Byline } from './byline'
+import { CommentAuthor } from './comment-author'
 
 /** @public */
 export interface CommentListItemProps {
 	id: string
-	author: string
+	author: CommentAuthor
 	/** A short preview of the thread — e.g. the first comment's body. */
 	preview: ReactNode
 	/** ISO datetime of the thread's first comment. */
@@ -52,17 +53,17 @@ export function CommentsList({
 	renderItem,
 }: CommentsListProps) {
 	return (
-		<div className="cmt-list">
+		<div className="tlui-cmt-list">
 			{(header !== undefined || headerAction) && (
-				<div className="cmt-list__header">
-					{header !== undefined && <span className="cmt-list__header-title">{header}</span>}
+				<div className="tlui-cmt-list__header">
+					{header !== undefined && <span className="tlui-cmt-list__header-title">{header}</span>}
 					{headerAction}
 				</div>
 			)}
 			{items.length === 0 ? (
-				<div className="cmt-list__empty">{empty}</div>
+				<div className="tlui-cmt-list__empty">{empty}</div>
 			) : (
-				<div className="cmt-list__items">
+				<div className="tlui-cmt-list__items">
 					{items.map((item) =>
 						renderItem ? (
 							renderItem(item)
@@ -99,27 +100,31 @@ function CommentListItem({
 	return (
 		<button
 			type="button"
-			className={selected ? 'cmt-list__item cmt-list__item--selected' : 'cmt-list__item'}
+			className={
+				selected ? 'tlui-cmt-list__item tlui-cmt-list__item--selected' : 'tlui-cmt-list__item'
+			}
 			data-resolved={resolved || undefined}
 			onClick={handleClick}
 		>
-			<Avatar name={author} />
-			<div className="cmt-list__item-body">
+			<Avatar author={author} />
+			<div className="tlui-cmt-list__item-body">
 				<Byline author={author} date={date} />
-				<div className="cmt-list__item-preview">{preview}</div>
+				<div className="tlui-cmt-list__item-preview">{preview}</div>
 				{(resolved || page !== undefined) && (
-					<div className="cmt-list__item-meta">
+					<div className="tlui-cmt-list__item-meta">
 						{resolved && (
-							<span className="cmt-list__item-resolved">
+							<span className="tlui-cmt-list__item-resolved">
 								<CheckIcon />
 								{resolvedLabel}
 							</span>
 						)}
-						{page !== undefined && <span className="cmt-list__item-page">{page}</span>}
+						{page !== undefined && <span className="tlui-cmt-list__item-page">{page}</span>}
 					</div>
 				)}
 			</div>
-			{count !== undefined && count > 1 && <span className="cmt-list__item-count">{count}</span>}
+			{count !== undefined && count > 1 && (
+				<span className="tlui-cmt-list__item-count">{count}</span>
+			)}
 		</button>
 	)
 }