From 0cc8daf36edfd0b4b6413f4b16c2a21b1167d9a8 Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Tue, 25 Jun 2024 15:44:15 -0400 Subject: [PATCH 1/5] chore(styles): Remove custom styles for the css vars table --- packages/documentation-framework/app.js | 1 - .../components/cssVariables/cssVariables.css | 15 -------- .../components/cssVariables/cssVariables.js | 37 +++++++------------ packages/documentation-site/package.json | 2 +- 4 files changed, 14 insertions(+), 41 deletions(-) delete mode 100644 packages/documentation-framework/components/cssVariables/cssVariables.css diff --git a/packages/documentation-framework/app.js b/packages/documentation-framework/app.js index 0f5e893599..0445626871 100644 --- a/packages/documentation-framework/app.js +++ b/packages/documentation-framework/app.js @@ -7,7 +7,6 @@ import { MDXTemplate } from '@patternfly/documentation-framework/templates/mdx'; import { routes, groupedRoutes, fullscreenRoutes, getAsyncComponent } from './routes'; import { trackEvent } from './helpers'; import './components/autoLinkHeader/autoLinkHeader.css'; -import './components/cssVariables/cssVariables.css'; import './components/tableOfContents/tableOfContents.css'; import './components/example/example.css'; import './components/footer/footer.css'; diff --git a/packages/documentation-framework/components/cssVariables/cssVariables.css b/packages/documentation-framework/components/cssVariables/cssVariables.css deleted file mode 100644 index 0d082efbe3..0000000000 --- a/packages/documentation-framework/components/cssVariables/cssVariables.css +++ /dev/null @@ -1,15 +0,0 @@ -.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; */ -} - -.ws-css-property { - padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--md); -} diff --git a/packages/documentation-framework/components/cssVariables/cssVariables.js b/packages/documentation-framework/components/cssVariables/cssVariables.js index 143ee6c0b1..369452a2e9 100644 --- a/packages/documentation-framework/components/cssVariables/cssVariables.js +++ b/packages/documentation-framework/components/cssVariables/cssVariables.js @@ -1,5 +1,5 @@ import React from "react"; -import { debounce } from "@patternfly/react-core"; +import { Icon, List, ListItem, debounce } from "@patternfly/react-core"; import { Table, Thead, @@ -10,33 +10,23 @@ 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 CircleIcon from "@patternfly/react-icons/dist/esm/icons/circle-icon"; import { CSSSearch } from './cssSearch'; const isColorRegex = /^(#|rgb)/; const mappingAsList = (property, values) => ( -
-
- - {property} - -
- {values.map((entry, index) => ( -
+ {property} + {values.map((entry) => ( + } > - - - {entry} - -
+ {entry} + ))} -
+ ); const flattenList = files => { @@ -110,10 +100,9 @@ export class CSSVariables extends React.Component { key={`${rowKey}_2`} className="pf-v6-l-flex pf-m-column pf-m-align-self-center" > - + + + )}
Date: Mon, 8 Jul 2024 16:49:32 -0400 Subject: [PATCH 2/5] revert back to using CSS for creating the color samples --- packages/documentation-framework/app.js | 1 + .../components/cssVariables/cssVariables.css | 13 +++++++++++++ .../components/cssVariables/cssVariables.js | 9 +++------ packages/documentation-site/package.json | 2 +- 4 files changed, 18 insertions(+), 7 deletions(-) create mode 100644 packages/documentation-framework/components/cssVariables/cssVariables.css diff --git a/packages/documentation-framework/app.js b/packages/documentation-framework/app.js index 0445626871..0f5e893599 100644 --- a/packages/documentation-framework/app.js +++ b/packages/documentation-framework/app.js @@ -7,6 +7,7 @@ import { MDXTemplate } from '@patternfly/documentation-framework/templates/mdx'; import { routes, groupedRoutes, fullscreenRoutes, getAsyncComponent } from './routes'; import { trackEvent } from './helpers'; import './components/autoLinkHeader/autoLinkHeader.css'; +import './components/cssVariables/cssVariables.css'; import './components/tableOfContents/tableOfContents.css'; import './components/example/example.css'; import './components/footer/footer.css'; diff --git a/packages/documentation-framework/components/cssVariables/cssVariables.css b/packages/documentation-framework/components/cssVariables/cssVariables.css new file mode 100644 index 0000000000..67ea3872dd --- /dev/null +++ b/packages/documentation-framework/components/cssVariables/cssVariables.css @@ -0,0 +1,13 @@ + +.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); +} + +.rotate-90-deg { + transform: rotate(90deg); +} diff --git a/packages/documentation-framework/components/cssVariables/cssVariables.js b/packages/documentation-framework/components/cssVariables/cssVariables.js index 369452a2e9..69507667b0 100644 --- a/packages/documentation-framework/components/cssVariables/cssVariables.js +++ b/packages/documentation-framework/components/cssVariables/cssVariables.js @@ -1,5 +1,5 @@ import React from "react"; -import { Icon, List, ListItem, debounce } from "@patternfly/react-core"; +import { List, ListItem, debounce } from "@patternfly/react-core"; import { Table, Thead, @@ -11,7 +11,6 @@ import { import { AutoLinkHeader } from "../autoLinkHeader/autoLinkHeader"; import * as tokensModule from "@patternfly/react-tokens/dist/esm/componentIndex"; import LevelUpAltIcon from "@patternfly/react-icons/dist/esm/icons/level-up-alt-icon"; -import CircleIcon from "@patternfly/react-icons/dist/esm/icons/circle-icon"; import { CSSSearch } from './cssSearch'; const isColorRegex = /^(#|rgb)/; @@ -21,7 +20,7 @@ const mappingAsList = (property, values) => ( {property} {values.map((entry) => ( } + icon={} > {entry} @@ -100,9 +99,7 @@ export class CSSVariables extends React.Component { key={`${rowKey}_2`} className="pf-v6-l-flex pf-m-column pf-m-align-self-center" > - - - +
)}
Date: Tue, 9 Jul 2024 12:28:15 -0400 Subject: [PATCH 3/5] fix(cssVariables): Only show color sample for color vars --- .../components/cssVariables/cssVariables.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/documentation-framework/components/cssVariables/cssVariables.js b/packages/documentation-framework/components/cssVariables/cssVariables.js index 69507667b0..b40af2130a 100644 --- a/packages/documentation-framework/components/cssVariables/cssVariables.js +++ b/packages/documentation-framework/components/cssVariables/cssVariables.js @@ -86,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, @@ -94,20 +95,20 @@ export class CSSVariables extends React.Component { key={`${rowKey}_1`} className="pf-v6-l-flex pf-m-space-items-sm" > - {isColorRegex.test(value) && ( + {isColor ? (
- +
- )} + ) :
{value} -
+
} ]; From e525c54c13e3c87007beea019749a575b3ac9fb7 Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Wed, 10 Jul 2024 14:31:49 -0400 Subject: [PATCH 4/5] chore(deps): Bump docs framework version --- packages/documentation-site/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation-site/package.json b/packages/documentation-site/package.json index 06ae87ed3f..05a456dd61 100644 --- a/packages/documentation-site/package.json +++ b/packages/documentation-site/package.json @@ -17,7 +17,7 @@ "screenshots": "pf-docs-framework screenshots" }, "dependencies": { - "@patternfly/documentation-framework": "6.0.0-alpha.55", + "@patternfly/documentation-framework": "6.0.0-alpha.57", "@patternfly/react-catalog-view-extension": "6.0.0-alpha.4", "@patternfly/react-console": "6.0.0-alpha.3", "@patternfly/react-docs": "7.0.0-alpha.84", From c49747e1b55efca7567b525244b4ccb001d9c38f Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Wed, 10 Jul 2024 14:47:42 -0400 Subject: [PATCH 5/5] fix(cssVariables): Add hex color values back with light theme note --- .../components/cssVariables/cssVariables.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/documentation-framework/components/cssVariables/cssVariables.js b/packages/documentation-framework/components/cssVariables/cssVariables.js index b40af2130a..85af8b7d77 100644 --- a/packages/documentation-framework/components/cssVariables/cssVariables.js +++ b/packages/documentation-framework/components/cssVariables/cssVariables.js @@ -95,20 +95,20 @@ export class CSSVariables extends React.Component { key={`${rowKey}_1`} className="pf-v6-l-flex pf-m-space-items-sm" > - {isColor ? ( + {isColor && (
- ) : + )}
- {value} -
} + {isColor && '(In light theme)'} {value} + ];