simplify button styles and update all the code everywhere all the time

david-crespo · david-crespo · commit c665198e6cfe · 2022-11-10T13:43:31.000-06:00
diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx
@@ -28,7 +28,6 @@ const modKey = /Mac|iPod|iPhone|iPad/.test(navigator.platform) ? 'cmd' : 'ctrl'
 const JumpToButton = () => (
   <Button
     variant="ghost"
-    color="secondary"
     size="sm"
     // TODO: click should open jump to menu
     onClick={() => alert('click not implemented, press cmd+k')}
diff --git a/app/components/TopBar.tsx b/app/components/TopBar.tsx
@@ -47,17 +47,17 @@ export function TopBar({ children }: { children: React.ReactNode }) {
             {otherPickers}
           </div>
           <div>
-            <Button variant="default" color="secondary" size="sm" title="Info">
+            <Button variant="secondary" size="icon" title="Info">
               <Info16Icon className="text-quaternary" />
             </Button>
-            <Button color="secondary" size="sm" className="ml-2" title="Notifications">
+            <Button variant="secondary" size="icon" className="ml-2" title="Notifications">
               <Notifications16Icon className="text-quaternary" />
             </Button>
             <Menu>
               <MenuButton
                 as={Button}
-                color="secondary"
                 size="sm"
+                variant="secondary"
                 aria-label="User menu"
                 className="ml-2"
                 innerClassName="space-x-2"
diff --git a/app/components/form/Form.tsx b/app/components/form/Form.tsx
@@ -64,7 +64,7 @@ export const Form = {
   Submit: (props: ButtonProps) => <Button type="submit" size="sm" {...props} />,
 
   Cancel: (props: ButtonProps) => (
-    <Button variant="ghost" color="secondary" size="sm" {...props}>
+    <Button variant="ghost" size="sm" {...props}>
       Cancel
     </Button>
   ),
diff --git a/app/components/form/SideModalForm.tsx b/app/components/form/SideModalForm.tsx
@@ -84,7 +84,7 @@ export function SideModalForm<TFieldValues extends FieldValues>({
               <span>{submitError.error.message}</span>
             </div>
           )}
-          <Button variant="ghost" color="secondary" size="sm" onClick={onDismiss}>
+          <Button variant="ghost" size="sm" onClick={onDismiss}>
             Cancel
           </Button>
           <Button type="submit" size="sm" disabled={submitDisabled || !canSubmit} form={id}>
diff --git a/app/components/form/fields/DisksTableField.tsx b/app/components/form/fields/DisksTableField.tsx
@@ -61,15 +61,10 @@ export function DisksTableField({ control }: { control: Control<InstanceCreateIn
         )}
 
         <div className="space-x-3">
-          <Button variant="default" size="sm" onClick={() => setShowDiskCreate(true)}>
+          <Button size="sm" onClick={() => setShowDiskCreate(true)}>
             Create new disk
           </Button>
-          <Button
-            variant="ghost"
-            color="secondary"
-            size="sm"
-            onClick={() => setShowDiskAttach(true)}
-          >
+          <Button variant="ghost" size="sm" onClick={() => setShowDiskAttach(true)}>
             Attach existing disk
           </Button>
         </div>
diff --git a/app/components/form/fields/NetworkInterfaceField.tsx b/app/components/form/fields/NetworkInterfaceField.tsx
@@ -107,7 +107,7 @@ export function NetworkInterfaceField({
             />
           )}
           <div className="space-x-3">
-            <Button variant="default" size="sm" onClick={() => setShowForm(true)}>
+            <Button size="sm" onClick={() => setShowForm(true)}>
               Add network interface
             </Button>
           </div>
diff --git a/app/forms/firewall-rules-create.tsx b/app/forms/firewall-rules-create.tsx
@@ -179,12 +179,7 @@ export const CommonFields = ({ error, control }: CommonFieldsProps) => {
       <TextField name="value" label="Target name" required control={targetForm.control} />
 
       <div className="flex justify-end">
-        <Button
-          variant="ghost"
-          color="secondary"
-          className="mr-2.5"
-          onClick={() => targetForm.reset()}
-        >
+        <Button variant="ghost" className="mr-2.5" onClick={() => targetForm.reset()}>
           Clear
         </Button>
         <Button
@@ -265,12 +260,7 @@ export const CommonFields = ({ error, control }: CommonFieldsProps) => {
       />
 
       <div className="flex justify-end">
-        <Button
-          variant="ghost"
-          color="secondary"
-          className="mr-2.5"
-          onClick={() => hostForm.reset()}
-        >
+        <Button variant="ghost" className="mr-2.5" onClick={() => hostForm.reset()}>
           Clear
         </Button>
         <Button
@@ -329,7 +319,7 @@ export const CommonFields = ({ error, control }: CommonFieldsProps) => {
         control={portRangeForm.control}
       />
       <div className="flex justify-end">
-        <Button variant="ghost" color="secondary" className="mr-2.5">
+        <Button variant="ghost" className="mr-2.5">
           Clear
         </Button>
         <Button
diff --git a/app/pages/LoginPage.tsx b/app/pages/LoginPage.tsx
@@ -62,7 +62,6 @@ export default function LoginPage() {
       </Button>
       <Button
         type="submit"
-        variant="default"
         className="w-full"
         disabled={loginPost.isLoading}
         onClick={() => loginPost.mutate({ body: { username: 'unprivileged' } })}
@@ -71,7 +70,7 @@ export default function LoginPage() {
       </Button>
       <Button
         type="submit"
-        variant="ghost"
+        variant="danger"
         className="w-full"
         disabled={loginPost.isLoading}
         onClick={() => loginPost.mutate({ body: { username: 'other' } })}
@@ -80,7 +79,7 @@ export default function LoginPage() {
       </Button>
       <Button
         type="submit"
-        variant="link"
+        variant="ghost"
         className="w-full"
         disabled={loginPost.isLoading}
         onClick={() => logout.mutate({})}
diff --git a/app/pages/OrgAccessPage.tsx b/app/pages/OrgAccessPage.tsx
@@ -163,7 +163,7 @@ export function OrgAccessPage() {
       </PageHeader>
 
       <TableActions>
-        <Button size="sm" variant="default" onClick={() => setAddModalOpen(true)}>
+        <Button size="sm" onClick={() => setAddModalOpen(true)}>
           Add user to organization
         </Button>
       </TableActions>
diff --git a/app/pages/OrgsPage.tsx b/app/pages/OrgsPage.tsx
@@ -87,7 +87,7 @@ export default function OrgsPage() {
         <PageTitle icon={<Folder24Icon />}>Organizations</PageTitle>
       </PageHeader>
       <TableActions>
-        <Link to={pb.orgNew()} className={buttonStyle({ variant: 'default', size: 'sm' })}>
+        <Link to={pb.orgNew()} className={buttonStyle({ size: 'sm' })}>
           New Organization
         </Link>
       </TableActions>
diff --git a/app/pages/ProjectsPage.tsx b/app/pages/ProjectsPage.tsx
@@ -97,10 +97,7 @@ export default function ProjectsPage() {
         <PageTitle icon={<Folder24Icon />}>Projects</PageTitle>
       </PageHeader>
       <TableActions>
-        <Link
-          to={pb.projectNew({ orgName })}
-          className={buttonStyle({ variant: 'default', size: 'sm' })}
-        >
+        <Link to={pb.projectNew({ orgName })} className={buttonStyle({ size: 'sm' })}>
           New Project
         </Link>
       </TableActions>
diff --git a/app/pages/SiloAccessPage.tsx b/app/pages/SiloAccessPage.tsx
@@ -147,7 +147,7 @@ export function SiloAccessPage() {
       </PageHeader>
 
       <TableActions>
-        <Button size="sm" variant="default" onClick={() => setAddModalOpen(true)}>
+        <Button size="sm" onClick={() => setAddModalOpen(true)}>
           Add user or group
         </Button>
       </TableActions>
diff --git a/app/pages/project/access/ProjectAccessPage.tsx b/app/pages/project/access/ProjectAccessPage.tsx
@@ -178,7 +178,7 @@ export function ProjectAccessPage() {
       </PageHeader>
 
       <TableActions>
-        <Button size="sm" variant="default" onClick={() => setAddModalOpen(true)}>
+        <Button size="sm" onClick={() => setAddModalOpen(true)}>
           Add user to project
         </Button>
       </TableActions>
diff --git a/app/pages/project/disks/DisksPage.tsx b/app/pages/project/disks/DisksPage.tsx
@@ -122,7 +122,7 @@ export function DisksPage() {
       <TableActions>
         <Link
           to={pb.diskNew({ orgName, projectName })}
-          className={buttonStyle({ size: 'sm', variant: 'default' })}
+          className={buttonStyle({ size: 'sm' })}
         >
           New Disk
         </Link>
diff --git a/app/pages/project/instances/InstancesPage.tsx b/app/pages/project/instances/InstancesPage.tsx
@@ -94,7 +94,7 @@ export function InstancesPage() {
         </Button>
         <Link
           to={pb.instanceNew({ orgName, projectName })}
-          className={buttonStyle({ size: 'sm', variant: 'default' })}
+          className={buttonStyle({ size: 'sm' })}
         >
           New Instance
         </Link>
diff --git a/app/pages/project/instances/instance/SerialConsolePage.tsx b/app/pages/project/instances/instance/SerialConsolePage.tsx
@@ -30,7 +30,7 @@ export function SerialConsolePage() {
       </Suspense>
       <PageActions>
         <div className="gutter flex h-20 items-center">
-          <Button variant="default" size="sm" onClick={() => refetch()}>
+          <Button size="sm" onClick={() => refetch()}>
             Refresh
           </Button>
         </div>
diff --git a/app/pages/project/instances/instance/tabs/NetworkingTab.tsx b/app/pages/project/instances/instance/tabs/NetworkingTab.tsx
@@ -150,7 +150,6 @@ export function NetworkingTab() {
         <div className="flex gap-3">
           <Button
             size="sm"
-            variant="default"
             onClick={() => setCreateModalOpen(true)}
             disabled={!instanceStopped}
           >
diff --git a/app/pages/project/instances/instance/tabs/SerialConsoleTab.tsx b/app/pages/project/instances/instance/tabs/SerialConsoleTab.tsx
@@ -27,7 +27,7 @@ export function SerialConsoleTab() {
       </div>
       <PageActions>
         <div className="gutter flex h-20 items-center">
-          <Button variant="default" size="sm" onClick={() => refetch()}>
+          <Button size="sm" onClick={() => refetch()}>
             Refresh
           </Button>
         </div>
diff --git a/app/pages/project/instances/instance/tabs/StorageTab.tsx b/app/pages/project/instances/instance/tabs/StorageTab.tsx
@@ -133,7 +133,6 @@ export function StorageTab() {
       <div className="mt-4 flex flex-col gap-3">
         <div className="flex gap-3">
           <Button
-            variant="default"
             size="sm"
             onClick={() => setShowDiskCreate(true)}
             disabledReason="Instance must be stopped to create a disk"
@@ -142,8 +141,7 @@ export function StorageTab() {
             Create new disk
           </Button>
           <Button
-            variant="ghost"
-            color="secondary"
+            variant="secondary"
             size="sm"
             onClick={() => setShowDiskAttach(true)}
             disabledReason="Instance must be stopped to attach a disk"
diff --git a/app/pages/project/networking/VpcPage/tabs/VpcFirewallRulesTab.tsx b/app/pages/project/networking/VpcPage/tabs/VpcFirewallRulesTab.tsx
@@ -99,7 +99,7 @@ export const VpcFirewallRulesTab = () => {
   return (
     <>
       <div className="mb-3 flex justify-end space-x-4">
-        <Button size="sm" variant="default" onClick={() => setCreateModalOpen(true)}>
+        <Button size="sm" onClick={() => setCreateModalOpen(true)}>
           New rule
         </Button>
         {createModalOpen && (
diff --git a/app/pages/project/networking/VpcPage/tabs/VpcRoutersTab.tsx b/app/pages/project/networking/VpcPage/tabs/VpcRoutersTab.tsx
@@ -36,7 +36,7 @@ export const VpcRoutersTab = () => {
   return (
     <>
       <div className="mb-3 flex justify-end space-x-4">
-        <Button size="sm" variant="default" onClick={() => setCreating(true)}>
+        <Button size="sm" onClick={() => setCreating(true)}>
           New router
         </Button>
         {creating && <CreateVpcRouterForm onDismiss={() => setCreating(false)} />}
diff --git a/app/pages/project/networking/VpcPage/tabs/VpcSubnetsTab.tsx b/app/pages/project/networking/VpcPage/tabs/VpcSubnetsTab.tsx
@@ -35,7 +35,7 @@ export const VpcSubnetsTab = () => {
   return (
     <>
       <div className="mb-3 flex justify-end space-x-4">
-        <Button size="sm" variant="default" onClick={() => setCreating(true)}>
+        <Button size="sm" onClick={() => setCreating(true)}>
           New subnet
         </Button>
         {creating && <CreateSubnetForm onDismiss={() => setCreating(false)} />}
diff --git a/app/pages/project/networking/VpcsPage.tsx b/app/pages/project/networking/VpcsPage.tsx
@@ -94,7 +94,7 @@ export function VpcsPage() {
       <TableActions>
         <Link
           to={pb.vpcNew({ orgName, projectName })}
-          className={buttonStyle({ size: 'sm', variant: 'default' })}
+          className={buttonStyle({ size: 'sm' })}
         >
           New Vpc
         </Link>
diff --git a/app/pages/project/snapshots/SnapshotsPage.tsx b/app/pages/project/snapshots/SnapshotsPage.tsx
@@ -67,10 +67,7 @@ export function SnapshotsPage() {
         <PageTitle icon={<Snapshots24Icon />}>Snapshots</PageTitle>
       </PageHeader>
       <TableActions>
-        <Link
-          to={pb.snapshotNew(projectParams)}
-          className={buttonStyle({ size: 'sm', variant: 'default' })}
-        >
+        <Link to={pb.snapshotNew(projectParams)} className={buttonStyle({ size: 'sm' })}>
           New Snapshot
         </Link>
       </TableActions>
diff --git a/app/pages/system/SilosPage.tsx b/app/pages/system/SilosPage.tsx
@@ -80,7 +80,7 @@ export default function SilosPage() {
         <PageTitle icon={<Cloud24Icon />}>Silos</PageTitle>
       </PageHeader>
       <TableActions>
-        <Link to={pb.siloNew()} className={buttonStyle({ variant: 'default', size: 'sm' })}>
+        <Link to={pb.siloNew()} className={buttonStyle({ size: 'sm' })}>
           New silo
         </Link>
       </TableActions>
diff --git a/libs/ui/lib/bulk-action-menu/BulkActionMenu.tsx b/libs/ui/lib/bulk-action-menu/BulkActionMenu.tsx
@@ -24,7 +24,6 @@ export function BulkActionMenu({ children, selectedCount }: BulkActionMenuProps)
 BulkActionMenu.Button = (props: Omit<ButtonProps, 'size' | 'variant'>) => (
   <Button
     size="sm"
-    variant="default"
     // TODO: Remove this border once the proper button styles are available
     className="rounded border !border-accent-secondary"
     {...props}
diff --git a/libs/ui/lib/button/Button.stories.tsx b/libs/ui/lib/button/Button.stories.tsx
@@ -1,5 +1,5 @@
 import { Section } from '../../util/story-section'
-import { Button, colors, variants } from './Button'
+import { Button, variants } from './Button'
 
 // TODO: sizes (I guess)
 
@@ -12,31 +12,18 @@ export const All = () => {
     <div className="flex flex-row flex-wrap">
       {states.map((state) => (
         <Section key={state} title={state}>
-          {colors.map((color) => (
-            <div key={color} className="mb-2 flex flex-row space-x-2">
-              {variants.map((variant) => (
-                <>
-                  <Button
-                    key={variant}
-                    variant={variant}
-                    color={color}
-                    className={`:${state}`}
-                  >
-                    {variant}
-                  </Button>
-                  <Button
-                    key={variant}
-                    variant={variant}
-                    color={color}
-                    className={`:${state}`}
-                    loading
-                  >
-                    {variant}
-                  </Button>
-                </>
-              ))}
-            </div>
-          ))}
+          <div className="mb-2 flex flex-row space-x-2">
+            {variants.map((variant) => (
+              <>
+                <Button key={variant} variant={variant} className={`:${state}`}>
+                  {variant}
+                </Button>
+                <Button key={variant} variant={variant} className={`:${state}`} loading>
+                  {variant}
+                </Button>
+              </>
+            ))}
+          </div>
         </Section>
       ))}
     </div>
diff --git a/libs/ui/lib/button/Button.tsx b/libs/ui/lib/button/Button.tsx
diff --git a/libs/ui/lib/button/button.css b/libs/ui/lib/button/button.css
