Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

✨ new(notifications): notifications className prop added. #311

Open
wants to merge 2 commits into
base: fix-sui-react-dependencies
Choose a base branch
from
Open

✨ new(notifications): notifications className prop added. #311

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
be6f204
✨ new(notifications): notifications className prop added.
creador-dev Jul 24, 2024
5228529
📝 docs(notification): added missing prop isFluid in docs.
creador-dev Jul 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions packages/ui/notification/src/notification-renderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,14 @@ import React from "react"
import { useNotifications } from "./use-notification"
import { Notification } from "./notification"
import { useStyles } from "@wpmudev/sui-hooks"
import { generateCN, SuiStyleType } from "@wpmudev/sui-utils"
import { generateCN } from "@wpmudev/sui-utils"
import { NotificationRendererProps } from "./notification.types"

const NotificationRenderer = ({ _style }: SuiStyleType) => {
const { suiInlineClassname } = useStyles(_style)
const NotificationRenderer: React.FC<NotificationRendererProps> = ({
className = "",
_style,
}) => {
const { suiInlineClassname } = useStyles(_style, className)
const { queue } = useNotifications()

if (queue.length <= 0) {
Expand All @@ -17,7 +21,7 @@ const NotificationRenderer = ({ _style }: SuiStyleType) => {
className={generateCN(
"sui-notification__renderer",
{},
suiInlineClassname + " sui-wp-overlay",
"sui-wp-overlay " + suiInlineClassname,
)}
>
{(queue ?? [])?.map((notification: any, index: number) => (
Expand Down
3 changes: 2 additions & 1 deletion packages/ui/notification/src/notification.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ const Notification: React.FC<NotificationProps> = ({
message = "message",
action,
icon = "Info",
className = "",
isInline = true,
isFluid = false,
isDismissible = false,
Expand Down Expand Up @@ -54,7 +55,7 @@ const Notification: React.FC<NotificationProps> = ({
}
}, [id, isInline, notifications])

const { suiInlineClassname } = useStyles(_style)
const { suiInlineClassname } = useStyles(_style, className)

// do not render
if (!isVisible) return null
Expand Down
8 changes: 7 additions & 1 deletion packages/ui/notification/src/notification.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ interface NotificationProps
title?: ReactNode // title content of the notification (can be any valid React node)
message?: ReactNode // message content of the notification (can be any valid React node)
action?: ReactNode // notification action
className?: string // icon state (unused in the current implementation)
icon?: IconsNamesType // icon to display with the notification (can be a React node or a string)
iconState?: string | never // icon state (unused in the current implementation)
isInline?: boolean // flag to indicate if the notification is displayed inline
Expand All @@ -24,4 +25,9 @@ interface NotificationProps
variation?: "info" | "success" | "warning" | "error" | string // variation type for the notification
}

export type { NotificationProps }
// NotificationRendererProps
interface NotificationRendererProps extends SuiStyleType {
className?: string // class name
}

export type { NotificationProps, NotificationRendererProps }
10 changes: 10 additions & 0 deletions packages/ui/notification/stories/tabs/TabCode.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,12 @@ import dedent from "dedent"
<p> Custom icon besides the title </p>
</PropSection>

<PropSection title="className" type="string">
<p>
Additional custom className for further styling.
</p>
</PropSection>

<PropSection title="size" type="string">
<p> Size of the notification</p>
<p>
Expand Down Expand Up @@ -62,6 +68,10 @@ import dedent from "dedent"
<p> When set to <Code small={true}>true</Code>, the notification will have a dismissing button </p>
</PropSection>

<PropSection title="isFluid" type="boolean" defaultValue="false">
<p>When set to <Code isSmall={true}>true</Code> the notification will have a full width</p>
</PropSection>

<PropSection title="timeout" type="boolean" defaultValue="5000">
<p> The amount of time (in ms) that should pass before automatically dismissing the notification. </p>
</PropSection>
Expand Down
Loading