Improve Documentation (#3795)
* Begin docs improvement * Keep improving documentation * Upgrade Docusarus * Fix broken links
This commit is contained in:
Félix Malfait
@ -0,0 +1,9 @@
|
||||
{
|
||||
"label": "Input",
|
||||
"position": 3,
|
||||
"collapsible": true,
|
||||
"collapsed": false,
|
||||
"customProps": {
|
||||
"icon": "TbInputSearch"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,46 @@
|
||||
---
|
||||
title: Block Editor
|
||||
sidebar_position: 11
|
||||
sidebar_custom_props:
|
||||
icon: TbTemplate
|
||||
---
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
|
||||
import blockEditorCode from '!!raw-loader!@site/src/ui/input/blockEditorCode.js'
|
||||
|
||||
Uses a block-based rich text editor from [BlockNote](https://www.blocknotejs.org/) to allow users to edit and view blocks of content.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/input/editor/components/BlockEditor']}
|
||||
componentCode={blockEditorCode}
|
||||
/>
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>editor</td>
|
||||
<td>`BlockNoteEditor`</td>
|
||||
<td>The block editor instance or configuration</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
795
packages/twenty-docs/docs/ui-components/input/button.mdx
Normal file
795
packages/twenty-docs/docs/ui-components/input/button.mdx
Normal file
@ -0,0 +1,795 @@
|
||||
---
|
||||
title: Buttons
|
||||
sidebar_position: 1
|
||||
sidebar_custom_props:
|
||||
icon: TbSquareRoundedPlusFilled
|
||||
---
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
|
||||
import buttonCode from '!!raw-loader!@site/src/ui/input/button/buttonCode.js'
|
||||
import buttonGroupCode from '!!raw-loader!@site/src/ui/input/button/buttonGroupCode.js'
|
||||
import floatingButtonCode from '!!raw-loader!@site/src/ui/input/button/floatingButtonCode.js'
|
||||
import floatingButtonGroupCode from '!!raw-loader!@site/src/ui/input/button/floatingButtonGroupCode.js'
|
||||
import floatingIconButtonCode from '!!raw-loader!@site/src/ui/input/button/floatingIconButtonCode.js'
|
||||
import floatingIconButtonGroupCode from '!!raw-loader!@site/src/ui/input/button/floatingIconButtonGroupCode.js'
|
||||
import lightButtonCode from '!!raw-loader!@site/src/ui/input/button/lightButtonCode.js'
|
||||
import lightIconButtonCode from '!!raw-loader!@site/src/ui/input/button/lightIconButtonCode.js'
|
||||
import mainButtonCode from '!!raw-loader!@site/src/ui/input/button/mainButtonCode.js'
|
||||
import roundedIconButtonCode from '!!raw-loader!@site/src/ui/input/button/roundedIconButtonCode.js'
|
||||
|
||||
A list of buttons and button groups used throughout the app.
|
||||
|
||||
## Button
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/input/button/components/Button']}
|
||||
componentCode={buttonCode}
|
||||
/>
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>className</td>
|
||||
<td>string</td>
|
||||
<td>Optional class name for additional styling</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Icon</td>
|
||||
<td>`React.ComponentType`</td>
|
||||
<td>An optional icon component that's displayed within the button</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>title</td>
|
||||
<td>string</td>
|
||||
<td>The text content of the button</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>fullWidth</td>
|
||||
<td>boolean</td>
|
||||
<td>Defines whether the button should span the whole width of its container</td>
|
||||
<td>`false`</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>variant</td>
|
||||
<td>string</td>
|
||||
<td>The visual style variant of the button. Options include `primary`, `secondary`, and `tertiary`</td>
|
||||
<td>primary</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>size</td>
|
||||
<td>string</td>
|
||||
<td>The size of the button. Has two options: `small` and `medium`</td>
|
||||
<td>medium</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>position</td>
|
||||
<td>string</td>
|
||||
<td>The position of the button in relation to its siblings. Options include: `standalone`, `left`, `right`, and `middle`</td>
|
||||
<td>standalone</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>accent</td>
|
||||
<td>string</td>
|
||||
<td>The accent color of the button. Options include: `default`, `blue`, and `danger`</td>
|
||||
<td>default</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>soon</td>
|
||||
<td>boolean</td>
|
||||
<td>Indicates if the button is marked as "soon" (such as for upcoming features)</td>
|
||||
<td>`false`</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>disabled</td>
|
||||
<td>boolean</td>
|
||||
<td>Specifies whether button is disabled or not</td>
|
||||
<td>`false`</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>focus</td>
|
||||
<td>boolean</td>
|
||||
<td>Determines if the button has focus</td>
|
||||
<td>`false`</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onClick</td>
|
||||
<td>function</td>
|
||||
<td>A callback function that triggers when the user clicks on the button</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Button Group
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/input/button/components/Button', '@/ui/input/button/components/ButtonGroup']}
|
||||
componentCode={buttonGroupCode}
|
||||
/>
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>variant</td>
|
||||
<td>string</td>
|
||||
<td>The visual style variant of the buttons within the group. Options include `primary`, `secondary`, and `tertiary`</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>size</td>
|
||||
<td>string</td>
|
||||
<td>The size of the buttons within the group. Has two options: `medium` and `small`</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>accent</td>
|
||||
<td>string</td>
|
||||
<td>The accent color of the buttons within the group. Options include `default`, `blue` and `danger`</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>className</td>
|
||||
<td>string</td>
|
||||
<td>Optional class name for additional styling</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>children</td>
|
||||
<td>ReactNode</td>
|
||||
<td>An array of React elements representing the individual buttons within the group</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
||||
|
||||
## Floating Button
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/input/button/components/FloatingButton']}
|
||||
componentCode={floatingButtonCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>className</td>
|
||||
<td>string</td>
|
||||
<td>Optional name for additional styling</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Icon</td>
|
||||
<td>`React.ComponentType`</td>
|
||||
<td>An optional icon component that's displayed within the button</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>title</td>
|
||||
<td>string</td>
|
||||
<td>The text content of the button</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>size</td>
|
||||
<td>string</td>
|
||||
<td>The size of the button. Has two options: `small` and `medium`</td>
|
||||
<td>small</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>position</td>
|
||||
<td>string</td>
|
||||
<td>The position of the button in relation to its sublings. Options include: `standalone`, `left`, `middle`, `right`</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>applyShadow</td>
|
||||
<td>boolean</td>
|
||||
<td>Determines whether to apply shadow to a button</td>
|
||||
<td>`true`</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>applyBlur</td>
|
||||
<td>boolean</td>
|
||||
<td>Determines whether to apply a blur effect to the button</td>
|
||||
<td>`true`</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>disabled</td>
|
||||
<td>boolean</td>
|
||||
<td>Determines whether the button is disabled</td>
|
||||
<td>`false`</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>focus</td>
|
||||
<td>boolean</td>
|
||||
<td>Indicates if the button has focus</td>
|
||||
<td>`false`</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Floating Button Group
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/input/button/components/FloatingButton', '@/ui/input/button/components/FloatingButtonGroup']}
|
||||
componentCode={floatingButtonGroupCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>size</td>
|
||||
<td>string</td>
|
||||
<td>The size of the button. Has two options: `small` and `medium`</td>
|
||||
<td>small</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>children</td>
|
||||
<td>ReactNode</td>
|
||||
<td>An array of React elements representing the individual buttons within the group</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Floating Icon Button
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/input/button/components/FloatingIconButton']}
|
||||
componentCode={floatingIconButtonCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>className</td>
|
||||
<td>string</td>
|
||||
<td>Optional name for additional styling</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Icon</td>
|
||||
<td>`React.ComponentType`</td>
|
||||
<td>An optional icon component that's displayed within the button</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>size</td>
|
||||
<td>string</td>
|
||||
<td>The size of the button. Has two options: `small` and `medium`</td>
|
||||
<td>small</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>position</td>
|
||||
<td>string</td>
|
||||
<td>The position of the button in relation to its siblings. Options include: `standalone`, `left`, `right`, and `middle`</td>
|
||||
<td>standalone</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>applyShadow</td>
|
||||
<td>boolean</td>
|
||||
<td>Determines whether to apply shadow to a button</td>
|
||||
<td>`true`</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>applyBlur</td>
|
||||
<td>boolean</td>
|
||||
<td>Determines whether to apply a blur effect to the button</td>
|
||||
<td>`true`</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>disabled</td>
|
||||
<td>boolean</td>
|
||||
<td>Determines whether the button is disabled</td>
|
||||
<td>`false`</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>focus</td>
|
||||
<td>boolean</td>
|
||||
<td>Indicates if the button has focus</td>
|
||||
<td>`false`</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onClick</td>
|
||||
<td>function</td>
|
||||
<td>A callback function that triggers when the user clicks on the button</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>isActive</td>
|
||||
<td>boolean</td>
|
||||
<td>Determines if the button is in an active state</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Floating Icon Button Group
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/input/button/components/FloatingIconButtonGroup']}
|
||||
componentCode={floatingIconButtonGroupCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>className</td>
|
||||
<td>string</td>
|
||||
<td>Optional name for additional styling</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>size</td>
|
||||
<td>string</td>
|
||||
<td>The size of the button. Has two options: `small` and `medium`</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>iconButtons</td>
|
||||
<td>array</td>
|
||||
<td>An array of objects, each representing an icon button in the group. Each object should include the icon component you want to display in the button, the function you want to call when a user clicks on the button, and whether the button should be active or not.</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Light Button
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/input/button/components/LightButton']}
|
||||
componentCode={lightButtonCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>className</td>
|
||||
<td>string</td>
|
||||
<td>Optional name for additional styling</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>icon</td>
|
||||
<td>`React.ReactNode`</td>
|
||||
<td>The icon you want to display in the button</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>title</td>
|
||||
<td>string</td>
|
||||
<td>The text content of the button</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>accent</td>
|
||||
<td>string</td>
|
||||
<td>The accent color of the button. Options include: `secondary` and `tertiary`</td>
|
||||
<td>secondary</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>active</td>
|
||||
<td>boolean</td>
|
||||
<td>Determines if the button is in an active state</td>
|
||||
<td>`false`</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>disabled</td>
|
||||
<td>boolean</td>
|
||||
<td>Determines whether the button is disabled</td>
|
||||
<td>`false`</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>focus</td>
|
||||
<td>boolean</td>
|
||||
<td>Indicates if the button has focus</td>
|
||||
<td>`false`</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onClick</td>
|
||||
<td>function</td>
|
||||
<td>A callback function that triggers when the user clicks on the button</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Light Icon Button
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/input/button/components/LightIconButton']}
|
||||
componentCode={lightIconButtonCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>className</td>
|
||||
<td>string</td>
|
||||
<td>Optional name for additional styling</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>testId</td>
|
||||
<td>string</td>
|
||||
<td>Test identifier for the button</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Icon</td>
|
||||
<td>`React.ComponentType`</td>
|
||||
<td>An optional icon component that's displayed within the button</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>title</td>
|
||||
<td>string</td>
|
||||
<td>The text content of the button</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>size</td>
|
||||
<td>string</td>
|
||||
<td>The size of the button. Has two options: `small` and `medium`</td>
|
||||
<td>small</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>accent</td>
|
||||
<td>string</td>
|
||||
<td>The accent color of the button. Options include: `secondary` and `tertiary`</td>
|
||||
<td>secondary</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>active</td>
|
||||
<td>boolean</td>
|
||||
<td>Determines if the button is in an active state</td>
|
||||
<td>`false`</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>disabled</td>
|
||||
<td>boolean</td>
|
||||
<td>Determines whether the button is disabled</td>
|
||||
<td>`false`</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>focus</td>
|
||||
<td>boolean</td>
|
||||
<td>Indicates if the button has focus</td>
|
||||
<td>`false`</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onClick</td>
|
||||
<td>function</td>
|
||||
<td>A callback function that triggers when the user clicks on the button</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Main Button
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/input/button/components/MainButton']}
|
||||
componentCode={mainButtonCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>title</td>
|
||||
<td>string</td>
|
||||
<td>The text content of the button</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>fullWidth</td>
|
||||
<td>boolean</td>
|
||||
<td>efines whether the button should span the whole width of its container</td>
|
||||
<td>`false`</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>variant</td>
|
||||
<td>string</td>
|
||||
<td>The visual style variant of the button. Options include `primary` and `secondary`</td>
|
||||
<td>primary</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>soon</td>
|
||||
<td>boolean</td>
|
||||
<td>Indicates if the button is marked as "soon" (such as for upcoming features)</td>
|
||||
<td>`false`</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Icon</td>
|
||||
<td>`React.ComponentType`</td>
|
||||
<td>An optional icon component that's displayed within the button</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>React `button` props</td>
|
||||
<td>`React.ComponentProps<'button'>`</td>
|
||||
<td>Additional props from React's `button` element</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Rounded Icon Button
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/input/button/components/RoundedIconButton']}
|
||||
componentCode={roundedIconButtonCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Icon</td>
|
||||
<td>`React.ComponentType`</td>
|
||||
<td>An optional icon component that's displayed within the button</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>React `button` props</td>
|
||||
<td>`React.ButtonHTMLAttributes<HTMLButtonElement>`</td>
|
||||
<td>Additional props from React's `button` element</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
93
packages/twenty-docs/docs/ui-components/input/checkbox.mdx
Normal file
93
packages/twenty-docs/docs/ui-components/input/checkbox.mdx
Normal file
@ -0,0 +1,93 @@
|
||||
---
|
||||
title: Checkbox
|
||||
sidebar_position: 4
|
||||
sidebar_custom_props:
|
||||
icon: TbCheckbox
|
||||
---
|
||||
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
|
||||
import checkboxCode from '!!raw-loader!@site/src/ui/input/components/checkboxCode.js'
|
||||
|
||||
Used when a user needs to select multiple values from several options.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/input/components/Checkbox']}
|
||||
componentCode={checkboxCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>checked</td>
|
||||
<td>boolean</td>
|
||||
<td>Indicates whether the checkbox is checked</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>indeterminate</td>
|
||||
<td>boolean</td>
|
||||
<td>Indicates whether the checkbox is in an indeterminate state (neither checked nor unchecked)</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onChange</td>
|
||||
<td>function</td>
|
||||
<td>The callback function you want to trigger when the checkbox state changes</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onCheckedChange</td>
|
||||
<td>function</td>
|
||||
<td>The callback function you want to trigger when the `checked` state changes</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>variant</td>
|
||||
<td>string</td>
|
||||
<td>The visual style variant of the box. Options include: `primary`, `secondary`, and `tertiary`</td>
|
||||
<td>primary</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>size</td>
|
||||
<td>string</td>
|
||||
<td>The size of the checkbox. Has two options: `small` and `large`</td>
|
||||
<td>small</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>shape</td>
|
||||
<td>string</td>
|
||||
<td>The shape of the checkbox. Has two options: `squared` and `rounded`</td>
|
||||
<td>squared</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
113
packages/twenty-docs/docs/ui-components/input/color-scheme.mdx
Normal file
113
packages/twenty-docs/docs/ui-components/input/color-scheme.mdx
Normal file
@ -0,0 +1,113 @@
|
||||
---
|
||||
title: Color Scheme
|
||||
sidebar_position: 2
|
||||
sidebar_custom_props:
|
||||
icon: TbColorFilter
|
||||
---
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
import colorSchemeCardCode from '!!raw-loader!@site/src/ui/input/color-scheme/colorSchemeCardCode.js'
|
||||
import colorSchemePickerCode from '!!raw-loader!@site/src/ui/input/color-scheme/colorSchemePickerCode.js'
|
||||
|
||||
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
|
||||
|
||||
## Color Scheme Card
|
||||
|
||||
Represents different color schemes and is specially tailored for light and dark themes.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/input/color-scheme/components/ColorSchemeCard']}
|
||||
componentCode={colorSchemeCardCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>variant</td>
|
||||
<td>string</td>
|
||||
<td>The color scheme variant. Options include `Dark`, `Light`, and `System`</td>
|
||||
<td>light</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>selected</td>
|
||||
<td>boolean</td>
|
||||
<td>If `true`, displays a checkmark to indicate the selected color scheme</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>additional props</td>
|
||||
<td>`React.ComponentPropsWithoutRef<'div'>`</td>
|
||||
<td>Standard HTML `div` element props</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Color Scheme Picker
|
||||
|
||||
Allows users to choose between different color schemes.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/input/color-scheme/components/ColorSchemePicker']}
|
||||
componentCode={colorSchemePickerCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>value</td>
|
||||
<td>`Color Scheme`</td>
|
||||
<td>The currently selected color scheme</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onChange</td>
|
||||
<td>function</td>
|
||||
<td>The callback function you want to trigger when a user selects a color scheme</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
@ -0,0 +1,92 @@
|
||||
---
|
||||
title: Icon Picker
|
||||
sidebar_position: 5
|
||||
sidebar_custom_props:
|
||||
icon: TbColorPicker
|
||||
---
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
|
||||
import iconPickerCode from '!!raw-loader!@site/src/ui/input/components/iconPickerCode.js'
|
||||
|
||||
A dropdown-based icon picker that allows users to select an icon from a list.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/input/components/IconPicker']}
|
||||
componentCode={iconPickerCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>disabled</td>
|
||||
<td>boolean</td>
|
||||
<td>Disables the icon picker if set to `true`</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onChange</td>
|
||||
<td>function</td>
|
||||
<td>The callback function triggered when the user selects an icon. It receives an object with `iconKey` and `Icon` properties</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>selectedIconKey</td>
|
||||
<td>string</td>
|
||||
<td>The key of the initially selected icon</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onClickOutside</td>
|
||||
<td>function</td>
|
||||
<td>Callback function triggered when the user clicks outside the dropdown</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onClose</td>
|
||||
<td>function</td>
|
||||
<td>Callback function triggered when the dropdown is closed</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onOpen</td>
|
||||
<td>function</td>
|
||||
<td>Callback function triggered when the dropdown is opened</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>variant</td>
|
||||
<td>string</td>
|
||||
<td>The visual style variant of the clickable icon. Options include: `primary`, `secondary`, and `tertiary`</td>
|
||||
<td>secondary</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
@ -0,0 +1,92 @@
|
||||
---
|
||||
title: Image Input
|
||||
sidebar_position: 6
|
||||
sidebar_custom_props:
|
||||
icon: TbUpload
|
||||
---
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
|
||||
import imageInputCode from '!!raw-loader!@site/src/ui/input/components/imageInputCode.js'
|
||||
|
||||
Allows users to upload and remove an image.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/input/components/ImageInput']}
|
||||
componentCode={imageInputCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>picture</td>
|
||||
<td>string</td>
|
||||
<td>The image source URL</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onUpload</td>
|
||||
<td>function</td>
|
||||
<td>The function called when a user uploads a new image. It receives the `File` object as a parameter</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onRemove</td>
|
||||
<td>function</td>
|
||||
<td>The function called when the user clicks on the remove button</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onAbort</td>
|
||||
<td>function</td>
|
||||
<td>The function called when a user clicks on the abort button during image upload</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>isUploading</td>
|
||||
<td>boolean</td>
|
||||
<td>Indicates whether an image is currently being uploaded</td>
|
||||
<td>`false`</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>errorMessage</td>
|
||||
<td>string</td>
|
||||
<td>An optional error message to display below the image input</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>disabled</td>
|
||||
<td>boolean</td>
|
||||
<td>If `true`, the entire input is disabled, and the buttons are not clickable</td>
|
||||
<td>`false`</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
164
packages/twenty-docs/docs/ui-components/input/radio.mdx
Normal file
164
packages/twenty-docs/docs/ui-components/input/radio.mdx
Normal file
@ -0,0 +1,164 @@
|
||||
---
|
||||
title: Radio
|
||||
sidebar_position: 7
|
||||
sidebar_custom_props:
|
||||
icon: TbCircleDot
|
||||
---
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
|
||||
import radioCode from '!!raw-loader!@site/src/ui/input/components/radioCode.js'
|
||||
import radioGroupCode from '!!raw-loader!@site/src/ui/input/components/radioGroupCode.js'
|
||||
|
||||
Used when users may only choose one option from a series of options.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/input/components/Radio']}
|
||||
componentCode={radioCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>style</td>
|
||||
<td>`React.CSS` properties</td>
|
||||
<td>Additional inline styles for the component</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>className</td>
|
||||
<td>string</td>
|
||||
<td>Optional CSS class for additional styling</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>checked</td>
|
||||
<td>boolean</td>
|
||||
<td>Indicates whether the radio button is checked</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>value</td>
|
||||
<td>string</td>
|
||||
<td>The label or text associated with the radio button</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onChange</td>
|
||||
<td>function</td>
|
||||
<td>The function called when the selected radio button is changed</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onCheckedChange</td>
|
||||
<td>function</td>
|
||||
<td>The function called when the `checked` state of the radio button changes</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>size</td>
|
||||
<td>string</td>
|
||||
<td>The size of the radio button. Options include: `large` and `small`</td>
|
||||
<td>small</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>disabled</td>
|
||||
<td>boolean</td>
|
||||
<td>If `true`, the radio button is disabled and not clickable</td>
|
||||
<td>false</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>labelPosition</td>
|
||||
<td>string</td>
|
||||
<td>The position of the label text relative to the radio button. Has two options: `left` and `right`</td>
|
||||
<td>right</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Radio Group
|
||||
|
||||
Groups together related radio buttons.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/input/components/RadioGroup', '@/ui/input/components/Radio']}
|
||||
componentCode={radioGroupCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>value</td>
|
||||
<td>string</td>
|
||||
<td>The value of the currently selected radio button</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onChange</td>
|
||||
<td>function</td>
|
||||
<td>The callback function triggered when the radio button is changed</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onValueChange</td>
|
||||
<td>function</td>
|
||||
<td>The callback function triggered when the selected value in the group changes.</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>children</td>
|
||||
<td>`React.ReactNode`</td>
|
||||
<td>Allows you to pass React components (such as Radio) as children to the Radio Group</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
85
packages/twenty-docs/docs/ui-components/input/select.mdx
Normal file
85
packages/twenty-docs/docs/ui-components/input/select.mdx
Normal file
@ -0,0 +1,85 @@
|
||||
---
|
||||
title: Select
|
||||
sidebar_position: 8
|
||||
sidebar_custom_props:
|
||||
icon: TbSelect
|
||||
---
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
|
||||
import selectCode from '!!raw-loader!@site/src/ui/input/components/selectCode.js'
|
||||
|
||||
Allows users to pick a value from a list of predefined options.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/input/components/Select', '@/ui/display/icon/types/IconComponent']}
|
||||
componentCode={selectCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td>className</td>
|
||||
<td>string</td>
|
||||
<td>Optional CSS class for additional styling</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>disabled</td>
|
||||
<td>boolean</td>
|
||||
<td>When set to `true`, disables user interaction with the component</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>dropdownScopeId</td>
|
||||
<td>string</td>
|
||||
<td>Required prop that uniquely identifies the dropdown scope</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>label</td>
|
||||
<td>string</td>
|
||||
<td>The label to describe the purpose of the `Select` component</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onChange</td>
|
||||
<td>function</td>
|
||||
<td>The function called when the selected values change</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>options</td>
|
||||
<td>array</td>
|
||||
<td>Represents the options available for the `Selected` component. It's an array of objects where each object has a `value` (the unique identifier), `label` (the unique identifier), and an optional `Icon`</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>value</td>
|
||||
<td>string</td>
|
||||
<td>Represents the currently selected value. It should match one of the `value` properties in the `options` array</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
322
packages/twenty-docs/docs/ui-components/input/text.mdx
Normal file
322
packages/twenty-docs/docs/ui-components/input/text.mdx
Normal file
@ -0,0 +1,322 @@
|
||||
---
|
||||
title: Text
|
||||
sidebar_position: 3
|
||||
sidebar_custom_props:
|
||||
icon: TbTextSize
|
||||
---
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
|
||||
import textInputCode from '!!raw-loader!@site/src/ui/input/components/textInputCode.js'
|
||||
import autosizeTextInputCode from '!!raw-loader!@site/src/ui/input/components/autosizeTextInputCode.js'
|
||||
import entityTitleDoubleTextInputCode from '!!raw-loader!@site/src/ui/input/components/entityTitleDoubleTextInputCode.js'
|
||||
import textAreaCode from '!!raw-loader!@site/src/ui/input/components/textAreaCode.js'
|
||||
|
||||
## Text Input
|
||||
|
||||
Allows users to enter and edit text.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/input/components/TextInput']}
|
||||
componentCode={textInputCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>className</td>
|
||||
<td>string</td>
|
||||
<td>Optional name for additional styling</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>label</td>
|
||||
<td>string</td>
|
||||
<td>Represents the label for the input</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onChange</td>
|
||||
<td>function</td>
|
||||
<td>The function called when the input value changes</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>fullWidth</td>
|
||||
<td>boolean</td>
|
||||
<td>Indicates whether the input should take up 100% of the width</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>disableHotkeys</td>
|
||||
<td>boolean</td>
|
||||
<td>Indicates whether hotkeys are enabled for the input</td>
|
||||
<td>`false`</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>error</td>
|
||||
<td>string</td>
|
||||
<td>Represents the error message to be displayed. When provided, it also adds an icon error on the right side of the input</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onKeyDown</td>
|
||||
<td>function</td>
|
||||
<td>Called when a key is pressed down while the input field is focused. Receives a `React.KeyboardEvent` as an argument</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>RightIcon</td>
|
||||
<td>IconComponent</td>
|
||||
<td>An optional icon component displayed on the right side of the input</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
The component also accepts other HTML input element props.
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
||||
|
||||
## Autosize Text Input
|
||||
|
||||
Text input component that automatically adjusts its height based on the content.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/input/components/AutosizeTextInput']}
|
||||
componentCode={autosizeTextInputCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>onValidate</td>
|
||||
<td>function</td>
|
||||
<td>The callback function you want to trigger when the user validates the input</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>minRows</td>
|
||||
<td>number</td>
|
||||
<td>The minimum number of rows for the text area</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>placeholder</td>
|
||||
<td>string</td>
|
||||
<td>The placeholder text you want to display when the text area is empty</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onFocus</td>
|
||||
<td>function</td>
|
||||
<td>The callback function you want to trigger when the text area gains focus</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>variant</td>
|
||||
<td>string</td>
|
||||
<td>The variant of the input. Options include: `default`, `icon`, and `button`</td>
|
||||
<td>default</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>buttonTitle</td>
|
||||
<td>string</td>
|
||||
<td>The title for the button (only applicable for the button variant)</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>value</td>
|
||||
<td>string</td>
|
||||
<td>The initial value for the text area</td>
|
||||
<td>Empty string</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
||||
|
||||
## Entity Title Double Text Input
|
||||
|
||||
Displays a pair of text inputs side by side, allowing the user to edit two related values simultaneously.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/input/components/EntityTitleDoubleTextInput']}
|
||||
componentCode={entityTitleDoubleTextInputCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>firstValue</td>
|
||||
<td>string</td>
|
||||
<td>The value for the first text input</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>secondValue</td>
|
||||
<td>string</td>
|
||||
<td>The value for the second text input</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>firstValuePlaceholder</td>
|
||||
<td>string</td>
|
||||
<td>Placeholder text for the first text input, displayed when the input is empty</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>secondValuePlaceholder</td>
|
||||
<td>string</td>
|
||||
<td>Placeholder text for the second text input, displayed when the input is empty</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onChange</td>
|
||||
<td>function</td>
|
||||
<td>The callback function you want to trigger when the text input changes</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
## Text Area
|
||||
|
||||
Allows you to create multi-line text inputs.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/input/components/TextArea']}
|
||||
componentCode={textAreaCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>disabled</td>
|
||||
<td>boolean</td>
|
||||
<td>Indicates whether the text area is disabled</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>minRows</td>
|
||||
<td>number</td>
|
||||
<td>Minimum number of visible rows for the text area. </td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onChange</td>
|
||||
<td>function</td>
|
||||
<td>Callback function triggered when the text area content changes</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>placeholder</td>
|
||||
<td>string</td>
|
||||
<td>Placeholder text displayed when the text area is empty</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>value</td>
|
||||
<td>string</td>
|
||||
<td>The current value of the text area</td>
|
||||
<td>Empty string</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
71
packages/twenty-docs/docs/ui-components/input/toggle.mdx
Normal file
71
packages/twenty-docs/docs/ui-components/input/toggle.mdx
Normal file
@ -0,0 +1,71 @@
|
||||
---
|
||||
title: Toggle
|
||||
sidebar_position: 10
|
||||
sidebar_custom_props:
|
||||
icon: TbToggleRight
|
||||
---
|
||||
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
|
||||
import toggleCode from '!!raw-loader!@site/src/ui/input/components/toggleCode.js'
|
||||
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/input/components/Toggle']}
|
||||
componentCode={toggleCode}
|
||||
/>
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="props" label="Props">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Props</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>value</td>
|
||||
<td>boolean</td>
|
||||
<td>The current state of the toggle</td>
|
||||
<td>`false`</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onChange</td>
|
||||
<td>function</td>
|
||||
<td>Callback function triggered when the toggle state changes</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>color</td>
|
||||
<td>string</td>
|
||||
<td>Color of the toggle when it's in the "on" state. If not provided, it uses the theme's blue color</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>toggleSize</td>
|
||||
<td>string</td>
|
||||
<td>Size of the toggle, affecting both height and weight. Has two options: `small` and `medium`</td>
|
||||
<td>medium</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
Reference in New Issue
Block a user