From 39cbf1c68e79b377e3a86ac99fc06744298e6c70 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cnora?= Date: Fri, 19 Jul 2024 17:18:02 -0400 Subject: [PATCH 1/2] chore: add selection methods section to form docs --- .../src/pages/components/form/index.mdx | 52 +++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/packages/paste-website/src/pages/components/form/index.mdx b/packages/paste-website/src/pages/components/form/index.mdx index 7766af1741..6b9425b290 100644 --- a/packages/paste-website/src/pages/components/form/index.mdx +++ b/packages/paste-website/src/pages/components/form/index.mdx @@ -416,6 +416,58 @@ Make required and optional fields distinguishable. Try to avoid optional input f Text is the clearest way to indicate whether a field is required or optional. However, the required symbol is relatively well understood. If you use the required symbol to indicate required fields, you'll see a "Required" title on the symbol. If you're building for other languages, use the `i18nLabel` prop to translate the "Required" title. +#### Selection methods + +##### Single selection + +Component | When to use +----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- +[Radio Button Group](/components/radio-button-group) | Use it when you have a list of up to 6 fixed items, and users need to select only one at a time. +[Singleselect Combobox](/components/combobox) | Use it when you have more than 6 options in a fixed list and users need to select only one at a time. +[Singleselect Combobox - Autocomplete](/components/combobox#autocomplete-combobox) | Use it when you have lists with over 15 options or if users need to search through a database and select a single option at a time. + +##### Multiple selection + +Component | When to use +----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- +[Checkbox Group](/components/checkbox) | Use it when you have a list of up to 6 fixed items, and users can select multiple values at a time. +[Multiselect Combobox](/components/multiselect-combobox) | Use it when you have lists with over 6 options or if users need to search through a database and select multiple values at a time. + +##### Numeric selection + +Component | When to use +----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- +[Slider](/components/slider) | Use it when the exact value doesn’t matter. +[Input with number functionality](/components/input#input-with-number-functionality) | Use it when the exact numeric value matters. +[Date Picker](/components/date-picker) | Use it for selecting specific dates or date ranges. +[Time Picker](/components/time-picker) | Use it for selecting specific times or time ranges. + +##### Combining search and filters + +If there is search functionality, it should always take priority over filters. The search should be placed higher in the hierarchy, with the expectation that users will search first and then use the filters to refine and narrow down the search results. + +TODO: img + +##### Conditional filters + +A conditional filter is a type of filter that becomes available based on the initial filter selections made by the user. + +TODO: img + +Use it when filter selections naturally lead to additional criteria, or where certain filter formulas are only necessary for very specific use cases. + + + + + + + + + ## When to use Forms Use a Form when users are expected to enter more than a single form component to collect user input. From 9f2c09cfdce3cba2774cb7d7fb20592b8b6b9622 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cnora?= Date: Tue, 23 Jul 2024 11:51:17 -0400 Subject: [PATCH 2/2] chore: remove extra section --- .../src/pages/components/form/index.mdx | 56 +++++-------------- 1 file changed, 15 insertions(+), 41 deletions(-) diff --git a/packages/paste-website/src/pages/components/form/index.mdx b/packages/paste-website/src/pages/components/form/index.mdx index 6b9425b290..019eb8f2a7 100644 --- a/packages/paste-website/src/pages/components/form/index.mdx +++ b/packages/paste-website/src/pages/components/form/index.mdx @@ -420,53 +420,27 @@ Text is the clearest way to indicate whether a field is required or optional. Ho ##### Single selection -Component | When to use ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- -[Radio Button Group](/components/radio-button-group) | Use it when you have a list of up to 6 fixed items, and users need to select only one at a time. -[Singleselect Combobox](/components/combobox) | Use it when you have more than 6 options in a fixed list and users need to select only one at a time. -[Singleselect Combobox - Autocomplete](/components/combobox#autocomplete-combobox) | Use it when you have lists with over 15 options or if users need to search through a database and select a single option at a time. +| Component | When to use | +| ------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [Radio Group](/components/radio-group) or [Radio Button Group](/components/radio-button-group) | Use it when you have a list of up to 6 fixed items, and users need to select only one at a time. | +| [Select](/components/select) or [Singleselect Combobox](/components/combobox) | Use it when you have more than 6 options in a fixed list and users need to select only one at a time.| +| [Singleselect Combobox - Autocomplete](/components/combobox#autocomplete-combobox) | Use it when you have lists with over 15 options or if users need to search through a database and select a single option at a time.| ##### Multiple selection -Component | When to use ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- -[Checkbox Group](/components/checkbox) | Use it when you have a list of up to 6 fixed items, and users can select multiple values at a time. -[Multiselect Combobox](/components/multiselect-combobox) | Use it when you have lists with over 6 options or if users need to search through a database and select multiple values at a time. +|Component | When to use +|----------------------------------------------------------------------------------- | -----------------------------------------------------------------------------------------------------------------------------------| +|[Checkbox Group](/components/checkbox) | Use it when you have a list of up to 6 fixed items, and users can select multiple values at a time.| +|[Multiselect Combobox](/components/multiselect-combobox) | Use it when you have lists with over 6 options or if users need to search through a database and select multiple values at a time.| ##### Numeric selection -Component | When to use ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- -[Slider](/components/slider) | Use it when the exact value doesn’t matter. -[Input with number functionality](/components/input#input-with-number-functionality) | Use it when the exact numeric value matters. -[Date Picker](/components/date-picker) | Use it for selecting specific dates or date ranges. -[Time Picker](/components/time-picker) | Use it for selecting specific times or time ranges. - -##### Combining search and filters - -If there is search functionality, it should always take priority over filters. The search should be placed higher in the hierarchy, with the expectation that users will search first and then use the filters to refine and narrow down the search results. - -TODO: img - -##### Conditional filters - -A conditional filter is a type of filter that becomes available based on the initial filter selections made by the user. - -TODO: img - -Use it when filter selections naturally lead to additional criteria, or where certain filter formulas are only necessary for very specific use cases. - - - - - - - - +|Component | When to use +|----------------------------------------------------------------------------------- | -----------------------------------------------------------------------------------------------------------------------------------| +|[Slider](/components/slider) | Use it when the exact value doesn’t matter.| +|[Input with number functionality](/components/input#input-with-number-functionality) | Use it when the exact numeric value matters.| +|[Date Picker](/components/date-picker) | Use it for selecting specific dates or date ranges.| +|[Time Picker](/components/time-picker) | Use it for selecting specific times or time ranges.| ## When to use Forms