Merge pull request #398 from omnifed/397-notification-touch-up

397 notification touch up
omnifed · Aug 23, 2024 · 02f723e · 02f723e
2 parents 9a605c3 + d4c795c
commit 02f723e
Show file tree

Hide file tree

Showing 17 changed files with 544 additions and 169 deletions.
diff --git a/.github/ISSUE_TEMPLATE/feature.yml b/.github/ISSUE_TEMPLATE/feature.yml
@@ -1,7 +1,7 @@
 name: Feature request 💄
 description: Suggest a new idea for one of the packages.
 labels: ['enhancement', 'needs triage']
-title: '[Feature?]: '
+title: '[Feat?]: '
 body:
   - type: markdown
     attributes:

diff --git a/docs/app/components/MatchSideNavItem.tsx b/docs/app/components/MatchSideNavItem.tsx
@@ -17,7 +17,7 @@ export default function MatchSideNavItem(props: HeadingItem | LinkItem) {
       return (
         <p
           className={css({
-            color: 'page.text.100',
+            color: 'page.text.initial',
             textStyle: 'h6',
             textTransform: 'uppercase',
           })}

diff --git a/docs/app/components/SideNav.tsx b/docs/app/components/SideNav.tsx
@@ -43,12 +43,12 @@ export default memo(function SideNav(props: PropsWithChildren<SideNavProps>) {
           w: 'full',
         })}
       >
-        {props.navList.map((item) => (
+        {props.navList.map((item, idx) => (
           <li
             className={css({
               w: 'full',
             })}
-            key={item.id}
+            key={`${idx}:${item.label.toLowerCase()}`}
           >
             <MatchSideNavItem {...item} />
           </li>

diff --git a/docs/app/data/categories.json b/docs/app/data/categories.json
@@ -7,7 +7,7 @@
   "communication": {
     "name": "Communication",
     "description": "Communication components provide useful information.",
-    "items": ["Tag", "Tooltip", "Notification"]
+    "items": ["Notification", "Tag", "Tooltip"]
   },
   "containment": {
     "name": "Containment",

diff --git a/docs/app/preset/side-nav.json b/docs/app/preset/side-nav.json
@@ -20,14 +20,14 @@
     "id": "2:a",
     "label": "Theme",
     "route": "/preset/theme",
-    "tag": "new",
+    "tag": "",
     "type": "route"
   },
   {
     "id": "2:b",
     "label": "Colors",
     "route": "/preset/colors",
-    "tag": "new",
+    "tag": "next",
     "type": "route"
   },
   {
@@ -41,7 +41,7 @@
     "id": "2:d",
     "label": "Animation",
     "route": "/preset/animation",
-    "tag": "new",
+    "tag": "",
     "type": "route"
   },
   {

diff --git a/docs/app/react/notification/components/messages.data.json b/docs/app/react/notification/components/messages.data.json
@@ -15,7 +15,7 @@
     "palette": "warning",
     "id": "3",
     "heading": "Slow Network",
-    "description": "Your network is slow. Please check your connection."
+    "description": "Please check your connection."
   },
   {
     "palette": "danger",

diff --git a/docs/app/react/side-nav.json b/docs/app/react/side-nav.json
@@ -1,211 +1,205 @@
 [
   {
-    "id": "1",
     "label": "Overview",
     "type": "heading"
   },
   {
-    "id": "1:a",
     "label": "Getting Started",
     "route": "/react",
     "tag": "",
     "type": "route"
   },
   {
-    "id": "2",
-    "label": "Components",
+    "label": "Actions",
     "type": "heading"
   },
   {
-    "id": "2:a",
     "label": "Button",
     "route": "/react/button",
     "tag": "",
     "type": "route"
   },
   {
-    "id": "2:b",
     "label": "Icon Button",
     "route": "/react/icon-button",
     "tag": "",
     "type": "route"
   },
   {
-    "id": "2:c",
-    "label": "Label",
-    "route": "/react/label",
+    "label": "Communication",
+    "type": "heading"
+  },
+  {
+    "label": "Notification",
+    "route": "/react/notification",
+    "tag": "next",
+    "type": "route"
+  },
+  {
+    "label": "Tag",
+    "route": "/react/tags",
     "tag": "",
     "type": "route"
   },
   {
-    "id": "2:d",
-    "label": "Input",
-    "route": "/react/input",
+    "label": "Tooltip",
+    "route": "/react/tooltip",
     "tag": "",
     "type": "route"
   },
   {
-    "id": "2:e",
-    "label": "Field Message",
-    "route": "/react/field-message",
+    "label": "Containment",
+    "type": "heading"
+  },
+  {
+    "label": "Confirm Modal",
+    "route": "/react/confirm-modal",
     "tag": "",
     "type": "route"
   },
   {
-    "id": "2:f",
-    "label": "Nav Menu",
-    "route": "/react/nav-menu",
+    "label": "Prompt Modal",
+    "route": "/react/prompt-modal",
     "tag": "",
     "type": "route"
   },
   {
-    "id": "2:g",
-    "label": "Radio",
-    "route": "/react/radio",
+    "label": "Modal",
+    "route": "/react/modal",
+    "tag": "",
+    "type": "route"
+  },
+  {
+    "label": "Navigation",
+    "type": "heading"
+  },
+  {
+    "label": "Nav Menu",
+    "route": "/react/nav-menu",
     "tag": "",
     "type": "route"
   },
   {
-    "id": "2:h",
     "label": "Tabs",
     "route": "/react/tabs",
-    "tag": "new",
+    "tag": "",
     "type": "route"
   },
   {
-    "id": "2:i",
-    "label": "Tag",
-    "route": "/react/tags",
-    "tag": "",
+    "label": "Selection",
+    "type": "heading"
+  },
+  {
+    "label": "Drag & Drop",
+    "route": "/react/drag-n-drop",
+    "tag": "next",
     "type": "route"
   },
   {
-    "id": "2:j",
-    "label": "Textarea",
-    "route": "/react/textarea",
+    "label": "Radio",
+    "route": "/react/radio",
     "tag": "",
     "type": "route"
   },
   {
-    "id": "2:k",
     "label": "Toggle",
     "route": "/react/toggle",
     "tag": "",
     "type": "route"
   },
   {
-    "id": "2:l",
-    "label": "Tooltip",
-    "route": "/react/tooltip",
+    "label": "Forms",
+    "type": "heading"
+  },
+  {
+    "label": "Field Message",
+    "route": "/react/field-message",
     "tag": "",
     "type": "route"
   },
   {
-    "id": "2:m",
-    "label": "Confirm Modal",
-    "route": "/react/confirm-modal",
-    "tag": "new",
+    "label": "File Uploader",
+    "route": "/react/file-uploader",
+    "tag": "next",
     "type": "route"
   },
   {
-    "id": "2:n",
-    "label": "Prompt Modal",
-    "route": "/react/prompt-modal",
-    "tag": "new",
+    "label": "Input",
+    "route": "/react/input",
+    "tag": "",
     "type": "route"
   },
   {
-    "id": "2:o",
-    "label": "Modal",
-    "route": "/react/modal",
-    "tag": "new",
+    "label": "Label",
+    "route": "/react/label",
+    "tag": "",
     "type": "route"
   },
   {
-    "id": "2:p",
-    "label": "Notification",
-    "route": "/react/notification",
-    "tag": "next",
+    "label": "Textarea",
+    "route": "/react/textarea",
+    "tag": "",
     "type": "route"
   },
   {
-    "id": "2:q",
+    "label": "Rendering",
+    "type": "heading"
+  },
+  {
     "label": "Show",
     "route": "/react/show",
     "tag": "",
     "type": "route"
   },
   {
-    "id": "2:qr",
     "label": "Portal",
     "route": "/react/portal",
-    "tag": "new",
+    "tag": "",
     "type": "route"
   },
   {
-    "id": "2:r",
     "label": "Feature Flags",
     "route": "/react/feature-flags",
-    "tag": "new",
-    "type": "route"
-  },
-  {
-    "id": "2:s",
-    "label": "File Uploader",
-    "route": "/react/file-uploader",
-    "tag": "next",
-    "type": "route"
-  },
-  {
-    "id": "2:t",
-    "label": "Drag & Drop",
-    "route": "/react/drag-n-drop",
-    "tag": "next",
+    "tag": "",
     "type": "route"
   },
   {
-    "id": "3",
     "label": "Hooks",
     "type": "heading"
   },
   {
-    "id": "3:a",
     "label": "useModal",
     "route": "/react/use-modal",
-    "tag": "new",
+    "tag": "",
     "type": "route"
   },
   {
-    "id": "3:b",
     "label": "useTheme",
     "route": "/react/use-theme",
     "tag": "",
     "type": "route"
   },
   {
-    "id": "3:c",
     "label": "useThemeContext",
     "route": "/react/use-theme-context",
     "tag": "",
     "type": "route"
   },
   {
-    "id": "3:d",
     "label": "useToggle",
     "route": "/react/use-toggle",
     "tag": "",
     "type": "route"
   },
   {
-    "id": "4",
     "label": "Helpers",
     "type": "heading"
   },
   {
     "id": "4:a",
     "label": "trapFocus",
     "route": "/react/trap-focus",
-    "tag": "new",
+    "tag": "",
     "type": "route"
   }
 ]