From af7bb76738a72dfdbb731eae418b106cc1e3550b Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 22 Dec 2023 16:29:23 +0000
Subject: [PATCH 1/2] refactor(site): refactor pill component API

---
 .../LicenseBanner/LicenseBannerView.tsx       |  4 +-
 site/src/components/Pill/Pill.stories.tsx     | 25 ++++---
 site/src/components/Pill/Pill.tsx             | 70 ++++++++-----------
 .../TemplateExampleCard.tsx                   |  5 +-
 .../WorkspaceStatusBadge.tsx                  | 22 +++---
 .../AuditPage/AuditLogRow/AuditLogRow.tsx     |  5 +-
 .../TemplateVersionsPage/VersionRow.tsx       | 31 ++++++--
 .../TemplateVersionStatusBadge.tsx            |  9 +--
 .../UsersPage/UsersTable/UserRoleCell.tsx     | 15 ++--
 9 files changed, 106 insertions(+), 80 deletions(-)

diff --git a/site/src/components/Dashboard/LicenseBanner/LicenseBannerView.tsx b/site/src/components/Dashboard/LicenseBanner/LicenseBannerView.tsx
index 31c9f4269e48d..963e3d4067f0b 100644
--- a/site/src/components/Dashboard/LicenseBanner/LicenseBannerView.tsx
+++ b/site/src/components/Dashboard/LicenseBanner/LicenseBannerView.tsx
@@ -55,7 +55,7 @@ export const LicenseBannerView: FC<LicenseBannerViewProps> = ({
   if (messages.length === 1) {
     return (
       <div css={containerStyles}>
-        <Pill text={Language.licenseIssue} type={type} />
+        <Pill type={type}>{Language.licenseIssue}</Pill>
         <div css={styles.leftContent}>
           <span>{messages[0]}</span>
           &nbsp;
@@ -73,7 +73,7 @@ export const LicenseBannerView: FC<LicenseBannerViewProps> = ({
 
   return (
     <div css={containerStyles}>
-      <Pill text={Language.licenseIssues(messages.length)} type={type} />
+      <Pill type={type}>{Language.licenseIssues(messages.length)}</Pill>
       <div css={styles.leftContent}>
         <div>
           {Language.exceeded}
diff --git a/site/src/components/Pill/Pill.stories.tsx b/site/src/components/Pill/Pill.stories.tsx
index 628b0655e5603..f3ea362c2cb69 100644
--- a/site/src/components/Pill/Pill.stories.tsx
+++ b/site/src/components/Pill/Pill.stories.tsx
@@ -1,5 +1,6 @@
 import { Pill } from "./Pill";
 import type { Meta, StoryObj } from "@storybook/react";
+import InfoOutlined from "@mui/icons-material/InfoOutlined";
 
 const meta: Meta<typeof Pill> = {
   title: "components/Pill",
@@ -11,55 +12,63 @@ type Story = StoryObj<typeof Pill>;
 
 export const Default: Story = {
   args: {
-    text: "Default",
+    children: "Default",
   },
 };
 
 export const Danger: Story = {
   args: {
-    text: "Danger",
+    children: "Danger",
     type: "danger",
   },
 };
 
 export const Error: Story = {
   args: {
-    text: "Error",
+    children: "Error",
     type: "error",
   },
 };
 
 export const Warning: Story = {
   args: {
-    text: "Warning",
+    children: "Warning",
     type: "warning",
   },
 };
 
 export const Notice: Story = {
   args: {
-    text: "Notice",
+    children: "Notice",
     type: "notice",
   },
 };
 
 export const Info: Story = {
   args: {
-    text: "Information",
+    children: "Information",
     type: "info",
   },
 };
 
 export const Success: Story = {
   args: {
-    text: "Success",
+    children: "Success",
     type: "success",
   },
 };
 
 export const Active: Story = {
   args: {
-    text: "Active",
+    children: "Active",
     type: "active",
   },
 };
+
+export const WithIcon: Story = {
+  args: {
+    children: "Information",
+    type: "info",
+    icon: <InfoOutlined />,
+  },
+};
diff --git a/site/src/components/Pill/Pill.tsx b/site/src/components/Pill/Pill.tsx
index edfc88c0a5490..fd4c9558c2565 100644
--- a/site/src/components/Pill/Pill.tsx
+++ b/site/src/components/Pill/Pill.tsx
@@ -1,16 +1,19 @@
-import { type FC, type ReactNode, useMemo, forwardRef } from "react";
-import { css, useTheme, type Interpolation, type Theme } from "@emotion/react";
+import {
+  type FC,
+  type ReactNode,
+  useMemo,
+  forwardRef,
+  HTMLAttributes,
+} from "react";
+import { useTheme, type Interpolation, type Theme } from "@emotion/react";
 import type { ThemeRole } from "theme/experimental";
 
 export type PillType = ThemeRole | keyof typeof themeOverrides;
 
-export interface PillProps {
-  className?: string;
+export type PillProps = HTMLAttributes<HTMLDivElement> & {
   icon?: ReactNode;
-  text: ReactNode;
   type?: PillType;
-  title?: string;
-}
+};
 
 const themeOverrides = {
   neutral: (theme) => ({
@@ -27,11 +30,14 @@ const themeStyles = (type: ThemeRole) => (theme: Theme) => {
   };
 };
 
+const PILL_HEIGHT = 24;
+const PILL_ICON_SIZE = 14;
+const PILL_ICON_SPACING = (PILL_HEIGHT - PILL_ICON_SIZE) / 2;
+
 export const Pill: FC<PillProps> = forwardRef<HTMLDivElement, PillProps>(
   (props, ref) => {
-    const { icon, text = null, type = "neutral", ...attrs } = props;
+    const { icon, type = "neutral", children, ...divProps } = props;
     const theme = useTheme();
-
     const typeStyles = useMemo(() => {
       if (type in themeOverrides) {
         return themeOverrides[type as keyof typeof themeOverrides];
@@ -44,47 +50,33 @@ export const Pill: FC<PillProps> = forwardRef<HTMLDivElement, PillProps>(
         ref={ref}
         css={[
           {
+            fontSize: 12,
+            color: theme.experimental.l1.text,
             cursor: "default",
             display: "inline-flex",
             alignItems: "center",
+            whiteSpace: "nowrap",
+            fontWeight: 400,
             borderWidth: 1,
             borderStyle: "solid",
             borderRadius: 99999,
-            fontSize: 12,
-            color: theme.experimental.l1.text,
-            height: 24,
-            paddingLeft: icon ? 6 : 12,
+            lineHeight: 1,
+            height: PILL_HEIGHT,
+            gap: PILL_ICON_SPACING,
             paddingRight: 12,
-            whiteSpace: "nowrap",
-            fontWeight: 400,
+            paddingLeft: icon ? PILL_ICON_SPACING : 12,
+
+            "& svg": {
+              width: PILL_ICON_SIZE,
+              height: PILL_ICON_SIZE,
+            },
           },
           typeStyles,
         ]}
-        role="status"
-        {...attrs}
+        {...divProps}
       >
-        {icon && (
-          <div
-            css={css`
-              margin-right: 4px;
-              width: 14px;
-              height: 14px;
-              line-height: 0;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-
-              & > img,
-              & > svg {
-                width: 14px;
-                height: 14px;
-              }
-            `}
-          >
-            {icon}
-          </div>
-        )}
-        {text}
+        {icon}
+        {children}
       </div>
     );
   },
diff --git a/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx b/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx
index e5151880eb753..1a92a18ed6c26 100644
--- a/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx
+++ b/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx
@@ -57,7 +57,6 @@ export const TemplateExampleCard = (props: TemplateExampleCardProps) => {
             return (
               <RouterLink key={tag} to={`/starter-templates?tag=${tag}`}>
                 <Pill
-                  text={tag}
                   css={(theme) => ({
                     borderColor: isActive
                       ? theme.palette.primary.main
@@ -70,7 +69,9 @@ export const TemplateExampleCard = (props: TemplateExampleCardProps) => {
                       borderColor: theme.palette.primary.main,
                     },
                   })}
-                />
+                >
+                  {tag}
+                </Pill>
               </RouterLink>
             );
           })}
diff --git a/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx b/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
index 00aced41ad3f6..73c53e72b84e4 100644
--- a/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
+++ b/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
@@ -47,13 +47,15 @@ export const WorkspaceStatusBadge: FC<WorkspaceStatusBadgeProps> = ({
           }
           placement="top"
         >
-          <div>
-            <Pill className={className} icon={icon} text={text} type={type} />
-          </div>
+          <Pill role="status" className={className} icon={icon} type={type}>
+            {text}
+          </Pill>
         </FailureTooltip>
       </Cond>
       <Cond>
-        <Pill className={className} icon={icon} text={text} type={type} />
+        <Pill role="status" className={className} icon={icon} type={type}>
+          {text}
+        </Pill>
       </Cond>
     </ChooseOne>
   );
@@ -95,11 +97,13 @@ export const DormantStatusBadge: FC<DormantStatusBadgeProps> = ({
       }
     >
       <Pill
+        role="status"
         className={className}
         icon={<AutoDeleteIcon />}
-        text="Deletion Pending"
         type="error"
-      />
+      >
+        Deletion Pending
+      </Pill>
     </Tooltip>
   ) : (
     <Tooltip
@@ -113,11 +117,13 @@ export const DormantStatusBadge: FC<DormantStatusBadgeProps> = ({
       }
     >
       <Pill
+        role="status"
         className={className}
         icon={<RecyclingIcon />}
-        text="Dormant"
         type="warning"
-      />
+      >
+        Dormant
+      </Pill>
     </Tooltip>
   );
 };
diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
index 91a37b80a6a29..9859117b58416 100644
--- a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
+++ b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
@@ -138,8 +138,9 @@ export const AuditLogRow: React.FC<AuditLogRowProps> = ({
                   <Pill
                     css={styles.httpStatusPill}
                     type={httpStatusColor(auditLog.status_code)}
-                    text={auditLog.status_code.toString()}
-                  />
+                  >
+                    {auditLog.status_code.toString()}
+                  </Pill>
                 </Stack>
               </Stack>
             </Stack>
diff --git a/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx b/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx
index af8110c7ad5b9..03491fc3da2d9 100644
--- a/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx
+++ b/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx
@@ -75,19 +75,36 @@ export const VersionRow: FC<VersionRowProps> = ({
           </Stack>
 
           <Stack direction="row" alignItems="center" spacing={2}>
-            {isActive && <Pill text="Active" type="success" />}
-            {isLatest && <Pill text="Newest" type="info" />}
-
+            {isActive && (
+              <Pill role="status" type="success">
+                Active
+              </Pill>
+            )}
+            {isLatest && (
+              <Pill role="status" type="info">
+                Newest
+              </Pill>
+            )}
             {jobStatus === "pending" && (
-              <Pill text={<>Pending&hellip;</>} type="warning" />
+              <Pill role="status" type="warning">
+                Pending&hellip;
+              </Pill>
             )}
             {jobStatus === "running" && (
-              <Pill text={<>Building&hellip;</>} type="warning" />
+              <Pill role="status" type="warning">
+                Building&hellip;
+              </Pill>
             )}
             {(jobStatus === "canceling" || jobStatus === "canceled") && (
-              <Pill text="Canceled" type="neutral" />
+              <Pill role="status" type="neutral">
+                Canceled
+              </Pill>
+            )}
+            {jobStatus === "failed" && (
+              <Pill role="status" type="error">
+                Failed
+              </Pill>
             )}
-            {jobStatus === "failed" && <Pill text="Failed" type="error" />}
 
             {showActions && (
               <>
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx
index 4fa2046d93815..e9e470b09a4c7 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx
@@ -10,12 +10,9 @@ export const TemplateVersionStatusBadge: FC<{
 }> = ({ version }) => {
   const { text, icon, type } = getStatus(version);
   return (
-    <Pill
-      icon={icon}
-      text={text}
-      type={type}
-      title={`Build status is ${text}`}
-    />
+    <Pill icon={icon} type={type} title={`Build status is ${text}`}>
+      {text}
+    </Pill>
   );
 };
 
diff --git a/site/src/pages/UsersPage/UsersTable/UserRoleCell.tsx b/site/src/pages/UsersPage/UsersTable/UserRoleCell.tsx
index 5ad5c148fa606..6340f8e31fe54 100644
--- a/site/src/pages/UsersPage/UsersTable/UserRoleCell.tsx
+++ b/site/src/pages/UsersPage/UsersTable/UserRoleCell.tsx
@@ -71,7 +71,6 @@ export const UserRoleCell: FC<UserRoleCellProps> = ({
         )}
 
         <Pill
-          text={mainDisplayRole.display_name}
           css={{
             backgroundColor: hasOwnerRole
               ? theme.experimental.roles.info.background
@@ -80,7 +79,9 @@ export const UserRoleCell: FC<UserRoleCellProps> = ({
               ? theme.experimental.roles.info.outline
               : theme.experimental.l2.outline,
           }}
-        />
+        >
+          {mainDisplayRole.display_name}
+        </Pill>
 
         {extraRoles.length > 0 && <OverflowRolePill roles={extraRoles} />}
       </Stack>
@@ -99,12 +100,13 @@ const OverflowRolePill: FC<OverflowRolePillProps> = ({ roles }) => {
     <Popover mode="hover">
       <PopoverTrigger>
         <Pill
-          text={`+${roles.length} more`}
           css={{
             backgroundColor: theme.palette.background.paper,
             borderColor: theme.palette.divider,
           }}
-        />
+        >
+          {`+${roles.length} more`}
+        </Pill>
       </PopoverTrigger>
 
       <PopoverContent
@@ -133,12 +135,13 @@ const OverflowRolePill: FC<OverflowRolePillProps> = ({ roles }) => {
         {roles.map((role) => (
           <Pill
             key={role.name}
-            text={role.display_name || role.name}
             css={{
               backgroundColor: theme.palette.background.paper,
               borderColor: theme.palette.divider,
             }}
-          />
+          >
+            {role.display_name || role.name}
+          </Pill>
         ))}
       </PopoverContent>
     </Popover>

From 0531b6f2bee3c66e588c68bcdad0228d3f68263d Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 2 Jan 2024 11:49:48 +0000
Subject: [PATCH 2/2] update remaining pills

---
 .../components/Dashboard/ServiceBanner/ServiceBannerView.tsx  | 2 +-
 .../DeploySettingsPage/LicensesSettingsPage/LicenseCard.tsx   | 4 +++-
 site/src/pages/TemplatePage/TemplatePageHeader.tsx            | 2 +-
 site/src/pages/WorkspacePage/ChangeVersionDialog.tsx          | 2 +-
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx b/site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx
index b2b30ecb46d70..b76b517f9e745 100644
--- a/site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx
+++ b/site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx
@@ -17,7 +17,7 @@ export const ServiceBannerView: FC<ServiceBannerViewProps> = ({
 }) => {
   return (
     <div css={[styles.banner, { backgroundColor }]}>
-      {isPreview && <Pill text="Preview" type="info" />}
+      {isPreview && <Pill type="info">Preview</Pill>}
       <div
         css={[
           styles.wrapper,
diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicenseCard.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicenseCard.tsx
index 73b1c5b379c6d..39886bf18e15a 100644
--- a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicenseCard.tsx
+++ b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicenseCard.tsx
@@ -86,7 +86,9 @@ export const LicenseCard = ({
               new Date(license.claims.license_expires * 1000),
               new Date(),
             ) < 1 ? (
-              <Pill css={styles.expiredBadge} text="Expired" type="error" />
+              <Pill css={styles.expiredBadge} type="error">
+                Expired
+              </Pill>
             ) : (
               <span css={styles.secondaryMaincolor}>Valid Until</span>
             )}
diff --git a/site/src/pages/TemplatePage/TemplatePageHeader.tsx b/site/src/pages/TemplatePage/TemplatePageHeader.tsx
index dab4423f074b0..90515523e1af2 100644
--- a/site/src/pages/TemplatePage/TemplatePageHeader.tsx
+++ b/site/src/pages/TemplatePage/TemplatePageHeader.tsx
@@ -216,7 +216,7 @@ export const TemplatePageHeader: FC<TemplatePageHeaderProps> = ({
             )}
           </div>
 
-          {template.deprecated && <Pill text="Deprecated" type="warning" />}
+          {template.deprecated && <Pill type="warning">Deprecated</Pill>}
         </Stack>
       </PageHeader>
     </Margins>
diff --git a/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx b/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx
index ec8b2c45777b5..248e7fc2c43c5 100644
--- a/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx
+++ b/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx
@@ -106,7 +106,7 @@ export const ChangeVersionDialog: FC<ChangeVersionDialogProps> = ({
                               )}
                             </Stack>
                             {template?.active_version_id === option.id && (
-                              <Pill text="Active" type="success" />
+                              <Pill type="success">Active</Pill>
                             )}
                           </Stack>
                         }