A pack of extensions for grommet 2
created:7/7/2021
updated:7/7/2021
loc
181
comments
2%
failed
24
coverage
92%

Notification

avatar of atanasster

A Box to display notification messages.

Component

import { Notification } from 'grommet-controls';

Locale

() => (
<Notification
message="Locale de-DE"
timestamp={new Date('Sun, Aug 30, 2020, 11:14 PM')}
locale="de-DE"
size="small"
onClose={onClose}
/>
)

Properties

Name
Description
Default
INotificationProps(13 properties)
a11yTitle

Custom title to be used by screen readers

string
-
status

Status color

okinfowarningerrorunknowndisabled
info
size

The font size of the notification message

smallmediumlarge
medium
state

State label

string
-
strong

Heading bold state

boolean
-
message

Message to be displayed

string
Notification...
icon

Notification icon

ReactNode
true
closer

Closer icon

ReactNode
undefined
onClose

Function that will be called when the user closes the notification

(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void
-
percentComplete

Percent complete Meter for task notifications

number
-
timestamp

Timestamp for the notification (Date)

DateFormat
-
locale

The locale to use for timestamp, if provided

string
en-us
reverse

If true, reverse the order of the Notification elements

boolean
-
BoxProps(27 properties)

Commits

Date
Author
Commit Message
8/31/2020

atanasster

avatar of atanasster
update stories titles and navigation
8/30/2020

atanasster

avatar of atanasster
update eslint and add component-controls
8/27/2019

atanasster

avatar of atanasster
initial commit 2.x alpha
3 commits

External dependencies

package
imports
peer
grommet
^2.15.0
TextMeterHeadingButtonBoxPropsBox
*
Close
*
StatusCritical
*
StatusDisabled
*
StatusGood
*
StatusInfo
*
StatusUnknown
*
StatusWarning
*
react
^17.0.1
React
*

Internal dependencies

file
imports
"../../utils/moment"
longDate
"./NotificationProps"
INotificationProps

Component JSX

<Close
size
/>
<Box
pad
>
grommet
^2.15.0
<Button
a11yTitleonClick
/>
grommet
^2.15.0
<strong
/>
strong
<StatusIcon
size
/>
StatusIcon
<Box
directionaligngapstyle
>
grommet
^2.15.0
<Meter
sizethicknessvalues
/>
grommet
^2.15.0
<Text
size
/>
grommet
^2.15.0
<Box
flexpad
>
grommet
^2.15.0
<Heading
levelmarginstyle
>
grommet
^2.15.0
<Box
directionaligngap
/>
grommet
^2.15.0
<Text
size
/>
grommet
^2.15.0
<Text
size
/>
grommet
^2.15.0
<Box
directionfillborderroundrolearia-checkedbackground
/>
grommet
^2.15.0

Stories

Main

props => (
<Notification {...props} />
)

A 11 Y Title

() => (
<Notification a11yTitle="Close notification" onClose={onClose} />
)

Status

() => (
<Notification message="Message heading" status="info" onClose={onClose} />
)

State

() => (
<Notification
message="Message heading"
state="state note"
status="warning"
size="small"
onClose={onClose}
/>
)

Strong

() => (
<Notification
message="Bold message"
strong={true}
status="error"
size="small"
onClose={onClose}
/>
)

Icon

() => (
<Notification
message="Custom icon"
icon={<Grommet />}
size="small"
onClose={onClose}
/>
)

Closer

() => (
<Notification
status="disabled"
message="Custom closer"
closer={<CircleQuestion />}
size="small"
onClose={onClose}
/>
)

Percent Complete

() => (
<Notification
status="info"
message="Task percentage"
percentComplete={80}
size="small"
onClose={onClose}
/>
)

Timestamp

() => (
<Notification
message="Time stamp"
timestamp={new Date('Sun, Aug 30, 2020, 11:14 PM')}
size="small"
onClose={onClose}
/>
)

Size

() => (
<Notification message="Large" size="large" onClose={onClose} />
)

Reverse

() => (
<Notification
message="reversed"
size="small"
reverse={true}
onClose={onClose}
/>
)