From 3444f5b828ea633d0f554ab2760cf80d489fc92b Mon Sep 17 00:00:00 2001 From: Matthias Nannt Date: Wed, 23 Nov 2022 14:50:09 +0100 Subject: [PATCH] update docs --- .../input-checkbox/index.mdx | 38 +++++-------------- .../react-form-library/input-email/index.mdx | 2 +- .../react-form-library/input-number/index.mdx | 11 +++--- .../react-form-library/input-search/index.mdx | 2 +- .../validation-errors/index.mdx | 15 +++++--- .../react/src/components/inputs/Email.tsx | 12 +----- .../react/src/components/inputs/Password.tsx | 2 - .../react/src/components/inputs/Phone.tsx | 2 - .../react/src/components/inputs/Search.tsx | 2 - packages/react/src/components/inputs/Text.tsx | 2 - packages/react/src/components/inputs/Url.tsx | 2 - .../react/src/components/shared/Input.tsx | 6 ++- 12 files changed, 33 insertions(+), 63 deletions(-) diff --git a/apps/formbricks-com/pages/docs/react-form-library/input-checkbox/index.mdx b/apps/formbricks-com/pages/docs/react-form-library/input-checkbox/index.mdx index b3d6e83423..85936973ff 100644 --- a/apps/formbricks-com/pages/docs/react-form-library/input-checkbox/index.mdx +++ b/apps/formbricks-com/pages/docs/react-form-library/input-checkbox/index.mdx @@ -17,7 +17,7 @@ Like all other inputs it needs a `name` prop as an unique identifier: ## Single Checkbox -By default the checkbox input will render a single checkbox with a `boolean` value: +By default the checkbox input will render a single checkbox returning a `boolean` value: ```jsx - -# data output - -true or false ``` ## Multiple checkboxes @@ -47,18 +43,11 @@ The options attribute can handle an array of values which are interpreted both a help="Take what you like" options={["Pineapple", "Ananas", "Piña"]} /> - -# data output - -label: Pineapple, value: Pineapple, -label: Ananas, value: Ananas, -label: Piña, value: Piña - ``` ### Options: Array of objects -The options attribute can also handle an array of objects containing label:value pairs. This allows for differences between the label and the data stored. You can also disable options: +The options attribute can also handle an array of objects containing label/value pairs. This allows for differences between the label and the data stored. You can also add an optional config object: ```jsx - -# data output - -label: Dogs, value: dogs, -label: These nuts, value: nuts, -label: Bullshit, value: bs - ``` ## Props & Attributes -| Prop | Type | Default | Description | -| ---------------- | -------------------- | ------- | ---------------------------------------- | ---------------------------------------------------- | -| options | Array | - | Contains the options in your radio input | -| label | String | - | The label of the radio input. | -| legendClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) | -| optionsClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) | -| optionClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) | +| Prop | Type | Default | Description | | +| ---------------- | -------------------- | ------- | ------------------------------------------- | ---------------------------------------------------- | +| options | Array | - | Contains the options in your checkbox input | | +| label | String | - | The label of the checkbox input. | | +| legendClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) | +| optionsClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) | +| optionClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) | ### Universal props all inputs have @@ -140,7 +122,7 @@ You can style your field with adding CSS to the pre-assigned classes. This is ho | formbricks-wrapper | A wrapper around the label and the input field (no help text). | | formbricks-label | The label itself. | | formbricks-inner | A wrapper around the input element. | -| formbricks-input | The input element itself, here the radio button. | +| formbricks-input | The input element itself, here the checkbox button. | | formbricks-message | The element (or many elements) containing a message — often validation and error messages. | | formbricks-messages | A wrapper around all the messages. | diff --git a/apps/formbricks-com/pages/docs/react-form-library/input-email/index.mdx b/apps/formbricks-com/pages/docs/react-form-library/input-email/index.mdx index 23e87f928e..28796037c5 100644 --- a/apps/formbricks-com/pages/docs/react-form-library/input-email/index.mdx +++ b/apps/formbricks-com/pages/docs/react-form-library/input-email/index.mdx @@ -18,7 +18,7 @@ Like all other inputs it needs a `name` prop as an unique identifier: In most cases, it looks something like this: ```jsx - + ``` ### Props & Attributes diff --git a/apps/formbricks-com/pages/docs/react-form-library/input-number/index.mdx b/apps/formbricks-com/pages/docs/react-form-library/input-number/index.mdx index bde378322c..27cd01927c 100644 --- a/apps/formbricks-com/pages/docs/react-form-library/input-number/index.mdx +++ b/apps/formbricks-com/pages/docs/react-form-library/input-number/index.mdx @@ -23,11 +23,12 @@ In most cases, it looks something like this: ### Props & Attributes -| Prop | Type | Default | Description | -| ---- | ------ | ------- | ------------------------------------------------------------------------------------ | -| min | Number | - | The input has to be at least X | -| max | Number | - | The input cannot be higher than Y | -| step | Number | auto | Specifies the granularity that the value must adhere to when increasing / decreasing | +| Prop | Type | Default | Description | +| ----------- | ------ | ------- | ------------------------------------------------------------------------------------ | +| min | Number | - | The input has to be at least X | +| max | Number | - | The input cannot be higher than Y | +| step | Number | auto | Specifies the granularity that the value must adhere to when increasing / decreasing | +| placeholder | String | - | Placeholder before respondent clicks into field. | ### Universal props all inputs have diff --git a/apps/formbricks-com/pages/docs/react-form-library/input-search/index.mdx b/apps/formbricks-com/pages/docs/react-form-library/input-search/index.mdx index b69db6e685..c0a42fc4d6 100644 --- a/apps/formbricks-com/pages/docs/react-form-library/input-search/index.mdx +++ b/apps/formbricks-com/pages/docs/react-form-library/input-search/index.mdx @@ -7,7 +7,7 @@ export const meta = { title: "Search Input - Formbricks React Form Library", }; -The `Search` input uses HTML's [native search input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search). It allows a user to enter a search term. +The `Search` input uses HTML's [native search input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search). It allows a user to enter a search term and is interpreted differently than the normal `text` input from the browser, e.g. it adds a little `x` inside the input field to remove the input again. Like all other inputs it needs a `name` prop as an unique identifier: diff --git a/apps/formbricks-com/pages/docs/react-form-library/validation-errors/index.mdx b/apps/formbricks-com/pages/docs/react-form-library/validation-errors/index.mdx index 68b387c05b..436d50986a 100644 --- a/apps/formbricks-com/pages/docs/react-form-library/validation-errors/index.mdx +++ b/apps/formbricks-com/pages/docs/react-form-library/validation-errors/index.mdx @@ -27,12 +27,15 @@ Only if all four requirements are met, the form can be submitted. If not an erro ### Available rules -| Rule | Explanation | Example | -| -------- | -------------------------------------------------------------------------- | ---------- | -| required | Only accepts non-empty fields | “required” | -| number | Only accepts fields with a number or float value | “number” | -| min | Only accepts number values that are greater or equal to the value provided | “min:10” | -| max | Only accepts number values that are greater or equal to the value provided | “max:50” | +| Rule | Explanation | Example | +| ------------ | ------------------------------------------------------------------------------------------- | ---------- | +| **accepted** | Only accepts `true`, `1`, `"on"`, and `"yes"` as values (useful e.g. for single checkboxes) | "accepted" | +| **email** | Only accepts valid email address format | "email" | +| **min** | Only accepts number values that are greater or equal to the value provided | "min:10" | +| **max** | Only accepts number values that are greater or equal to the value provided | "max:50" | +| **number** | Only accepts fields with a number or float value | "number" | +| **required** | Only accepts non-empty fields | "required" | +| **url** | Only accepts valid url format (including protocol) | "url" | ### Message position diff --git a/packages/react/src/components/inputs/Email.tsx b/packages/react/src/components/inputs/Email.tsx index 95b65a7078..23018a19e7 100644 --- a/packages/react/src/components/inputs/Email.tsx +++ b/packages/react/src/components/inputs/Email.tsx @@ -2,9 +2,7 @@ import { useEffectUpdateSchema } from "../../lib/schema"; import { NameRequired, UniversalInputProps } from "../../types"; import { Input, InputProps } from "../shared/Input"; -interface EmailUniqueProps { - placeholder?: string; -} +interface EmailUniqueProps {} type Props = EmailUniqueProps & InputProps & UniversalInputProps & NameRequired; @@ -13,11 +11,5 @@ const inputType = "email"; export function Email(props: Props) { useEffectUpdateSchema(props, inputType); - return ( - - ); + return ; } diff --git a/packages/react/src/components/inputs/Password.tsx b/packages/react/src/components/inputs/Password.tsx index ab801f9bfb..3cb4dd0c49 100644 --- a/packages/react/src/components/inputs/Password.tsx +++ b/packages/react/src/components/inputs/Password.tsx @@ -5,7 +5,6 @@ import { Input, InputProps } from "../shared/Input"; interface PasswordUniqueProps { minLength?: number; maxLength?: number; - placeholder?: string; } type Props = PasswordUniqueProps & InputProps & UniversalInputProps & NameRequired; @@ -28,7 +27,6 @@ export function Password(props: Props) { message: `Your answer musn't be longer than ${props.maxLength} characters`, }, }} - additionalProps={{ placeholder: props.placeholder }} {...props} /> ); diff --git a/packages/react/src/components/inputs/Phone.tsx b/packages/react/src/components/inputs/Phone.tsx index 9a87d1c5c0..ebc8b086b1 100644 --- a/packages/react/src/components/inputs/Phone.tsx +++ b/packages/react/src/components/inputs/Phone.tsx @@ -5,7 +5,6 @@ import { Input, InputProps } from "../shared/Input"; interface PhoneUniqueProps { minLength?: number; maxLength?: number; - placeholder?: string; } type Props = PhoneUniqueProps & InputProps & UniversalInputProps & NameRequired; @@ -29,7 +28,6 @@ export function Phone(props: Props) { message: `Your answer musn't be longer than ${props.maxLength} characters`, }, }} - additionalProps={{ placeholder: props.placeholder }} {...props} /> ); diff --git a/packages/react/src/components/inputs/Search.tsx b/packages/react/src/components/inputs/Search.tsx index 975957661d..f2ffe0c6ad 100644 --- a/packages/react/src/components/inputs/Search.tsx +++ b/packages/react/src/components/inputs/Search.tsx @@ -5,7 +5,6 @@ import { Input, InputProps } from "../shared/Input"; interface SearchUniqueProps { minLength?: number; maxLength?: number; - placeholder?: string; } type Props = SearchUniqueProps & InputProps & UniversalInputProps & NameRequired; @@ -28,7 +27,6 @@ export function Search(props: Props) { message: `Your answer musn't be longer than ${props.maxLength} characters`, }, }} - additionalProps={{ placeholder: props.placeholder }} {...props} /> ); diff --git a/packages/react/src/components/inputs/Text.tsx b/packages/react/src/components/inputs/Text.tsx index ef6f55f242..ab8314563f 100644 --- a/packages/react/src/components/inputs/Text.tsx +++ b/packages/react/src/components/inputs/Text.tsx @@ -5,7 +5,6 @@ import { Input, InputProps } from "../shared/Input"; interface TextUniqueProps { minLength?: number; maxLength?: number; - placeholder?: string; } type Props = TextUniqueProps & InputProps & UniversalInputProps & NameRequired; @@ -28,7 +27,6 @@ export function Text(props: Props) { message: `Your answer musn't be longer than ${props.maxLength} characters`, }, }} - additionalProps={{ placeholder: props.placeholder }} {...props} /> ); diff --git a/packages/react/src/components/inputs/Url.tsx b/packages/react/src/components/inputs/Url.tsx index 5a75a9d6ea..7436123245 100644 --- a/packages/react/src/components/inputs/Url.tsx +++ b/packages/react/src/components/inputs/Url.tsx @@ -5,7 +5,6 @@ import { Input, InputProps } from "../shared/Input"; interface UrlUniqueProps { minLength?: number; maxLength?: number; - placeholder?: string; } type Props = UrlUniqueProps & InputProps & UniversalInputProps & NameRequired; @@ -28,7 +27,6 @@ export function Url(props: Props) { message: `Your answer musn't be longer than ${props.maxLength} characters`, }, }} - additionalProps={{ placeholder: props.placeholder }} {...props} /> ); diff --git a/packages/react/src/components/shared/Input.tsx b/packages/react/src/components/shared/Input.tsx index ace368c1ac..823c64c449 100644 --- a/packages/react/src/components/shared/Input.tsx +++ b/packages/react/src/components/shared/Input.tsx @@ -12,11 +12,12 @@ import { Outer } from "./Outer"; import { Wrapper } from "./Wrapper"; export interface InputProps { - additionalValidation?: any; - additionalProps?: any; + placeholder?: string; } interface UniqueProps { + additionalValidation?: any; + additionalProps?: any; type: { formbricks: string; html: string; @@ -44,6 +45,7 @@ export function Input(props: FormbricksProps) { type={props.type.html} id={elemId} aria-invalid={errors[props.name] ? "true" : "false"} + placeholder={props.placeholder} {...props.additionalProps} {...register(props.name, { required: { value: "required" in validationRules, message: "This field is required" },