From bade366e2dae569f2c4d77b101e5dde6f6de864d Mon Sep 17 00:00:00 2001 From: soniakose Date: Mon, 7 Oct 2024 10:50:21 -0400 Subject: [PATCH 01/15] Create Table --- docs/Design Templates/Table | 1 + 1 file changed, 1 insertion(+) create mode 100644 docs/Design Templates/Table diff --git a/docs/Design Templates/Table b/docs/Design Templates/Table new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/docs/Design Templates/Table @@ -0,0 +1 @@ + From e8e1e29bb135c0d49327bdf38670408bc69912b3 Mon Sep 17 00:00:00 2001 From: soniakose Date: Mon, 7 Oct 2024 11:13:10 -0400 Subject: [PATCH 02/15] Update and rename Table to Table.mdx --- docs/Design Templates/Table | 1 - docs/Design Templates/Table.mdx | 23 +++++++++++++++++++++++ 2 files changed, 23 insertions(+), 1 deletion(-) delete mode 100644 docs/Design Templates/Table create mode 100644 docs/Design Templates/Table.mdx diff --git a/docs/Design Templates/Table b/docs/Design Templates/Table deleted file mode 100644 index 8b1378917..000000000 --- a/docs/Design Templates/Table +++ /dev/null @@ -1 +0,0 @@ - diff --git a/docs/Design Templates/Table.mdx b/docs/Design Templates/Table.mdx new file mode 100644 index 000000000..c74d5c574 --- /dev/null +++ b/docs/Design Templates/Table.mdx @@ -0,0 +1,23 @@ +### Table +#### Overview +Tables present and organize data in a structured, readable format, ranging from basic displays to complex interfaces that support queries and data manipulation. +#### Filter Bar +Filters allow users to narrow down large datasets in tables. While not required for all tables, the filter bar typically appears above the table. +#### Header +A typical table header contains column titles that describe the data in each column. It often includes functionality for sorting columns and may feature help icons with tooltips to provide additional information on each column’s purpose. +#### Pagination +Use pagination in tables to improve performance and reduce load times by fetching only the data needed for the current page. + +#### Cell Types +Table cells that support different formats and are designed to display various types of data in appropriate and easily readable ways. +- Numbers (Coming Soon) +- Date / Time +- CTA Buttons +- Status Badges +- Links (Coming Soon) +- Tags (Coming Soon) + +#### Related Links +| Type | Resource | +| -------- | ------- | +| Eames | [Figma Templates](https://www.figma.com/design/yCPszaTtkCFxRHaSkkJFR9/Eames-Templates-%5BInternal%5D?node-id=2114-9632&node-type=frame&t=Aa9XxcKyme3ud4cb-0) | From 282709d8bdca09e871e8432ce883404114782b1b Mon Sep 17 00:00:00 2001 From: soniakose Date: Mon, 7 Oct 2024 11:15:19 -0400 Subject: [PATCH 03/15] Create Filters --- docs/Design Templates/Filters | 1 + 1 file changed, 1 insertion(+) create mode 100644 docs/Design Templates/Filters diff --git a/docs/Design Templates/Filters b/docs/Design Templates/Filters new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/docs/Design Templates/Filters @@ -0,0 +1 @@ + From 4f2b74dd0dcdd4b59adcd221e33d17c75eb43053 Mon Sep 17 00:00:00 2001 From: soniakose Date: Mon, 7 Oct 2024 11:17:45 -0400 Subject: [PATCH 04/15] Rename Filters to Filters.mdx --- docs/Design Templates/{Filters => Filters.mdx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename docs/Design Templates/{Filters => Filters.mdx} (100%) diff --git a/docs/Design Templates/Filters b/docs/Design Templates/Filters.mdx similarity index 100% rename from docs/Design Templates/Filters rename to docs/Design Templates/Filters.mdx From b74d6ee0facf9a9071d3b0da4d2175708b51e550 Mon Sep 17 00:00:00 2001 From: soniakose Date: Mon, 7 Oct 2024 11:44:40 -0400 Subject: [PATCH 05/15] Update Filters.mdx --- docs/Design Templates/Filters.mdx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/docs/Design Templates/Filters.mdx b/docs/Design Templates/Filters.mdx index 8b1378917..c40aa5d2d 100644 --- a/docs/Design Templates/Filters.mdx +++ b/docs/Design Templates/Filters.mdx @@ -1 +1,20 @@ +### Filters +*Note: This section covers filters specifically for tables. For query-related filters, please refer to the [Analytics Filters - Coming Soon](#coming).* + +#### **Simple Filters** +Simple filters are ideal when there are only a few filter options. These are straightforward and quick to use, often appearing as dropdowns above the table. For implementation, refer to the [Select Component](https://mparticle.github.io/aquarium/?path=/docs/components-data-entry-select--documentation). + +Examples: +- Coming Soon +- Coming Soon + +#### **Complex Filters with Apply Button** +Complex filters provide more advanced filtering options, allowing users to apply multiple criteria at once. These filters often include dropdowns, checkboxes, and text fields. Complex filters are particularly useful when multiple filters need to be applied simultaneously or when load times might be a concern. + +#### **Date Range Filters** +Date range filters allow users to specify a range of dates to narrow down the data displayed in the table. Typically, these filters include a start date and an end date, with options for common ranges like “Last 7 days” or “Last 30 days.” User presets are also available for frequently used date ranges. + +Examples: +- [Basic Date Picker](https://mparticle.github.io/aquarium/?path=/docs/components-data-entry-date-picker--documentation) +- [Date Range Filter with Presets](https://mparticle.github.io/aquarium/?path=/docs/candidate-components-directory-date-range-filter--documentation) From c8bfd5368f854e35126f5104ef58d5e8680d6c3e Mon Sep 17 00:00:00 2001 From: soniakose Date: Mon, 7 Oct 2024 11:49:57 -0400 Subject: [PATCH 06/15] Create Cell-link.dmx --- docs/Design Templates/Cell-link.dmx | 1 + 1 file changed, 1 insertion(+) create mode 100644 docs/Design Templates/Cell-link.dmx diff --git a/docs/Design Templates/Cell-link.dmx b/docs/Design Templates/Cell-link.dmx new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/docs/Design Templates/Cell-link.dmx @@ -0,0 +1 @@ + From e9aa6b73419d6620a55adbb5ddf82b3186196d91 Mon Sep 17 00:00:00 2001 From: soniakose Date: Mon, 7 Oct 2024 11:50:19 -0400 Subject: [PATCH 07/15] Create cell-tag --- docs/Design Templates/cell-tag | 1 + 1 file changed, 1 insertion(+) create mode 100644 docs/Design Templates/cell-tag diff --git a/docs/Design Templates/cell-tag b/docs/Design Templates/cell-tag new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/docs/Design Templates/cell-tag @@ -0,0 +1 @@ + From e842f2f0fa533e011ded2249f978629a071f6359 Mon Sep 17 00:00:00 2001 From: soniakose Date: Mon, 7 Oct 2024 11:50:33 -0400 Subject: [PATCH 08/15] Create cell-badge --- docs/Design Templates/cell-badge | 1 + 1 file changed, 1 insertion(+) create mode 100644 docs/Design Templates/cell-badge diff --git a/docs/Design Templates/cell-badge b/docs/Design Templates/cell-badge new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/docs/Design Templates/cell-badge @@ -0,0 +1 @@ + From 0bbb549d643dce115295151f8201e6044c6aad79 Mon Sep 17 00:00:00 2001 From: soniakose Date: Mon, 7 Oct 2024 11:52:02 -0400 Subject: [PATCH 09/15] Create cell-more-actions.dmx --- docs/Design Templates/cell-more-actions.dmx | 1 + 1 file changed, 1 insertion(+) create mode 100644 docs/Design Templates/cell-more-actions.dmx diff --git a/docs/Design Templates/cell-more-actions.dmx b/docs/Design Templates/cell-more-actions.dmx new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/docs/Design Templates/cell-more-actions.dmx @@ -0,0 +1 @@ + From 3f056a7e5cb16af7c976f59b5c151bf06e5dd4b8 Mon Sep 17 00:00:00 2001 From: soniakose Date: Mon, 7 Oct 2024 11:52:48 -0400 Subject: [PATCH 10/15] Update Table.mdx --- docs/Design Templates/Table.mdx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/Design Templates/Table.mdx b/docs/Design Templates/Table.mdx index c74d5c574..e204b75e4 100644 --- a/docs/Design Templates/Table.mdx +++ b/docs/Design Templates/Table.mdx @@ -11,11 +11,12 @@ Use pagination in tables to improve performance and reduce load times by fetchin #### Cell Types Table cells that support different formats and are designed to display various types of data in appropriate and easily readable ways. - Numbers (Coming Soon) -- Date / Time -- CTA Buttons -- Status Badges +- Date / Time (Coming Soon) +- CTA Buttons (Coming Soon) +- Status Badges (Coming Soon) - Links (Coming Soon) - Tags (Coming Soon) +- More Actions (Coming Soon) #### Related Links | Type | Resource | From 7fec5cb833697ff37ca7831081027d40fa886ff5 Mon Sep 17 00:00:00 2001 From: soniakose Date: Mon, 7 Oct 2024 12:03:32 -0400 Subject: [PATCH 11/15] Update and rename cell-more-actions.dmx to cell-more-actions.mdx --- docs/Design Templates/cell-more-actions.dmx | 1 - docs/Design Templates/cell-more-actions.mdx | 12 ++++++++++++ 2 files changed, 12 insertions(+), 1 deletion(-) delete mode 100644 docs/Design Templates/cell-more-actions.dmx create mode 100644 docs/Design Templates/cell-more-actions.mdx diff --git a/docs/Design Templates/cell-more-actions.dmx b/docs/Design Templates/cell-more-actions.dmx deleted file mode 100644 index 8b1378917..000000000 --- a/docs/Design Templates/cell-more-actions.dmx +++ /dev/null @@ -1 +0,0 @@ - diff --git a/docs/Design Templates/cell-more-actions.mdx b/docs/Design Templates/cell-more-actions.mdx new file mode 100644 index 000000000..d527055b2 --- /dev/null +++ b/docs/Design Templates/cell-more-actions.mdx @@ -0,0 +1,12 @@ +### More Actions Menu + +#### Overview +The Actions Menu provides a consolidated interface for row-specific operations, such as delete, duplicate, download, and archive, all grouped within a single menu. + +#### Usage Guidelines +- Highlight destructive actions in red to ensure emphasis and user caution. +- Omit icons from menu items to maintain a clean, easy-to-read menu. +- Display the "More Actions" menu even when only one option is available. + +*Disabled menu item (coming soon)* + From 2331979af9150b565483f2730413e9dfeed3fafc Mon Sep 17 00:00:00 2001 From: soniakose Date: Mon, 7 Oct 2024 12:10:41 -0400 Subject: [PATCH 12/15] Update cell-more-actions.mdx --- docs/Design Templates/cell-more-actions.mdx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/docs/Design Templates/cell-more-actions.mdx b/docs/Design Templates/cell-more-actions.mdx index d527055b2..cf55ff2b1 100644 --- a/docs/Design Templates/cell-more-actions.mdx +++ b/docs/Design Templates/cell-more-actions.mdx @@ -3,10 +3,16 @@ #### Overview The Actions Menu provides a consolidated interface for row-specific operations, such as delete, duplicate, download, and archive, all grouped within a single menu. + + + + + #### Usage Guidelines - Highlight destructive actions in red to ensure emphasis and user caution. - Omit icons from menu items to maintain a clean, easy-to-read menu. - Display the "More Actions" menu even when only one option is available. -*Disabled menu item (coming soon)* +Examples: +- Disabled menu item (Coming oon) From 0af962960fd6612dabebba539594ead73772ed86 Mon Sep 17 00:00:00 2001 From: soniakose Date: Mon, 7 Oct 2024 12:11:02 -0400 Subject: [PATCH 13/15] Update cell-more-actions.mdx --- docs/Design Templates/cell-more-actions.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/Design Templates/cell-more-actions.mdx b/docs/Design Templates/cell-more-actions.mdx index cf55ff2b1..15b9950cb 100644 --- a/docs/Design Templates/cell-more-actions.mdx +++ b/docs/Design Templates/cell-more-actions.mdx @@ -14,5 +14,5 @@ The Actions Menu provides a consolidated interface for row-specific operations, - Display the "More Actions" menu even when only one option is available. Examples: -- Disabled menu item (Coming oon) +- Disabled menu item (Coming Soon) From 30431bc32577e56df3e32cab2fc1806c00ac926b Mon Sep 17 00:00:00 2001 From: soniakose Date: Mon, 7 Oct 2024 13:08:34 -0400 Subject: [PATCH 14/15] Create tags.mdx --- docs/Design Templates/tags.mdx | 1 + 1 file changed, 1 insertion(+) create mode 100644 docs/Design Templates/tags.mdx diff --git a/docs/Design Templates/tags.mdx b/docs/Design Templates/tags.mdx new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/docs/Design Templates/tags.mdx @@ -0,0 +1 @@ + From 91d0a69a4f304b9b482b242d00884f8225175013 Mon Sep 17 00:00:00 2001 From: soniakose Date: Mon, 7 Oct 2024 13:13:07 -0400 Subject: [PATCH 15/15] Update tags.mdx --- docs/Design Templates/tags.mdx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/docs/Design Templates/tags.mdx b/docs/Design Templates/tags.mdx index 8b1378917..88d4acf86 100644 --- a/docs/Design Templates/tags.mdx +++ b/docs/Design Templates/tags.mdx @@ -1 +1,17 @@ +### Tags in Tables +#### Overview +Tags are used within tables to visually categorize or label data, providing users with quick context about specific rows or items. Tags can indicate statuses, categories, priorities, or any other metadata that helps users understand and interpret the data at a glance. + +#### Managing Tags +- **Creating Tags - COMING SOON** +- **Editing Tags - COMING SOON** +- **Deleting Tags - COMING SOON** + +#### Displaying Tags within Tables + +COMING SOON + +#### Filtering by Tags + +COMING SOON