From feb62dfd772a67c1fd4372f89a3c0feb60d16c0c Mon Sep 17 00:00:00 2001 From: Gabriel Tiburcio Date: Mon, 21 Oct 2024 18:28:58 -0300 Subject: [PATCH] docs: reviews on tables and re-structuring --- docs/UX Patterns/Directory.mdx | 3 -- docs/UX Patterns/Table/Cell Tag.mdx | 20 +++++++++ docs/UX Patterns/Table/Documentation.mdx | 53 ------------------------ docs/UX Patterns/Table/Table.stories.tsx | 40 +++++++++--------- docs/UX Patterns/Table/Tags.mdx | 17 -------- 5 files changed, 40 insertions(+), 93 deletions(-) delete mode 100644 docs/UX Patterns/Directory.mdx delete mode 100644 docs/UX Patterns/Table/Documentation.mdx delete mode 100644 docs/UX Patterns/Table/Tags.mdx diff --git a/docs/UX Patterns/Directory.mdx b/docs/UX Patterns/Directory.mdx deleted file mode 100644 index db9c21e0f..000000000 --- a/docs/UX Patterns/Directory.mdx +++ /dev/null @@ -1,3 +0,0 @@ -# Directory - -TBD \ No newline at end of file diff --git a/docs/UX Patterns/Table/Cell Tag.mdx b/docs/UX Patterns/Table/Cell Tag.mdx index 4bfad855b..086174e98 100644 --- a/docs/UX Patterns/Table/Cell Tag.mdx +++ b/docs/UX Patterns/Table/Cell Tag.mdx @@ -5,3 +5,23 @@ import * as TableStories from './Table.stories' # Cell Tag + +### 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 diff --git a/docs/UX Patterns/Table/Documentation.mdx b/docs/UX Patterns/Table/Documentation.mdx deleted file mode 100644 index bf8c4ec9a..000000000 --- a/docs/UX Patterns/Table/Documentation.mdx +++ /dev/null @@ -1,53 +0,0 @@ -import { Meta, Story } from '@storybook/blocks'; - -{/* // import * as TableStories from './Table.stories'; */} - -{/* */} - -{/* */} - -# 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. - -#### Basic Table - -##### Header -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 -Table cells support various formats and are designed to display data in clear, readable ways. -- Numbers (Coming Soon) -- Date / Time (Coming Soon) -- CTA Buttons (Coming Soon) -- Status Badges (Coming Soon) -- Links (Coming Soon) -- Tags (Coming Soon) -- More Actions (Coming Soon) - -[View Example](#link) - -#### 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 -| 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) | - - - -#### Example basic table image (To be changed) - - diff --git a/docs/UX Patterns/Table/Table.stories.tsx b/docs/UX Patterns/Table/Table.stories.tsx index ca6cf1c67..208a9adb9 100644 --- a/docs/UX Patterns/Table/Table.stories.tsx +++ b/docs/UX Patterns/Table/Table.stories.tsx @@ -18,6 +18,7 @@ import { Tooltip, } from 'src/components' import { DatePickerWithDisabledYears } from 'src/components/data-entry/DatePicker/DatePicker.stories' +import { ColorPrimary, ColorSuccess, ColorTextPlaceholder } from 'src/styles/style' interface DataType { key: string @@ -30,19 +31,17 @@ interface DataType { mpId: string } -type Environment = 'unknown' | 'development' | 'production' +type Environment = 'development' | 'production' type Status = 'draft' | 'error' | 'ready' const EnvironmentColors: Record = { production: 'blue', development: 'purple', - unknown: 'default', } const EnvironmentNames: Record = { production: 'Prod', development: 'Dev', - unknown: 'Unknown', } const getTagColorForEnvironment = (env: Environment): ITagProps['color'] => EnvironmentColors[env] @@ -50,9 +49,9 @@ const getTagColorForEnvironment = (env: Environment): ITagProps['color'] => Envi const getNameForEnvironment = (env: Environment) => EnvironmentNames[env] const StatusColors: Record = { - draft: 'cyan', - error: 'red', - ready: 'green', + draft: ColorTextPlaceholder, + error: ColorPrimary, + ready: ColorSuccess, } const StatusNames: Record = { @@ -80,20 +79,20 @@ const columns: TableProps['columns'] = [ }, { title: () => ( - - Help lorem ipsum. - - Learn More - - - }> - - ID + + ID + + Help lorem ipsum. + + Learn More + + + }> - - + + ), dataIndex: 'id', key: 'id', @@ -151,6 +150,7 @@ const columns: TableProps['columns'] = [ suffixIcon={} variant="borderless" dropdownStyle={{ width: '200px' }} + value={null} options={[ { label: 'Option 1', value: 'option1' }, { label: 'Option 2', value: 'option2' }, @@ -175,7 +175,7 @@ function createMockRow(): DataType { timestamp: faker.date.recent().valueOf() * 1000 * 1000, mpId: faker.number.int({ max: 9_999_999_999 }).toString(), output: faker.helpers.arrayElement(['Braze', 'mP Analytics', 'Cortex', 'Applytics', 'Google Analytics']), - environment: faker.helpers.arrayElement(['unknown', 'development', 'production']), + environment: faker.helpers.arrayElement(['development', 'production']), status: faker.helpers.arrayElement(['draft', 'error', 'ready']), } } diff --git a/docs/UX Patterns/Table/Tags.mdx b/docs/UX Patterns/Table/Tags.mdx deleted file mode 100644 index 88d4acf86..000000000 --- a/docs/UX Patterns/Table/Tags.mdx +++ /dev/null @@ -1,17 +0,0 @@ -### 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