Replace alternative with chip components

ony3000 · Nov 25, 2024 · e5bd8fe · e5bd8fe
1 parent 181f35a
commit e5bd8fe
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 75 deletions.
diff --git a/apps/website/docs/components/02-data-display/05-divider.mdx b/apps/website/docs/components/02-data-display/05-divider.mdx
@@ -31,7 +31,7 @@ Use the `Divider` to wrap elements that will be added to it.
 <DividerRenderedWithContent />
 
 ```tsx
-import { Box, Divider } from 'tailwind-joy/components';
+import { Box, Chip, Divider } from 'tailwind-joy/components';
 
 export function DividerRenderedWithContent() {
   const content = (
@@ -48,17 +48,7 @@ export function DividerRenderedWithContent() {
       <Divider>Visual indicator</Divider>
       {content}
       <Divider>
-        <div
-          className="
-            bg-joy-neutral-100 dark:bg-joy-neutral-800 text-joy-neutral-700 dark:text-joy-neutral-200
-            relative inline-flex min-h-[1.25rem] max-w-max items-center justify-center whitespace-nowrap
-            rounded-3xl px-1.5 align-middle text-[0.75rem] font-medium leading-normal no-underline
-          "
-        >
-          <span className="order-1 inline-block grow overflow-hidden text-ellipsis">
-            Visual indicator
-          </span>
-        </div>
+        <Chip size="sm">Visual indicator</Chip>
       </Divider>
       {content}
     </Box>
@@ -145,7 +135,7 @@ To control the position of the content, override the CSS variable `--Divider-chi
 
 ```tsx
 import { useState } from 'react';
-import { Box, Divider } from 'tailwind-joy/components';
+import { Box, Chip, Divider } from 'tailwind-joy/components';
 
 declare module 'react' {
   interface CSSProperties {
@@ -168,17 +158,7 @@ export function DividerChildPosition() {
       <Box className="space-y-2">
         {content}
         <Divider style={{ '--Divider-childPosition': `${position}%` }}>
-          <div
-            className="
-              bg-joy-neutral-100 dark:bg-joy-neutral-800 text-joy-neutral-700 dark:text-joy-neutral-200
-              relative inline-flex min-h-[1.25rem] max-w-max items-center justify-center whitespace-nowrap
-              rounded-3xl px-1.5 align-middle text-[0.75rem] font-medium leading-normal no-underline
-            "
-          >
-            <span className="order-1 inline-block grow overflow-hidden text-ellipsis">
-              Visual indicator
-            </span>
-          </div>
+          <Chip size="sm">Visual indicator</Chip>
         </Divider>
         {content}
       </Box>
@@ -220,4 +200,5 @@ Otherwise, the Divider component is composed of a single root `<hr>` element.
 See the documentation below for a complete reference to all of the props available to the components mentioned here.
 
 - [`<Box />`](../apis/box)
+- [`<Chip />`](../apis/chip)
 - [`<Divider />`](../apis/divider)
diff --git a/apps/website/docs/components/02-data-display/09-typography.mdx b/apps/website/docs/components/02-data-display/09-typography.mdx
@@ -280,7 +280,7 @@ Use the `startDecorator` and `endDecorator` props to add supporting icons or ele
 
 ```tsx
 import { MdInfoOutline } from 'react-icons/md';
-import { Typography } from 'tailwind-joy/components';
+import { Chip, Typography } from 'tailwind-joy/components';
 import { iconClass } from 'tailwind-joy/utils';
 
 export function TypographyDecorators() {
@@ -295,17 +295,9 @@ export function TypographyDecorators() {
       <Typography
         level="body-lg"
         endDecorator={
-          <span
-            className="
-              bg-joy-neutral-100 dark:bg-joy-neutral-800 text-joy-neutral-700 dark:text-joy-neutral-200
-              relative inline-flex min-h-[1.25rem] max-w-max items-center justify-center whitespace-nowrap
-              rounded-3xl px-1.5 align-middle text-[0.75rem] font-medium leading-normal no-underline
-            "
-          >
-            <span className="order-1 inline-block grow overflow-hidden text-ellipsis">
-              123
-            </span>
-          </span>
+          <Chip component="span" size="sm">
+            123
+          </Chip>
         }
         className="justify-center"
       >
@@ -336,5 +328,6 @@ When one Typography component is nested within another, the nested component ren
 See the documentation below for a complete reference to all of the props available to the components mentioned here.
 
 - [`<Box />`](../apis/box)
+- [`<Chip />`](../apis/chip)
 - [`<Sheet />`](../apis/sheet)
 - [`<Typography />`](../apis/typography)
diff --git a/apps/website/src/demos/divider/ChildPosition.tsx b/apps/website/src/demos/divider/ChildPosition.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Box, Divider } from 'tailwind-joy/components';
+import { Box, Chip, Divider } from 'tailwind-joy/components';
 import { DisplayStand } from '@site/src/components/docs/DisplayStand';
 
 declare module 'react' {
@@ -25,18 +25,7 @@ export function DividerChildPosition() {
         <Box className="space-y-2">
           {content}
           <Divider style={{ '--Divider-childPosition': `${position}%` }}>
-            {/* TODO: Replace div with Chip. */}
-            <div
-              className="
-                bg-joy-neutral-100 dark:bg-joy-neutral-800 text-joy-neutral-700 dark:text-joy-neutral-200
-                relative inline-flex min-h-[1.25rem] max-w-max items-center justify-center whitespace-nowrap
-                rounded-3xl px-1.5 align-middle text-[0.75rem] font-medium leading-normal no-underline
-              "
-            >
-              <span className="order-1 inline-block grow overflow-hidden text-ellipsis">
-                Visual indicator
-              </span>
-            </div>
+            <Chip size="sm">Visual indicator</Chip>
           </Divider>
           {content}
         </Box>

diff --git a/apps/website/src/demos/divider/RenderedWithContent.tsx b/apps/website/src/demos/divider/RenderedWithContent.tsx
@@ -1,4 +1,4 @@
-import { Box, Divider } from 'tailwind-joy/components';
+import { Box, Chip, Divider } from 'tailwind-joy/components';
 import { DisplayStand } from '@site/src/components/docs/DisplayStand';
 
 export function DividerRenderedWithContent() {
@@ -18,18 +18,7 @@ export function DividerRenderedWithContent() {
         <Divider>Visual indicator</Divider>
         {content}
         <Divider>
-          {/* TODO: Replace div with Chip. */}
-          <div
-            className="
-              bg-joy-neutral-100 dark:bg-joy-neutral-800 text-joy-neutral-700 dark:text-joy-neutral-200
-              relative inline-flex min-h-[1.25rem] max-w-max items-center justify-center whitespace-nowrap
-              rounded-3xl px-1.5 align-middle text-[0.75rem] font-medium leading-normal no-underline
-            "
-          >
-            <span className="order-1 inline-block grow overflow-hidden text-ellipsis">
-              Visual indicator
-            </span>
-          </div>
+          <Chip size="sm">Visual indicator</Chip>
         </Divider>
         {content}
       </Box>

diff --git a/apps/website/src/demos/typography/Decorators.tsx b/apps/website/src/demos/typography/Decorators.tsx
@@ -1,5 +1,5 @@
 import { MdInfoOutline } from 'react-icons/md';
-import { Typography } from 'tailwind-joy/components';
+import { Chip, Typography } from 'tailwind-joy/components';
 import { iconClass } from 'tailwind-joy/utils';
 import { DisplayStand } from '@site/src/components/docs/DisplayStand';
 
@@ -16,18 +16,9 @@ export function TypographyDecorators() {
         <Typography
           level="body-lg"
           endDecorator={
-            // TODO: Replace span with Chip.
-            <span
-              className="
-                bg-joy-neutral-100 dark:bg-joy-neutral-800 text-joy-neutral-700 dark:text-joy-neutral-200
-                relative inline-flex min-h-[1.25rem] max-w-max items-center justify-center whitespace-nowrap
-                rounded-3xl px-1.5 align-middle text-[0.75rem] font-medium leading-normal no-underline
-              "
-            >
-              <span className="order-1 inline-block grow overflow-hidden text-ellipsis">
-                123
-              </span>
-            </span>
+            <Chip component="span" size="sm">
+              123
+            </Chip>
           }
           className="justify-center"
         >