From 55a20841d8623a26545bc6bc6b08c9ceca99eb45 Mon Sep 17 00:00:00 2001 From: NRisticHtec Date: Fri, 6 Dec 2024 18:25:56 +0100 Subject: [PATCH] added: theme access fallbacks (#493) Signed-off-by: Nebojsa Ristic Co-authored-by: Kurt King --- .changeset/flat-islands-travel.md | 8 ++ .../AnnouncementForm/AnnouncementForm.tsx | 17 +++-- .../AnnouncementsPage/AnnouncementsPage.tsx | 29 ++++--- .../CategoriesForm/CategoriesForm.tsx | 17 +++-- .../NewAnnouncementBanner.tsx | 76 +++++++++++-------- 5 files changed, 93 insertions(+), 54 deletions(-) create mode 100644 .changeset/flat-islands-travel.md diff --git a/.changeset/flat-islands-travel.md b/.changeset/flat-islands-travel.md new file mode 100644 index 00000000..f35b8391 --- /dev/null +++ b/.changeset/flat-islands-travel.md @@ -0,0 +1,8 @@ +--- +'@procore-oss/backstage-plugin-announcements': minor +--- + +Fixes issues when theme object is empty. To solve this issue fallbacks are provided: + +- theme provided from mui useTheme function, +- if previous fallback is not working hardcoded value is used. diff --git a/plugins/announcements/src/components/AnnouncementForm/AnnouncementForm.tsx b/plugins/announcements/src/components/AnnouncementForm/AnnouncementForm.tsx index 860a4e69..aa799d62 100644 --- a/plugins/announcements/src/components/AnnouncementForm/AnnouncementForm.tsx +++ b/plugins/announcements/src/components/AnnouncementForm/AnnouncementForm.tsx @@ -14,14 +14,19 @@ import Button from '@mui/material/Button'; import FormGroup from '@mui/material/FormGroup'; import FormControlLabel from '@mui/material/FormControlLabel'; import Switch from '@mui/material/Switch'; +import { useTheme } from '@mui/material/styles'; -const useStyles = makeStyles(theme => ({ - formRoot: { - '& > *': { - margin: theme.spacing(1), +const useStyles = makeStyles(theme => { + const currentTheme = useTheme(); + + return { + formRoot: { + '& > *': { + margin: theme.spacing ?? currentTheme.spacing(1) ?? '8px', + }, }, - }, -})); + }; +}); type AnnouncementFormProps = { initialData: Announcement; diff --git a/plugins/announcements/src/components/AnnouncementsPage/AnnouncementsPage.tsx b/plugins/announcements/src/components/AnnouncementsPage/AnnouncementsPage.tsx index d8a53cda..ec58a287 100644 --- a/plugins/announcements/src/components/AnnouncementsPage/AnnouncementsPage.tsx +++ b/plugins/announcements/src/components/AnnouncementsPage/AnnouncementsPage.tsx @@ -53,19 +53,26 @@ import Card from '@mui/material/Card'; import CardHeader from '@mui/material/CardHeader'; import CardContent from '@mui/material/CardContent'; import Pagination from '@mui/material/Pagination'; +import { useTheme } from '@mui/material/styles'; -const useStyles = makeStyles(theme => ({ - cardHeader: { - color: theme.palette.text.primary, - fontSize: '1.5rem', - }, - pagination: { - display: 'flex', - justifyContent: 'center', - marginTop: theme.spacing(4), - }, -})); +const useStyles = makeStyles(theme => { + const currentTheme = useTheme(); + return { + cardHeader: { + color: + theme?.palette?.text?.primary || + currentTheme?.palette?.text?.primary || + '#000', + fontSize: '1.5rem', + }, + pagination: { + display: 'flex', + justifyContent: 'center', + marginTop: theme?.spacing?.(4) || currentTheme?.spacing?.(4) || 32, + }, + }; +}); /** * Truncate text to a given length and add ellipsis * @param text the text to truncate diff --git a/plugins/announcements/src/components/CategoriesForm/CategoriesForm.tsx b/plugins/announcements/src/components/CategoriesForm/CategoriesForm.tsx index ffcdcf9a..2a421c30 100644 --- a/plugins/announcements/src/components/CategoriesForm/CategoriesForm.tsx +++ b/plugins/announcements/src/components/CategoriesForm/CategoriesForm.tsx @@ -12,14 +12,19 @@ import makeStyles from '@mui/styles/makeStyles'; import TextField from '@mui/material/TextField'; import Button from '@mui/material/Button'; import { usePermission } from '@backstage/plugin-permission-react'; +import { useTheme } from '@mui/material/styles'; -const useStyles = makeStyles(theme => ({ - formRoot: { - '& > *': { - margin: theme.spacing(1), +const useStyles = makeStyles(theme => { + const currentTheme = useTheme(); + + return { + formRoot: { + '& > *': { + margin: theme?.spacing?.(1) ?? currentTheme.spacing(1) ?? '8px', + }, }, - }, -})); + }; +}); export type CategoriesFormProps = { initialData: Category; diff --git a/plugins/announcements/src/components/NewAnnouncementBanner/NewAnnouncementBanner.tsx b/plugins/announcements/src/components/NewAnnouncementBanner/NewAnnouncementBanner.tsx index e93278b8..f9b9bf0b 100644 --- a/plugins/announcements/src/components/NewAnnouncementBanner/NewAnnouncementBanner.tsx +++ b/plugins/announcements/src/components/NewAnnouncementBanner/NewAnnouncementBanner.tsx @@ -20,38 +20,52 @@ import Snackbar from '@mui/material/Snackbar'; import SnackbarContent from '@mui/material/SnackbarContent'; import IconButton from '@mui/material/IconButton'; import Alert from '@mui/material/Alert'; - -const useStyles = makeStyles(theme => ({ - // showing on top, as a block - blockPositioning: { - padding: theme.spacing(0), - position: 'relative', - marginBottom: theme.spacing(4), - marginTop: -theme.spacing(3), - zIndex: 'unset', - }, - // showing on top, as a floating alert - floatingPositioning: {}, - icon: { - fontSize: 20, - }, - bannerIcon: { - fontSize: 20, - marginRight: '0.5rem', - }, - content: { - width: '100%', - maxWidth: 'inherit', - flexWrap: 'nowrap', - backgroundColor: theme.palette.banner.info, - display: 'flex', - alignItems: 'center', - color: theme.palette.banner.text, - '& a': { - color: theme.palette.banner.link, +import { useTheme } from '@mui/material/styles'; + +const useStyles = makeStyles(theme => { + const currentTheme = useTheme(); + + return { + // showing on top, as a block + blockPositioning: { + padding: theme?.spacing?.(0) ?? currentTheme.spacing(0) ?? 0, + position: 'relative', + marginBottom: theme?.spacing?.(4) ?? currentTheme.spacing(4) ?? 32, + marginTop: theme?.spacing?.(3) ?? currentTheme.spacing(3) ?? -24, + zIndex: 'unset', + }, + // showing on top, as a floating alert + floatingPositioning: {}, + icon: { + fontSize: 20, + }, + bannerIcon: { + fontSize: 20, + marginRight: '0.5rem', }, - }, -})); + content: { + width: '100%', + maxWidth: 'inherit', + flexWrap: 'nowrap', + backgroundColor: + theme?.palette?.banner?.info ?? + currentTheme.palette?.banner?.info ?? + '#f0f0f0', + display: 'flex', + alignItems: 'center', + color: + theme?.palette?.banner?.text ?? + currentTheme.palette?.banner?.text ?? + '#000000', + '& a': { + color: + theme?.palette?.banner?.link ?? + currentTheme.palette?.banner?.link ?? + '#0068c8', + }, + }, + }; +}); type AnnouncementBannerProps = { announcement: Announcement;