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

✨ new(notification): neutral variation added for notification. #340

Merged
merged 1 commit into from
Dec 18, 2024
Merged

✨ new(notification): neutral variation added for notification. #340

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 4 additions & 0 deletions packages/assets/css/src/scss/_components/_notification/_modifiers/_notification-states.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@
@mixin edit-states($block-name) {
@include sui-class($rtl: false, $theme: null) {
@include block($block-name) {
border-color: $color-grey-50;

@include modifier(info) {
border-color: $color-primary-50;

Expand Down Expand Up @@ -45,6 +47,8 @@

@include sui-class($rtl: false, $theme: dark) {
@include block($block-name) {
border-color: $color-base-black;

@include element(icon) {
color: $color-base-black;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/notification/stories/Notification.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,7 +246,7 @@ Notification.argTypes = {
control: {
type: "select",
labels: {
"": "Variation: Default",
"": "Variation: Neutral",
info: "Variation: Informative",
success: "Variation: Success",
warning: "Variation: Warning",
Expand Down
191 changes: 191 additions & 0 deletions packages/ui/notification/stories/images/inline-variation-neutral.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
26 changes: 13 additions & 13 deletions packages/ui/notification/stories/tabs/TabUsage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Section, Row, Col } from "@wpmudev/sui-docs"

import InlineAnatomy from "../images/inline-anatomy.svg"
import InlineVariationNeutral from "../images/inline-variation-neutral.svg"
import InlineVariationInformative from "../images/inline-variation-informative.svg"
import InlineVariationSuccess from "../images/inline-variation-success.svg"
import InlineVariationWarning from "../images/inline-variation-warning.svg"
Expand All @@ -15,19 +16,18 @@ import NotificationLocation from "../images/location.svg"

<Section title="1. Inline Notifications">
<p>
Inline notifications can be located near the item that requires attention or at the top of the main content.
Inline notifications notify users about the status of an action or system. They can be located near the item that requires attention or at the top of the main content.
</p>
<h2 style={{ paddingTop: 0 }}>Anatomy</h2>
<img src={InlineAnatomy} alt="Inline Notification Anatomy" />
<h2> Status Indicator </h2>
<p>
All notifications must include a status indication. Users will find it
useful to visually identify the type of notice.
All toast must include a status indication. Users will find it useful to visually identify the type of notice.
</p>

<h2 style={{ paddingTop: 15 }}> Content </h2>
<p>
Every notification has a title, which is optional, and a short description of the alert. The title and message must be distinct from one another in terms of linguistic weight. If necessary, a link can be added as well.
Every notification has a title, which is optional, and a short description of the alert. The title and message must be distinct from one another in terms of linguistic weight.
</p>

<h2 style={{ paddingTop: 15 }}> Action </h2>
Expand All @@ -37,31 +37,31 @@ import NotificationLocation from "../images/location.svg"

<h2 style={{ paddingTop: 15 }}> Dismiss </h2>
<p>
A dismiss icon is an optional component for notifications that close the
notification with direct action.
A dismiss icon is an optional component for notifications that close the notification with direct action.
</p>


<h2 style={{ paddingTop: 15 }}>Variations</h2>
<h3>1. Informative</h3>
<h3>1. Neutral</h3>
<img src={InlineVariationNeutral} alt="Notification Inline Neutral" />

<h3>2. Informative</h3>
<img src={InlineVariationInformative} alt="Notification Inline Informative" />

<h3>2. Success</h3>
<h3>3. Success</h3>
<img src={InlineVariationSuccess} alt="Notification Inline Success" />

<h3>2. Warning</h3>
<h3>4. Warning</h3>
<img src={InlineVariationWarning} alt="Notification Inline Warning" />

<h3>2. Error</h3>
<h3>5. Error</h3>
<img src={InlineVariationError} alt="Notification Inline Error" />

</Section>

<Section title="2. Toast Notifications">
<p>
Toast is a non-intrusive modal to display low-attention notifications that
floats on the top of the screen. Primarily toast is used for confirming task
receipt and completion.
Toast is a non-intrusive modal to display low-attention notifications that floats on the top of the screen. Primarily toast is used for confirming task receipt and completion.
</p>
<h2 style={{ marginTop: 0 }}>Anatomy</h2>
<img src={ToastAnatomy} alt="Toast Anatomy" />
Expand Down