feat(icon)!: allow any content type as icon

abelflopes · abelflopes · commit c1533d770076 · 2024-06-10T17:32:02.000+01:00
diff --git a/packages/components/_provisional/src/breadcrumbs/Breadcrumbs.tsx b/packages/components/_provisional/src/breadcrumbs/Breadcrumbs.tsx
@@ -15,7 +15,17 @@ const Breadcrumbs = ({
   ...otherProps
 }: Readonly<BreadcrumbsProps>): React.ReactElement => {
   const computedItems = useMemo(
-    () => items.flatMap((i, k) => (k === 0 ? i : [<Icon key="_" Icon={IconChevronRight} />, i])),
+    () =>
+      items.flatMap((i, k) =>
+        k === 0
+          ? i
+          : [
+              <Icon key="_">
+                <IconChevronRight />
+              </Icon>,
+              i,
+            ],
+      ),
     [items],
   );
 
diff --git a/packages/components/_provisional/src/chat/ChatPrompt/index.tsx b/packages/components/_provisional/src/chat/ChatPrompt/index.tsx
@@ -54,8 +54,12 @@ export const ChatPrompt = ({
           autoFocus
           required
         />
-        <Button>
-          {/* <Icon Icon={<LuSendHorizonal size="20" />} /> */}
+        <Button
+          icon={
+            <Icon>
+              <LuSendHorizonal />
+            </Icon>
+          }>
           Send
         </Button>
       </form>
diff --git a/packages/components/alert/src/index.tsx b/packages/components/alert/src/index.tsx
@@ -61,7 +61,11 @@ export const Alert = ({
 
       {dismissable ? (
         <Button
-          icon={<Icon Icon={IconClose} />}
+          icon={
+            <Icon>
+              <IconClose />
+            </Icon>
+          }
           size="s"
           skin="ghost"
           onClick={() => {
diff --git a/packages/components/data-table/src/TableHead.tsx b/packages/components/data-table/src/TableHead.tsx
@@ -24,8 +24,16 @@ export const TableHead = ({
     })}>
     {children}
 
-    {sorting === "asc" && <Icon Icon={IconChevronUp} className={styles.sortable_header_icon} />}
+    {sorting === "asc" && (
+      <Icon className={styles.sortable_header_icon}>
+        <IconChevronUp />
+      </Icon>
+    )}
 
-    {sorting === "desc" && <Icon Icon={IconChevronDown} className={styles.sortable_header_icon} />}
+    {sorting === "desc" && (
+      <Icon className={styles.sortable_header_icon}>
+        <IconChevronDown />
+      </Icon>
+    )}
   </th>
 );
diff --git a/packages/components/icon/specs/index.snapshot.test.tsx b/packages/components/icon/specs/index.snapshot.test.tsx
@@ -5,7 +5,13 @@ import { IconBellFill } from "../src/icons/IconBellFill";
 
 describe("snapshot Icon", () => {
   it("renders correctly", () => {
-    const tree = renderer.create(<Icon Icon={IconBellFill} />).toJSON();
+    const tree = renderer
+      .create(
+        <Icon>
+          <IconBellFill />
+        </Icon>,
+      )
+      .toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/packages/components/icon/specs/index.unit.test.tsx b/packages/components/icon/specs/index.unit.test.tsx
@@ -6,7 +6,13 @@ import { IconBellFill } from "../src/icons/IconBellFill";
 
 describe("unit Icon", () => {
   it("renders correctly", async () => {
-    render(<Icon Icon={IconBellFill} data-testid="icon" />);
+    render(
+      <Icon data-testid="icon">
+        <Icon>
+          <IconBellFill />
+        </Icon>
+      </Icon>,
+    );
     const find = await screen.findByTestId("icon");
     expect(find).toBeInTheDocument();
   });
diff --git a/packages/components/icon/src/index.tsx b/packages/components/icon/src/index.tsx
@@ -1,17 +1,12 @@
 import styles from "./styles/index.module.scss";
-/// React
-import React, { type SVGAttributes } from "react";
-// Icons
-import { type IconType } from "react-icons";
+import React from "react";
 import { useThemeContext } from "@react-ck/theme";
 import classNames from "classnames";
 
-export interface IconProps extends Omit<IconType, "size"> {
+export interface IconProps extends React.HTMLAttributes<HTMLSpanElement> {
   size?: "text" | "m" | "l";
   skin?: "default" | "inverted";
-  /** Additional CSS class */
-  className?: SVGAttributes<SVGElement>["className"];
-  Icon: IconType;
+  children: NonNullable<React.ReactNode>;
 }
 
 /**
@@ -24,13 +19,13 @@ export const Icon = ({
   size = "text",
   skin = "default",
   className,
-  Icon,
+  children,
   ...otherProps
 }: Readonly<IconProps>): React.ReactElement => {
   const themeContext = useThemeContext();
 
   return (
-    <Icon
+    <span
       {...otherProps}
       className={classNames(
         styles.root,
@@ -40,7 +35,8 @@ export const Icon = ({
           [`${styles.skin_inverted}`]: themeContext.inverted || skin === "inverted",
         },
         className,
-      )}
-    />
+      )}>
+      {children}
+    </span>
   );
 };
diff --git a/packages/components/icon/src/styles/index.module.scss b/packages/components/icon/src/styles/index.module.scss
@@ -3,10 +3,17 @@
 .root {
   color: get-css-var(icon, color);
   font-size: get-css-var(icon, size);
+  line-height: get-css-var(icon, size);
+  height: get-css-var(icon, size);
+  aspect-ratio: 1 / 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 
-  // Add margin for icons next to each other
-  & + & {
-    margin-left: get-spacing(1);
+  > * {
+    height: inherit;
+    width: 100%;
+    aspect-ratio: inherit;
   }
 }
 
diff --git a/packages/components/modal/src/index.tsx b/packages/components/modal/src/index.tsx
@@ -114,7 +114,15 @@ const Modal = ({
                   </Text>
 
                   {dismissable ? (
-                    <Button skin="ghost" icon={<Icon Icon={IconClose} />} onClick={handleClose} />
+                    <Button
+                      skin="ghost"
+                      icon={
+                        <Icon>
+                          <IconClose />
+                        </Icon>
+                      }
+                      onClick={handleClose}
+                    />
                   ) : null}
                 </header>
               ) : null}
diff --git a/packages/components/spinner/src/index.tsx b/packages/components/spinner/src/index.tsx
@@ -23,6 +23,8 @@ export const Spinner = ({
   ...otherProps
 }: Readonly<SpinnerProps>): React.ReactElement => (
   <span {...otherProps} className={classNames(styles.root, styles[skin], className)}>
-    <Icon Icon={IconSpinner} size={size} />
+    <Icon size={size}>
+      <IconSpinner />
+    </Icon>
   </span>
 );
diff --git a/packages/docs/pages/src/icons.mdx b/packages/docs/pages/src/icons.mdx
@@ -30,7 +30,7 @@ return (
     <IconGallery>
       {filteredIcons.map((icon) => (
         <IconItem key={icon} name={icon}>
-          <Icon Icon={icons[icon]} />
+          <Icon>{icons[icon]()}</Icon>
         </IconItem>
       ))}
 
diff --git a/packages/docs/stories/src/banner.stories.tsx b/packages/docs/stories/src/banner.stories.tsx
@@ -39,7 +39,9 @@ export const Component: Story = {
 
         <Text>{faker.lorem.sentence()}</Text>
 
-        <Icon Icon={IconLinkedin} />
+        <Icon>
+          <IconLinkedin />
+        </Icon>
       </>
     ),
     actions: [
diff --git a/packages/docs/stories/src/button.stories.tsx b/packages/docs/stories/src/button.stories.tsx
@@ -43,7 +43,11 @@ export const IconButton: Story = {
   args: {
     size: "s",
     skin: "ghost",
-    icon: <Icon Icon={IconClose} />,
+    icon: (
+      <Icon>
+        <IconClose />
+      </Icon>
+    ),
   },
 };
 
diff --git a/packages/docs/stories/src/dock.stories.tsx b/packages/docs/stories/src/dock.stories.tsx
@@ -30,16 +30,56 @@ const header = <Dock.MainItem label={faker.company.name()} image={faker.image.av
 
 const footer = (
   <>
-    <Dock.Item icon={<Icon Icon={IconBell} />} label="Notifications" active={false} />
-    <Dock.Item icon={<Icon Icon={IconCog} />} label="Settings" active={false} />
-    <Dock.Item icon={<Icon Icon={IconUserCircle} />} label="Profile" active={false} />
+    <Dock.Item
+      label="Notifications"
+      active={false}
+      icon={
+        <Icon>
+          <IconBell />
+        </Icon>
+      }
+    />
+    <Dock.Item
+      label="Settings"
+      active={false}
+      icon={
+        <Icon>
+          <IconCog />
+        </Icon>
+      }
+    />
+    <Dock.Item
+      label="Profile"
+      active={false}
+      icon={
+        <Icon>
+          <IconUserCircle />
+        </Icon>
+      }
+    />
   </>
 );
 
 const children = (
   <>
-    <Dock.Item icon={<Icon Icon={IconHome} />} label="Home" active />
-    <Dock.Item icon={<Icon Icon={IconFolder} />} label="Projects" active={false} />
+    <Dock.Item
+      label="Home"
+      icon={
+        <Icon>
+          <IconHome />
+        </Icon>
+      }
+      active
+    />
+    <Dock.Item
+      label="Projects"
+      active={false}
+      icon={
+        <Icon>
+          <IconFolder />
+        </Icon>
+      }
+    />
   </>
 );
 
diff --git a/packages/docs/stories/src/icon.stories.tsx b/packages/docs/stories/src/icon.stories.tsx
@@ -5,6 +5,7 @@ import { configureStory } from "@react-ck/story-config";
 import { Icon } from "@react-ck/icon/src";
 import { IconGitHub } from "@react-ck/icon/icons/IconGitHub";
 import { IconBellFill } from "@react-ck/icon/icons/IconBellFill";
+import { faker } from "@faker-js/faker";
 
 type Story = StoryObj<typeof Icon>;
 
@@ -25,7 +26,7 @@ export default meta;
 
 export const Normal: Story = {
   args: {
-    Icon: IconBellFill,
+    children: <IconBellFill />,
   },
 };
 
@@ -37,6 +38,28 @@ export const Inverted: Story = {
   },
   args: {
     skin: "inverted",
-    Icon: IconGitHub,
+    children: <IconGitHub />,
+  },
+};
+
+export const Unicode: Story = {
+  args: {
+    children: <>😄</>,
+  },
+};
+
+export const Image: Story = {
+  args: {
+    children: <img alt="Icon" src={faker.image.urlPicsumPhotos()} />,
+  },
+};
+
+export const Svg: Story = {
+  args: {
+    children: (
+      <svg height="100" width="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+        <circle r="45" cx="50" cy="50" fill="red" />
+      </svg>
+    ),
   },
 };
diff --git a/packages/docs/stories/src/menu.stories.tsx b/packages/docs/stories/src/menu.stories.tsx
@@ -30,14 +30,40 @@ const meta: Meta<typeof Menu> = {
 
 const children = (
   <>
-    <Menu.Item icon={<Icon Icon={IconUserCircle} />} selected>
+    <Menu.Item
+      icon={
+        <Icon>
+          <IconUserCircle />
+        </Icon>
+      }
+      selected>
       {faker.person.firstName()}
     </Menu.Item>
-    <Menu.Item icon={<Icon Icon={IconUserCircle} />}>{faker.person.firstName()}</Menu.Item>
-    <Menu.Item icon={<Icon Icon={IconUserCircle} />} highlighted>
+    <Menu.Item
+      icon={
+        <Icon>
+          <IconUserCircle />
+        </Icon>
+      }>
+      {faker.person.firstName()}
+    </Menu.Item>
+    <Menu.Item
+      icon={
+        <Icon>
+          <IconUserCircle />
+        </Icon>
+      }
+      highlighted>
+      {faker.person.firstName()}
+    </Menu.Item>
+    <Menu.Item
+      icon={
+        <Icon>
+          <IconUserCircle />
+        </Icon>
+      }>
       {faker.person.firstName()}
     </Menu.Item>
-    <Menu.Item icon={<Icon Icon={IconUserCircle} />}>{faker.person.firstName()}</Menu.Item>
     <Menu.Divider />
     <Menu.Item>{faker.animal.type()}</Menu.Item>
     <Menu.Item disabled>{faker.animal.type()}</Menu.Item>
diff --git a/packages/docs/stories/src/top-bar.stories.tsx b/packages/docs/stories/src/top-bar.stories.tsx
@@ -37,7 +37,11 @@ export const Component: Story = {
             skin="secondary"
             as={["a", { href: "/" }]}
             size="s"
-            icon={<Icon Icon={IconChevronLeft} />}>
+            icon={
+              <Icon>
+                <IconChevronLeft />
+              </Icon>
+            }>
             Back
           </Button>,
           <Breadcrumbs.Item key="2">Some Company</Breadcrumbs.Item>,
