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.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(docs): bolded keywords in blockquotes #513

Merged
merged 1 commit into from
Jun 7, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/docs/content/docs/components/card.mdx
Expand Up @@ -45,7 +45,7 @@ import { Card } from '@nextui-org/react';
files={cardContent.hoverable}
/>

> **Note**: NextUI uses the **react-aria** [useHover](https://react-spectrum.adobe.com/react-aria/useHover.html) hook under the hood in order to handle mouse and touch events, ignore emulated mouse events in mobile browsers, and other accessibility features.
> **Note:** NextUI uses the **react-aria** [useHover](https://react-spectrum.adobe.com/react-aria/useHover.html) hook under the hood in order to handle mouse and touch events, ignore emulated mouse events in mobile browsers, and other accessibility features.

<Playground
title="Pressable"
Expand All @@ -54,7 +54,7 @@ import { Card } from '@nextui-org/react';
files={cardContent.pressable}
/>

> **Note**: NextUI uses the **react-aria** [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html) hook under the hood in order to handle mouse and touch events, <kbd>Enter</kbd> and <kbd>Space</kbd> keys, screen readers virtual clicks, and other accessibility features.
> **Note:** NextUI uses the **react-aria** [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html) hook under the hood in order to handle mouse and touch events, <kbd>Enter</kbd> and <kbd>Space</kbd> keys, screen readers virtual clicks, and other accessibility features.

<Playground
title="With divider"
Expand Down
4 changes: 2 additions & 2 deletions apps/docs/content/docs/components/checkbox-group.mdx
Expand Up @@ -35,15 +35,15 @@ import { Checkbox } from '@nextui-org/react';
files={checkboxGroupContent.controlledVsUncontrolled}
/>

> Note: See React's documentation on [uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html) for more info.
> **Note:** See React's documentation on [uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html) for more info.

<Playground
title="Events"
desc="`Checkbox.Group` accepts an `onChange` prop, which is triggered when a user adds or removes an item from the selection. The example below uses `onChange` to log how the user is interacting with the component."
files={checkboxGroupContent.events}
/>

> Accessibility: If a visible label isn't specified for a `Checkbox.Group`, an aria-label must be provided for accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be provided using the id of the labeling element instead. Checkbox elements within a group should always have a visible label.
> **A11y:** If a visible label isn't specified for a `Checkbox.Group`, an aria-label must be provided for accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be provided using the id of the labeling element instead. Checkbox elements within a group should always have a visible label.

<Spacer y={3} />

Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/docs/components/checkbox.mdx
Expand Up @@ -71,7 +71,7 @@ import { Checkbox } from '@nextui-org/react';
files={checkboxContent.controlledVsUncontrolled}
/>

> Note: See React's documentation on [uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html) for more info.
> **Note:** See React's documentation on [uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html) for more info.

<Playground
title="Disable animation"
Expand Down
6 changes: 3 additions & 3 deletions apps/docs/content/docs/components/dropdown.mdx
Expand Up @@ -55,7 +55,7 @@ import { Dropdown } from '@nextui-org/react';
files={dropdownContent.disabledKeys}
/>

> **Note**: Its important to have a unique key for each item, otherwise the disabled keys will not work.
> **Note:** Its important to have a unique key for each item, otherwise the disabled keys will not work.

<Playground
title="Variants"
Expand Down Expand Up @@ -90,7 +90,7 @@ import { Dropdown } from '@nextui-org/react';
files={dropdownContent.icon}
/>

> **Note**: If you use **currentColor** as the icon color, the icon will have the same color as the item text.
> **Note:** If you use **currentColor** as the icon color, the icon will have the same color as the item text.

<Playground
title="Description"
Expand All @@ -104,7 +104,7 @@ import { Dropdown } from '@nextui-org/react';
files={dropdownContent.sections}
/>

> **A11y**: Sections without a title must provide an aria-label for accessibility.
> **A11y:** Sections without a title must provide an aria-label for accessibility.

<Playground
title="Custom Trigger"
Expand Down
4 changes: 2 additions & 2 deletions apps/docs/content/docs/components/popover.mdx
Expand Up @@ -54,15 +54,15 @@ import { Popover } from '@nextui-org/react';
files={popoverContent.controlledVsUncontrolled}
/>

> Note: See React's documentation on [uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html) for more info.
> **Note:** See React's documentation on [uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html) for more info.

<Playground
title="Custom Content"
desc="The `Popover.Content` can be used to render any component you want. Ensure the children passed to `Popover.Trigger` is focusable. Users can tab to it using their keyboard, and it can take a `ref`. It is critical for accessiblity."
files={popoverContent.customContent}
/>

> **A11y**: When Popover opens, focus is sent to PopoverContent. When it closes, focus is returned to the trigger.
> **A11y:** When Popover opens, focus is sent to PopoverContent. When it closes, focus is returned to the trigger.

<Playground
title="Disable animation"
Expand Down
6 changes: 3 additions & 3 deletions apps/docs/content/docs/components/radio.mdx
Expand Up @@ -29,7 +29,7 @@ import { Radio } from '@nextui-org/react';
files={radioContent.default_radio}
/>

> **Note**: Note: A Radio cannot be used outside of a Radio.Group.
> **Note:** A Radio cannot be used outside of a Radio.Group.

<Playground
title="Disabled"
Expand Down Expand Up @@ -94,15 +94,15 @@ import { Radio } from '@nextui-org/react';
files={radioContent.controlledVsUncontrolled}
/>

> Note: See React's documentation on [uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html) for more info.
> **Note:** See React's documentation on [uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html) for more info.

<Playground
title="Events"
desc="`Radio.Group` accepts an `onChange` prop, which is triggered when a user checks an item from the list. The example below uses `onChange` to log how the user is interacting with the component."
files={radioContent.events}
/>

> Accessibility: If a visible label isn't specified for a `Radio.Group`, an aria-label must be provided for accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be provided using the id of the labeling element instead. `Radio` elements within a group should always have a visible label.
> **A11y:** If a visible label isn't specified for a `Radio.Group`, an aria-label must be provided for accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be provided using the id of the labeling element instead. `Radio` elements within a group should always have a visible label.

<Spacer y={3} />

Expand Down
6 changes: 3 additions & 3 deletions apps/docs/content/docs/components/table.mdx
Expand Up @@ -128,7 +128,7 @@ import { Table } from '@nextui-org/react';
files={tableContent.sortableTable}
/>

> **Note**: This example performs client side sorting by passing **load** and **sort** functions to the [@react-stately/async-list](https://react-spectrum.adobe.com/react-stately/useAsyncList.html) hook and by comparing the data using [@react-aria/i18n](https://react-spectrum.adobe.com/react-aria/useCollator.html) **useCollector** hook. See the docs for more information on how to perform server side sorting.
> **Note:** This example performs client side sorting by passing **load** and **sort** functions to the [@react-stately/async-list](https://react-spectrum.adobe.com/react-stately/useAsyncList.html) hook and by comparing the data using [@react-aria/i18n](https://react-spectrum.adobe.com/react-aria/useCollator.html) **useCollector** hook. See the docs for more information on how to perform server side sorting.

<Playground
title="Disabled keys"
Expand All @@ -137,7 +137,7 @@ import { Table } from '@nextui-org/react';
files={tableContent.disabledKeysTable}
/>

> **Note**: Its important to have a unique key for each row, otherwise the disabled keys will not work.
> **Note:** Its important to have a unique key for each row, otherwise the disabled keys will not work.

<Playground
title="Disallow empty selection"
Expand All @@ -146,7 +146,7 @@ import { Table } from '@nextui-org/react';
files={tableContent.disallowEmptySelectionTable}
/>

> **Note**: Its important to have a unique key for each row, otherwise the default selected keys will not work.
> **Note:** Its important to have a unique key for each row, otherwise the default selected keys will not work.

<Playground
title="No animated"
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/docs/components/textarea.mdx
Expand Up @@ -61,7 +61,7 @@ import { Textarea } from '@nextui-org/react';
files={textareaContent.controlledUncontrolled}
/>

> Note: See React's documentation on [uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html) for more info.
> **Note:** See React's documentation on [uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html) for more info.

<Spacer y={3} />

Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/docs/theme/dark-mode.mdx
Expand Up @@ -253,4 +253,4 @@ const App = () => {

```

> Note: This dark mode implementation is less recommended because it occurs only on the client side, which means that the theme can flash when the page is loaded.
> **Note:** This dark mode implementation is less recommended because it occurs only on the client side, which means that the theme can flash when the page is loaded.
2 changes: 1 addition & 1 deletion apps/docs/content/docs/theme/default-theme.mdx
Expand Up @@ -118,7 +118,7 @@ This table is a simple overview of the most common use case for each step. Howev
| **800** | Low-contrast text |
| **900** | High-contrast text |

> **Note**: NextUI uses different colors for each theme type (light, dark). You can check it out by toggling the docs theme on the navbar.
> **Note:** NextUI uses different colors for each theme type (light, dark). You can check it out by toggling the docs theme on the navbar.

<Spacer y={2} />

Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/docs/theme/media.mdx
Expand Up @@ -75,4 +75,4 @@ Here is an example of how to use the NextUI media queries:
`}
/>

> Note: If you want to see the changes in the preview, you need to resize the browser window.
> **Note:** If you want to see the changes in the preview, you need to resize the browser window.
4 changes: 2 additions & 2 deletions apps/docs/content/docs/theme/override-styles.mdx
Expand Up @@ -21,7 +21,7 @@ Here are some options depending on your goals:
- **Using the css prop**
- **Using the styled function**

> Note: The tokens used here like `$space$1`, `$pink800`, etc.. are defined in the [default theme](/docs/theme/default-theme) section.
> **Note:** The tokens used here like `$space$1`, `$pink800`, etc.. are defined in the [default theme](/docs/theme/default-theme) section.

<Spacer y={2} />

Expand Down Expand Up @@ -119,7 +119,7 @@ return (
}`}
/>

> Note: This approach requires you to override and create your own variants like `size` and `color`.
> **Note:** This approach requires you to override and create your own variants like `size` and `color`.

> For more information about the Stitches css prop, check out the [Stitches documentation](https://stitches.dev/docs/api#styled).

Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/docs/theme/utilities.mdx
Expand Up @@ -300,7 +300,7 @@ export const utils = {
};
```

> Note: If you would like we to add more utilities, please let us know on [NextUI Discussions](https://github.com/nextui-org/nextui/discussions), or on [Discord](https://discord.gg/9b6yyZKmH4).
> **Note:** If you would like we to add more utilities, please let us know on [NextUI Discussions](https://github.com/nextui-org/nextui/discussions), or on [Discord](https://discord.gg/9b6yyZKmH4).

### Theme Map

Expand Down