diff --git a/apps/demo/config/blocks/Columns/index.tsx b/apps/demo/config/blocks/Columns/index.tsx index bd0837f333..cff1439341 100644 --- a/apps/demo/config/blocks/Columns/index.tsx +++ b/apps/demo/config/blocks/Columns/index.tsx @@ -39,6 +39,8 @@ export const Columns: ComponentConfig = { span: { label: "Span (1-12)", type: "number", + min: 0, + max: 12, }, }, }, diff --git a/apps/demo/config/blocks/Flex/index.tsx b/apps/demo/config/blocks/Flex/index.tsx index 38afbfc681..135d19173f 100644 --- a/apps/demo/config/blocks/Flex/index.tsx +++ b/apps/demo/config/blocks/Flex/index.tsx @@ -20,6 +20,7 @@ export const Flex: ComponentConfig = { minItemWidth: { label: "Minimum Item Width", type: "number", + min: 0, }, }, getItemSummary: (_, id) => `Item ${id + 1}`, @@ -27,6 +28,7 @@ export const Flex: ComponentConfig = { minItemWidth: { label: "Minimum Item Width", type: "number", + min: 0, }, }, defaultProps: { diff --git a/apps/docs/pages/docs/api-reference/configuration/fields/number.mdx b/apps/docs/pages/docs/api-reference/configuration/fields/number.mdx index a7edfcf0ba..ba5e4f8066 100644 --- a/apps/docs/pages/docs/api-reference/configuration/fields/number.mdx +++ b/apps/docs/pages/docs/api-reference/configuration/fields/number.mdx @@ -41,6 +41,8 @@ const config = { | Param | Example | Type | Status | | --------------- | ---------------- | -------- | -------- | | [`type`](#type) | `type: "number"` | "number" | Required | +| [`min`](#min) | `min: 0` | number | - | +| [`max`](#max) | `max: 10` | number | - | ## Required params @@ -62,3 +64,77 @@ const config = { }, }; ``` + +## Optional params + +### `min` + +Set the minimum numeric value to accept for the input field. + +```tsx {7} copy +const config = { + components: { + Example: { + fields: { + items: { + type: "number", + min: 0, + }, + }, + // ... + }, + }, +}; +``` + + { + return
{myNumber}
; + }, + }} +/> + +### `max` + +Set the maximum numeric value to accept for the input field. + +```tsx {7} copy +const config = { + components: { + Example: { + fields: { + items: { + type: "number", + max: 10, + }, + }, + // ... + }, + }, +}; +``` + + { + return
{myNumber}
; + }, + }} +/> diff --git a/apps/docs/pages/docs/integrating-puck/categories.mdx b/apps/docs/pages/docs/integrating-puck/categories.mdx index 7caffc1484..1918a22cf6 100644 --- a/apps/docs/pages/docs/integrating-puck/categories.mdx +++ b/apps/docs/pages/docs/integrating-puck/categories.mdx @@ -33,14 +33,14 @@ const config = { }; ``` -You can also change the label, collapse and hide categories: +You can also change the title, collapse and hide categories: ```tsx {5,6,10} copy showLineNumbers const config = { categories: { typography: { components: ["HeadingBlock", "ParagraphBlock"], - label: "Text", + title: "Text", defaultExpanded: false, // Collapse this category by default }, foundational: { @@ -63,7 +63,7 @@ const config = { components: ["HeadingBlock", "ParagraphBlock"], }, other: { - label: "Other components", + title: "Other components", }, }, // ... diff --git a/packages/core/components/InputOrGroup/fields/DefaultField/index.tsx b/packages/core/components/InputOrGroup/fields/DefaultField/index.tsx index 19b5eb6218..5f2681d1b9 100644 --- a/packages/core/components/InputOrGroup/fields/DefaultField/index.tsx +++ b/packages/core/components/InputOrGroup/fields/DefaultField/index.tsx @@ -40,6 +40,8 @@ export const DefaultField = ({ }} readOnly={readOnly} id={id} + min={field.type === "number" ? field.min : undefined} + max={field.type === "number" ? field.max : undefined} /> ); diff --git a/packages/core/types/Config.tsx b/packages/core/types/Config.tsx index ffaf879924..6b262aa1c3 100644 --- a/packages/core/types/Config.tsx +++ b/packages/core/types/Config.tsx @@ -16,6 +16,8 @@ export type TextField = BaseField & { }; export type NumberField = BaseField & { type: "number"; + min?: number; + max?: number; }; export type TextareaField = BaseField & {