diff --git a/docs/components/Data Display/Tooltip/Documentation.mdx b/docs/components/Data Display/Tooltip/Documentation.mdx index a72819ad6..2a2e69840 100644 --- a/docs/components/Data Display/Tooltip/Documentation.mdx +++ b/docs/components/Data Display/Tooltip/Documentation.mdx @@ -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' -{/* 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. + + + +### 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 - \ No newline at end of file +| Type | Resource | +| ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | +| Eames | [Tooltip Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=413-13162&t=5iHsAw2QyK8Lx8zt-4) | diff --git a/docs/components/Data Entry/Select/Documentation.mdx b/docs/components/Data Entry/Select/Documentation.mdx index 09da89e8e..f0a8d52b7 100644 --- a/docs/components/Data Entry/Select/Documentation.mdx +++ b/docs/components/Data Entry/Select/Documentation.mdx @@ -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' -{/* 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. + + + +### 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 - \ No newline at end of file +| Type | Resource | +| ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | +| Eames | [Select Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=1217-31707&t=5iHsAw2QyK8Lx8zt-4) |