Skip to content

Commit

Permalink
feat: modify FiltersBar and CollapseButton component doc (#9)
Browse files Browse the repository at this point in the history 
* feat: modify FiltersBar and CollapseButton component doc

* feat: remove type of IId

* feat: fix pr review from tony
  • Loading branch information
vapersmile authored Dec 12, 2023
1 parent 24eb942 commit f6291da
Show file tree
Hide file tree
Showing 11 changed files with 143 additions and 138 deletions.
10 changes: 5 additions & 5 deletions docs/components/01-breadcrumbs.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@

## Props

| Name | Type | Default | Description |
| -------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
| children <Required/> | `ReactNode` | - | Elements inserted after the Breadcrumbs on the same row |
| separator | `string` | <svg fill ="none" height ="14" viewBox ="0 0 14 14" width ="14" xmlns ="http://www.w3.org/2000/svg" > <path d ="M5.25 10.5L8.75 7L5.25 3.5" stroke ="#0B7285" strokeLinecap ="round" strokeLinejoin ="round" /> </svg> | The `string` or SVG used as a separator between each level |
| ... | - | - | extends [Breadcrumbs props](https://v6.mantine.dev/core/breadcrumbs/?t=props) |
| Name | Type | Default | Description |
| -------------------- | ----------- | ------------------- | ----------------------------------------------------------------------------- |
| children <Required/> | `ReactNode` | - | Elements inserted after the Breadcrumbs on the same row |
| separator | `string` | `default separator` | The `string` or SVG used as a separator between each level |
| ... | - | - | extends [Breadcrumbs props](https://v6.mantine.dev/core/breadcrumbs/?t=props) |
28 changes: 14 additions & 14 deletions docs/components/01-collapse-button.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,20 +103,20 @@ const [opened, setOpened] = useState(true);

### Uncontrolled

| Name | Type | Default | Description |
| -------------- | --------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| children | `ReactNode` | - | Content either collapsed or opened under Button |
| component | `ElementType` | `button` | Custom component to use around the label |
| componentProps | `ComponentPropsWithoutRef` | - | Additional props for the custom `component` |
| defaultOpened | `boolean` | `false` | Initial value of the `Collapse`, controls if initially opened or closed |
| id | `number \| string` | - | Optional ID given when `onSelect` is called |
| isOpenOnSelect | `boolean` | `true` | When `true`, clicking/selecting anywhere on the button will also open the`Collapse`. When `false`, only clicking the collapse icon will open the `Collapse` |
| label | `ReactNode` | - | `Button` label |
| level | `number` | `0` | Used in nested menus such as [SidebarMenu](./sidebar-menu), levels `0`, `1` and `2` have slightly different styles |
| line | `boolean` | `false` | Used in nested menus such as [SidebarMenu](./sidebar-menu), when `true` will display a vertical line to the left of the button |
| onSelect | `(id?: number \| string) => void` | - | Called when button is selected (does not include the collapse icon) |
| selected | `boolean` | - | Controlled value determining if the button is selected, affects the button style |
| ... | - | - | extends [Button props](https://v6.mantine.dev/core/button/?t=props) |
| Name | Type | Default | Description |
| -------------- | --------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| children | `ReactNode` | - | Content either collapsed or opened under Button |
| component | `ElementType` | `button` | Custom component to use around the label |
| componentProps | `ComponentPropsWithoutRef` | - | Additional props for the custom `component` |
| defaultOpened | `boolean` | `false` | Initial value of the `Collapse`, controls if initially opened or closed |
| id | `number \| string` | - | Optional ID given when `onSelect` is called |
| isOpenOnSelect | `boolean` | `true` | When `true`, clicking/selecting anywhere on the button will also open the`Collapse`. When `false`, only clicking the collapse icon will open the `Collapse` |
| label | `ReactNode` | - | `Button` label |
| level | `number` | `0` | Used in nested menus such as [SidebarMenu](./sidebar-menu), levels `0`, `1` and `2` have slightly different styles |
| line | `"simple" \| "line"` | `"simple"` | Used in nested menus such as [SidebarMenu](./sidebar-menu), when `"line"` will display a vertical line to the left of the button. When `"simple"` same thing without line |
| onSelect | `(id?: number \| string) => void` | - | Called when button is selected (does not include the collapse icon) |
| selected | `boolean` | - | Controlled value determining if the button is selected, affects the button style |
| ... | - | - | extends [Button props](https://v6.mantine.dev/core/button/?t=props) |

### Controlled

Expand Down
22 changes: 11 additions & 11 deletions docs/components/01-confirm-modal.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,14 @@

## Props

| Name | Type | Default | Description |
| ------------ | -------------- | --------- | ---------------------------------------------------------------------------- |
| cancelColor | `MantineColor` | `gray` | [MantineColor](https://v6.mantine.dev/theming/colors/) of the cancel button |
| cancelLabel | `string` | `Cancel` | Label of the cancel button |
| confirmColor | `MantineColor` | `primary` | [MantineColor](https://v6.mantine.dev/theming/colors/) of the confirm button |
| confirmLabel | `string` | `Confirm` | Label of the confirm button |
| children | `ReactNode` | - | Content displayed below the title |
| onCancel | `() => void` | - | Called when cancel button is clicked |
| onConfirm | `() => void` | - | Called when confirm button is clicked |
| title | `string` | - | Title displayed on top of the modal |
| ... | - | - | extends [Modal props](https://v6.mantine.dev/core/modal/?t=props) |
| Name | Type | Default | Description |
| ------------ | -------------- | ----------- | ---------------------------------------------------------------------------- |
| cancelColor | `MantineColor` | `gray` | [MantineColor](https://v6.mantine.dev/theming/colors/) of the cancel button |
| cancelLabel | `string` | `"Cancel"` | Label of the cancel button |
| confirmColor | `MantineColor` | `"primary"` | [MantineColor](https://v6.mantine.dev/theming/colors/) of the confirm button |
| confirmLabel | `string` | `"Confirm"` | Label of the confirm button |
| children | `ReactNode` | - | Content displayed below the title |
| onCancel | `() => void` | - | Called when cancel button is clicked |
| onConfirm | `() => void` | - | Called when confirm button is clicked |
| title | `string` | - | Title displayed on top of the modal |
| ... | - | - | extends [Modal props](https://v6.mantine.dev/core/modal/?t=props) |
18 changes: 9 additions & 9 deletions docs/components/01-document-card.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,12 @@

## Props

| Name | Type | Default | Description |
| -------- | ------------------------------------- | --------------------- | ----------------------------------------------------------------------------------------------------- |
| author | `ReactNode` | - | Content displayed as the author of the document, after the `date` |
| children | `ReactNode` | - | Content displayed below the document title and metadata |
| date | `ReactNode` | - | Content displayed as the document's date, below the document title and before the `author` |
| iconType | [`IconMap`](../shared-types/icon-map) | empty file icon | Icon indicating the filetype of the document, one of the [`IconMap`](../shared-types/icon-map) values |
| image | `string` | default example image | Path to the image or thumbnail of the document, displayed on the left |
| path | `ReactNode` | - | Content displayed as the document's path, after the document title |
| title | `ReactNode` | - | Content displayed as the document's title, at the top |
| Name | Type | Default | Description |
| -------- | ------------------------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------- |
| author | `ReactNode` | - | Content displayed as the author of the document, after the `date` |
| children | `ReactNode` | - | Content displayed below the document title and metadata |
| date | `ReactNode` | - | Content displayed as the document's date, below the document title and before the `author` |
| iconType | [`IconMap`](../shared-types/icon-map) | empty file icon | Icon indicating the filetype of the document, one of the [`IconMap`](../shared-types/icon-map) values |
| image | `string` | default fallback image | Path to the image or thumbnail of the document, displayed on the left |
| path | `ReactNode` | - | Content displayed as the document's path, after the document title |
| title | `ReactNode` | - | Content displayed as the document's title, at the top |
Loading

0 comments on commit f6291da

Please sign in to comment.