diff --git a/.changelog/1414.internal.md b/.changelog/1414.internal.md new file mode 100644 index 0000000000..877daeab07 --- /dev/null +++ b/.changelog/1414.internal.md @@ -0,0 +1 @@ +Remove usage of deprecated React API diff --git a/src/app/components/Search/SearchSuggestionsButtons.tsx b/src/app/components/Search/SearchSuggestionsButtons.tsx index 16684a0e26..c465c4deda 100644 --- a/src/app/components/Search/SearchSuggestionsButtons.tsx +++ b/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,7 +12,7 @@ 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, @@ -20,10 +20,10 @@ const PlainTextButton = styled(Button)({ minWidth: 0, height: '1em', }) -PlainTextButton.defaultProps = { - variant: 'text', - color: 'inherit', -} + +const PlainTextButton = (props: ButtonProps) => ( + +) export const SuggestionButton = styled(PlainTextButton)({ gap: '0.2ch', // Space after icon diff --git a/src/app/components/Search/index.tsx b/src/app/components/Search/index.tsx index 897fc99695..7887208f69 100644 --- a/src/app/components/Search/index.tsx +++ b/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), })(({ theme, searchVariant }) => ({ @@ -90,10 +90,10 @@ export const SearchButton = styled(Button, { } : {}), })) -SearchButton.defaultProps = { - variant: 'contained', - color: 'primary', -} + +export const SearchButton = (props: ButtonProps & SearchButtonProps) => ( + +) export interface SearchProps { scope?: SearchScope diff --git a/src/app/pages/SearchResultsPage/ResultsGroupByType.tsx b/src/app/pages/SearchResultsPage/ResultsGroupByType.tsx index c4804d58ba..686b785b50 100644 --- a/src/app/pages/SearchResultsPage/ResultsGroupByType.tsx +++ b/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 { @@ -14,16 +13,6 @@ interface Props { linkLabel: string } -export const ViewResultButton = (() => { - const ViewResultButton = styled(Button)({}) - ViewResultButton.defaultProps = { - variant: 'contained', - color: 'primary', - } - // Type cast is needed because styled type breaks `({ title, results, resultComponent, link, l
{resultComponent(item)} - + {i < results.length - 1 && }
diff --git a/src/stories/ButtonsShowroom.stories.tsx b/src/stories/ButtonsShowroom.stories.tsx index b2b1244327..5b2f6461ff 100644 --- a/src/stories/ButtonsShowroom.stories.tsx +++ b/src/stories/ButtonsShowroom.stories.tsx @@ -3,7 +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 { 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' @@ -17,7 +16,6 @@ const Template: StoryFn = () => { return (
SearchButton - ViewResultButton SuggestionButton