Skip to content

Commit

Permalink
docs: changed props list to props table (#185)
Browse files Browse the repository at this point in the history 
* docs: changed props list to props table

* docs: fixed table inside summary

* chore: added proper line ending regex

* docs: fixed tables

* docs: timepicker docs fix

* docs(state): 📝  fix state props on some components

Co-authored-by: Navin <[email protected]>
  • Loading branch information
@anuraghazra @navin-moorthy
anuraghazra and navin-moorthy authored Dec 8, 2020
1 parent 61271ce commit cb437f4
Show file tree
Hide file tree
Showing 22 changed files with 1,213 additions and 2,387 deletions.
312 changes: 82 additions & 230 deletions docs/accordion.md
View file

Large diffs are not rendered by default.

13 changes: 6 additions & 7 deletions docs/breadcrumb.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,13 +74,12 @@ export default App;

### `BreadcrumbLink`

- **`isCurrent`** <code>boolean | undefined</code> If true, sets
`aria-current: "page"`
- **`disabled`** <code>boolean | undefined</code> Same as the HTML attribute.
- **`focusable`** <code>boolean | undefined</code> When an element is
`disabled`, it may still be `focusable`. It works similarly to `readOnly` on
form elements. In this case, only `aria-disabled` will be set.
- **`isExternal`** <code>boolean | undefined</code> Opens the link in a new tab
| Name | Type | Description |
| :--------------- | :-------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`isCurrent`** | <code>boolean \| undefined</code> | If true, sets `aria-current: "page"` |
| **`disabled`** | <code>boolean \| undefined</code> | Same as the HTML attribute. |
| **`focusable`** | <code>boolean \| undefined</code> | When an element is `disabled`, it may still be `focusable`. It workssimilarly to `readOnly` on form elements. In this case, only`aria-disabled` will be set. |
| **`isExternal`** | <code>boolean \| undefined</code> | Opens the link in a new tab |

### `Breadcrumbs`

Expand Down
208 changes: 99 additions & 109 deletions docs/calendar.md
View file

Large diffs are not rendered by default.

265 changes: 136 additions & 129 deletions docs/datepicker.md
View file

Large diffs are not rendered by default.

69 changes: 23 additions & 46 deletions docs/drawer.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,52 +106,29 @@ const cssTransforms = {

### `Drawer`

- **`baseId`** <code>string</code> ID that will serve as a base for all the
items IDs.
- **`visible`** <code>boolean</code> Whether it's visible or not.
- **`animating`** <code>boolean</code> Whether it's animating or not.
- **`animated`** <code>number | boolean</code> If `true`, `animating` will be
set to `true` when `visible` is updated. It'll wait for `stopAnimation` to be
called or a CSS transition ends. If `animated` is set to a `number`,
`stopAnimation` will be called only after the same number of milliseconds have
passed.
- **`stopAnimation`** <code>() =&#62; void</code> Stops animation. It's called
automatically if there's a CSS transition.
- **`modal`** <code>boolean</code> Toggles Dialog's `modal` state.
- Non-modal: `preventBodyScroll` doesn't work and focus is free.
- Modal: `preventBodyScroll` is automatically enabled, focus is trapped within
the dialog and the dialog is rendered within a `Portal` by default.
- **`hide`** <code>() =&#62; void</code> Changes the `visible` state to `false`
- **`hideOnEsc`** <code>boolean | undefined</code> When enabled, user can hide
the dialog by pressing `Escape`.
- **`hideOnClickOutside`** <code>boolean | undefined</code> When enabled, user
can hide the dialog by clicking outside it.
- **`preventBodyScroll`** <code>boolean | undefined</code> When enabled, user
can't scroll on body when the dialog is visible. This option doesn't work if
the dialog isn't modal.
- **`unstable_initialFocusRef`** <span title="Experimental">⚠️</span>
<code>RefObject&#60;HTMLElement&#62; | undefined</code> The element that will
be focused when the dialog shows. When not set, the first tabbable element
within the dialog will be used.
- **`unstable_finalFocusRef`** <span title="Experimental">⚠️</span>
<code>RefObject&#60;HTMLElement&#62; | undefined</code> The element that will
be focused when the dialog hides. When not set, the disclosure component will
be used.
- **`unstable_orphan`** <span title="Experimental">⚠️</span> <code>boolean |
undefined</code> Whether or not the dialog should be a child of its parent.
Opening a nested orphan dialog will close its parent dialog if
`hideOnClickOutside` is set to `true` on the parent. It will be set to `false`
if `modal` is `false`.
- **`placement`** <code>&#34;left&#34; | &#34;right&#34; | &#34;top&#34; |
&#34;bottom&#34; | undefined</code>
| Name | Type | Description |
| :------------------------------------------------------------------ | :----------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`baseId`** | <code>string</code> | ID that will serve as a base for all the items IDs. |
| **`visible`** | <code>boolean</code> | Whether it's visible or not. |
| **`animating`** | <code>boolean</code> | Whether it's animating or not. |
| **`animated`** | <code>number \| boolean</code> | If `true`, `animating` will be set to `true` when `visible` is updated.It'll wait for `stopAnimation` to be called or a CSS transition ends.If `animated` is set to a `number`, `stopAnimation` will be called onlyafter the same number of milliseconds have passed. |
| **`stopAnimation`** | <code>() =&#62; void</code> | Stops animation. It's called automatically if there's a CSS transition. |
| **`modal`** | <code>boolean</code> | Toggles Dialog's `modal` state. - Non-modal: `preventBodyScroll` doesn't work and focus is free. - Modal: `preventBodyScroll` is automatically enabled, focus istrapped within the dialog and the dialog is rendered within a `Portal`by default. |
| **`hide`** | <code>() =&#62; void</code> | Changes the `visible` state to `false` |
| **`hideOnEsc`** | <code>boolean \| undefined</code> | When enabled, user can hide the dialog by pressing `Escape`. |
| **`hideOnClickOutside`** | <code>boolean \| undefined</code> | When enabled, user can hide the dialog by clicking outside it. |
| **`preventBodyScroll`** | <code>boolean \| undefined</code> | When enabled, user can't scroll on body when the dialog is visible.This option doesn't work if the dialog isn't modal. |
| **`unstable_initialFocusRef`** <span title="Experimental">⚠️</span> | <code>RefObject&#60;HTMLElement&#62; \| undefined</code> | The element that will be focused when the dialog shows.When not set, the first tabbable element within the dialog will be used. |
| **`unstable_finalFocusRef`** <span title="Experimental">⚠️</span> | <code>RefObject&#60;HTMLElement&#62; \| undefined</code> | The element that will be focused when the dialog hides.When not set, the disclosure component will be used. |
| **`unstable_orphan`** <span title="Experimental">⚠️</span> | <code>boolean \| undefined</code> | Whether or not the dialog should be a child of its parent.Opening a nested orphan dialog will close its parent dialog if`hideOnClickOutside` is set to `true` on the parent.It will be set to `false` if `modal` is `false`. |
| **`placement`** | <code>&#34;left&#34; \| &#34;right&#34; \| &#34;top&#34; \| &#34;bottom&#34; \| undefined</code> | |

### `DrawerCloseButton`

- **`disabled`** <code>boolean | undefined</code> Same as the HTML attribute.
- **`focusable`** <code>boolean | undefined</code> When an element is
`disabled`, it may still be `focusable`. It works similarly to `readOnly` on
form elements. In this case, only `aria-disabled` will be set.
- **`visible`** <code>boolean</code> Whether it's visible or not.
- **`baseId`** <code>string</code> ID that will serve as a base for all the
items IDs.
- **`toggle`** <code>() =&#62; void</code> Toggles the `visible` state
| Name | Type | Description |
| :-------------- | :-------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`disabled`** | <code>boolean \| undefined</code> | Same as the HTML attribute. |
| **`focusable`** | <code>boolean \| undefined</code> | When an element is `disabled`, it may still be `focusable`. It workssimilarly to `readOnly` on form elements. In this case, only`aria-disabled` will be set. |
| **`visible`** | <code>boolean</code> | Whether it's visible or not. |
| **`baseId`** | <code>string</code> | ID that will serve as a base for all the items IDs. |
| **`toggle`** | <code>() =&#62; void</code> | Toggles the `visible` state |
10 changes: 5 additions & 5 deletions docs/link.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@ export default App;

### `Link`

- **`disabled`** <code>boolean | undefined</code> Same as the HTML attribute.
- **`focusable`** <code>boolean | undefined</code> When an element is
`disabled`, it may still be `focusable`. It works similarly to `readOnly` on
form elements. In this case, only `aria-disabled` will be set.
- **`isExternal`** <code>boolean | undefined</code> Opens the link in a new tab
| Name | Type | Description |
| :--------------- | :-------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`disabled`** | <code>boolean \| undefined</code> | Same as the HTML attribute. |
| **`focusable`** | <code>boolean \| undefined</code> | When an element is `disabled`, it may still be `focusable`. It workssimilarly to `readOnly` on form elements. In this case, only`aria-disabled` will be set. |
| **`isExternal`** | <code>boolean \| undefined</code> | Opens the link in a new tab |
39 changes: 14 additions & 25 deletions docs/meter.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,36 +70,25 @@ const background = {

### `useMeterState`

- **`value`** <code>number</code> The `value` of the meter indicator.

If `undefined`/`not valid` the meter bar will be equal to `min`

- **`min`** <code>number</code> The minimum value of the meter
- **`max`** <code>number</code> The maximum value of the meter
- **`low`** <code>number</code> The higher limit of min range.

Defaults to `min`.

- **`optimum`** <code>number</code> The lower limit of max range.

Defaults to `median of low & high`.

- **`high`** <code>number</code> The lower limit of max range.

Defaults to `max`.
| Name | Type | Description |
| :------------ | :------------------ | :------------------------------------------------------------------------------------------------- |
| **`value`** | <code>number</code> | The `value` of the meter indicator.If `undefined`/`not valid` the meter bar will be equal to `min` |
| **`min`** | <code>number</code> | The minimum value of the meter |
| **`max`** | <code>number</code> | The maximum value of the meter |
| **`low`** | <code>number</code> | The higher limit of min range.Defaults to `min`. |
| **`optimum`** | <code>number</code> | The lower limit of max range.Defaults to `median of low & high`. |
| **`high`** | <code>number</code> | The lower limit of max range.Defaults to `max`. |

### `Meter`

<details><summary>4 state props</summary>
> These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic.
- **`value`** <code>number</code> The `value` of the meter indicator.

If `undefined`/`not valid` the meter bar will be equal to `min`

- **`min`** <code>number</code> The minimum value of the meter
- **`max`** <code>number</code> The maximum value of the meter
- **`percent`** <code>number</code> Percentage of the value progressed with
respect to min & max
| Name | Type | Description |
| :------------ | :------------------ | :------------------------------------------------------------------------------------------------- |
| **`value`** | <code>number</code> | The `value` of the meter indicator.If `undefined`/`not valid` the meter bar will be equal to `min` |
| **`min`** | <code>number</code> | The minimum value of the meter |
| **`max`** | <code>number</code> | The maximum value of the meter |
| **`percent`** | <code>number</code> | Percentage of the value progressed with respect to min & max |

</details>
Loading

1 comment on commit cb437f4

@vercel
Copy link

@vercel vercel bot commented on cb437f4 Dec 8, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.