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.

Sign up for GitHub

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

docs: tooltip and select docs #473

Merged
merged 1 commit into from
Oct 24, 2024
Merged

docs: tooltip and select docs #473

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 17 additions & 7 deletions docs/components/Data Display/Tooltip/Documentation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,25 @@
import { Meta, Canvas } from '@storybook/blocks';
import { Meta, Canvas } from '@storybook/blocks'

import * as TooltipStories from '../../../../src/components/data-display/Tooltip/Tooltip.stories';
import * as TooltipStories from '../../../../src/components/data-display/Tooltip/Tooltip.stories'

<Meta of={TooltipStories} />

{/* Documentation goes here */}

# Tooltip

This is the documentation for the tooltip component
### Overview

The Tooltip is a lightweight, contextual UI element used to display additional information when a user hovers over or focuses on an element. It enhances the user experience by providing supplementary details without cluttering the interface.

<Canvas meta={TooltipStories.default} />

### When to use:

- To provide context or explanation for a UI element, icon, button, or data point that may not be immediately clear.
- When more information is needed to explain an action, label, or feature without disrupting the user's flow.
- To guide users with short, helpful messages, especially when onboarding or interacting with complex components.

{/* Documentation goes here */}
#### Related Links

<Canvas meta={TooltipStories.default} />
| Type | Resource |
| ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Eames | [Tooltip Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=413-13162&t=5iHsAw2QyK8Lx8zt-4) |
30 changes: 23 additions & 7 deletions docs/components/Data Entry/Select/Documentation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,31 @@
import { Meta, Canvas } from '@storybook/blocks';
import { Meta, Canvas } from '@storybook/blocks'

import * as SelectStories from '../../../../src/components/data-entry/Select/Select.stories';
import * as SelectStories from '../../../../src/components/data-entry/Select/Select.stories'

<Meta of={SelectStories} />

{/* Documentation goes here */}

# Select

This is the documentation for the select component
### Overview

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

<Canvas meta={SelectStories.default} />

### When to use:

- When users need to filter or refine data views based on specific criteria (e.g., selecting records by status or category).
- When there are distinct categories or options that users must choose from during data entry
- When the list of options is too long to display effectively with buttons, checkboxes, or radio buttons, allowing for a compact, scrollable dropdown.

### Related Components:

- Multiselect [Insert Link]
- Select with Search [Insert Link]
- Select with Autocomplete [Insert Link]

{/* Documentation goes here */}
#### Related Links

<Canvas meta={SelectStories.default} />
| Type | Resource |
| ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Eames | [Select Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=1217-31707&t=5iHsAw2QyK8Lx8zt-4) |
Loading