[M3-8817] - PageSize select

packages/manager/src/components/PaginationFooter/PaginationFooter.tsx

@@ -1,8 +1,9 @@
+import { SimpleSelect } from '@linode/ui';
 import { Box } from '@linode/ui';
 import { styled, useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
-import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
+import { MenuItem } from 'src/components/MenuItem';
 
 import { PaginationControls } from '../PaginationControls/PaginationControls';
 
@@ -81,14 +82,19 @@ export const PaginationFooter = (props: Props) => {
       )}
       {!fixedSize ? (
         <PageSizeSelectContainer data-qa-pagination-page-size>
-          <Autocomplete
-            disableClearable
+          <SimpleSelect
+            defaultValue={defaultPagination}
             label="Number of items to show"
-            onChange={(_, selected) => handleSizeChange(selected.value)}
-            options={finalOptions}
-            textFieldProps={{ hideLabel: true, noMarginTop: true }}
-            value={defaultPagination}
-          />
+            onChange={(e) => handleSizeChange(Number(e.target.value))}
+            sx={{ margin: 0.5 }}
+            value={pageSize}
+          >
+            {finalOptions.map((option) => (
+              <MenuItem key={option.value} value={option.value}>
+                {option.label}
+              </MenuItem>
+            ))}
+          </SimpleSelect>
         </PageSizeSelectContainer>
       ) : null}
     </Box>

packages/manager/tsconfig.json

@@ -44,5 +44,5 @@
   "include": [
     "src",
     "package.json"
-  ]
+, "../ui/src/components/SimpleSelect"  ]
 }

packages/ui/src/components/SimpleSelect/SimpleSelect.tsx

@@ -0,0 +1,11 @@
+import { KeyboardArrowDown } from '@mui/icons-material';
+import { Select } from '@mui/material';
+import React from 'react';
+
+import type { SelectProps } from '@mui/material';
+
+export const SimpleSelect = (props: SelectProps) => {
+  return (
+    <Select {...props} IconComponent={KeyboardArrowDown} variant="standard" />
+  );
+};

packages/ui/src/components/SimpleSelect/index.ts

@@ -0,0 +1 @@
+export * from './SimpleSelect';

packages/ui/src/components/index.ts

@@ -7,4 +7,5 @@ export * from './IconButton';
 export * from './Input';
 export * from './InputAdornment';
 export * from './InputLabel';
+export * from './SimpleSelect';
 export * from './Tooltip';

packages/ui/src/foundations/themes/light.ts

@@ -1105,14 +1105,26 @@ export const lightTheme: ThemeOptions = {
         icon: {
           color: `${Color.Neutrals[50]} !important`,
           height: 28,
+          marginTop: -4,
           marginRight: 4,
-          marginTop: -2,
+          paddingLeft: 8,
           opacity: 0.5,
           transition: 'color 225ms ease-in-out',
           width: 28,
         },
+        root: {
+          borderRadius: 0,
+        },
         select: {
+          border: `1px solid ${Color.Neutrals[40]}`,
+          height: 34,
+          minHeight: 34,
+          padding: '0 12px',
+          display: 'flex',
+          alignItems: 'center',
+          borderRadius: 0,
           '&:focus': {
+            borderColor: primaryColors.main,
             backgroundColor: 'transparent',
           },
         },