feat(page): support for context selector in sidebar (#10686)

* feat(page): support for context selector in sidebar * chore(page): rename demo files * chore(buttons): fix jumplinks/tabs button usage * chore(build): bump core to latest * chore(build): add yarn.lock * chore(build): update snaps * chore(build): rebase and rebuild
patternfly · Jul 3, 2024 · b85fb19 · b85fb19
1 parent 6aa9964
commit b85fb19
Show file tree

Hide file tree

Showing 14 changed files with 414 additions and 11,288 deletions.
diff --git a/packages/react-core/package.json b/packages/react-core/package.json
@@ -55,7 +55,7 @@
     "tslib": "^2.6.2"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.166",
+    "@patternfly/patternfly": "6.0.0-alpha.180",
     "case-anything": "^2.1.13",
     "css": "^3.0.0",
     "fs-extra": "^11.2.0"

diff --git a/packages/react-core/src/components/JumpLinks/JumpLinks.tsx b/packages/react-core/src/components/JumpLinks/JumpLinks.tsx
@@ -249,11 +249,13 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
                 onClick={() => setIsExpanded(!isExpanded)}
                 aria-label={toggleAriaLabel}
                 aria-expanded={isExpanded}
+                icon={
+                  <span className={styles.jumpLinksToggleIcon}>
+                    <AngleRightIcon />
+                  </span>
+                }
               >
-                <span className={styles.jumpLinksToggleIcon}>
-                  <AngleRightIcon />
-                </span>
-                {label && <span className={css(styles.jumpLinksToggleText)}> {label} </span>}
+                {label && label}
               </Button>
             </div>
           )}

diff --git a/packages/react-core/src/components/JumpLinks/__tests__/__snapshots__/JumpLinks.test.tsx.snap b/packages/react-core/src/components/JumpLinks/__tests__/__snapshots__/JumpLinks.test.tsx.snap
@@ -26,7 +26,7 @@ exports[`expandable vertical with subsection 1`] = `
             type="button"
           >
             <span
-              class="pf-v6-c-button__text"
+              class="pf-v6-c-button__icon pf-m-start"
             >
               <span
                 class="pf-v6-c-jump-links__toggle-icon"
@@ -45,11 +45,11 @@ exports[`expandable vertical with subsection 1`] = `
                   />
                 </svg>
               </span>
-              <span
-                class="pf-v6-c-jump-links__toggle-text"
-              >
-                 Jump to section 
-              </span>
+            </span>
+            <span
+              class="pf-v6-c-button__text"
+            >
+              Jump to section
             </span>
           </button>
         </div>

diff --git a/packages/react-core/src/components/Page/PageSidebarBody.tsx b/packages/react-core/src/components/Page/PageSidebarBody.tsx
@@ -11,13 +11,16 @@ export interface PageSidebarBodyProps extends React.HTMLProps<HTMLDivElement> {
   usePageInsets?: boolean;
   /** Flag indicating that the page sidebar body should fill the available vertical space. */
   isFilled?: boolean;
+  /** Flag indicating that the page sidebar body is for a context selector/perspective switcher */
+  isContextSelector?: boolean;
 }
 
 export const PageSidebarBody: React.FunctionComponent<PageSidebarBodyProps> = ({
   children,
   className,
   usePageInsets,
   isFilled,
+  isContextSelector,
   ...props
 }: PageSidebarBodyProps) => (
   <div
@@ -26,6 +29,7 @@ export const PageSidebarBody: React.FunctionComponent<PageSidebarBodyProps> = ({
       usePageInsets && styles.modifiers.pageInsets,
       isFilled === false && styles.modifiers.noFill,
       isFilled === true && styles.modifiers.fill,
+      isContextSelector === true && styles.modifiers.contextSelector,
       className
     )}
     {...props}

diff --git a/packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx b/packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx
@@ -55,10 +55,13 @@ export const PageMultipleSidebarBody: React.FunctionComponent = () => {
 
   const sidebar = (
     <PageSidebar isSidebarOpen={isSidebarOpen} id="multiple-sidebar-body-sidebar">
-      <PageSidebarBody usePageInsets>First sidebar body (with insets)</PageSidebarBody>
-      <PageSidebarBody isFilled={true}>Second sidebar body (with fill)</PageSidebarBody>
+      <PageSidebarBody isContextSelector>
+        First sidebar body (for a context selector/perspective switcher)
+      </PageSidebarBody>
+      <PageSidebarBody usePageInsets>Second sidebar body (with insets)</PageSidebarBody>
+      <PageSidebarBody isFilled={true}>Third sidebar body (with fill)</PageSidebarBody>
       <PageSidebarBody isFilled={false} usePageInsets>
-        Third sidebar body (with insets and no fill)
+        Fourth sidebar body (with insets and no fill)
       </PageSidebarBody>
     </PageSidebar>
   );

diff --git a/packages/react-core/src/components/Tabs/Tabs.tsx b/packages/react-core/src/components/Tabs/Tabs.tsx
@@ -521,15 +521,13 @@ class Tabs extends React.Component<TabsProps, TabsState> {
                       aria-expanded={isExpandedLocal}
                       id={`${randomId}-button`}
                       aria-labelledby={`${randomId}-text ${randomId}-button`}
-                    >
-                      <span className={css(styles.tabsToggleIcon)}>
-                        <AngleRightIcon arian-hidden="true" />
-                      </span>
-                      {toggleText && (
-                        <span className={css(styles.tabsToggleText)} id={`${randomId}-text`}>
-                          {toggleText}
+                      icon={
+                        <span className={css(styles.tabsToggleIcon)}>
+                          <AngleRightIcon />
                         </span>
-                      )}
+                      }
+                    >
+                      {toggleText && <span id={`${randomId}-text`}>{toggleText}</span>}
                     </Button>
                   </div>
                 </div>

diff --git a/packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap b/packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap
@@ -417,14 +417,13 @@ exports[`should render expandable vertical tabs 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__text"
+            class="pf-v6-c-button__icon pf-m-start"
           >
             <span
               class="pf-v6-c-tabs__toggle-icon"
             >
               <svg
                 aria-hidden="true"
-                arian-hidden="true"
                 class="pf-v6-svg"
                 fill="currentColor"
                 height="1em"
@@ -437,8 +436,11 @@ exports[`should render expandable vertical tabs 1`] = `
                 />
               </svg>
             </span>
+          </span>
+          <span
+            class="pf-v6-c-button__text"
+          >
             <span
-              class="pf-v6-c-tabs__toggle-text"
               id="generated-id-text"
             >
               toggle

diff --git a/packages/react-core/src/demos/Page.md b/packages/react-core/src/demos/Page.md
@@ -41,3 +41,9 @@ This demonstrates a variety of navigation patterns in the context of a full page
 ```ts file='./examples/Page/PageStickySectionBreadcrumb.tsx' isFullscreen
 
 ```
+
+### Context selector/perspective switcher in sidebar
+
+```ts file='./examples/Page/PageContextSelector.tsx' isFullscreen
+
+```