diff --git a/.changeset/cyan-chicken-juggle.md b/.changeset/cyan-chicken-juggle.md new file mode 100644 index 0000000000..1d44db90f5 --- /dev/null +++ b/.changeset/cyan-chicken-juggle.md @@ -0,0 +1,15 @@ +--- +"@comet/cms-admin": minor +--- + +Add `buttonChildren` and `children` props to `UserHeaderItem` + +This increases the flexibility of the `UserHeaderItem` component by allowing the `AppHeaderDropdown` label to be passed via `buttonChildren`. More buttons or other list items in the dropdown can be passed via `children`. + +**Example:** +```tsx + + + + +``` \ No newline at end of file diff --git a/packages/admin/cms-admin/src/common/header/UserHeaderItem.tsx b/packages/admin/cms-admin/src/common/header/UserHeaderItem.tsx index 4316bb9bb6..b15db11bae 100644 --- a/packages/admin/cms-admin/src/common/header/UserHeaderItem.tsx +++ b/packages/admin/cms-admin/src/common/header/UserHeaderItem.tsx @@ -1,10 +1,12 @@ -import { AppHeaderDropdown, Loading } from "@comet/admin"; +import { gql, useMutation } from "@apollo/client"; +import { AppHeaderDropdown, AppHeaderDropdownProps, Loading } from "@comet/admin"; import { Account, Info, Logout } from "@comet/admin-icons"; import { Box, Button as MUIButton } from "@mui/material"; import { styled } from "@mui/material/styles"; import React from "react"; import { FormattedMessage } from "react-intl"; +import { useCurrentUser } from "../../userPermissions/hooks/currentUser"; import { AboutModal } from "./about/AboutModal"; import { GQLSignOutMutation } from "./UserHeaderItem.generated"; @@ -24,10 +26,6 @@ const Separator = styled(Box)` margin-bottom: 20px; `; -import { gql, useMutation } from "@apollo/client"; - -import { useCurrentUser } from "../../userPermissions/hooks/currentUser"; - const signOutMutation = gql` mutation SignOut { currentUserSignOut @@ -36,17 +34,19 @@ const signOutMutation = gql` interface UserHeaderItemProps { aboutModalLogo?: React.ReactElement; + buttonChildren?: AppHeaderDropdownProps["buttonChildren"]; + children?: React.ReactNode; } export function UserHeaderItem(props: UserHeaderItemProps): React.ReactElement { - const { aboutModalLogo } = props; + const { aboutModalLogo, buttonChildren, children } = props; const user = useCurrentUser(); const [showAboutModal, setShowAboutModal] = React.useState(false); const [signOut, { loading: isSigningOut }] = useMutation(signOutMutation); return ( - }> + }> + {children} {isSigningOut ? (