Fix Drive table

app/gui/src/dashboard/components/AriaComponents/Button/Button.tsx

@@ -337,7 +337,7 @@ const ButtonContent = memo(function ButtonContent(props: ButtonContentProps) {
         styles={styles}
         hideLoader={hideLoader}
       />
-      <Text color="inherit" truncate="1" className={styles.text()}>
+      <Text weight="custom" color="inherit" truncate="1" className={styles.text()}>
         {children}
       </Text>
       {hasAddon(addonEnd) && <div className={styles.addonEnd()}>{addonEnd}</div>}

app/gui/src/dashboard/components/AriaComponents/Button/types.ts

@@ -1,53 +1,46 @@
-/**
- * @file
- *
- * Reusable types for the Button component
- */
-import type * as aria from '#/components/aria'
+/** @file Types for a `Button`. */
+import type {
+  ButtonProps as AriaButtonProps,
+  ButtonRenderProps as AriaButtonRenderProps,
+  LinkRenderProps as AriaLinkRenderProps,
+  LinkProps,
+  Placement,
+  PressEvent,
+} from '#/components/aria'
 import type { ExtractFunction } from '#/utilities/tailwindVariants'
 import type { ReactElement, ReactNode } from 'react'
 import type { Addon, IconProp, TestIdProps } from '../types'
 import type { BUTTON_STYLES, ButtonVariants } from './variants'
 
-/**
- * Position of a joined button
- */
+/** Position of a joined button. */
 export type PrivateJoinedButtonPosition = ButtonVariants['position']
 
-/**
- * Whether the button is joined
- */
+/** Whether the button is joined. */
 export type PrivateJoinedButton = ButtonVariants['isJoined']
 
-/**
- * Props for a joined button unlike other button props,
- */
+/** Props for a joined button unlike other button props. */
 export interface PrivateJoinedButtonProps {
   readonly position: PrivateJoinedButtonPosition
   readonly isJoined: NonNullable<PrivateJoinedButton>
 }
 
-/**
- * Render props for a button.
- */
-export interface ButtonRenderProps extends aria.ButtonRenderProps {
+/** Render props for a button. */
+export interface ButtonRenderProps extends AriaButtonRenderProps {
   readonly isLoading: boolean
 }
 
-/**
- * Render props for a link.
- */
-export interface LinkRenderProps extends aria.LinkRenderProps {
+/** Render props for a link. */
+export interface LinkRenderProps extends AriaLinkRenderProps {
   readonly isLoading: boolean
 }
 
 /** Props for a Button. */
 export type ButtonProps<IconType extends string = string> =
   | (BaseButtonProps<IconType, ButtonRenderProps> &
-      Omit<aria.ButtonProps, 'children' | 'isPending' | 'onPress'> &
+      Omit<AriaButtonProps, 'children' | 'isPending' | 'onPress'> &
       PropsWithoutHref)
   | (BaseButtonProps<IconType, LinkRenderProps> &
-      Omit<aria.LinkProps, 'children' | 'onPress'> &
+      Omit<LinkProps, 'children' | 'onPress'> &
       PropsWithHref)
 
 /** Props for a button with an href. */
@@ -68,7 +61,7 @@ export interface BaseButtonProps<IconType extends string, Render>
   readonly hideLoader?: boolean
   /** Falls back to `aria-label`. Pass `false` to explicitly disable the tooltip. */
   readonly tooltip?: ReactElement | string | false | null
-  readonly tooltipPlacement?: aria.Placement
+  readonly tooltipPlacement?: Placement
   /** The icon to display in the button */
   readonly icon?: IconProp<IconType, Render>
   /** When `true`, icon will be shown only when hovered. */
@@ -81,7 +74,7 @@ export interface BaseButtonProps<IconType extends string, Render>
   // prettier-ignore
   readonly onPress?:
     // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
-    | ((event: aria.PressEvent) => Promise<unknown> | unknown)
+    | ((event: PressEvent) => Promise<unknown> | unknown)
     | null
     | undefined
   readonly contentClassName?: string
@@ -100,16 +93,12 @@ export interface BaseButtonProps<IconType extends string, Render>
   readonly addonEnd?: Addon<Render>
 }
 
-/**
- * A type that makes all properties of a type optional
- */
+/** A new type `undefined` added to all properties of a type. */
 type WithUndefined<T> = {
   [K in keyof T]: T[K] | undefined
 }
 
-/**
- * Props that are shared between buttons in a button group.
- */
+/** Props that are shared between buttons in a button group. */
 export interface ButtonGroupSharedButtonProps extends WithUndefined<ButtonVariants> {
   readonly isDisabled?: boolean | undefined
   readonly isLoading?: boolean | undefined

app/gui/src/dashboard/components/AriaComponents/Inputs/DatePicker/DatePicker.tsx

@@ -61,7 +61,7 @@ const DATE_PICKER_STYLES = tv({
     dateInput: 'flex justify-start grow order-2',
     dateSegment: 'rounded placeholder-shown:text-primary/30 focus:bg-primary/10 px-[0.5px]',
     calendarButton: 'order-1 rotate-90',
-    resetButton: '',
+    resetButton: 'order-2',
     calendarPopover: '',
     calendarDialog: 'text-primary text-xs mx-2',
     calendarContainer: '',
@@ -80,6 +80,40 @@ const DATE_PICKER_STYLES = tv({
   },
 })
 
+/** Return the date segment using English placeholders. */
+function normalizeDateSegment(segment: DateSegmentType): DateSegmentType {
+  switch (segment.type) {
+    case 'era': {
+      return { ...segment, text: 'AD', placeholder: 'AD' }
+    }
+    case 'year': {
+      return { ...segment, text: 'yyyy', placeholder: 'yyyy' }
+    }
+    case 'month': {
+      return { ...segment, text: 'mm', placeholder: 'mm' }
+    }
+    case 'day': {
+      return { ...segment, text: 'dd', placeholder: 'dd' }
+    }
+    case 'hour': {
+      return { ...segment, text: 'HH', placeholder: 'HH' }
+    }
+    case 'minute': {
+      return { ...segment, text: 'MM', placeholder: 'MM' }
+    }
+    case 'second': {
+      return { ...segment, text: 'SS', placeholder: 'SS' }
+    }
+    case 'timeZoneName': {
+      return { ...segment, text: 'UTC+XX', placeholder: 'UTC+XX' }
+    }
+    case 'dayPeriod':
+    case 'literal': {
+      return segment
+    }
+  }
+}
+
 /** Props for a {@link DatePicker}. */
 export interface DatePickerProps<
   Schema extends TSchema,
@@ -175,7 +209,7 @@ export const DatePicker = forwardRef(function DatePicker<
                     segments[segment.type] === false ?
                       <></>
                     : <DateSegment
-                        segment={segment}
+                        segment={normalizeDateSegment(segment)}
                         className={styles.dateSegment({
                           className:
                             segment.type === 'literal' && segment.text === ' ' ? 'w-1.5' : '',

app/gui/src/dashboard/components/AriaComponents/Text/Text.tsx

@@ -52,20 +52,21 @@ export const TEXT_STYLE = twv.tv({
     // leading should always be after the text size to make sure it is not stripped by twMerge
     variant: {
       custom: '',
-      body: 'text-xs leading-[20px] before:h-[2px] after:h-[2px] macos:before:h-[1px] macos:after:h-[3px] font-medium',
+      body: 'text-xs leading-[20px] before:h-[2px] after:h-[2px] macos:before:h-[1px] macos:after:h-[3px',
       // eslint-disable-next-line @typescript-eslint/naming-convention
       'body-sm':
-        'text-[10.5px] leading-[16px] before:h-[2px] after:h-[2px] macos:before:h-[1px] macos:after:h-[3px] font-medium',
-      h1: 'text-xl leading-[29px] before:h-0.5 after:h-[5px] macos:before:h-[3px] macos:after:h-[3px] font-bold',
+        'text-[10.5px] leading-[16px] before:h-[2px] after:h-[2px] macos:before:h-[1px] macos:after:h-[3px]',
+      h1: 'text-xl leading-[29px] before:h-0.5 after:h-[5px] macos:before:h-[3px] macos:after:h-[3px]',
       subtitle:
-        'text-[13.5px] leading-[20px] before:h-[2px] after:h-[2px] macos:before:h-[1px] macos:after:h-[3px] font-bold',
+        'text-[13.5px] leading-[20px] before:h-[2px] after:h-[2px] macos:before:h-[1px] macos:after:h-[3px]',
       caption:
         'text-[8.5px] leading-[12px] before:h-[1px] after:h-[1px] macos:before:h-[0.5px] macos:after:h-[1.5px]',
       overline:
         'text-[8.5px] leading-[16px] before:h-[1px] after:h-[1px] macos:before:h-[0.5px] macos:after:h-[1.5px] uppercase',
     },
     weight: {
       custom: '',
+      default: '',
       bold: 'font-bold',
       semibold: 'font-semibold',
       extraBold: 'font-extrabold',
@@ -117,7 +118,7 @@ export const TEXT_STYLE = twv.tv({
   defaultVariants: {
     variant: 'body',
     font: 'default',
-    weight: 'medium',
+    weight: 'default',
     transform: 'none',
     color: 'primary',
     italic: false,
@@ -126,6 +127,14 @@ export const TEXT_STYLE = twv.tv({
     disableLineHeightCompensation: false,
     textSelection: 'auto',
   },
+  compoundVariants: [
+    { variant: 'body', weight: 'default', className: 'font-medium' },
+    { variant: 'body-sm', weight: 'default', className: 'font-medium' },
+    { variant: 'h1', weight: 'default', className: 'font-bold' },
+    { variant: 'subtitle', weight: 'default', className: 'font-bold' },
+    { variant: 'caption', weight: 'default', className: 'font-medium' },
+    { variant: 'overline', weight: 'default', className: 'font-medium' },
+  ],
 })
 
 /** Text component that supports truncation and show a tooltip on hover when text is truncated */

app/gui/src/dashboard/components/AriaComponents/types.ts

@@ -1,8 +1,7 @@
-/** @file Common types for ARIA components. */
+/** @file Common types for WAI-ARIA components. */
 import type { Icon as PossibleIcon } from '@/util/iconMetadata/iconName'
 import type { ReactElement } from 'react'
-
-import type * as reactAria from 'react-aria'
+export type { Placement } from 'react-aria'
 
 /** Props for adding a test id to a component */
 export interface TestIdProps {
@@ -11,59 +10,40 @@ export interface TestIdProps {
   readonly testId?: string | undefined
 }
 
-/**
- * A type alias for the Placement type from react-aria.
- * This type represents the possible positions where an element can be placed relative to a reference element.
- */
-export type Placement = reactAria.Placement
-
-/**
- * Type for any icon
- */
+/** Any icon. */
 export type IconProp<Icon extends string = string, Render = never> =
   | IconPropSvgUse<Render>
   | LegacyIconProp<Icon, Render>
 
-/**
- * A type that represents the possible return values for a legacy icon.
- */
+/** The possible return values for a legacy icon. */
 export type LegacyAvialableIconReturn<Icon extends string> =
   | LegacyIcon<Icon>
   | ReactElement
   | false
   | null
   | undefined
 
-/**
- * A type that represents the possible return values for a legacy icon.
- */
+/** The possible return values for a legacy icon. */
 export type AvailableIconReturn = ReactElement | SvgUseIcon | false | null | undefined
 
 /**
- * Generic type for any icon
- * @deprecated Prefer defined keys over importing from `#/assets/*.svg
+ * Any legacy icon.
+ * @deprecated Prefer defined keys over importing from `#/assets/*.svg`.
  */
 export type LegacyIconProp<Icon extends string, Render> =
   | LegacyAvialableIconReturn<Icon>
   | ((render: Render) => LegacyAvialableIconReturn<Icon>)
 
-/**
- * Generic type for imported from figma icons
- */
+/** Generic type for imported from figma icons. */
 export type IconPropSvgUse<Render> = AvailableIconReturn | ((render: Render) => AvailableIconReturn)
 
-/**
- * @deprecated
- */
+/** @deprecated */
 export type LegacyIcon<T extends string> = Exclude<T, PossibleIcon> & {}
 
-/**
- * Type for any icon imported from figma
- */
+/** Any icon imported from Figma. */
 export type SvgUseIcon = PossibleIcon
-/**
- * Generic type for any addon
- */
+
+/** Any addon. */
 export type Addon<Render> =
   | ReactElement
   | string

app/gui/src/dashboard/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,6 +1,4 @@
-/**
- * @file Breadcrumbs component implementation.
- */
+/** @file A breadcrumb nagivation component. */
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import { tv, type VariantProps } from '#/utilities/tailwindVariants'
 import {
@@ -22,14 +20,10 @@ export const BREADCRUMBS_STYLES = tv({
   slots: { separator: 'text-primary last:hidden w-2.5 h-2.5 mt-[0.5px]' },
 })
 
-/**
- * The type of the `onDrop` callback.
- */
+/** The type of the `onDrop` callback. */
 export type OnDrop = (key: Key, e: DropEvent) => Promise<void> | void
 
-/**
- * Props for {@link Breadcrumbs}
- */
+/** Props for {@link Breadcrumbs}. */
 export interface BreadcrumbsProps
   extends AriaBreadcrumbsProps,
     VariantProps<typeof BREADCRUMBS_STYLES>,
@@ -42,9 +36,7 @@ export interface BreadcrumbsProps
   readonly onDrop?: OnDrop
 }
 
-/**
- * A breadcrumb navigation component.
- */
+/** A breadcrumb navigation component. */
 export function Breadcrumbs(props: BreadcrumbsProps) {
   const {
     children,
@@ -84,9 +76,7 @@ export function Breadcrumbs(props: BreadcrumbsProps) {
   )
 }
 
-/**
- * Props for {@link BreadcrumbInner}
- */
+/** Props for {@link BreadcrumbInner}. */
 interface BreadcrumbInnerProps extends TestIdProps, AriaBreadcrumbsProps, PropsWithChildren {
   readonly className?: string
 }
@@ -107,17 +97,13 @@ function BreadcrumbInner(props: BreadcrumbInnerProps) {
   )
 }
 
-/**
- * Props for {@link BreadcrumbSeparator}
- */
+/** Props for {@link BreadcrumbSeparator}. */
 interface BreadcrumbSeparatorProps<Icon extends string> {
   readonly icon?: IconProp<Icon, never>
   readonly className?: string
 }
 
-/**
- * A separator between breadcrumb items.
- */
+/** A separator between breadcrumb items. */
 // eslint-disable-next-line no-restricted-syntax
 const BreadcrumbSeparator = memo(function BreadcrumbSeparator<Icon extends string>(
   props: BreadcrumbSeparatorProps<Icon>,

app/gui/src/dashboard/components/Icon/Icon.tsx

@@ -41,9 +41,7 @@ export interface LegacyIconProps<Icon extends string, Render = never>
   readonly icon?: never
 }
 
-/**
- * Generic type for imported from figma icons
- */
+/** Generic type for icons imported from Figma. */
 export interface SvgUseIconProps<Render = never> {
   readonly children?: never
   readonly icon: IconTypeSvgUse<Render>