refactor: [M3-9748] - Akamai Design System: Checkbox component - Sizes

packages/manager/.changeset/pr-12020-added-1744609645278.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Custom checkbox sizing per Akamai Design System ([#12020](https://github.com/linode/manager/pull/12020))

packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx

@@ -26,8 +26,6 @@ const MAX_SSH_KEYS_DISPLAY = 25;
 
 const useStyles = makeStyles()((theme: Theme) => ({
   cellCheckbox: {
-    paddingLeft: theme.spacing(1),
-    paddingRight: theme.spacing(1),
     width: 50,
   },
   cellUser: {
@@ -57,16 +55,11 @@ interface Props {
 export const UserSSHKeyPanel = (props: Props) => {
   const { classes } = useStyles();
   const theme = useTheme();
-  const {
-    authorizedUsers,
-    disabled,
-    headingVariant,
-    setAuthorizedUsers,
-  } = props;
-
-  const [isCreateDrawerOpen, setIsCreateDrawerOpen] = React.useState<boolean>(
-    false
-  );
+  const { authorizedUsers, disabled, headingVariant, setAuthorizedUsers } =
+    props;
+
+  const [isCreateDrawerOpen, setIsCreateDrawerOpen] =
+    React.useState<boolean>(false);
 
   const pagination = usePagination(1);
 
@@ -140,12 +133,13 @@ export const UserSSHKeyPanel = (props: Props) => {
         <TableRow>
           <TableCell className={classes.cellCheckbox}>
             <Checkbox
+              checked={authorizedUsers.includes(profile.username)}
+              disabled={disabled}
               inputProps={{
                 'aria-label': `Enable SSH for ${profile.username}`,
               }}
-              checked={authorizedUsers.includes(profile.username)}
-              disabled={disabled}
               onChange={() => onToggle(profile.username)}
+              size="small"
             />
           </TableCell>
           <TableCell className={classes.cellUser}>
@@ -169,12 +163,13 @@ export const UserSSHKeyPanel = (props: Props) => {
       <TableRow key={user.username}>
         <TableCell className={classes.cellCheckbox}>
           <Checkbox
+            checked={authorizedUsers.includes(user.username)}
+            disabled={disabled || user.ssh_keys.length === 0}
             inputProps={{
               'aria-label': `Enable SSH for ${user.username}`,
             }}
-            checked={authorizedUsers.includes(user.username)}
-            disabled={disabled || user.ssh_keys.length === 0}
             onChange={() => onToggle(user.username)}
+            size="small"
           />
         </TableCell>
         <TableCell className={classes.cellUser}>

packages/manager/src/components/SelectableTableRow/SelectableTableRow.tsx

@@ -28,19 +28,20 @@ export const SelectableTableRow = React.memo(
 
     return (
       <TableRow
-        sx={{
+        sx={(theme) => ({
           '& td': {
-            padding: '0px 15px',
+            padding: `0 ${theme.tokens.spacing.S12}`,
           },
-        }}
+        })}
       >
         <StyledTableCell>
           <Checkbox
+            checked={isChecked}
             inputProps={{
               'aria-label': `Select all entities on page`,
             }}
-            checked={isChecked}
             onChange={handleToggleCheck}
+            size="small"
           />
         </StyledTableCell>
         {props.children}

packages/manager/src/features/CloudPulse/Alerts/AlertsResources/DisplayAlertResources.tsx

@@ -203,14 +203,15 @@ export const DisplayAlertResources = React.memo(
                   <TableRow>
                     {isSelectionsNeeded && (
                       <TableCell
+                        padding="checkbox"
                         sx={{
                           cursor: isRootCheckBoxDisabled
                             ? 'not-allowed'
                             : 'auto',
                         }}
-                        padding="checkbox"
                       >
                         <Tooltip
+                          placement="right-start"
                           slotProps={{
                             tooltip: {
                               sx: {
@@ -226,10 +227,12 @@ export const DisplayAlertResources = React.memo(
                               />
                             ) : undefined
                           }
-                          placement="right-start"
                         >
                           <Box>
                             <Checkbox
+                              checked={isAllPageSelected(paginatedData)}
+                              data-testid={`select_all_in_page_${page}`}
+                              disabled={isRootCheckBoxDisabled}
                               indeterminate={
                                 isSomeSelected(paginatedData) &&
                                 !isAllPageSelected(paginatedData)
@@ -240,26 +243,21 @@ export const DisplayAlertResources = React.memo(
                                   !isAllPageSelected(paginatedData)
                                 )
                               }
-                              sx={{
-                                p: 0,
-                              }}
-                              checked={isAllPageSelected(paginatedData)}
-                              data-testid={`select_all_in_page_${page}`}
-                              disabled={isRootCheckBoxDisabled}
+                              size="small"
                             />
                           </Box>
                         </Tooltip>
                       </TableCell>
                     )}
                     {columns.map(({ label, sortingKey }) => (
                       <TableSortCell
-                        handleClick={(orderBy, order) =>
-                          handleSort(orderBy, order, handlePageChange)
-                        }
                         active={sorting.orderBy === sortingKey}
                         data-qa-header={label.toLowerCase()}
                         data-testid={label.toLowerCase()}
                         direction={sorting.order}
+                        handleClick={(orderBy, order) =>
+                          handleSort(orderBy, order, handlePageChange)
+                        }
                         key={label}
                         label={sortingKey ?? ''}
                       >
@@ -288,6 +286,7 @@ export const DisplayAlertResources = React.memo(
                               }}
                             >
                               <Tooltip
+                                placement="right-start"
                                 slotProps={{
                                   tooltip: {
                                     sx: {
@@ -303,19 +302,16 @@ export const DisplayAlertResources = React.memo(
                                     />
                                   ) : undefined
                                 }
-                                placement="right-start"
                               >
                                 <Box>
                                   <Checkbox
-                                    onClick={() => {
-                                      handleSelectionChange([id], !checked);
-                                    }}
-                                    sx={{
-                                      p: 0,
-                                    }}
                                     checked={checked}
                                     data-testid={`select_item_${id}`}
                                     disabled={isItemCheckboxDisabled}
+                                    onClick={() => {
+                                      handleSelectionChange([id], !checked);
+                                    }}
+                                    size="small"
                                   />
                                 </Box>
                               </Tooltip>
@@ -353,6 +349,8 @@ export const DisplayAlertResources = React.memo(
               </Table>
               {!isDataLoadingError && paginatedData.length !== 0 && (
                 <PaginationFooter
+                  count={count}
+                  eventCategory="alerts_resources"
                   handlePageChange={(page) => {
                     handlePageNumberChange(handlePageChange, page);
                   }}
@@ -361,8 +359,6 @@ export const DisplayAlertResources = React.memo(
                     handlePageNumberChange(handlePageChange, 1); // Moves to the first page after page size change
                     scrollToGivenElement();
                   }}
-                  count={count}
-                  eventCategory="alerts_resources"
                   page={page}
                   pageSize={pageSize}
                 />

packages/manager/src/features/EntityTransfers/EntityTransfersCreate/TransferTable.styles.ts

@@ -1,26 +1,11 @@
-import { Checkbox, Typography } from '@linode/ui';
+import { Typography } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 
 import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
 import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
 import { Table } from 'src/components/Table';
 import { TableCell } from 'src/components/TableCell';
 
-export const StyledCheckbox = styled(Checkbox, {
-  label: 'StyledCheckbox',
-})({
-  '& svg': {
-    height: 20,
-    width: 20,
-  },
-});
-
-export const StyledEmptyCheckbox = styled(Checkbox, {
-  label: 'StyledEmptyCheckbox',
-})({
-  '& svg': { height: 20, width: 20 },
-});
-
 export const StyledPaginationFooter = styled(PaginationFooter, {
   label: 'StyledPaginationFooter',
 })(({ theme }) => ({

packages/manager/src/features/EntityTransfers/EntityTransfersCreate/TransferTable.tsx

@@ -1,3 +1,4 @@
+import { Checkbox } from '@linode/ui';
 import * as React from 'react';
 
 import { TableBody } from 'src/components/TableBody';
@@ -7,9 +8,7 @@ import { TableRow } from 'src/components/TableRow';
 
 import {
   StyledCheckAllTableCell,
-  StyledCheckbox,
   StyledDebouncedSearchTextField,
-  StyledEmptyCheckbox,
   StyledPaginationFooter,
   StyledTable,
   StyledTypography,
@@ -45,10 +44,6 @@ export const TransferTable = React.memo((props: Props) => {
     return toggleSelectAll(e.target.checked);
   };
 
-  const ConditionalCheckbox = hasSelectedAll
-    ? StyledCheckbox
-    : StyledEmptyCheckbox;
-
   return (
     <>
       <StyledTypography variant="h2">Linodes</StyledTypography>
@@ -65,12 +60,13 @@ export const TransferTable = React.memo((props: Props) => {
         <TableHead>
           <TableRow>
             <StyledCheckAllTableCell>
-              <ConditionalCheckbox
+              <Checkbox
+                checked={hasSelectedAll}
                 inputProps={{
                   'aria-label': `Select all services on page`,
                 }}
-                checked={hasSelectedAll}
                 onChange={handleToggleAll}
+                size="small"
               />
             </StyledCheckAllTableCell>
             {headers.map((thisHeader) => (

packages/manager/src/features/Linodes/CloneLanding/Disks.tsx

@@ -15,8 +15,8 @@ import type { DiskSelection } from './utilities';
 import type { Disk } from '@linode/api-v4/lib/linodes';
 
 export interface DisksProps {
-  diskSelection: DiskSelection;
   disks: Disk[];
+  diskSelection: DiskSelection;
   handleSelect: (id: number) => void;
   selectedConfigIds: number[];
 }
@@ -73,6 +73,7 @@ export const Disks = (props: DisksProps) => {
                                 data-testid={`checkbox-${disk.id}`}
                                 disabled={isConfigSelected}
                                 onChange={() => handleSelect(disk.id)}
+                                size="small"
                                 text={disk.label}
                               />
                             </TableCell>

packages/manager/src/features/Linodes/LinodeCreate/Addons/Backups.tsx

@@ -1,3 +1,4 @@
+import { useAccountSettings, useRegionsQuery } from '@linode/queries';
 import {
   Checkbox,
   FormControlLabel,
@@ -12,7 +13,6 @@ import { Currency } from 'src/components/Currency';
 import { DISK_ENCRYPTION_BACKUPS_CAVEAT_COPY } from 'src/components/Encryption/constants';
 import { Link } from 'src/components/Link';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
-import { useAccountSettings, useRegionsQuery } from '@linode/queries';
 import { useTypeQuery } from 'src/queries/types';
 import { getMonthlyBackupsPrice } from 'src/utilities/pricing/backups';
 
@@ -63,6 +63,11 @@ export const Backups = () => {
 
   return (
     <FormControlLabel
+      checked={checked}
+      control={
+        <Checkbox sx={(theme) => ({ mt: `-${theme.tokens.spacing.S8}` })} />
+      }
+      data-testid="backups"
       disabled={
         isDistributedRegionSelected ||
         isLinodeCreateRestricted ||
@@ -82,12 +87,12 @@ export const Backups = () => {
           </Stack>
           {checked && diskEncryption === 'enabled' && (
             <Notice
-              typeProps={{
-                style: { fontSize: '0.875rem' },
-              }}
               spacingBottom={0}
               spacingTop={0}
               text={DISK_ENCRYPTION_BACKUPS_CAVEAT_COPY}
+              typeProps={{
+                style: { fontSize: '0.875rem' },
+              }}
               variant="warning"
             />
           )}
@@ -108,9 +113,6 @@ export const Backups = () => {
           </Typography>
         </Stack>
       }
-      checked={checked}
-      control={<Checkbox />}
-      data-testid="backups"
       onChange={field.onChange}
       sx={{ alignItems: 'start' }}
     />

packages/manager/src/features/Linodes/LinodeCreate/Addons/PrivateIP.tsx

@@ -30,6 +30,11 @@ export const PrivateIP = () => {
 
   return (
     <FormControlLabel
+      checked={field.value ?? false}
+      control={
+        <Checkbox sx={(theme) => ({ mt: `-${theme.tokens.spacing.S8}` })} />
+      }
+      disabled={isDistributedRegionSelected || isLinodeCreateRestricted}
       label={
         <Stack spacing={1} sx={{ pl: 2 }}>
           <Typography component="span" variant="h3">
@@ -41,9 +46,6 @@ export const PrivateIP = () => {
           </Typography>
         </Stack>
       }
-      checked={field.value ?? false}
-      control={<Checkbox />}
-      disabled={isDistributedRegionSelected || isLinodeCreateRestricted}
       onChange={field.onChange}
       sx={{ alignItems: 'start' }}
     />