RedHat-UX · zeroedin · Apr 7, 2025 · Jan 10, 2025 · Jan 20, 2025 · Jan 28, 2025
diff --git a/.changeset/bright-buckets-jam.md b/.changeset/bright-buckets-jam.md
@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-icon>`: corrected micron set to allow for a range from 8px to 12px
diff --git a/.changeset/perfect-llamas-matter.md b/.changeset/perfect-llamas-matter.md
@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-avatar>`: improved layout compatibility for plain variant avatars
diff --git a/.changeset/spotty-buckets-stand.md b/.changeset/spotty-buckets-stand.md
@@ -0,0 +1,56 @@
+---
+"@rhds/elements": minor
+---
+
+✨ Added `<rh-navigation-primary>`.
+
+The Primary navigation allows users to orient themselves and successfully move through web experiences. It is
+persistent on every page to ensure a consistent user experience across our systems of website
+
+```html
+  <rh-navigation-primary>
+    <rh-navigation-primary-item variant="dropdown" summary="AI">
+      AI dropdown content 
+    </rh-navigation-primary-item>
+
+    <rh-navigation-primary-item variant="dropdown" summary="Hybrid Cloud">
+      Hybrid Cloud dropdown content
+    </rh-navigation-primary-item>
+
+    <rh-navigation-primary-item variant="dropdown" summary="Products">
+      Products dropdown content
+    </rh-navigation-primary-item>
+
+    <rh-navigation-primary-item variant="dropdown" summary="Learn">
+      Learn dropdown content
+    </rh-navigation-primary-item>
+
+    <rh-navigation-primary-item variant="dropdown" summary="Partners">
+      Partners dropdown content
+    </rh-navigation-primary-item>
+
+    <rh-navigation-primary-item slot="links">
+      <a href="https://developers.redhat.com/">Developers</a>
+      </rh-navigation-primary-item>
+
+    <rh-navigation-primary-item slot="links">
+      <a href="https://docs.redhat.com/en">Docs</a>
+    </rh-navigation-primary-item>
+
+    <rh-navigation-primary-item slot="links">
+      <a href="https://access.redhat.com/support">Support</a>
+    </rh-navigation-primary-item>
+
+    <rh-navigation-primary-item slot="dropdowns" variant="dropdown" hide="sm" summary="Search">
+      Search dropdown content
+    </rh-navigation-primary-item>
+
+    <rh-navigation-primary-item slot="dropdowns" variant="dropdown" hide="sm" summary="For you">
+      For you dropdown content
+    </rh-navigation-primary-item>
+
+    <rh-navigation-primary-item slot="dropdowns" variant="dropdown" summary="My Red Hat">
+      My Red Hat dropdown content
+    </rh-navigation-primary-item>
+  </rh-navigation-primary>
+```
diff --git a/.pfe.config.json b/.pfe.config.json
@@ -5,7 +5,6 @@
   "aliases": {
     "rh-cta": "Call to action",
     "rh-stat": "Statistic",
-    "rh-navigation": "Navigation (primary)",
     "rh-navigation-primary": "Navigation (primary)",
     "rh-navigation-secondary": "Navigation (secondary)",
     "rh-subnav": "Subnavigation"

diff --git a/.stylelintrc.yml b/.stylelintrc.yml
@@ -67,6 +67,7 @@ rules:
     - true
     - allowed:
       - --rh-icon-size
+      - --rh-navigation-active-item-color
 
 overrides:
   - files:

diff --git a/docs/_data/relatedItems.yaml b/docs/_data/relatedItems.yaml
@@ -66,7 +66,7 @@ rh-jump-links:
  - rh-pagination
  - rh-progress-steps
  - rh-tabs
-rh-navigation: 
+rh-navigation-primary: 
  - rh-navigation-secondary
  - skip-navigation
  - rh-subnav

diff --git a/docs/_data/repoStatus.ts b/docs/_data/repoStatus.ts
@@ -312,11 +312,10 @@ export default [
     tagName: 'rh-navigation-primary',
     name: 'Navigation (primary)',
     type: 'element',
-    description: `The Primary navigation is a container of menus and utilities, it allows visitors to orient themselves and move through a website. It is persistent on every page to ensure a consistent user experience across websites.`,
     overallStatus: 'planned',
     libraries: {
       figma: 'planned',
-      rhds: 'planned',
+      rhds: 'ready',
       shared: 'planned',
       docs: 'planned',
     },

diff --git a/docs/styles/demo/dev-server.css b/docs/styles/demo/dev-server.css
@@ -32,7 +32,7 @@
     display: contents;
   }
 
-  #main {
+  #rhds-dev-server-main {
     display: block;
     position: relative;
     max-height: initial;

diff --git a/elements/rh-avatar/rh-avatar.css b/elements/rh-avatar/rh-avatar.css
@@ -50,7 +50,7 @@
 }
 
 :host([layout='block']) #container,
-#container.mobile {
+:host(:not([plain])) #container.mobile {
   text-align: center;
   place-items: center;
   gap: 0;

diff --git a/elements/rh-icon/rh-icon.css b/elements/rh-icon/rh-icon.css
@@ -20,5 +20,7 @@ svg {
 }
 
 .microns svg {
-  width: 12px;
+  min-width: 8px;
+  max-width: 12px;
+  width: var(--rh-icon-size, 12px);
 }
diff --git a/elements/rh-navigation-primary/README.md b/elements/rh-navigation-primary/README.md
@@ -0,0 +1,54 @@
+# Navigation Primary
+
+Primary navigation for top level site navigation.
+
+## Usage
+
+
+```html
+<rh-navigation-primary>
+  <rh-navigation-primary-item variant="dropdown">
+    <span slot="summary">Item 1</span>
+    Item 1 Content 
+  </rh-navigation-primary-item>
+
+  <rh-navigation-primary-item variant="dropdown">
+    <span slot="summary">Item 2</span>
+    Item 2 Content
+  </rh-navigation-primary-item>
+
+  <rh-navigation-primary-item variant="dropdown">
+    <span slot="summary">Item 3</span>
+    Item 3 Content
+  </rh-navigation-primary-item>
+
+  <rh-navigation-primary-item variant="dropdown">
+    <span slot="summary">Item 4</span>
+    Item 4 Content
+  </rh-navigation-primary-item>
+
+  <rh-navigation-primary-item variant="dropdown">
+    <span slot="summary">Item 5</span>
+    Item 5 Content
+  </rh-navigation-primary-item>
+
+  <rh-navigation-primary-item slot="links">Link 1</rh-navigation-primary-item>
+  <rh-navigation-primary-item slot="links">Link 2</rh-navigation-primary-item>
+  <rh-navigation-primary-item slot="links">Link 3</rh-navigation-primary-item>
+
+  <rh-navigation-primary-item slot="dropdowns" variant="dropdown">
+    <span slot="summary">Item 6</span>
+    Item 6 Content
+  </rh-navigation-primary-item>
+
+  <rh-navigation-primary-item slot="dropdowns" variant="dropdown">
+    <span slot="summary">Item 7</span>
+    Item 7 Content
+  </rh-navigation-primary-item>
+
+  <rh-navigation-primary-item slot="dropdowns" variant="dropdown">
+    <span slot="summary">Item 8</span>
+    Item 8 Content
+  </rh-navigation-primary-item>  
+</rh-navigation-primary>
+```
diff --git a/elements/rh-navigation-primary/context.ts b/elements/rh-navigation-primary/context.ts
@@ -0,0 +1,5 @@
+import { createContextWithRoot } from '@patternfly/pfe-core/functions/context.js';
+
+export const context = createContextWithRoot<boolean>(
+  Symbol('rh-navigation-primary-item-compact-context'),
+);