Skip to content

Commit

Permalink
Merge pull request #13 from ony3000/feat-icon
Browse files Browse the repository at this point in the history 
feat(core): Deprecate the icon adapter component
  • Loading branch information
@ony3000
ony3000 authored Aug 21, 2024
2 parents 2e21f9d + ca04430 commit 771da7f
Show file tree
Hide file tree
Showing 17 changed files with 197 additions and 263 deletions.
4 changes: 2 additions & 2 deletions apps/website/docs/apis/checkbox.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ Other props are as follows:
The icon to display when the component is checked.

- Type: `ReactNode`
- Default: `<IconAdapter><MdCheck /></IconAdapter>`, where `<MdCheck />` is an icon component imported from [react-icons](https://www.npmjs.com/package/react-icons).
- Default: `<MdCheck />`, where `<MdCheck />` is an icon component imported from [react-icons](https://www.npmjs.com/package/react-icons).

### `color`

Expand Down Expand Up @@ -71,7 +71,7 @@ This does not set the native input element to indeterminate due to inconsistent
The icon to display when the component is indeterminate.

- Type: `ReactNode`
- Default: `<IconAdapter><MdHorizontalRule /></IconAdapter>`, where `<MdHorizontalRule />` is an icon component imported from [react-icons](https://www.npmjs.com/package/react-icons).
- Default: `<MdHorizontalRule />`, where `<MdHorizontalRule />` is an icon component imported from [react-icons](https://www.npmjs.com/package/react-icons).

### `label`

Expand Down
2 changes: 2 additions & 0 deletions apps/website/docs/apis/icon-adapter.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ title: <IconAdapter />

# IconAdapter API

<DeprecatedIn version="0.3.0" />

API reference docs for the React IconAdapter component.
Learn about the props of this exported module.

Expand Down
100 changes: 21 additions & 79 deletions apps/website/docs/components/button-group.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,7 @@ export function ButtonGroupBasics() {
<Button>Two</Button>
<Button>Three</Button>
<IconButton>
<IconAdapter>
<MdSettings />
</IconAdapter>
<MdSettings />
</IconButton>
</ButtonGroup>
</DisplayStand>
Expand All @@ -38,12 +36,7 @@ export function ButtonGroupBasics() {
<ButtonGroupBasics />

```jsx
import {
Button,
ButtonGroup,
IconAdapter,
IconButton,
} from 'tailwind-joy/components';
import { Button, ButtonGroup, IconButton } from 'tailwind-joy/components';
import { MdSettings } from 'react-icons/md';

export function ButtonGroupBasics() {
Expand All @@ -54,9 +47,7 @@ export function ButtonGroupBasics() {
<Button>Two</Button>
<Button>Three</Button>
<IconButton>
<IconAdapter>
<MdSettings />
</IconAdapter>
<MdSettings />
</IconButton>
</ButtonGroup>
</div>
Expand Down Expand Up @@ -279,9 +270,7 @@ export function ButtonGroupDisabled() {
<Button>Two</Button>
<Button>Three</Button>
<IconButton disabled={false}>
<IconAdapter>
<MdSettings />
</IconAdapter>
<MdSettings />
</IconButton>
</ButtonGroup>
</DisplayStand>
Expand All @@ -291,12 +280,7 @@ export function ButtonGroupDisabled() {
<ButtonGroupDisabled />

```jsx
import {
Button,
ButtonGroup,
IconAdapter,
IconButton,
} from 'tailwind-joy/components';
import { Button, ButtonGroup, IconButton } from 'tailwind-joy/components';
import { MdSettings } from 'react-icons/md';

export function ButtonGroupDisabled() {
Expand All @@ -307,9 +291,7 @@ export function ButtonGroupDisabled() {
<Button>Two</Button>
<Button>Three</Button>
<IconButton disabled={false}>
<IconAdapter>
<MdSettings />
</IconAdapter>
<MdSettings />
</IconButton>
</ButtonGroup>
</div>
Expand All @@ -330,9 +312,7 @@ export function ButtonGroupSpacing() {
<Button disabled>Two</Button>
<Button>Three</Button>
<IconButton>
<IconAdapter>
<MdSettings />
</IconAdapter>
<MdSettings />
</IconButton>
</ButtonGroup>
</DisplayStand>
Expand All @@ -342,12 +322,7 @@ export function ButtonGroupSpacing() {
<ButtonGroupSpacing />

```jsx
import {
Button,
ButtonGroup,
IconAdapter,
IconButton,
} from 'tailwind-joy/components';
import { Button, ButtonGroup, IconButton } from 'tailwind-joy/components';
import { MdSettings } from 'react-icons/md';

export function ButtonGroupSpacing() {
Expand All @@ -358,9 +333,7 @@ export function ButtonGroupSpacing() {
<Button disabled>Two</Button>
<Button>Three</Button>
<IconButton>
<IconAdapter>
<MdSettings />
</IconAdapter>
<MdSettings />
</IconButton>
</ButtonGroup>
</div>
Expand All @@ -380,39 +353,31 @@ export function ButtonGroupVertical() {
<Button disabled>Two</Button>
<Button>Three</Button>
<IconButton>
<IconAdapter>
<MdSettings />
</IconAdapter>
<MdSettings />
</IconButton>
</ButtonGroup>
<ButtonGroup orientation="vertical" variant="soft">
<Button>One</Button>
<Button disabled>Two</Button>
<Button>Three</Button>
<IconButton>
<IconAdapter>
<MdSettings />
</IconAdapter>
<MdSettings />
</IconButton>
</ButtonGroup>
<ButtonGroup orientation="vertical" variant="outlined">
<Button>One</Button>
<Button disabled>Two</Button>
<Button>Three</Button>
<IconButton>
<IconAdapter>
<MdSettings />
</IconAdapter>
<MdSettings />
</IconButton>
</ButtonGroup>
<ButtonGroup orientation="vertical" variant="plain">
<Button>One</Button>
<Button disabled>Two</Button>
<Button>Three</Button>
<IconButton>
<IconAdapter>
<MdSettings />
</IconAdapter>
<MdSettings />
</IconButton>
</ButtonGroup>
</DisplayStand>
Expand All @@ -422,12 +387,7 @@ export function ButtonGroupVertical() {
<ButtonGroupVertical />

```jsx
import {
Button,
ButtonGroup,
IconAdapter,
IconButton,
} from 'tailwind-joy/components';
import { Button, ButtonGroup, IconButton } from 'tailwind-joy/components';
import { MdSettings } from 'react-icons/md';

export function ButtonGroupVertical() {
Expand All @@ -438,39 +398,31 @@ export function ButtonGroupVertical() {
<Button disabled>Two</Button>
<Button>Three</Button>
<IconButton>
<IconAdapter>
<MdSettings />
</IconAdapter>
<MdSettings />
</IconButton>
</ButtonGroup>
<ButtonGroup orientation="vertical" variant="soft">
<Button>One</Button>
<Button disabled>Two</Button>
<Button>Three</Button>
<IconButton>
<IconAdapter>
<MdSettings />
</IconAdapter>
<MdSettings />
</IconButton>
</ButtonGroup>
<ButtonGroup orientation="vertical" variant="outlined">
<Button>One</Button>
<Button disabled>Two</Button>
<Button>Three</Button>
<IconButton>
<IconAdapter>
<MdSettings />
</IconAdapter>
<MdSettings />
</IconButton>
</ButtonGroup>
<ButtonGroup orientation="vertical" variant="plain">
<Button>One</Button>
<Button disabled>Two</Button>
<Button>Three</Button>
<IconButton>
<IconAdapter>
<MdSettings />
</IconAdapter>
<MdSettings />
</IconButton>
</ButtonGroup>
</div>
Expand All @@ -490,9 +442,7 @@ export function ButtonGroupStretching1() {
<Button>Two</Button>
<Button>Three</Button>
<IconButton>
<IconAdapter>
<MdSettings />
</IconAdapter>
<MdSettings />
</IconButton>
</ButtonGroup>
</DisplayStand>
Expand All @@ -502,12 +452,7 @@ export function ButtonGroupStretching1() {
<ButtonGroupStretching1 />

```jsx
import {
Button,
ButtonGroup,
IconAdapter,
IconButton,
} from 'tailwind-joy/components';
import { Button, ButtonGroup, IconButton } from 'tailwind-joy/components';
import { MdSettings } from 'react-icons/md';

export function ButtonGroupStretching1() {
Expand All @@ -518,9 +463,7 @@ export function ButtonGroupStretching1() {
<Button>Two</Button>
<Button>Three</Button>
<IconButton>
<IconAdapter>
<MdSettings />
</IconAdapter>
<MdSettings />
</IconButton>
</ButtonGroup>
</div>
Expand Down Expand Up @@ -645,5 +588,4 @@ See the documentation below for a complete reference to all of the props availab

- [`<Button />`](../apis/button)
- [`<ButtonGroup />`](../apis/button-group)
- [`<IconAdapter />`](../apis/icon-adapter)
- [`<IconButton />`](../apis/icon-button)
Loading

0 comments on commit 771da7f

Please sign in to comment.