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: changed props list to props table #185

Merged
merged 6 commits into from
Dec 8, 2020
Merged

docs: changed props list to props table #185

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7a6c2c5
docs: changed props list to props table
anuraghazra Dec 7, 2020
cd1aa31
docs: fixed table inside summary
anuraghazra Dec 7, 2020
a29f639
chore: added proper line ending regex
anuraghazra Dec 7, 2020
bce0a4f
docs: fixed tables
anuraghazra Dec 7, 2020
625825d
docs: timepicker docs fix
anuraghazra Dec 7, 2020
9601caa
docs(state): 📝 fix state props on some components
navin-moorthy Dec 8, 2020
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
312 changes: 82 additions & 230 deletions docs/accordion.md
View file
Open in desktop

Large diffs are not rendered by default.

13 changes: 6 additions & 7 deletions docs/breadcrumb.md
View file
Open in desktop
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
Open in desktop

Large diffs are not rendered by default.

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

Large diffs are not rendered by default.

69 changes: 23 additions & 46 deletions docs/drawer.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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