From f4bcd9ff80f3d55997002e10d544e784ce6f40e7 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Thu, 16 May 2024 05:56:34 -0700
Subject: [PATCH] Remove  from  and  classNames

---
 app/components/CapacityBar.tsx                            | 2 +-
 app/components/TopBarPicker.tsx                           | 7 ++-----
 app/layouts/helpers.tsx                                   | 6 +++---
 app/pages/project/floating-ips/AttachFloatingIpModal.tsx  | 2 +-
 .../project/instances/instance/SerialConsolePage.tsx      | 8 ++++----
 app/pages/project/instances/instance/tabs/MetricsTab.tsx  | 2 +-
 app/ui/lib/DatePicker.tsx                                 | 2 +-
 app/ui/lib/DateRangePicker.tsx                            | 4 ++--
 app/ui/lib/Pagination.tsx                                 | 2 +-
 9 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/app/components/CapacityBar.tsx b/app/components/CapacityBar.tsx
index c4f388f62d..2d21f49767 100644
--- a/app/components/CapacityBar.tsx
+++ b/app/components/CapacityBar.tsx
@@ -52,7 +52,7 @@ type TitleCellProps = { icon: JSX.Element; title: string; unit: string }
 function TitleCell({ icon, title, unit }: TitleCellProps) {
   return (
     <div>
-      <div className="flex flex-grow items-center">
+      <div className="flex grow items-center">
         <span className="mr-2 flex h-4 w-4 items-center text-accent">{icon}</span>
         <span className="!normal-case text-mono-sm text-secondary">{title}</span>
         <span className="ml-1 !normal-case text-mono-sm text-quaternary">({unit})</span>
diff --git a/app/components/TopBarPicker.tsx b/app/components/TopBarPicker.tsx
index e55bcce8e7..747786dfeb 100644
--- a/app/components/TopBarPicker.tsx
+++ b/app/components/TopBarPicker.tsx
@@ -57,10 +57,7 @@ const TopBarPicker = (props: TopBarPickerProps) => {
           <Wrap
             when={props.to}
             with={
-              <Link
-                to={props.to!}
-                className="-m-1 flex-grow rounded-lg p-1 hover:bg-hover"
-              />
+              <Link to={props.to!} className="-m-1 grow rounded-lg p-1 hover:bg-hover" />
             }
           >
             <div className="flex min-w-[120px] max-w-[185px] items-center pr-2">
@@ -91,7 +88,7 @@ const TopBarPicker = (props: TopBarPickerProps) => {
         )}
 
         {props.items && (
-          <div className="ml-2 flex-shrink-0">
+          <div className="ml-2 shrink-0">
             <DropdownMenu.Trigger
               className="group"
               aria-label={props['aria-label']}
diff --git a/app/layouts/helpers.tsx b/app/layouts/helpers.tsx
index 28edb2e193..fc6173bd2b 100644
--- a/app/layouts/helpers.tsx
+++ b/app/layouts/helpers.tsx
@@ -21,13 +21,13 @@ export function ContentPane() {
   useScrollRestoration(ref)
   return (
     <div ref={ref} className="flex flex-col overflow-auto" data-testid="scroll-container">
-      <div className="flex flex-grow flex-col pb-8">
+      <div className="flex grow flex-col pb-8">
         <SkipLinkTarget />
         <main className="[&>*]:gutter">
           <Outlet />
         </main>
       </div>
-      <div className="sticky bottom-0 flex-shrink-0 justify-between overflow-hidden border-t bg-default border-secondary empty:border-t-0">
+      <div className="sticky bottom-0 shrink-0 justify-between overflow-hidden border-t bg-default border-secondary empty:border-t-0">
         <Pagination.Target />
         <PageActionsTarget />
       </div>
@@ -43,7 +43,7 @@ export function ContentPane() {
  */
 export const SerialConsoleContentPane = () => (
   <div className="flex flex-col overflow-auto">
-    <div className="flex flex-grow flex-col">
+    <div className="flex grow flex-col">
       <SkipLinkTarget />
       <main className="[&>*]:gutter h-full">
         <Outlet />
diff --git a/app/pages/project/floating-ips/AttachFloatingIpModal.tsx b/app/pages/project/floating-ips/AttachFloatingIpModal.tsx
index b8cc1fb925..3436f24b71 100644
--- a/app/pages/project/floating-ips/AttachFloatingIpModal.tsx
+++ b/app/pages/project/floating-ips/AttachFloatingIpModal.tsx
@@ -23,7 +23,7 @@ function FloatingIpLabel({ fip }: { fip: FloatingIp }) {
         {fip.description && (
           <>
             <span className="mx-1 text-quinary selected:text-accent-disabled">/</span>
-            <div className="flex-grow overflow-hidden overflow-ellipsis whitespace-pre text-left">
+            <div className="grow overflow-hidden overflow-ellipsis whitespace-pre text-left">
               {fip.description}
             </div>
           </>
diff --git a/app/pages/project/instances/instance/SerialConsolePage.tsx b/app/pages/project/instances/instance/SerialConsolePage.tsx
index 9d80e0b4d6..793d9eb654 100644
--- a/app/pages/project/instances/instance/SerialConsolePage.tsx
+++ b/app/pages/project/instances/instance/SerialConsolePage.tsx
@@ -100,7 +100,7 @@ export function SerialConsolePage() {
     <div className="!mx-0 flex h-full max-h-[calc(100vh-60px)] !w-full flex-col">
       <Link
         to={pb.instance(instanceSelector)}
-        className="mx-3 mb-6 mt-3 flex h-10 flex-shrink-0 items-center rounded px-3 bg-accent-secondary"
+        className="mx-3 mb-6 mt-3 flex h-10 shrink-0 items-center rounded px-3 bg-accent-secondary"
       >
         <PrevArrow12Icon className="text-accent-tertiary" />
         <div className="ml-2 text-mono-sm text-accent">
@@ -108,11 +108,11 @@ export function SerialConsolePage() {
         </div>
       </Link>
 
-      <div className="gutter relative w-full flex-shrink flex-grow overflow-hidden">
+      <div className="gutter relative w-full shrink grow overflow-hidden">
         {connectionStatus !== 'open' && <SerialSkeleton />}
         <Suspense fallback={null}>{ws.current && <Terminal ws={ws.current} />}</Suspense>
       </div>
-      <div className="flex-shrink-0 justify-between overflow-hidden border-t bg-default border-secondary empty:border-t-0">
+      <div className="shrink-0 justify-between overflow-hidden border-t bg-default border-secondary empty:border-t-0">
         <div className="gutter flex h-20 items-center justify-between">
           <div>
             <EquivalentCliCommand command={cliCmd.serialConsole({ project, instance })} />
@@ -131,7 +131,7 @@ function SerialSkeleton() {
   const instanceSelector = useInstanceSelector()
 
   return (
-    <div className="relative h-full flex-shrink flex-grow overflow-hidden">
+    <div className="relative h-full shrink grow overflow-hidden">
       <div className="h-full space-y-2 overflow-hidden">
         {[...Array(200)].map((_e, i) => (
           <div
diff --git a/app/pages/project/instances/instance/tabs/MetricsTab.tsx b/app/pages/project/instances/instance/tabs/MetricsTab.tsx
index a80f29a63d..501ffc20fd 100644
--- a/app/pages/project/instances/instance/tabs/MetricsTab.tsx
+++ b/app/pages/project/instances/instance/tabs/MetricsTab.tsx
@@ -123,7 +123,7 @@ function DiskMetric({
   }
 
   return (
-    <div className="flex w-1/2 flex-grow flex-col">
+    <div className="flex w-1/2 grow flex-col">
       <h2 className="ml-3 flex items-center text-mono-xs text-secondary ">
         {title} <div className="ml-1 normal-case text-quaternary">{label}</div>
         {isLoading && <Spinner className="ml-2" />}
diff --git a/app/ui/lib/DatePicker.tsx b/app/ui/lib/DatePicker.tsx
index 4271113423..ad3793652a 100644
--- a/app/ui/lib/DatePicker.tsx
+++ b/app/ui/lib/DatePicker.tsx
@@ -95,7 +95,7 @@ export function DatePicker(props: DatePickerProps) {
                 value={state.timeValue}
                 onChange={handleSetTime}
                 hourCycle={24}
-                className="flex-grow"
+                className="grow"
               />
             </div>
           </Dialog>
diff --git a/app/ui/lib/DateRangePicker.tsx b/app/ui/lib/DateRangePicker.tsx
index b303331a19..a70fff9c1b 100644
--- a/app/ui/lib/DateRangePicker.tsx
+++ b/app/ui/lib/DateRangePicker.tsx
@@ -96,7 +96,7 @@ export function DateRangePicker(props: DateRangePickerProps) {
                 value={state.timeRange?.start || null}
                 onChange={(v: TimeValue) => state.setTime('start', v)}
                 hourCycle={24}
-                className="flex-shrink-0 flex-grow basis-0"
+                className="shrink-0 grow basis-0"
               />
               <div className="text-quinary">–</div>
               <TimeField
@@ -104,7 +104,7 @@ export function DateRangePicker(props: DateRangePickerProps) {
                 value={state.timeRange?.end || null}
                 onChange={(v: TimeValue) => state.setTime('end', v)}
                 hourCycle={24}
-                className="flex-shrink-0 flex-grow basis-0"
+                className="shrink-0 grow basis-0"
               />
             </div>
           </Dialog>
diff --git a/app/ui/lib/Pagination.tsx b/app/ui/lib/Pagination.tsx
index ec0f75855a..b52452c516 100644
--- a/app/ui/lib/Pagination.tsx
+++ b/app/ui/lib/Pagination.tsx
@@ -55,7 +55,7 @@ export const Pagination = ({
           className
         )}
       >
-        <span className="flex-inline flex-grow text-tertiary">
+        <span className="flex-inline grow text-tertiary">
           rows per page <PageInput number={pageSize} />
         </span>
         <span className="flex space-x-3">