@patternfly/documentation-framework 6.0.0-alpha.56 → 6.0.0-alpha.58

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.58 (2024-07-11)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
+# 6.0.0-alpha.57 (2024-07-10)
+
+
+### Bug Fixes
+
+* clean up community and trainging card css ([#4127](https://github.com/patternfly/patternfly-org/issues/4127)) ([eb9a231](https://github.com/patternfly/patternfly-org/commit/eb9a23103cb6e54f38e2eae5056f2a53cd4a430e))
+
+
+
+
+
 # 6.0.0-alpha.56 (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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "6.0.0-alpha.56",
+  "version": "6.0.0-alpha.58",
   "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.45",
+    "@patternfly/ast-helpers": "^1.4.0-alpha.47",
     "@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": "7e6104f39c675108c08e5461d9cb570cff7d894d"
+  "gitHead": "4f9777453769c49e169610d97596bb1714689a54"
 }

package/templates/mdx.css

@@ -1,3 +1,7 @@
+p.pf-v6-c-content--p.ws-p {
+  margin: 0;
+}
+
 .ws-code {
   display: inline-block;
   background-color: var(--pf-t--global--background--color--secondary--default);
@@ -8,6 +12,10 @@
   font-family: var(--pf-t--global--font--family--mono);
 }
 
+.ws-content-table > .ws-table {
+  margin-bottom: var(--pf-t--global--spacer--md);
+}
+
 .ws-image {
   text-align: center;
 }

package/templates/mdx.js

@@ -91,7 +91,7 @@ const MDXChildTemplate = ({
       {toc.length > 1 && (
         <TableOfContents items={toc} />
       )}
-      <Stack hasGutter={isComponentCodeDocs} style={{...(source !== 'landing-pages' && {maxWidth: "825px"})}}>
+      <Stack hasGutter style={{...(source !== 'landing-pages' && {maxWidth: "825px"})}}>
         {InlineAlerts}
           <Component />
           {functionDocumentation.length > 0 && (