fix : ENG-8692 updated defaultStyles type

[shubham-builder]

Description

FIX : updated defaultStyles type
TICKET - https://builder-io.atlassian.net/browse/ENG-8692

Screenshot

[changeset-bot]

🦋 Changeset detected

Latest commit: 9743731

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@builder.io/sdk	Patch
@builder.io/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 9743731.

Command	Status	Duration	Result
nx test @e2e/qwik-city	✅ Succeeded	8m 40s	View ↗
nx test @e2e/nuxt	✅ Succeeded	7m 29s	View ↗
nx test @e2e/nextjs-sdk-next-app	✅ Succeeded	7m 20s	View ↗
nx test @e2e/react-sdk-next-14-app	✅ Succeeded	6m 31s	View ↗
nx test @e2e/react-sdk-next-pages	✅ Succeeded	6m 18s	View ↗
nx test @e2e/angular-16	✅ Succeeded	6m	View ↗
nx test @e2e/angular-16-ssr	✅ Succeeded	5m 47s	View ↗
nx test @e2e/angular-19-ssr	✅ Succeeded	5m 36s	View ↗
Additional runs (36)	✅ Succeeded	...	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-04-17 06:39:22 UTC

[sidmohanty11]

@shubham-builder I think the comment here is misleading and we should update that, defaultStyles is a styles object provided to a component and doesn't take up any breakpoints as keys. They are spread out in the large (default) breakpoint whenever a component is inserted.

Check: https://github.com/sidmohanty11/builder-internal/blob/main/packages/app/components/BlocksOverlay.tsx/#L3868

Example usage of defaultStyles:
https://github.com/sidmohanty11/builder/blob/angular-sdk-signals/packages/react/src/blocks/Button.tsx/#L33-L45

[shubham-builder]

@shubham-builder I think the comment here is misleading and we should update that, defaultStyles is a styles object provided to a component and doesn't take up any breakpoints as keys. They are spread out in the large (default) breakpoint whenever a component is inserted.

Check: https://github.com/sidmohanty11/builder-internal/blob/main/packages/app/components/BlocksOverlay.tsx/#L3868

Example usage of defaultStyles: https://github.com/sidmohanty11/builder/blob/angular-sdk-signals/packages/react/src/blocks/Button.tsx/#L33-L45

@sidmohanty11 So the type is correct, just the example was the issue here. I've updated the example and changed type to "Record" which seems more appropriate for an object.

[shubham-builder]

FYI - nx test @e2e/nuxt this is failing on this pr but it's successful locally and these changes are in core, so shouldn't affect any gen-2 sdk

[sidmohanty11]

while it makes sense to use React.CSSProperties as type here, but:

• this is our core SDK (@builder.io/sdk) that doesn't depend upon react
• React handles numeric values underneath, so if we provide padding: 20 it adds px to 20, so type wise it will not throw an error if a user provides padding: 20 but on the web it might fail

I think it will be better if we don't update anything here. As the same type is being used in Gen2 SDKs:

builder/packages/sdks/src/types/components.ts

Line 22 in f59d992

defaultStyles?: { [key: string]: string };