Merge pull request #1414 from oasisprotocol/mz/defaultProps

Remove usage of deprecated React API

.changelog/1414.internal.md

@@ -0,0 +1 @@
+Remove usage of deprecated React API

src/app/components/Search/SearchSuggestionsButtons.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import Typography from '@mui/material/Typography'
 import { styled } from '@mui/material/styles'
-import Button from '@mui/material/Button'
+import Button, { ButtonProps } from '@mui/material/Button'
 import { Trans, useTranslation } from 'react-i18next'
 import { COLORS } from '../../../styles/theme/colors'
 import WidgetsIcon from '@mui/icons-material/Widgets'
@@ -12,18 +12,18 @@ import { searchSuggestionTerms } from './search-utils'
 import { OptionalBreak } from '../OptionalBreak'
 import { SearchScope } from '../../../types/searchScope'
 
-const PlainTextButton = styled(Button)({
+const StyledPlainTextButton = styled(Button)({
   fontSize: 'inherit',
   textTransform: 'none',
   paddingLeft: 0,
   paddingRight: 0,
   minWidth: 0,
   height: '1em',
 })
-PlainTextButton.defaultProps = {
-  variant: 'text',
-  color: 'inherit',
-}
+
+const PlainTextButton = (props: ButtonProps) => (
+  <StyledPlainTextButton variant="text" color="inherit" {...props} />
+)
 
 export const SuggestionButton = styled(PlainTextButton)({
   gap: '0.2ch', // Space after icon

src/app/components/Search/index.tsx

@@ -3,7 +3,7 @@ import { useNavigate, useSearchParams } from 'react-router-dom'
 import TextField, { textFieldClasses } from '@mui/material/TextField'
 import InputAdornment, { inputAdornmentClasses } from '@mui/material/InputAdornment'
 import { styled } from '@mui/material/styles'
-import Button from '@mui/material/Button'
+import Button, { ButtonProps } from '@mui/material/Button'
 import Box from '@mui/material/Box'
 import SearchIcon from '@mui/icons-material/Search'
 import { useTranslation } from 'react-i18next'
@@ -70,7 +70,7 @@ const SearchForm = styled('form', {
 
 interface SearchButtonProps extends StyledBaseProps {}
 
-export const SearchButton = styled(Button, {
+export const StyledSearchButton = styled(Button, {
   shouldForwardProp: (prop: PropertyKey) =>
     !(['searchVariant'] as (keyof SearchButtonProps)[]).includes(prop as keyof SearchButtonProps),
 })<SearchButtonProps>(({ theme, searchVariant }) => ({
@@ -90,10 +90,10 @@ export const SearchButton = styled(Button, {
       }
     : {}),
 }))
-SearchButton.defaultProps = {
-  variant: 'contained',
-  color: 'primary',
-}
+
+export const SearchButton = (props: ButtonProps & SearchButtonProps) => (
+  <StyledSearchButton variant="contained" color="primary" {...props} />
+)
 
 export interface SearchProps {
   scope?: SearchScope

src/app/pages/HomePage/Graph/HelpScreen/index.tsx

@@ -34,12 +34,6 @@ const SwiperBox = styled(Box)(() => ({
   height: '40%',
 }))
 
-export const GetStartedBtn = styled(Button)({})
-GetStartedBtn.defaultProps = {
-  variant: 'contained',
-  color: 'primary',
-}
-
 interface Step {
   icon: ReactElement
   label: string
@@ -135,7 +129,9 @@ const HelpScreen: FC<HelpScreenProps> = ({ setParaTimeStep }) => {
         />
       )}
       {activeStep > 1 && (
-        <GetStartedBtn onClick={onGetStartedClick}>{t('home.helpScreen.getStarted')}</GetStartedBtn>
+        <Button variant="contained" color="primary" onClick={onGetStartedClick}>
+          {t('home.helpScreen.getStarted')}
+        </Button>
       )}
     </HelpScreenContainer>
   )

src/app/pages/HomePage/Graph/ParaTimeSelector/index.tsx

@@ -97,10 +97,6 @@ export const ExploreBtn = styled(Button)(({ theme }) => ({
     paddingRight: theme.spacing(6),
   },
 }))
-ExploreBtn.defaultProps = {
-  color: 'secondary',
-  variant: 'contained',
-}
 
 export const ZoomOutBtn = styled(Button)(({ theme }) => ({
   color: theme.palette.layout.graphZoomOutText,
@@ -118,11 +114,7 @@ export const ZoomOutBtn = styled(Button)(({ theme }) => ({
     backgroundColor: 'transparent',
   },
 }))
-ZoomOutBtn.defaultProps = {
-  color: 'primary',
-  variant: 'text',
-  startIcon: <ChevronLeftIcon />,
-}
+
 const ZoomOutBtnFade = styled(Fade)(() => ({
   transitionDelay: '500ms !important',
 }))
@@ -267,13 +259,21 @@ const ParaTimeSelectorCmp: FC<ParaTimeSelectorProps> = ({
           </QuickPinchZoomOuter>
           {!isMobile && (
             <ZoomOutBtnFade in={graphZoomedIn}>
-              <ZoomOutBtn onClick={onZoomOutClick} disabled={disabled}>
+              <ZoomOutBtn
+                color="primary"
+                variant="text"
+                startIcon={<ChevronLeftIcon />}
+                onClick={onZoomOutClick}
+                disabled={disabled}
+              >
                 {t('home.zoomOutBtnText')}
               </ZoomOutBtn>
             </ZoomOutBtnFade>
           )}
           {isMobile && ParaTimeSelectorUtils.showExploreBtn(step) && (
             <ExploreBtn
+              color="secondary"
+              variant="contained"
               onClick={onExploreClick}
               aria-label={exploreBtnTextTranslated}
               sx={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }}

src/app/pages/SearchResultsPage/ResultsGroupByType.tsx

@@ -3,7 +3,6 @@ import { Link as RouterLink } from 'react-router-dom'
 import Button from '@mui/material/Button'
 import Box from '@mui/material/Box'
 import Divider from '@mui/material/Divider'
-import { styled } from '@mui/material/styles'
 import Typography from '@mui/material/Typography'
 
 interface Props<T> {
@@ -14,16 +13,6 @@ interface Props<T> {
   linkLabel: string
 }
 
-export const ViewResultButton = (() => {
-  const ViewResultButton = styled(Button)({})
-  ViewResultButton.defaultProps = {
-    variant: 'contained',
-    color: 'primary',
-  }
-  // Type cast is needed because styled type breaks `<ViewResultButton component={RouterLink}`
-  return ViewResultButton as typeof Button
-})()
-
 /**
  * Component for displaying search results of the same type, from the same network.
  *
@@ -51,9 +40,9 @@ export function ResultsGroupByType<T>({ title, results, resultComponent, link, l
         <div key={i}>
           {resultComponent(item)}
           <Box sx={{ display: 'flex', justifyContent: 'center', mt: 5 }}>
-            <ViewResultButton component={RouterLink} to={link(item)}>
+            <Button variant="contained" color="primary" component={RouterLink} to={link(item)}>
               {linkLabel}
-            </ViewResultButton>
+            </Button>
           </Box>
           {i < results.length - 1 && <Divider variant="card" />}
         </div>

src/stories/ButtonsShowroom.stories.tsx

@@ -3,8 +3,6 @@ import { SearchButton } from '../app/components/Search'
 import { SuggestionButton } from '../app/components/Search/SearchSuggestionsButtons'
 import { Select } from '../app/components/Select'
 import { ExploreBtn, ZoomOutBtn } from '../app/pages/HomePage/Graph/ParaTimeSelector'
-import { GetStartedBtn } from '../app/pages/HomePage/Graph/HelpScreen'
-import { ViewResultButton } from '../app/pages/SearchResultsPage/ResultsGroupByType'
 import { LoadMoreButton } from '../app/components/LoadMoreButton'
 import { withRouter } from 'storybook-addon-react-router-v6'
 import WidgetsIcon from '@mui/icons-material/Widgets'
@@ -18,7 +16,6 @@ const Template: StoryFn = () => {
   return (
     <div>
       <SearchButton searchVariant="button">SearchButton</SearchButton>
-      <ViewResultButton>ViewResultButton</ViewResultButton>
       <SuggestionButton>
         <WidgetsIcon sx={{ fontSize: '18px' }} /> SuggestionButton
       </SuggestionButton>
@@ -28,8 +25,6 @@ const Template: StoryFn = () => {
       <Select options={[{ label: 'Select', value: 'Select' }]} />
       <br />
       <br />
-
-      <GetStartedBtn>GetStartedBtn</GetStartedBtn>
       <ExploreBtn>ExploreBtn</ExploreBtn>
       <ZoomOutBtn>ZoomOutBtn</ZoomOutBtn>
       <br />