From 7a0f9be99e6a85aa03d4978982238a1c9574e2a7 Mon Sep 17 00:00:00 2001 From: Gabriele Petronella Date: Tue, 27 Jun 2023 12:31:20 +0200 Subject: [PATCH] Add icons docs --- .../src/Icons/svgIconProps.ts | 4 +- packages/storybook/package.json | 1 + .../stories/Foundations/Icons.stories.tsx | 23 ++++- packages/website/docs/05-Guides/icons.mdx | 87 +++++++++++++++++++ packages/website/package.json | 1 + packages/website/src/components/Canvas.tsx | 6 +- .../src/snippets/Icons/Configuration.tsx | 19 ++++ .../website/src/snippets/Icons/Phosphor.tsx | 28 ++++++ pnpm-lock.yaml | 83 +++++++++++++++--- 9 files changed, 236 insertions(+), 16 deletions(-) create mode 100644 packages/website/docs/05-Guides/icons.mdx create mode 100644 packages/website/src/snippets/Icons/Configuration.tsx create mode 100644 packages/website/src/snippets/Icons/Phosphor.tsx diff --git a/packages/bento-design-system/src/Icons/svgIconProps.ts b/packages/bento-design-system/src/Icons/svgIconProps.ts index 269878f39..0fbdac4a4 100644 --- a/packages/bento-design-system/src/Icons/svgIconProps.ts +++ b/packages/bento-design-system/src/Icons/svgIconProps.ts @@ -1,11 +1,11 @@ -import { SVGProps } from "react"; +import { PropsWithoutRef, SVGProps } from "react"; import { iconRecipe } from "./Icon.css"; import { IconProps } from "./IconProps"; export function svgIconProps( { size, color = "default" }: IconProps, sizeAxis: "horizontal" | "vertical" = "horizontal" -): SVGProps { +): PropsWithoutRef> { return { className: sizeAxis === "horizontal" diff --git a/packages/storybook/package.json b/packages/storybook/package.json index 40dcc50de..3c0a8c561 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -14,6 +14,7 @@ }, "dependencies": { "@buildo/bento-design-system": "workspace:*", + "@phosphor-icons/react": "^2.0.10", "@vanilla-extract/sprinkles": "1.6.0", "date-fns": "2.29.3", "recharts": "^2.1.16" diff --git a/packages/storybook/stories/Foundations/Icons.stories.tsx b/packages/storybook/stories/Foundations/Icons.stories.tsx index f3ab06f65..815375602 100644 --- a/packages/storybook/stories/Foundations/Icons.stories.tsx +++ b/packages/storybook/stories/Foundations/Icons.stories.tsx @@ -1,5 +1,7 @@ import { Meta, StoryObj } from "@storybook/react"; -import { Box, Inline, Stack, Body, IconProps, icons } from ".."; +import { Box, Inline, Stack, Body, IconProps, icons, svgIconProps } from ".."; +import { Horse, Icon as PhosphorIcon } from "@phosphor-icons/react"; +import { forwardRef } from "react"; const meta = { title: "Foundations/Icons", @@ -58,3 +60,22 @@ export const Icons = { ), } satisfies Story; + +function phosphorToBento(Icon: PhosphorIcon) { + return forwardRef((props, ref) => { + const { viewBox, ...svgProps } = svgIconProps(props); + return ; + }); +} + +const IconHorse = phosphorWrapper(Horse); + +export const PhosphorIcons = { + args: { + color: "brandPrimary", + size: 40, + }, + render: (args) => { + return ; + }, +} satisfies Story; diff --git a/packages/website/docs/05-Guides/icons.mdx b/packages/website/docs/05-Guides/icons.mdx new file mode 100644 index 000000000..aabf9d12c --- /dev/null +++ b/packages/website/docs/05-Guides/icons.mdx @@ -0,0 +1,87 @@ +import { Canvas } from "../../src/components/Canvas"; + +# Icons + +Bento comes with a default set of icons, which are React components accepting a set of common props, specifically: + +- `size` +- `color` +- `className` (optional) + +`size` and `color` are limited to specific semantic values, so to ensure consistency in their usage. + +## Changing the icons used in components + +You can change any icon used by Bento components using the configuration. + +For example here's how you can change the default icon used by the `Chip` component: + + + +For more information on how to configure Bento components, please refer to the [configuration documentation](../Customization/configuration). + +## Adding new icons + +If you want to add a new icon, you generally proceed as follows: + +- create a svg asset with a viewport of `0 0 24 24` +- run it through something like https://react-svgr.com/ to cleanup the markup +- remove all props from the `svg` tag +- remove all `fill` attributes from the svg +- create a component following this template + +```tsx +import { IconProps, svgIconProps } from "@buildo/bento-design-system"; + +export function IconMyCustomName(props: IconProps) { + return {/* SVG markup gos here*/}; +} +``` + +A few things to notice: + +- stripping all default props from the `svg` tag is important so that `svgIconProps` can correctly set the icon size and viewbox +- this is true also for `fill` attributes, which are removed so that `svgIconProps` can correctly set the icon color +- it's good practice to name icons with the `Icon` prefix, so that they're easy to lookup in autocompletion +- using `IconProps` ensures that you can directly pass your custom icons to any Bento component that accepts an `icon` prop, for example + +```tsx +