Apply styles to groups

packages/tldraw/src/state/command/style/style.command.spec.ts

@@ -22,4 +22,28 @@ describe('Style command', () => {
 
     expect(tlstate.getShape('rect1').style.size).toEqual(SizeStyle.Small)
   })
+
+  describe('When styling groups', () => {
+    it('applies style to all group children', () => {
+      const tlstate = new TLDrawState()
+      tlstate
+        .loadDocument(mockDocument)
+        .group(['rect1', 'rect2'], 'groupA')
+        .select('groupA')
+        .style({ size: SizeStyle.Small })
+
+      expect(tlstate.getShape('rect1').style.size).toEqual(SizeStyle.Small)
+      expect(tlstate.getShape('rect2').style.size).toEqual(SizeStyle.Small)
+
+      tlstate.undo()
+
+      expect(tlstate.getShape('rect1').style.size).toEqual(SizeStyle.Medium)
+      expect(tlstate.getShape('rect2').style.size).toEqual(SizeStyle.Medium)
+
+      tlstate.redo()
+
+      expect(tlstate.getShape('rect1').style.size).toEqual(SizeStyle.Small)
+      expect(tlstate.getShape('rect2').style.size).toEqual(SizeStyle.Small)
+    })
+  })
 })

packages/tldraw/src/state/command/style/style.command.ts

@@ -4,9 +4,11 @@ import { TLDR } from '~state/tldr'
 export function style(data: Data, ids: string[], changes: Partial<ShapeStyles>): TLDrawCommand {
   const { currentPageId } = data.appState
 
+  const shapeIdsToMutate = ids.flatMap((id) => TLDR.getDocumentBranch(data, id, currentPageId))
+
   const { before, after } = TLDR.mutateShapes(
     data,
-    ids,
+    shapeIdsToMutate,
     (shape) => ({ style: { ...shape.style, ...changes } }),
     currentPageId
   )