Add labelColor for notes. (tldraw#4724)

This PR adds `labelColor` for note shapes. We don't use it on tldraw.com but other shapes support it. ### Change type - [ ] `bugfix` - [ ] `improvement` - [x] `feature` - [ ] `api` - [ ] `other` ### Test plan 1. Create a shape... 2. - [ ] Unit tests - [ ] End to end tests ### Release notes - Adds `labelColor` for Note shapes.
fork-house · Oct 18, 2024 · 983e892 · 983e892
1 parent 29d7eca
commit 983e892
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 3 deletions.
diff --git a/packages/tldraw/api-report.md b/packages/tldraw/api-report.md
@@ -1513,6 +1513,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
             font: "draw" | "mono" | "sans" | "serif";
             fontSizeAdjustment: number;
             growY: number;
+            labelColor: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
             scale: number;
             size: "l" | "m" | "s" | "xl";
             text: string;
@@ -1539,6 +1540,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
             font: "draw" | "mono" | "sans" | "serif";
             fontSizeAdjustment: number;
             growY: number;
+            labelColor: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
             scale: number;
             size: "l" | "m" | "s" | "xl";
             text: string;

diff --git a/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx b/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx
@@ -71,6 +71,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 			font: 'draw',
 			align: 'middle',
 			verticalAlign: 'middle',
+			labelColor: 'black',
 			growY: 0,
 			fontSizeAdjustment: 0,
 			url: '',
@@ -176,7 +177,17 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 		const {
 			id,
 			type,
-			props: { scale, color, font, size, align, text, verticalAlign, fontSizeAdjustment },
+			props: {
+				labelColor,
+				scale,
+				color,
+				font,
+				size,
+				align,
+				text,
+				verticalAlign,
+				fontSizeAdjustment,
+			},
 		} = shape
 
 		const handleKeyDown = useNoteKeydownHandler(id)
@@ -224,7 +235,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 						text={text}
 						isNote
 						isSelected={isSelected}
-						labelColor={theme[color].note.text}
+						labelColor={labelColor === 'black' ? theme[color].note.text : theme[labelColor].fill}
 						wrap
 						padding={16 * scale}
 						onKeyDown={handleKeyDown}

diff --git a/packages/tlschema/api-report.md b/packages/tlschema/api-report.md
@@ -1261,6 +1261,8 @@ export interface TLNoteShapeProps {
     // (undocumented)
     growY: number;
     // (undocumented)
+    labelColor: TLDefaultColorStyle;
+    // (undocumented)
     scale: number;
     // (undocumented)
     size: TLDefaultSizeStyle;

diff --git a/packages/tlschema/src/migrations.test.ts b/packages/tlschema/src/migrations.test.ts
@@ -2018,6 +2018,18 @@ describe('Make video asset file size optional', () => {
 	})
 })
 
+describe('Adding label color to note shapes', () => {
+	const { up, down } = getTestMigration(noteShapeVersions.AddLabelColor)
+
+	test('up works as expected', () => {
+		expect(up({ props: {} })).toEqual({ props: { labelColor: 'black' } })
+	})
+
+	test('down works as expected', () => {
+		expect(down({ props: { labelColor: 'black' } })).toEqual({ props: {} })
+	})
+})
+
 /* ---  PUT YOUR MIGRATIONS TESTS ABOVE HERE --- */
 
 // check that all migrator fns were called at least once

diff --git a/packages/tlschema/src/shapes/TLNoteShape.ts b/packages/tlschema/src/shapes/TLNoteShape.ts
@@ -1,7 +1,11 @@
 import { T } from '@tldraw/validate'
 import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'
 import { RecordProps } from '../recordsWithProps'
-import { DefaultColorStyle, TLDefaultColorStyle } from '../styles/TLColorStyle'
+import {
+	DefaultColorStyle,
+	DefaultLabelColorStyle,
+	TLDefaultColorStyle,
+} from '../styles/TLColorStyle'
 import { DefaultFontStyle, TLDefaultFontStyle } from '../styles/TLFontStyle'
 import {
 	DefaultHorizontalAlignStyle,
@@ -17,6 +21,7 @@ import { TLBaseShape } from './TLBaseShape'
 /** @public */
 export interface TLNoteShapeProps {
 	color: TLDefaultColorStyle
+	labelColor: TLDefaultColorStyle
 	size: TLDefaultSizeStyle
 	font: TLDefaultFontStyle
 	fontSizeAdjustment: number
@@ -34,6 +39,7 @@ export type TLNoteShape = TLBaseShape<'note', TLNoteShapeProps>
 /** @public */
 export const noteShapeProps: RecordProps<TLNoteShape> = {
 	color: DefaultColorStyle,
+	labelColor: DefaultLabelColorStyle,
 	size: DefaultSizeStyle,
 	font: DefaultFontStyle,
 	fontSizeAdjustment: T.positiveNumber,
@@ -53,6 +59,7 @@ const Versions = createShapePropsMigrationIds('note', {
 	MakeUrlsValid: 5,
 	AddFontSizeAdjustment: 6,
 	AddScale: 7,
+	AddLabelColor: 8,
 })
 
 export { Versions as noteShapeVersions }
@@ -129,5 +136,14 @@ export const noteShapeMigrations = createShapePropsMigrationSequence({
 				delete props.scale
 			},
 		},
+		{
+			id: Versions.AddLabelColor,
+			up: (props) => {
+				props.labelColor = 'black'
+			},
+			down: (props) => {
+				delete props.labelColor
+			},
+		},
 	],
 })