@patternfly/documentation-framework 6.0.0-alpha.57 → 6.0.0-alpha.59

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 6.0.0-alpha.59 (2024-07-11)
+
+
+### Bug Fixes
+
+* css clean up - esp sidenavlayout.css ([#4129](https://github.com/patternfly/patternfly-org/issues/4129)) ([fc9d721](https://github.com/patternfly/patternfly-org/commit/fc9d721d9d4a1a14ab0bb2d66d1c68fb2d90ca7c))
+
+
+
+
+
+# 6.0.0-alpha.58 (2024-07-11)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
 # 6.0.0-alpha.57 (2024-07-10)
 
 

package/components/cssVariables/cssVariables.css

@@ -1,15 +1,13 @@
-.ws-color-box {
-  display: inline-block;
-  height: 18px;
-  width: 18px;
-/*   border: var(--pf-v6-global--BorderWidth--sm) solid var(--pf-v6-global--BorderColor--200); */
-/*   border-radius: var(--pf-v6-global--BorderRadius--lg); */
-}
 
-.ws-td-text {
-/*   font-size: var(--pf-v6-global--FontSize--sm) !important; */
+.circle {
+    height: 1em;
+    display: inline-block;
+    aspect-ratio: 1 / 1;
+    border-radius: 50%;
+    border: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--background--color--inverse--default);
+    box-shadow: var(--pf-t--global--box-shadow--sm);
 }
 
-.ws-css-property {
-  padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--md);
+.rotate-90-deg {
+    transform: rotate(90deg);
 }

package/components/cssVariables/cssVariables.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { debounce } from "@patternfly/react-core";
+import { List, ListItem, debounce } from "@patternfly/react-core";
 import {
   Table,
   Thead,
@@ -10,33 +10,22 @@ import {
 } from "@patternfly/react-table";
 import { AutoLinkHeader } from "../autoLinkHeader/autoLinkHeader";
 import * as tokensModule from "@patternfly/react-tokens/dist/esm/componentIndex";
-import global_spacer_md from "@patternfly/react-tokens/dist/esm/global_spacer_md";
 import LevelUpAltIcon from "@patternfly/react-icons/dist/esm/icons/level-up-alt-icon";
 import { CSSSearch } from './cssSearch';
 
 const isColorRegex = /^(#|rgb)/;
 
 const mappingAsList = (property, values) => (
-  <div>
-    <div className="ws-css-property">
-      <span>
-        {property}
-      </span>
-    </div>
-    {values.map((entry, index) => (
-      <div
-        key={index}
-        style={{
-          padding: `4px 0 4px calc(${global_spacer_md.value} * ${index + 3})`
-        }}
+  <List isPlain>
+    <ListItem>{property}</ListItem>
+    {values.map((entry) => (
+      <ListItem
+        icon={<LevelUpAltIcon className="rotate-90-deg" />}
       >
-        <LevelUpAltIcon style={{ transform: 'rotate(90deg)' }} />
-        <span style={{ paddingLeft: '16px' }}>
-          {entry}
-        </span>
-      </div>
+        {entry}
+      </ListItem>
     ))}
-  </div>
+  </List>
 );
 
 const flattenList = files => {
@@ -97,6 +86,7 @@ export class CSSVariables extends React.Component {
         (values && searchRE.test(JSON.stringify(values)));
       if (passes) {
         const rowKey = `${selector}_${property}`;
+        const isColor = isColorRegex.test(value);
         const cells = [
           ...this.props.hideSelectorColumn ? [] : [selector],
           property,
@@ -105,22 +95,19 @@ export class CSSVariables extends React.Component {
               key={`${rowKey}_1`}
               className="pf-v6-l-flex pf-m-space-items-sm"
             >
-              {isColorRegex.test(value) && (
+              {isColor && (
                 <div
                   key={`${rowKey}_2`}
                   className="pf-v6-l-flex pf-m-column pf-m-align-self-center"
                 >
-                  <span
-                    className="ws-color-box"
-                    style={{ backgroundColor: value }}
-                  />
+                  <span className="circle" style={{ backgroundColor: `var(${property})`}}/>
                 </div>
               )}
               <div
                 key={`${rowKey}_3`}
                 className="pf-v6-l-flex pf-m-column pf-m-align-self-center ws-td-text"
               >
-                {value}
+                {isColor && '(In light theme)'} {value}
               </div>
             </div>
           </div>

package/components/example/example.css

@@ -27,7 +27,7 @@
 .ws-preview__thumbnail-link::before,
 .ws-preview__thumbnail-link::after {
   position: absolute;
-  z-index: 500;
+  z-index: var(--pf-t--global--z-index--sm);
   transition: .2s;
   opacity: 0;
 }

package/components/tableOfContents/tableOfContents.css

@@ -19,6 +19,10 @@
   box-shadow: var(--pf-t--global--box-shadow--sm--bottom)
 }
 
+.ws-toc .pf-v6-c-jump-links__toggle {
+  background-color: var(--pf-t--global--background--color--secondary--default);
+}
+
 /* Mobile jumplinks */
 @media (max-width: 1450px) {
   .ws-toc.pf-m-expanded .pf-v6-c-jump-links__main {

package/layouts/sideNavLayout/sideNavLayout.css

@@ -8,43 +8,8 @@
   flex: 1;
 }
 
-.ws-switcher-divider {
-  padding: 0 var(--pf-t--global--spacer--md);
-}
-
-@media (min-width: 1200px) {
-  .ws-page-sidebar {
-    box-shadow: none !important;
-  }
-}
-
-.ws-page-sidebar > .pf-v6-c-page__sidebar-body {
-  padding-top: var(--pf-t--global--spacer--md);
-}
-
 /* Search */
 #algolia-autocomplete-listbox-0 {
   /* Fix search results overflowing page */
   min-width: 480px !important;
 }
-.ws-global-search.pf-v6-c-input-group {
-  /* remove white background on dark Masthead */
-  --pf-v6-c-input-group--BackgroundColor: none;
-}
-
-/* For tiny (200px) viewports */
-.ws-masthead .pf-v6-c-toolbar__item  {
-  min-width: 0;
-}
-
-.ws-masthead .pf-v6-c-switch {
-  align-items: center;
-/*   --pf-v6-c-switch__input--not-checked__label--Color: var(--pf-v6-global--Color--100); */
-/*   --pf-v6-c-switch__input--checked__label--Color: var(--pf-v6-global--Color--100); */
-}
-
-.ws-masthead .pf-v6-c-toggle-group {
-/*   --pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v6-global--palette--blue-400); */
-  --pf-v6-c-toggle-group__button--focus--BackgroundColor: transparent;
-  --pf-v6-c-toggle-group__button--hover--BackgroundColor: transparent;
-}

package/layouts/sideNavLayout/sideNavLayout.js

@@ -163,7 +163,7 @@ const HeaderTools = ({
                     </DropdownList>
                   </DropdownGroup>
                 )}
-                <Divider key="divider1" className="ws-switcher-divider"/>
+                <Divider key="divider1"/>
                 <DropdownGroup key="Alpha preview version" label="Alpha preview version">
                   <DropdownList>
                     <DropdownItem
@@ -177,7 +177,7 @@ const HeaderTools = ({
                     </DropdownItem>
                   </DropdownList>
                 </DropdownGroup>
-                <Divider key="divider2" className="ws-switcher-divider"/>
+                <Divider key="divider2"/>
                 <DropdownGroup key="Previous versions" label="Previous versions">
                   <DropdownList>
                     <DropdownItem
@@ -263,10 +263,7 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
   }, []);
 
   const SideBar = (
-    <PageSidebar
-      className="ws-page-sidebar"
-      theme="light"
-    >
+    <PageSidebar>
       <PageSidebarBody>
         <SideNav navItems={sideNavItems} groupedRoutes={groupedRoutes} />
       </PageSidebarBody>
@@ -274,7 +271,7 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
   );
 
   const masthead = (
-    <Masthead className="ws-masthead">
+    <Masthead>
       <MastheadToggle>
         <PageToggleButton variant="plain" aria-label="Global navigation">
           <BarsIcon />

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "6.0.0-alpha.57",
+  "version": "6.0.0-alpha.59",
   "author": "Red Hat",
   "license": "MIT",
   "private": false,
@@ -13,7 +13,7 @@
     "@babel/preset-env": "^7.24.3",
     "@babel/preset-react": "^7.24.1",
     "@mdx-js/util": "1.6.16",
-    "@patternfly/ast-helpers": "^1.4.0-alpha.46",
+    "@patternfly/ast-helpers": "^1.4.0-alpha.48",
     "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9",
     "autoprefixer": "9.8.6",
     "babel-loader": "^9.1.3",
@@ -80,5 +80,5 @@
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },
-  "gitHead": "260f73d6ab4c30235d51c241f2eee2cba7822415"
+  "gitHead": "96fb4d85450d4108a9197a11d7c15717a2c05a1b"
 }