Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Data input copy updates #518

Open
wants to merge 16 commits into
base: main
Choose a base branch
from
3 changes: 1 addition & 2 deletions docs/components/Data Entry/Auto Complete/Documentation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@ import * as AutoCompleteStories from '../../../../src/components/data-entry/Auto

# AutoComplete

This is the documentation for the AutoComplete component
An input field with text hints that aids users by providing keyword-based suggestions as they type.

{/* Documentation goes here */}

<Canvas meta={AutoCompleteStories.default} />
7 changes: 2 additions & 5 deletions docs/components/Data Entry/Cascader/Documentation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,9 @@ import * as CascaderStories from '../../../../src/components/data-entry/Cascader

<Meta of={CascaderStories} />

{/* Documentation goes here */}
### Cascader
A cascade selection for large data sets with multi-level classifications, enabling easy and organized selection.

# Cascader

This is the documentation for the Cascaders component

{/* Documentation goes here */}

<Canvas meta={CascaderStories.default} />
17 changes: 14 additions & 3 deletions docs/components/Data Entry/Checkbox/Documentation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,19 @@ import * as CheckboxStories from '../../../../src/components/data-entry/Checkbox

# Checkbox

This is the documentation for the checkbox component
### Overview
The Checkbox component allows users to select one or multiple options from a list of choices. It provides a straightforward way to toggle selections on or off and can be used individually or within a group of related options.

### When to Use

Use the **Checkbox** component when:

- In lists or forms where users can select multiple items.
- For binary options, especially when changes require saving.
- For active agreements, such as accepting terms of service.

When selecting a single option from a set of mutually exclusive choices, use **[Radio Buttons](https://mparticle.github.io/aquarium/?path=/story/components-data-entry-radio--primary)**.
Use **[switch](https://mparticle.github.io/aquarium/?path=/story/components-data-entry-switch--primary)** for cases like activation, filter controls, or subscriptions where there is a clear "on/off" state.

{/* Documentation goes here */}

<Canvas meta={CheckboxStories.default} />
<Canvas meta={CheckboxStories.default} />
9 changes: 5 additions & 4 deletions docs/components/Data Entry/Date Picker/Documentation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,11 @@ import * as DatePickerStories from '../../../../src/components/data-entry/DatePi

{/* Documentation goes here */}

# Date Picker
### Date Picker

This is the documentation for the date picker component
Used to select or input a single date through an interactive popup calendar.

For date range selection with presets, use the [Date Range Filter](https://mparticle.github.io/aquarium/?path=/story/candidate-components-directory-date-range-filter--date-range-filter).

{/* Documentation goes here */}

<Canvas meta={DatePickerStories.default} />
<Canvas meta={DatePickerStories.default} />
9 changes: 7 additions & 2 deletions docs/components/Data Entry/Input/Documentation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,13 @@ import * as InputStories from '../../../../src/components/data-entry/Input/Input

# Input

This is the documentation for the Inputs component
The Input component allows users to enter content using a mouse or keyboard. It serves as the most basic form field wrapper and is commonly used where user input is required.

#### **When To Use**
- A user input in a form field is needed.
- A search input is required.

### Examples

{/* Documentation goes here */}

<Canvas meta={InputStories.default} />
9 changes: 7 additions & 2 deletions docs/components/Data Entry/InputNumber/Documentation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,14 @@ import * as InputNumberStories from '../../../../src/components/data-entry/Input

{/* Documentation goes here */}

# InputNumber
### InputNumber

This is the documentation for the InputNumbers component
The InputNumber component allows users to enter numeric values within a specified range using the mouse or keyboard. It ensures controlled and validated number input.

#### **When to Use**
- When a numeric value needs to be provided by the user.
- To restrict input to numbers only, optionally within a defined range.
- For scenarios like ..... selection or .... or .....

{/* Documentation goes here */}

Expand Down
16 changes: 15 additions & 1 deletion docs/components/Data Entry/QueryItem/Documentation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,21 @@ import * as QueryItemStories from '../../../../src/components/data-entry/QueryIt

# QueryItem

This is the documentation for the QueryItems component
QueryItems are the essential elements used for query builders such as **Analysis Builder**, **Audience Builder**, or **Prediction Builder**. They work together to form clauses that power query logic.


#### **Types of QueryItems**
There are four types of QueryItems, each serving a specific purpose:

1. **ValueSelector**: Used to select a specific value from a list or range.
2. **Qualifier**: Defines conditions, such as operators (e.g., equals, greater than).
3. **Text**: Allows free-form text input for custom queries or descriptions.
4. **Action**: Provides interactive options, such as adding or removing query items.


#### **When To Use**
- To build queries for analytical tools like Audience Builder or Analysis Builder.
- To allow users to create complex conditions with structured query clauses.

{/* Documentation goes here */}

Expand Down
7 changes: 5 additions & 2 deletions docs/components/Data Entry/Radio/Documentation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,11 @@ import * as RadioStories from '../../../../src/components/data-entry/Radio/Radio

# Radio

This is the documentation for the Radios component
Used to select a single state from multiple options.

{/* Documentation goes here */}
#### **When To Use**
- To select a single state from multiple options.
- Unlike `Select`, Radio is always visible, helping users easily compare choices.
- Use Radio when there are **few options** to avoid overwhelming the user.

<Canvas meta={RadioStories.default} />
2 changes: 0 additions & 2 deletions docs/components/Data Entry/Select/Documentation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ import * as SelectStories from '../../../../src/components/data-entry/Select/Sel

# Select

### Overview

Select component allows users to select the necessary record from a list.

<Canvas meta={SelectStories.default} />
Expand Down
7 changes: 5 additions & 2 deletions docs/components/Data Entry/Switch/Documentation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,11 @@ import * as SwitchStories from '../../../../src/components/data-entry/Switch/Swi

# Switch

This is the documentation for the Switchs component
Used to toggle between two states.

{/* Documentation goes here */}
#### **When To Use**
- To represent the switching between two states, such as an on-off state.
- Use **Switch** when the state change happens immediately upon toggling.
- Use **Checkbox** for state marking, which typically requires a submit operation to apply changes.

<Canvas meta={SwitchStories.default} />
12 changes: 10 additions & 2 deletions docs/components/Data Entry/TreeSelect/Documentation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,16 @@ import * as TreeSelectStories from '../../../../src/components/data-entry/TreeSe

# TreeSelect

This is the documentation for the TreeSelects component
TreeSelect is similar to Select, but the values are provided in a tree-like structure.

#### **When To Use**
- Use TreeSelect when data entries are defined in a hierarchical manner.
- Ideal for scenarios like:
- Corporate hierarchies
- Directory structures
- Categorized data with parent-child relationships

This control makes navigating and selecting options in complex, nested datasets intuitive and user-friendly.

{/* Documentation goes here */}

<Canvas meta={TreeSelectStories.default} />
7 changes: 5 additions & 2 deletions docs/components/Data Entry/Upload/Documentation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,11 @@ import * as UploadStories from '../../../../src/components/data-entry/Upload/Upl

# Upload

This is the documentation for the Uploads component
Used to select and upload files or drag and drop files.

{/* Documentation goes here */}
#### **When To Use**
- When you need to upload one or more files.
- When you want to allow file uploads via drag-and-drop.
- When you need to display the upload process (e.g., progress indicators).

<Canvas meta={UploadStories.default} />