Skip to content

Commit

Permalink
docs(docs): 📝 improve docs for icon, box, button components (#14)
Browse files Browse the repository at this point in the history 
docs(docs): 📝  improve docs for icon, box, button components
  • Loading branch information
@kodiakhq
kodiakhq[bot] authored Jul 25, 2022
2 parents 1769985 + 82fd034 commit 392ae39
Show file tree
Hide file tree
Showing 3 changed files with 236 additions and 173 deletions.
158 changes: 89 additions & 69 deletions pages/docs/components/primitives/box.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,12 @@ import {
ComponentLinks,
PropsTable,
InteractiveCodeblock,
Codeblock,
} from "@/components/index";

# Box

Box is the most abstract component on top of which all other AdaptUI components
are built. It uses reakit's [Role](https://reakit.io/docs/role/) component
are built. It uses Arikits's [Role](https://reakit.io/docs/role/) component
internally.

<ComponentLinks github="box" story="primitives-box" />
Expand All @@ -27,85 +26,106 @@ import { Box } from "@adaptui/react-tailwind";

## `As` prop

By using the `as` prop you can control which element should be rendered, if you
are using typescript Box is fully typesafe too.
By using the `as` prop, you can control which element should be rendered. If you
are using typescript, Box is fully typesafe too.

You can either pass string elements or pass ReactNodes to the as prop.
You can either pass string elements or pass `ReactNode` to the `as` prop.

Follows all the Reakit composition rules
[Reakit Composition Docs](https://reakit.io/docs/composition/)
Follows all the Ariakits composition rules
[Arikits Composition Docs](https://reakit.io/docs/composition/)

<Codeblock
live
code={`
<Box className="space-x-4">
<Box as="a" href="#">
Link
</Box>
<Box as={Button}>AdaptUI Button</Box>
</Box>
`}
/>
<Codeblock live noInline>

## Tailwind CSS example
```
import { Box } from "@adaptui/react-tailwind";
<Codeblock
live
code={`
<Box
as="figure"
className={tcm("p-8 overflow-hidden bg-gray-100 rounded-xl")}
>
<Box
as="img"
className="object-cover w-32 h-32 mx-auto rounded-full md:w-48 md:h-auto md:rounded-md"
src="https://tailwindcss.com/_next/static/media/sarah-dayan.a8ff3f1095a58085a82e3bb6aab12eb2.jpg"
alt="Image of a women"
width="384"
height="512"
/>
<Box className="pt-6 space-y-4 text-center md:p-8 md:text-left">
<Box as="blockquote">
<Box as="p" className="text-lg font-semibold">
“Tailwind CSS is the only framework that I've seen scale on large
teams. It’s easy to customize, adapts to any design, and the build
size is tiny.”
export const App = (props) => {
return (
<Box className="space-x-4">
<Box as="a" href="#">
Link
</Box>
<Box as={Button}>AdaptUI Button</Box>
</Box>
<Box as="figcaption" className="font-medium">
<Box className="text-cyan-600">Sarah Dayan</Box>
<Box className="text-gray-500">Staff Engineer, Algolia</Box>
);
};
```

</Codeblock>

## Tailwind CSS example

<Codeblock live noInline>

```
import { Box } from "@adaptui/react-tailwind";
export const App = (props) => {
return (
<Box
as="figure"
className={tcm("overflow-hidden rounded-xl bg-gray-100 p-8")}
>
<Box
as="img"
className="mx-auto h-32 w-32 rounded-full object-cover md:h-auto md:w-48 md:rounded-md"
src="https://tailwindcss.com/_next/static/media/sarah-dayan.a8ff3f1095a58085a82e3bb6aab12eb2.jpg"
alt="Image of a women"
width="384"
height="512"
/>
<Box className="space-y-4 pt-6 text-center md:p-8 md:text-left">
<Box as="blockquote">
<Box as="p" className="text-lg font-semibold">
“Tailwind CSS is the only framework that I've seen scale on large
teams. It easy to customize, adapts to any design, and the build
size is tiny.”
</Box>
</Box>
<Box as="figcaption" className="font-medium">
<Box className="text-cyan-600">Sarah Dayan</Box>
<Box className="text-gray-500">Staff Engineer, Algolia</Box>
</Box>
</Box>
</Box>
</Box>
</Box>
`}
/>
);
};
```

</Codeblock>

## Card example

<Codeblock
live
code={`
<Box as="dl" className="grid grid-cols-1 gap-5 mt-5 sm:grid-cols-2">
<Box className="px-4 py-5 overflow-hidden bg-white rounded-lg shadow sm:p-6">
<Box as="dt" className="text-sm font-medium text-gray-500 truncate">
Total Subscribers
</Box>
<Box as="dd" className="mt-1 text-3xl font-semibold text-gray-900">
71,897
</Box>
</Box>
<Box className="px-4 py-5 overflow-hidden bg-white rounded-lg shadow sm:p-6">
<Box as="dt" className="text-sm font-medium text-gray-500 truncate">
Avg. Open Rate
</Box>
<Box as="dd" className="mt-1 text-3xl font-semibold text-gray-900">
58.16%
<Codeblock live noInline>

```
import { Box } from "@adaptui/react-tailwind";
export const App = (props) => {
return (
<Box as="dl" className="grid grid-cols-1 gap-5 mt-5 sm:grid-cols-2">
<Box className="px-4 py-5 overflow-hidden bg-white rounded-lg shadow-md sm:p-6">
<Box as="dt" className="text-sm font-medium text-gray-600 truncate">
Total Subscribers
</Box>
<Box as="dd" className="mt-1 text-3xl font-semibold text-gray-900">
71,897
</Box>
</Box>
<Box className="px-4 py-5 overflow-hidden bg-white rounded-lg shadow-md sm:p-6">
<Box as="dt" className="text-sm font-medium text-gray-600 truncate">
Avg. Open Rate
</Box>
<Box as="dd" className="mt-1 text-3xl font-semibold text-gray-900">
58.16%
</Box>
</Box>
</Box>
</Box>
</Box>
`}
/>
);
};
```

</Codeblock>

## API Reference

Expand Down
142 changes: 85 additions & 57 deletions pages/docs/components/primitives/button.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,15 @@ import {
# Button

The Button component can be used to trigger various kinds of user events such as
such as submitting a form, opening a dialog, canceling an action, or performing
a delete operation.
submitting a form, opening a dialog, canceling an action, or performing a delete
operation.

<ComponentLinks github="button" theme="button" story="primitives-button" />

## Imports

```jsx
import { Button } from "@adaptui/react-tailwind";
import { Button, CloseButton } from "@adaptui/react-tailwind";
```

- **Button:** The button which has prefix/suffix icons support, variants & size.
Expand All @@ -39,34 +39,48 @@ import { Button } from "@adaptui/react-tailwind";
Sizes can be set using the `size` prop. The default size is `md`. The available
sizes are: `sm` `md` `lg` `xl`

<Codeblock
live
code={`
<div className="space-x-2">
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra Large</Button>
</div>
`}
/>
<Codeblock live noInline>

```
import { Button } from "@adaptui/react-tailwind";
export const App = props => {
return (
<div className="space-x-2">
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra Large</Button>
</div>
);
};
```

</Codeblock>

## Button variants

Variants can be set using the `variant` prop. The default variant is `solid`.
The available variants are: `solid` `subtle` `outline` `ghost`

<Codeblock
live
code={`
<div className="space-x-2">
<Button variant="solid">Solid</Button>
<Button variant="subtle">Subtle</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
</div>
`}
/>
<Codeblock live noInline>

```
import { Button } from "@adaptui/react-tailwind";
export const App = props => {
return (
<div className="space-x-2">
<Button variant="solid">Solid</Button>
<Button variant="subtle">Subtle</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
</div>
);
};
```

</Codeblock>

<Nextra.Callout>
You can add extra variants & sizes via the theme file. Checkout [theming
Expand All @@ -78,43 +92,57 @@ The available variants are: `solid` `subtle` `outline` `ghost`
You can pass `iconOnly`, `prefix` and `suffix` props to append or prepend any
content inside of button.

<Codeblock
live
code={`
<div className="space-x-2">
<Button iconOnly={<SlotIcon />} />
<Button prefix={<SlotIcon />}>Search</Button>
<Button suffix={<SlotIcon />}>Search</Button>
<Button prefix={<SlotIcon />} suffix={<SlotIcon />}>
Search
</Button>
</div>
`}
/>
<Codeblock live noInline>

```
import { Button } from "@adaptui/react-tailwind";
export const App = props => {
return (
<div className="space-x-2">
<Button iconOnly={<SlotIcon />} />
<Button prefix={<SlotIcon />}>Search</Button>
<Button suffix={<SlotIcon />}>Search</Button>
<Button prefix={<SlotIcon />} suffix={<SlotIcon />}>
Search
</Button>
</div>
);
};
```

</Codeblock>

## Close Button

Component which comes with accessibility to close the dialogs or other actions

<Codeblock
live
code={`
<div className="space-y-2">
<div className="space-x-2">
<CloseButton size="sm" />
<CloseButton size="md" />
<CloseButton size="lg" />
<CloseButton size="xl" />
</div>
<div className="space-x-2">
<CloseButton variant="solid" />
<CloseButton variant="subtle" />
<CloseButton variant="outline" />
<CloseButton variant="ghost" />
</div>
</div>
`}
/>
<Codeblock live noInline>

```
import { CloseButton } from "@adaptui/react-tailwind";
export const App = props => {
return (
<div className="space-y-2">
<div className="space-x-2">
<CloseButton size="sm" />
<CloseButton size="md" />
<CloseButton size="lg" />
<CloseButton size="xl" />
</div>
<div className="space-x-2">
<CloseButton variant="solid" />
<CloseButton variant="subtle" />
<CloseButton variant="outline" />
<CloseButton variant="ghost" />
</div>
</div>
);
};
```

</Codeblock>

## API Reference

Expand Down
Loading

1 comment on commit 392ae39

@vercel
Copy link

@vercel vercel bot commented on 392ae39 Jul 25, 2022

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:

react-tailwind-docs – ./

react-tailwind-docs-timelessco.vercel.app
adaptui-react-docs.vercel.app
react-tailwind-docs-git-main-timelessco.vercel.app

Please sign in to comment.