From 97ec14c25647acf53b3c65cc667c9cb9ef34f5f7 Mon Sep 17 00:00:00 2001 From: soniakose Date: Wed, 6 Nov 2024 16:13:52 -0500 Subject: [PATCH 01/16] Update Table.mdx --- docs/UX Patterns/Table/Table.mdx | 40 ++++++++++++++------------------ 1 file changed, 18 insertions(+), 22 deletions(-) diff --git a/docs/UX Patterns/Table/Table.mdx b/docs/UX Patterns/Table/Table.mdx index 33b0c813e..33dacf04a 100644 --- a/docs/UX Patterns/Table/Table.mdx +++ b/docs/UX Patterns/Table/Table.mdx @@ -13,45 +13,41 @@ Move Header, Pagination and Cell Types to the top ### Overview -Tables present and organize data in a structured, readable format, ranging from basic displays to complex interfaces that support queries and data manipulation. +Tables present and organize data in a structured, readable format, ranging from basic displays to complex interfaces that support queries and data manipulation. You can configure tables using the following elements as needed for your specific use case. mParticle Tables supports multiple cell formats for clear data display. See detailed cell guidelines [here.](#link) ---- +### Header -### Basic Table +A typical table header contains column titles that describe the data in each column. It includes functionality for sorting columns and may feature help icons with tooltips to provide additional information on each column’s purpose. -
+### Cell Types - +mParticle Tables support multiple cell formats for clear data display. See detailed cell guidelines [here.](https://mparticle.github.io/aquarium/?path=/docs/ux-patterns-table-table--cell-text) -### Header +### Expandable Row + +A table row with expand and collapse functionality, allowing users to toggle additional details or nested content directly within the table. + +-> Insert Example -A typical table header contains column titles that describe the data in each column. It 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 +-> Insert Example + +### Filters -Table cells support various formats and are designed to display data in clear, readable ways. +Filters help users narrow down large datasets within tables. Learn more about the variety of filter types available in the mParticle table [here.](https://mparticle.github.io/aquarium/?path=/docs/ux-patterns-table-filters--documentation) -- Date / Time (Coming Soon) -- Text -- CTA Buttons (Coming Soon) -- Status (Coming Soon) -- Tags (Coming Soon) -- More Actions (Coming Soon) -[View Example](#link) +### Table Example -### Tables with Filters +
+ + -Filters help users refine large datasets within tables. The mParticle table supports a range of filter types, including: -- [Search](#link-to-search) -- [Date Range filters](#link-to-daterange) -- [Basic Filters](#link-to-basic-filters) -- [Filters with an Apply button](#link-to-apply-button-filters) ### Related Links From 0ec0e6859f80fcac9ef5d3480d36b491aaa89461 Mon Sep 17 00:00:00 2001 From: soniakose Date: Wed, 6 Nov 2024 16:30:21 -0500 Subject: [PATCH 02/16] Update Filters.mdx --- docs/UX Patterns/Table/Filters.mdx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/UX Patterns/Table/Filters.mdx b/docs/UX Patterns/Table/Filters.mdx index 17bc020a7..7d3eae893 100644 --- a/docs/UX Patterns/Table/Filters.mdx +++ b/docs/UX Patterns/Table/Filters.mdx @@ -10,9 +10,12 @@ import * as FiltersStories from './Filters.stories' _Note: This section covers filters specifically for tables. For query-related filters, please refer to the [Analytics Filters - Coming Soon](#coming)._ +#### Filter Search +Located above the table on the right, the search filter allows users to quickly find specific data within the table by entering keywords. + #### **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). +Simple filters are ideal when there are only a few filter options. These are straightforward and quick to use and appearing as dropdowns above the table. For examples, refer to the [Select Component](https://mparticle.github.io/aquarium/?path=/docs/components-data-entry-select--documentation). Examples: From 4eb3023a7aeb06e32b2a9455a8004319fddea1ef Mon Sep 17 00:00:00 2001 From: soniakose Date: Wed, 6 Nov 2024 16:30:38 -0500 Subject: [PATCH 03/16] Update Date and Time.mdx --- docs/UX Patterns/Table/Date and Time.mdx | 20 -------------------- 1 file changed, 20 deletions(-) diff --git a/docs/UX Patterns/Table/Date and Time.mdx b/docs/UX Patterns/Table/Date and Time.mdx index c22ebe327..54d10ceef 100644 --- a/docs/UX Patterns/Table/Date and Time.mdx +++ b/docs/UX Patterns/Table/Date and Time.mdx @@ -6,24 +6,4 @@ import * as TableStories from './Table.stories' # Table Cells -### Date and Time -To ensure clarity for both US and EU audiences, all dates and times should follow a standard global format. All times are displayed in UTC. - -#### Do - -- Date: MMM DD, YYYY (e.g., Sep 12, 2024), which removes any ambiguity between US (MM/DD) and EU (DD/MM) formats. -- Time Zone: UTC (displayed once, somewhere visible on the screen). - -| Event | Start Date (UTC) | End Date (UTC) | -| -------------- | ---------------- | -------------- | -| Product Launch | Sep 12, 2024 | Sep 14, 2024 | -| Black Friday | Nov 29, 2024 | Nov 29, 2024 | - -[Insert link: Displaying a link in a date picker] - -#### Don't - -- **Mix Date Formats**: Do not use different formats such as `MM/DD/YYYY` (e.g., 09/12/2024, which could be interpreted as either September 12 or December 9) or `DD/MM/YYYY` (e.g., 12/09/2024, which can also cause confusion). Stick to the global format `MMM DD, YYYY` (e.g., Sep 12, 2024). -- **Omit the Time Zone**: Never omit the time zone when displaying times, especially when it might lead to user confusion. Example: Instead of just showing "14:30", show "14:30 UTC". -- **Repeat UTC for Each Entry**: Avoid repeating "UTC" in every row of a table or list. Example: Instead of labeling every row "Sep 12, 2024 (UTC)", use a clear table header like `Date (UTC)` to indicate the time zone for all rows. From 66138a20523dc4938813e378e90a625e8db0e796 Mon Sep 17 00:00:00 2001 From: soniakose Date: Wed, 6 Nov 2024 16:30:55 -0500 Subject: [PATCH 04/16] Update Cell Text.mdx --- docs/UX Patterns/Table/Cell Text.mdx | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/docs/UX Patterns/Table/Cell Text.mdx b/docs/UX Patterns/Table/Cell Text.mdx index cfe9eca52..2fd278dbb 100644 --- a/docs/UX Patterns/Table/Cell Text.mdx +++ b/docs/UX Patterns/Table/Cell Text.mdx @@ -25,3 +25,24 @@ Column with most dynamic and longest copy to typically have flexible. When neede #### Cell Alligment Text content within table cells is typically left-aligned to enhance readability and allow for easier scanning of information. +### Date and Time + +To ensure clarity for both US and EU audiences, all dates and times should follow a standard global format. All times are displayed in UTC. + +#### Do + +- Date: MMM DD, YYYY (e.g., Sep 12, 2024), which removes any ambiguity between US (MM/DD) and EU (DD/MM) formats. +- Time Zone: UTC (displayed once, somewhere visible on the screen). + +| Event | Start Date (UTC) | End Date (UTC) | +| -------------- | ---------------- | -------------- | +| Product Launch | Sep 12, 2024 | Sep 14, 2024 | +| Black Friday | Nov 29, 2024 | Nov 29, 2024 | + +[Insert link: Displaying a link in a date picker] + +#### Don't + +- **Mix Date Formats**: Do not use different formats such as `MM/DD/YYYY` (e.g., 09/12/2024, which could be interpreted as either September 12 or December 9) or `DD/MM/YYYY` (e.g., 12/09/2024, which can also cause confusion). Stick to the global format `MMM DD, YYYY` (e.g., Sep 12, 2024). +- **Omit the Time Zone**: Never omit the time zone when displaying times, especially when it might lead to user confusion. Example: Instead of just showing "14:30", show "14:30 UTC". +- **Repeat UTC for Each Entry**: Avoid repeating "UTC" in every row of a table or list. Example: Instead of labeling every row "Sep 12, 2024 (UTC)", use a clear table header like `Date (UTC)` to indicate the time zone for all rows. From 2a57658fc396c78f480d568741f9471335e55aa8 Mon Sep 17 00:00:00 2001 From: soniakose Date: Wed, 6 Nov 2024 16:31:25 -0500 Subject: [PATCH 05/16] Update Date and Time.mdx --- docs/UX Patterns/Table/Date and Time.mdx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/docs/UX Patterns/Table/Date and Time.mdx b/docs/UX Patterns/Table/Date and Time.mdx index 54d10ceef..c8b1b4233 100644 --- a/docs/UX Patterns/Table/Date and Time.mdx +++ b/docs/UX Patterns/Table/Date and Time.mdx @@ -1,9 +1 @@ -import { Meta, Story } from '@storybook/blocks' - -import * as TableStories from './Table.stories' - - - -# Table Cells - - +delete From db9deaa3bf43b77a1eceffcf6780e5c2a91ea498 Mon Sep 17 00:00:00 2001 From: soniakose Date: Wed, 6 Nov 2024 16:32:44 -0500 Subject: [PATCH 06/16] Update Cell Status.mdx --- docs/UX Patterns/Table/Cell Status.mdx | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/docs/UX Patterns/Table/Cell Status.mdx b/docs/UX Patterns/Table/Cell Status.mdx index 57b8bd603..a82c0daa9 100644 --- a/docs/UX Patterns/Table/Cell Status.mdx +++ b/docs/UX Patterns/Table/Cell Status.mdx @@ -4,20 +4,5 @@ import * as TableStories from './Table.stories' -# Table Cells +delete -### Status - -Always use badge components for system status. Reserve tags for actual tags, labels, and environment descriptions (e.g., prod, dev). This ensures clear visual distinction between different information types. - -#### Do - - - -#### Don't - - - -### Cell Aligment - -Statuses are left-aligned to create a cohesive and organized table layout. From 99fb715d88f7fad117c3ec7930b382b5a245bfe4 Mon Sep 17 00:00:00 2001 From: soniakose Date: Wed, 6 Nov 2024 16:33:40 -0500 Subject: [PATCH 07/16] Update Cell Text.mdx --- docs/UX Patterns/Table/Cell Text.mdx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/docs/UX Patterns/Table/Cell Text.mdx b/docs/UX Patterns/Table/Cell Text.mdx index 2fd278dbb..8d0901c0d 100644 --- a/docs/UX Patterns/Table/Cell Text.mdx +++ b/docs/UX Patterns/Table/Cell Text.mdx @@ -4,7 +4,7 @@ import * as TableStories from './Table.stories' -# Table Cells +# Table Cells Types ### Text @@ -46,3 +46,15 @@ To ensure clarity for both US and EU audiences, all dates and times should follo - **Mix Date Formats**: Do not use different formats such as `MM/DD/YYYY` (e.g., 09/12/2024, which could be interpreted as either September 12 or December 9) or `DD/MM/YYYY` (e.g., 12/09/2024, which can also cause confusion). Stick to the global format `MMM DD, YYYY` (e.g., Sep 12, 2024). - **Omit the Time Zone**: Never omit the time zone when displaying times, especially when it might lead to user confusion. Example: Instead of just showing "14:30", show "14:30 UTC". - **Repeat UTC for Each Entry**: Avoid repeating "UTC" in every row of a table or list. Example: Instead of labeling every row "Sep 12, 2024 (UTC)", use a clear table header like `Date (UTC)` to indicate the time zone for all rows. + + +### Status + +Always use badge components for system status. Reserve tags for actual tags, labels, and environment descriptions (e.g., prod, dev). This ensures clear visual distinction between different information types. + + +-> Insert Example + +### Cell Aligment + +Statuses are left-aligned to create a cohesive and organized table layout. From 08b7593d29b8da144260a9dbe974964a5e7e6de4 Mon Sep 17 00:00:00 2001 From: soniakose Date: Wed, 6 Nov 2024 16:34:07 -0500 Subject: [PATCH 08/16] Update Cell Text.mdx --- docs/UX Patterns/Table/Cell Text.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/UX Patterns/Table/Cell Text.mdx b/docs/UX Patterns/Table/Cell Text.mdx index 8d0901c0d..ead8ecdd6 100644 --- a/docs/UX Patterns/Table/Cell Text.mdx +++ b/docs/UX Patterns/Table/Cell Text.mdx @@ -55,6 +55,6 @@ Always use badge components for system status. Reserve tags for actual tags, lab -> Insert Example -### Cell Aligment +#### Cell Aligment Statuses are left-aligned to create a cohesive and organized table layout. From 2fa6220cc2ff8e02c2c2dc1b70693beeac6f0da1 Mon Sep 17 00:00:00 2001 From: soniakose Date: Wed, 6 Nov 2024 16:34:26 -0500 Subject: [PATCH 09/16] Update Cell CTA.mdx --- docs/UX Patterns/Table/Cell CTA.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/UX Patterns/Table/Cell CTA.mdx b/docs/UX Patterns/Table/Cell CTA.mdx index 19c5be73f..4a2529c6c 100644 --- a/docs/UX Patterns/Table/Cell CTA.mdx +++ b/docs/UX Patterns/Table/Cell CTA.mdx @@ -5,3 +5,4 @@ import * as TableStories from './Table.stories' # Cell CTA +delete From c90c6fe2f0088be33bcf5a6bc3bd17e839e47408 Mon Sep 17 00:00:00 2001 From: soniakose Date: Wed, 6 Nov 2024 16:34:56 -0500 Subject: [PATCH 10/16] Update Cell Link.mdx --- docs/UX Patterns/Table/Cell Link.mdx | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/docs/UX Patterns/Table/Cell Link.mdx b/docs/UX Patterns/Table/Cell Link.mdx index 78f217591..014321c27 100644 --- a/docs/UX Patterns/Table/Cell Link.mdx +++ b/docs/UX Patterns/Table/Cell Link.mdx @@ -4,20 +4,6 @@ import * as TableStories from './Table.stories' -# Cell Link -### Links -#### When to use: - -##### Text Links: - -Use the Link component [Insert Link] to navigate to other pages, sections, or external resources. - -##### Call-to-Actions (CTAs): - -Links that serve as action triggers, like "Activate", should also follow these styles. - -##### Buttons vs Links: - -Use links for navigation and "More Actions" menu or a buttons for actions. +delete From 26d966f02a1e613e7443f6aaf7713cffc0dd0027 Mon Sep 17 00:00:00 2001 From: soniakose Date: Wed, 6 Nov 2024 16:35:09 -0500 Subject: [PATCH 11/16] Update Cell Text.mdx --- docs/UX Patterns/Table/Cell Text.mdx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/docs/UX Patterns/Table/Cell Text.mdx b/docs/UX Patterns/Table/Cell Text.mdx index ead8ecdd6..88fb82c18 100644 --- a/docs/UX Patterns/Table/Cell Text.mdx +++ b/docs/UX Patterns/Table/Cell Text.mdx @@ -58,3 +58,19 @@ Always use badge components for system status. Reserve tags for actual tags, lab #### Cell Aligment Statuses are left-aligned to create a cohesive and organized table layout. + +### Links + +#### When to use: + +##### Text Links: + +Use the Link component [Insert Link] to navigate to other pages, sections, or external resources. + +##### Call-to-Actions (CTAs): + +Links that serve as action triggers, like "Activate", should also follow these styles. + +##### Buttons vs Links: + +Use links for navigation and "More Actions" menu or a buttons for actions. From 6c4b292d393a13d8d7087db168b748262887a735 Mon Sep 17 00:00:00 2001 From: soniakose Date: Wed, 6 Nov 2024 16:35:37 -0500 Subject: [PATCH 12/16] Update Cell More Actions.mdx --- docs/UX Patterns/Table/Cell More Actions.mdx | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/docs/UX Patterns/Table/Cell More Actions.mdx b/docs/UX Patterns/Table/Cell More Actions.mdx index 95a8e2f59..b740c304a 100644 --- a/docs/UX Patterns/Table/Cell More Actions.mdx +++ b/docs/UX Patterns/Table/Cell More Actions.mdx @@ -4,18 +4,4 @@ import * as TableStories from './Table.stories' -# 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. - -#### Examples: - -- Disabled menu item (Coming Soon) +delete From eb13ce5afa3de6062a3d6c9f06dfee0d563f486f Mon Sep 17 00:00:00 2001 From: soniakose Date: Wed, 6 Nov 2024 16:35:59 -0500 Subject: [PATCH 13/16] Update Cell Text.mdx --- docs/UX Patterns/Table/Cell Text.mdx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/docs/UX Patterns/Table/Cell Text.mdx b/docs/UX Patterns/Table/Cell Text.mdx index 88fb82c18..d9bf95eaa 100644 --- a/docs/UX Patterns/Table/Cell Text.mdx +++ b/docs/UX Patterns/Table/Cell Text.mdx @@ -74,3 +74,20 @@ Links that serve as action triggers, like "Activate", should also follow these s ##### Buttons vs Links: Use links for navigation and "More Actions" menu or a buttons for actions. + +# 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. + +#### Examples: + +- Disabled menu item (Coming Soon) + From 79d6ef58f40a68a688878ed3dfe28556a2cb9c62 Mon Sep 17 00:00:00 2001 From: soniakose Date: Wed, 6 Nov 2024 16:43:05 -0500 Subject: [PATCH 14/16] Update and rename Cell Text.mdx to Cell Types.mdx --- docs/UX Patterns/Table/{Cell Text.mdx => Cell Types.mdx} | 2 ++ 1 file changed, 2 insertions(+) rename docs/UX Patterns/Table/{Cell Text.mdx => Cell Types.mdx} (99%) diff --git a/docs/UX Patterns/Table/Cell Text.mdx b/docs/UX Patterns/Table/Cell Types.mdx similarity index 99% rename from docs/UX Patterns/Table/Cell Text.mdx rename to docs/UX Patterns/Table/Cell Types.mdx index d9bf95eaa..23bd2cc9a 100644 --- a/docs/UX Patterns/Table/Cell Text.mdx +++ b/docs/UX Patterns/Table/Cell Types.mdx @@ -91,3 +91,5 @@ The Actions Menu provides a consolidated interface for row-specific operations, - Disabled menu item (Coming Soon) + + From eb162d971d5f9a48df3d85b1735cf50141987562 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gabriel=20Tib=C3=BArcio?= Date: Thu, 7 Nov 2024 13:08:12 -0300 Subject: [PATCH 15/16] Delete docs/UX Patterns/Table/Cell CTA.mdx --- docs/UX Patterns/Table/Cell CTA.mdx | 8 -------- 1 file changed, 8 deletions(-) delete mode 100644 docs/UX Patterns/Table/Cell CTA.mdx diff --git a/docs/UX Patterns/Table/Cell CTA.mdx b/docs/UX Patterns/Table/Cell CTA.mdx deleted file mode 100644 index 4a2529c6c..000000000 --- a/docs/UX Patterns/Table/Cell CTA.mdx +++ /dev/null @@ -1,8 +0,0 @@ -import { Meta, Story } from '@storybook/blocks' - -import * as TableStories from './Table.stories' - - - -# Cell CTA -delete From a14848752cf3ebe789122d3594079ec5259f5165 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gabriel=20Tib=C3=BArcio?= Date: Thu, 7 Nov 2024 13:10:54 -0300 Subject: [PATCH 16/16] docs: delete some files --- docs/UX Patterns/Table/Cell Link.mdx | 9 --------- docs/UX Patterns/Table/Cell More Actions.mdx | 7 ------- docs/UX Patterns/Table/Cell Status.mdx | 8 -------- docs/UX Patterns/Table/Date and Time.mdx | 1 - 4 files changed, 25 deletions(-) delete mode 100644 docs/UX Patterns/Table/Cell Link.mdx delete mode 100644 docs/UX Patterns/Table/Cell More Actions.mdx delete mode 100644 docs/UX Patterns/Table/Cell Status.mdx delete mode 100644 docs/UX Patterns/Table/Date and Time.mdx diff --git a/docs/UX Patterns/Table/Cell Link.mdx b/docs/UX Patterns/Table/Cell Link.mdx deleted file mode 100644 index 014321c27..000000000 --- a/docs/UX Patterns/Table/Cell Link.mdx +++ /dev/null @@ -1,9 +0,0 @@ -import { Meta, Story } from '@storybook/blocks' - -import * as TableStories from './Table.stories' - - - - - -delete diff --git a/docs/UX Patterns/Table/Cell More Actions.mdx b/docs/UX Patterns/Table/Cell More Actions.mdx deleted file mode 100644 index b740c304a..000000000 --- a/docs/UX Patterns/Table/Cell More Actions.mdx +++ /dev/null @@ -1,7 +0,0 @@ -import { Meta, Story } from '@storybook/blocks' - -import * as TableStories from './Table.stories' - - - -delete diff --git a/docs/UX Patterns/Table/Cell Status.mdx b/docs/UX Patterns/Table/Cell Status.mdx deleted file mode 100644 index a82c0daa9..000000000 --- a/docs/UX Patterns/Table/Cell Status.mdx +++ /dev/null @@ -1,8 +0,0 @@ -import { Meta, Story } from '@storybook/blocks' - -import * as TableStories from './Table.stories' - - - -delete - diff --git a/docs/UX Patterns/Table/Date and Time.mdx b/docs/UX Patterns/Table/Date and Time.mdx deleted file mode 100644 index c8b1b4233..000000000 --- a/docs/UX Patterns/Table/Date and Time.mdx +++ /dev/null @@ -1 +0,0 @@ -delete