docs (notifications): usage and style guidance for Callout (#4218)

* docs (notifications): usage and style guidance for Callout * docs (notifications): usage and style guidance for Callout - Status image added * docs (notifications): anatomy section updated * docs (notifications): corrections * docs (notifications): anatomy image update * docs (notifications): minor grammatical corrections --------- Co-authored-by: Nikhil Tomar <[email protected]> Co-authored-by: Anna Gonzales <[email protected]> Co-authored-by: Alison Joseph <[email protected]>
carbon-design-system · Nov 11, 2024 · 8911162 · 8911162
1 parent 195364a
commit 8911162
Show file tree

Hide file tree

Showing 7 changed files with 238 additions and 50 deletions.
diff --git a/src/pages/components/notification/images/1_notification_status_1120.png b/src/pages/components/notification/images/1_notification_status_1120.png
diff --git a/src/pages/components/notification/images/notification-style-callout.png b/src/pages/components/notification/images/notification-style-callout.png
diff --git a/src/pages/components/notification/images/notification-usage-anatomy.png b/src/pages/components/notification/images/notification-usage-anatomy.png
diff --git a/src/pages/components/notification/images/notification-usage-calloutplacement.png b/src/pages/components/notification/images/notification-usage-calloutplacement.png
diff --git a/src/pages/components/notification/images/notification-usage-microlayouts.png b/src/pages/components/notification/images/notification-usage-microlayouts.png
diff --git a/src/pages/components/notification/style.mdx b/src/pages/components/notification/style.mdx
@@ -67,7 +67,7 @@ capitalized. Notification titles should be concise and to the point.
 
 ## Structure
 
-### Toast notification
+### Toast
 
 | Element      | Property                 | px / rem | Spacing token |
 | ------------ | ------------------------ | -------- | ------------- |
@@ -91,7 +91,7 @@ capitalized. Notification titles should be concise and to the point.
   Structure and spacing measurements for a toast notification | px / rem
 </Caption>
 
-### Inline notification
+### Inline
 
 The width of an _inline notification_ will vary based on content or layout.
 
@@ -114,3 +114,23 @@ The width of an _inline notification_ will vary based on content or layout.
 <Caption>
   Structure and spacing measurements for an inline notification | px / rem
 </Caption>
+
+### Callout
+
+The width of a _callout_ will vary based on content or layout.
+
+| Element      | Property                    | px / rem  | Spacing token |
+| ------------ | --------------------------- | --------- | ------------- |
+| Callout      | min-height                  | 48 / 3    | `$spacing-09` |
+|              | border-left                 | 3px       | –             |
+| Details      | margin-left, margin-right   | 16 / 1    | `$spacing-05` |
+| Text-wrapper | padding-top, padding-bottom | 12 / 0.75 | `$spacing-04` |
+| Icon         | margin-right                | 16 / 1    | `$spacing-05` |
+
+<div className="image--fixed">
+
+![Structure and spacing for a callout | px / rem ](images/notification-style-callout.png)
+
+</div>
+
+<Caption>Structure and spacing for a callout | px / rem</Caption>