Merge pull request #782 from susannalandstrom/NG-3095-switch-to-use-m…

…ui-icons

Switch to use MUI icons

package.json

@@ -2,7 +2,7 @@
   "name": "@lyyti/design-system",
   "description": "Lyyti Design System",
   "homepage": "https://lyytioy.github.io/lyyti-design-system",
-  "version": "3.9.3",
+  "version": "4.0.0",
   "engines": {
     "node": "^18",
     "npm": "^9"
@@ -25,6 +25,7 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@mui/base": "5.0.0-beta.30",
+    "@mui/icons-material": "5.15.7",
     "@mui/lab": "5.0.0-alpha.158",
     "@mui/material": "5.15.6",
     "@mui/x-data-grid": "6.18.6",

src/components/Accordion.tsx

@@ -7,7 +7,7 @@ import {
   AccordionDetails,
   TypographyProps,
 } from '@mui/material';
-import { ChevronDown } from '../icons';
+import { ExpandMoreRounded } from '../icons';
 
 export interface AccordionProps extends MuiAccordionProps {
   title: string;
@@ -22,7 +22,7 @@ const Accordion = (
     titleProps = {
       fontSize: '16px',
     },
-    expandIcon = <ChevronDown />,
+    expandIcon = <ExpandMoreRounded />,
     expandIconInline,
     elevation = 0,
     children,
@@ -31,9 +31,6 @@ const Accordion = (
   }: AccordionProps,
   ref: Ref<HTMLDivElement>
 ): JSX.Element => {
-  const fontSize = titleProps.fontSize + (typeof titleProps.fontSize === 'number' ? 'px' : '');
-  const iconSize = `calc(${fontSize} * 0.75)`;
-
   return (
     <MuiAccordion ref={ref} elevation={elevation} sx={sx} {...props}>
       <AccordionSummary
@@ -44,7 +41,6 @@ const Accordion = (
           '& .MuiAccordionSummary-content': { flexGrow: expandIconInline ? 0 : 1 },
           '& .MuiSvgIcon-root': {
             color: 'text.primary',
-            fontSize: iconSize,
           },
         }}
       >

src/components/DatePicker.tsx

@@ -10,7 +10,7 @@ import type {
   InputAdornmentProps as MuiInputAdornmentProps,
 } from '@mui/material';
 
-import Calendar from '../icons/Calendar';
+import { CalendarTodayRounded } from '../icons';
 import { TextInputProps } from './TextField';
 
 export interface DatePickerProps<TDate = unknown>
@@ -48,7 +48,9 @@ const DatePicker = <TDate = unknown,>({
   const MuiDatePicker = variant === 'desktop' ? MuiDesktopDatePicker : MuiResponsiveDatePicker;
   return (
     <MuiDatePicker
-      slots={{ openPickerIcon: (iconProps) => Calendar({ fontSize: 'small', ...iconProps }) }}
+      slots={{
+        openPickerIcon: CalendarTodayRounded,
+      }}
       slotProps={{
         desktopPaper: {
           sx: {

src/components/LanguageSelector.tsx

@@ -1,11 +1,13 @@
-import { Globe } from '../icons';
+import { PublicRounded } from '../icons';
 import Select, { SingleSelectProps } from './Select';
 import { forwardRef, Ref } from 'react';
 
 export type LanguageSelectProps = Omit<SingleSelectProps, 'adornment' | 'multiple'>;
 
 const LanguageSelector = (props: LanguageSelectProps, ref: Ref<HTMLDivElement>): JSX.Element => {
-  return <Select ref={ref} multiple={false} adornment={<Globe fontSize="small" />} {...props} />;
+  return (
+    <Select ref={ref} multiple={false} adornment={<PublicRounded fontSize="small" />} {...props} />
+  );
 };
 
 export default forwardRef(LanguageSelector);

src/components/NumberInput.tsx

@@ -1,10 +1,10 @@
 import { forwardRef, Ref, useRef } from 'react';
 import { Box, TextField as MuiTextField, OutlinedTextFieldProps } from '@mui/material';
 import {
-    unstable_useNumberInput as useNumberInput,
-    UseNumberInputParameters,
-  } from '@mui/base/unstable_useNumberInput';
-import { ChevronDown, ChevronUp } from '../icons';
+  unstable_useNumberInput as useNumberInput,
+  UseNumberInputParameters,
+} from '@mui/base/unstable_useNumberInput';
+import { ExpandLessRounded, ExpandMoreRounded } from '../icons';
 
 // A workaround component to make numbers work with TextField
 // Official upcoming MUI component https://github.com/mui/material-ui/issues/19154
@@ -20,10 +20,21 @@ export type SizeTypes = 'small' | 'medium';
 
 export type ColorTypes = 'primary' | 'white';
 
-export interface NumberInputProps extends Omit<
-OutlinedTextFieldProps,
-'variant' | 'color' | 'fullWidth' | 'error' | 'helperText' | 'hiddenLabel' | 'onChange' | 'onBlur' | 'onClick' | 'onFocus'
->, Omit<UseNumberInputParameters, 'value' | 'inputRef'> {
+export interface NumberInputProps
+  extends Omit<
+      OutlinedTextFieldProps,
+      | 'variant'
+      | 'color'
+      | 'fullWidth'
+      | 'error'
+      | 'helperText'
+      | 'hiddenLabel'
+      | 'onChange'
+      | 'onBlur'
+      | 'onClick'
+      | 'onFocus'
+    >,
+    Omit<UseNumberInputParameters, 'value' | 'inputRef'> {
   fullWidth?: boolean;
   size?: SizeTypes;
   startAdornment?: string | JSX.Element;
@@ -50,16 +61,12 @@ const NumberInput = (
 ): JSX.Element => {
   const { onChange, onBlur, ...props } = rest;
 
-  const {
-    getRootProps,
-    getInputProps,
-    getIncrementButtonProps,
-    getDecrementButtonProps
-  } = useNumberInput({
-    ...props as UseNumberInputParameters, // Casting due to different value type
-    onChange,
-    onBlur
-  });
+  const { getRootProps, getInputProps, getIncrementButtonProps, getDecrementButtonProps } =
+    useNumberInput({
+      ...(props as UseNumberInputParameters), // Casting due to different value type
+      onChange,
+      onBlur,
+    });
   const muiTextField = useRef<HTMLDivElement>(null);
   const overrideColor = color === 'white' ? 'common.white' : undefined;
 
@@ -74,10 +81,9 @@ const NumberInput = (
       onClick={() => muiTextField.current?.focus()}
       inputRef={muiTextField}
       InputProps={{
-
         ...(props.InputProps ?? {}),
         notched: false,
-        ...(getInputProps()),
+        ...getInputProps(),
         endAdornment: (
           <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
             <Box
@@ -96,8 +102,9 @@ const NumberInput = (
                 '&:hover': {
                   bgcolor: 'grey.200',
                 },
-              }}>
-              <ChevronUp sx={{ fontSize: '12px', bgcolor: null }} />
+              }}
+            >
+              <ExpandLessRounded sx={{ fontSize: '12px', bgcolor: null }} />
             </Box>
             <Box
               component="button"
@@ -115,11 +122,12 @@ const NumberInput = (
                 '&:hover': {
                   bgcolor: 'grey.200',
                 },
-              }}>
-              <ChevronDown sx={{ fontSize: '12px', bgcolor: null }} />
+              }}
+            >
+              <ExpandMoreRounded sx={{ fontSize: '12px', bgcolor: null }} />
             </Box>
           </Box>
-        )
+        ),
       }}
       InputLabelProps={{ shrink: true, ...InputLabelProps }}
       sx={{

src/components/Search.tsx

@@ -1,11 +1,11 @@
-import { Search as SearchIcon } from '../icons';
+import { SearchRounded } from '../icons';
 import TextField, { TextFieldProps } from './TextField';
 import Autocomplete, { AutocompleteProps, OptionsType } from './Autocomplete';
 
 export type SingleOptionSearchProps = Omit<
   TextFieldProps,
- 'getOptionLabel' | 'hiddenLabel' | 'variant' | 'startAdornment' | 'endAdornment'
->
+  'getOptionLabel' | 'hiddenLabel' | 'variant' | 'startAdornment' | 'endAdornment'
+>;
 
 export type MultipleOptionsSearchProps = Omit<
   AutocompleteProps<OptionsType>,
@@ -17,12 +17,13 @@ export type MultipleOptionsSearchProps = Omit<
 export type SearchCustomFieldProps = {
   adornmentOnRight?: boolean;
   adornmentColor?: string;
-}
+};
 
-export type SearchProps = (MultipleOptionsSearchProps | SingleOptionSearchProps) & SearchCustomFieldProps;
+export type SearchProps = (MultipleOptionsSearchProps | SingleOptionSearchProps) &
+  SearchCustomFieldProps;
 
 const Search = ({ ...props }: SearchProps): JSX.Element => {
-  const searchIcon = <SearchIcon fontSize="small" sx={{color: props.adornmentColor ?? 'inherit'  }} />;
+  const searchIcon = <SearchRounded sx={{ color: props.adornmentColor ?? 'inherit' }} />;
 
   const { freeSolo = true, options = [], ...multiProps } = props as MultipleOptionsSearchProps;
   const singleProps = props as SingleOptionSearchProps;
@@ -33,7 +34,13 @@ const Search = ({ ...props }: SearchProps): JSX.Element => {
     );
   }
 
-  return <TextField startAdornment={props.adornmentOnRight ? undefined : searchIcon} endAdornment={props.adornmentOnRight ? searchIcon : undefined} {...singleProps} />;
+  return (
+    <TextField
+      startAdornment={props.adornmentOnRight ? undefined : searchIcon}
+      endAdornment={props.adornmentOnRight ? searchIcon : undefined}
+      {...singleProps}
+    />
+  );
 };
 
 export default Search;