ci: adds basic visual regression testing for icons (#16408)

calcom · Sep 4, 2024 · 36e79bf · 36e79bf
1 parent 2e36cad
commit 36e79bf
Show file tree

Hide file tree

Showing 8 changed files with 229 additions and 136 deletions.
diff --git a/apps/web/pages/icons.tsx b/apps/web/pages/icons.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import type { InferGetStaticPropsType } from "next";
+import { Inter } from "next/font/google";
+import localFont from "next/font/local";
+import Head from "next/head";
+
+import { APP_NAME } from "@calcom/lib/constants";
+import type { IconName } from "@calcom/ui";
+import { Icon, IconSprites } from "@calcom/ui";
+
+import { lucideIconList } from "../../../packages/ui/components/icon/icon-list.mjs";
+
+const interFont = Inter({ subsets: ["latin"], variable: "--font-inter", preload: true, display: "swap" });
+const calFont = localFont({
+ src: "../fonts/CalSans-SemiBold.woff2",
+ variable: "--font-cal",
+ preload: true,
+ display: "swap",
+ weight: "600",
+});
+
+export const getStaticProps = async () => {
+ return {
+ props: {
+ icons: Array.from(lucideIconList).sort() as IconName[],
+ },
+ };
+};
+
+const IconGrid = (props: {
+ title: string;
+ icons: IconName[];
+ rootClassName?: string;
+ iconClassName?: string;
+}) => (
+ <div className={props.rootClassName}>
+ <h2 className="font-cal mt-6 text-lg font-medium">{props.title}</h2>
+ <div className="grid grid-cols-2 lg:grid-cols-6">
+ {props.icons.map((icon) => {
+ return (
+ <div key={icon} className="flex items-center gap-1">
+ <Icon name={icon} className={props.iconClassName} />
+ <div>{icon}</div>
+ </div>
+ );
+ })}
+ </div>
+ </div>
+);
+
+export default function IconsPage(props: InferGetStaticPropsType<typeof getStaticProps>) {
+ return (
+ <div className="bg-subtle flex h-screen">
+ <Head>
+ <title>Icon showcase | {APP_NAME}</title>
+ </Head>
+ <style jsx global>{`
+ :root {
+ --font-cal: ${calFont.style.fontFamily};
+ --font-inter: ${interFont.style.fontFamily};
+ }
+ `}</style>
+ <IconSprites />
+ <div className="bg-default m-auto min-w-full rounded-md p-10 text-right ltr:text-left">
+ <h1 className="text-emphasis font-cal text-2xl font-medium">Icons showcase</h1>
+ <IconGrid title="Regular Icons" icons={props.icons} />
+ <IconGrid
+ title="Filled Icons"
+ icons={props.icons}
+ rootClassName="bg-darkgray-100 text-gray-50"
+ iconClassName="fill-blue-500"
+ />
+ </div>
+ </div>
+ );
+}
diff --git a/apps/web/playwright/icons.e2e.ts b/apps/web/playwright/icons.e2e.ts
@@ -0,0 +1,10 @@
+import { expect } from "@playwright/test";
+
+import { test } from "./lib/fixtures";
+
+test("Icons render properly", async ({ page }, testInfo) => {
+ await page.goto("/icons");
+ await expect(page).toHaveScreenshot("icons.png", {
+ fullPage: true,
+ });
+});
diff --git a/apps/web/playwright/icons.e2e.ts-snapshots/icons--calcom-web-darwin.png b/apps/web/playwright/icons.e2e.ts-snapshots/icons--calcom-web-darwin.png
diff --git a/apps/web/playwright/icons.e2e.ts-snapshots/icons--calcom-web-linux.png b/apps/web/playwright/icons.e2e.ts-snapshots/icons--calcom-web-linux.png
diff --git a/apps/web/public/icons/sprite.svg b/apps/web/public/icons/sprite.svg
diff --git a/packages/ui/components/icon/Icon.tsx b/packages/ui/components/icon/Icon.tsx
@@ -1,17 +1,26 @@
 import { type SVGProps } from "react";
 
+import cn from "@calcom/lib/classNames";
+
 import type { IconName } from "./icon-names";
 
 function Icon({
  name,
  size = 16,
+ className,
  ...props
 }: SVGProps<SVGSVGElement> & {
  name: IconName;
  size?: number | string;
 }) {
  return (
- <svg height={size} width={size} {...props} aria-hidden>
+ <svg
+ height={size}
+ width={size}
+ // Fill are inherited so we transparent by default. Can be overiden tailwind.
+ className={cn("fill-transparent", className)}
+ {...props}
+ aria-hidden>
  <use href={`#${name}`} />
  </svg>
  );

diff --git a/packages/ui/components/icon/icon-list.mjs b/packages/ui/components/icon/icon-list.mjs
@@ -44,7 +44,6 @@ export const lucideIconList = new Set([
  "circle",
  "clipboard-check",
  "clipboard",
- "clipboard",
  "clock",
  "code",
  "columns-3",
@@ -95,7 +94,6 @@ export const lucideIconList = new Set([
  "paintbrush",
  "paperclip",
  "pencil",
- "pencil",
  "phone-call",
  "phone",
  "plus",
@@ -121,10 +119,8 @@ export const lucideIconList = new Set([
  "sunrise",
  "sunset",
  "terminal",
- "terminal",
  "trash-2",
  "trash",
- "trash",
  "trello",
  "triangle-alert",
  "upload",

diff --git a/packages/ui/scripts/build-icons.mjs b/packages/ui/scripts/build-icons.mjs
@@ -89,6 +89,7 @@ async function generateSvgSprite({ files, inputDir, outputPath }) {
 
  svg.tagName = "symbol";
  svg.setAttribute("id", iconName(file));
+ svg.setAttribute("fill", "inherit");
  svg.removeAttribute("xmlns");
  svg.removeAttribute("xmlns:xlink");
  svg.removeAttribute("version");