docs: table copy updates (#487)

Co-authored-by: Gabriel Tibúrcio <[email protected]>

docs/UX Patterns/Table/Cell Types.mdx

@@ -0,0 +1,95 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as TableStories from './Table.stories'
+
+<Meta of={TableStories} />
+
+# Table Cells Types
+
+### Text
+
+Text cells support 1 or 2 lines of text. Single-line text cells are typically used for concise information like names, identifiers, or short labels. Two-line text cells are used when additional context is needed and can include entry type or ID, allowing for more detailed information without consuming excessive space.
+
+[Insert 2 lines example]
+
+#### Case
+
+We use sentence case for everything except for titles, which use title case. Exceptions are allowed based on a specific project requirements.
+
+#### Truncating Long names
+
+Column with most dynamic and longest copy to typically have flexible. When needed implement cell truncation by ending the text with ellipses and display the full text in a tooltip upon hovering.
+
+[Insert Example]
+
+#### 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.
+
+
+### 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.
+
+### 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.
+
+# 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)
+
+
+

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:
 

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.
 
-<br />
+### Cell Types
 
-<Story of={TableStories.BasicTable} />
+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
+<br />
+
+<Story of={TableStories.BasicTable} />
 
-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