From 8a9c7abbaa9846c4ac27995e1f5f0034d9e4fc9c Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Wed, 27 Mar 2024 15:45:03 -0400 Subject: [PATCH 1/7] feat(Page,Drawer): core bump and updates --- packages/react-core/package.json | 2 +- .../src/components/Drawer/DrawerContent.tsx | 16 +- .../examples/DrawerSecondaryBackground.tsx | 5 +- .../react-core/src/components/Page/Page.tsx | 28 +- .../__snapshots__/Page.test.tsx.snap | 2378 +++++++++-------- packages/react-docs/package.json | 2 +- packages/react-icons/package.json | 2 +- packages/react-styles/package.json | 2 +- packages/react-tokens/package.json | 2 +- .../react-tokens/scripts/generateTokens.js | 5 + yarn.lock | 8 +- 11 files changed, 1258 insertions(+), 1192 deletions(-) diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 7e428e5ff66..ed8bb725188 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -55,7 +55,7 @@ "tslib": "^2.5.0" }, "devDependencies": { - "@patternfly/patternfly": "6.0.0-alpha.100", + "@patternfly/patternfly": "6.0.0-alpha.107", "@rollup/plugin-commonjs": "^25.0.0", "@rollup/plugin-node-resolve": "^15.0.2", "@rollup/plugin-replace": "^5.0.2", diff --git a/packages/react-core/src/components/Drawer/DrawerContent.tsx b/packages/react-core/src/components/Drawer/DrawerContent.tsx index 9ab2a326459..4dda7972892 100644 --- a/packages/react-core/src/components/Drawer/DrawerContent.tsx +++ b/packages/react-core/src/components/Drawer/DrawerContent.tsx @@ -2,7 +2,13 @@ import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/Drawer/drawer'; import { css } from '@patternfly/react-styles'; import { DrawerMain } from './DrawerMain'; -import { DrawerColorVariant, DrawerContext } from './Drawer'; +import { DrawerContext } from './Drawer'; + +export enum DrawerContentColorVariant { + default = 'default', + primary = 'primary', + secondary = 'secondary' +} export interface DrawerContentProps extends React.HTMLProps { /** Additional classes added to the Drawer. */ @@ -12,14 +18,14 @@ export interface DrawerContentProps extends React.HTMLProps { /** Content rendered in the drawer panel. */ panelContent: React.ReactNode; /** Color variant of the background of the drawer panel */ - colorVariant?: DrawerColorVariant | 'no-background' | 'default' | 'secondary'; + colorVariant?: DrawerContentColorVariant | 'default' | 'primary' | 'secondary'; } export const DrawerContent: React.FunctionComponent = ({ className, children, panelContent, - colorVariant = DrawerColorVariant.default, + colorVariant = DrawerContentColorVariant.default, ...props }: DrawerContentProps) => { const { drawerContentRef } = React.useContext(DrawerContext); @@ -29,8 +35,8 @@ export const DrawerContent: React.FunctionComponent = ({
{ @@ -96,7 +97,7 @@ export const DrawerSecondaryBackground: React.FunctionComponent = () => { drawer-section {drawerContent} diff --git a/packages/react-core/src/components/Page/Page.tsx b/packages/react-core/src/components/Page/Page.tsx index 8ca5c79bb04..2e1c75aa142 100644 --- a/packages/react-core/src/components/Page/Page.tsx +++ b/packages/react-core/src/components/Page/Page.tsx @@ -295,19 +295,21 @@ class Page extends React.Component { const Component: keyof JSX.IntrinsicElements = mainComponent; const main = ( - - {group} - {!isHorizontalSubnavGrouped && nav} - {!isBreadcrumbGrouped && crumb} - {children} - +
+ + {group} + {!isHorizontalSubnavGrouped && nav} + {!isBreadcrumbGrouped && crumb} + {children} + +
); const panelContent = {notificationDrawer}; diff --git a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap index c839a209aa1..f23341e3d6c 100644 --- a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap +++ b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap @@ -32,16 +32,20 @@ exports[`Page Check dark page against snapshot 1`] = ` Navigation
-
-
- Section with default background -
-
+
+ Section with default background +
+ + `; @@ -77,16 +81,20 @@ exports[`Page Check page horizontal layout example against snapshot 1`] = ` class="pf-v6-c-page__sidebar pf-m-expanded" id="page-sidebar" /> -
-
- Section with default background -
-
+
+ Section with default background +
+ + `; @@ -122,274 +130,129 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax class="pf-v6-c-page__sidebar pf-m-expanded" id="page-sidebar" /> -
-
- -
-
- Section with default background -
-
- - -`; - -exports[`Page Check page to verify breadcrumb is created 1`] = ` - -
-
-
- - Logo - -
-
- Navigation -
- PageHeaderTools | Avatar -
-
-
-
- -
-
- Section with default background -
-
+ + + + Section Landing + + + + + +
+ Section with default background +
+ +
`; -exports[`Page Check page to verify grouped nav and breadcrumb - new components syntax 1`] = ` +exports[`Page Check page to verify breadcrumb is created 1`] = `
-
-
@@ -531,96 +394,18 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
-
- -
-
-
- Section with default background -
-
+ Section with default background + + +
`; -exports[`Page Check page to verify grouped nav and breadcrumb - old / props syntax 1`] = ` +exports[`Page Check page to verify grouped nav and breadcrumb - new components syntax 1`] = `
-
-
- -
-
-
+
+ +
+
+
+ Section with default background
-
-
- Section with default background -
- + + `; -exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] = ` +exports[`Page Check page to verify grouped nav and breadcrumb - old / props syntax 1`] = `
-
-
- +
+
+
- - Server - - - - -
-
- Section with default background -
- +
    +
  1. + Section Home +
    2. +
  2. + + + + + Section Title + +
    3. +
  3. + + + + + Section Title + +
    4. +
  4. + + + + + Section Landing + +
    5. +
+ + + + +
+ Section with default background +
+ + `; -exports[`Page Check page to verify skip to content points to main content region 1`] = ` +exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] = `
-
- - Skip to Content - -
@@ -1027,178 +913,124 @@ exports[`Page Check page to verify skip to content points to main content region class="pf-v6-c-page__sidebar pf-m-expanded" id="page-sidebar" /> -
-
- -
-
- Section with default background -
-
-
- -`; - -exports[`Page Check page vertical layout example against snapshot 1`] = ` - -
-
-
- + Network Services + + +
  • + + Server + +
    • + + +
    +
    - Logo - -
    - PageHeaderTools | Avatar - -
    -
    - Navigation -
    + Section with default background + +
    -
    -
    - Section with default background -
    -
    `; -exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrumb syntax 1`] = ` +exports[`Page Check page to verify skip to content points to main content region 1`] = `
    +
    + + Skip to Content + +
    @@ -1223,125 +1055,130 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum class="pf-v6-c-page__sidebar pf-m-expanded" id="page-sidebar" /> -
    -
    - -
    -
    - Section with default background -
    -
    + + + + + Section Landing + + + + + +
    + Section with default background +
    + +
    `; -exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = ` +exports[`Page Check page vertical layout example against snapshot 1`] = `
    -
    - Navigation -
    PageHeaderTools | Avatar
    -
    -
    - -
    -
    - Section with default background -
    -
    -
    -     -`; - -exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBreadcrumb syntax 1`] = ` - -
    -
    - - Logo - -
    -
    Navigation
    - PageHeaderTools | Avatar -
    +
    -
    -
    - -
    -
    - Section with default background -
    -
    + Section with default background + + +
    `; -exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = ` +exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrumb syntax 1`] = `
    -
    -
    - +
    +
    + Section with default background +
    +
    +
    + +     +`; + +exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = ` + +
    +
    +
    + + Logo + +
    +
    + Navigation +
    + PageHeaderTools | Avatar +
    +
    +
    +
    +
    + -
    -
    + + + + Section Landing + + + + +
    +
    + Section with default background +
    +
    +
    +
    + +`; + +exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBreadcrumb syntax 1`] = ` + +
    +
    +
    - Section with default background - - + + Logo + +
    +
    + Navigation +
    + PageHeaderTools | Avatar +
    +
    +
    +
    +
    + +
    +
    + Section with default background +
    +
    +
    +
    + +`; + +exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = ` + +
    +
    +
    + + Logo + +
    +
    + Navigation +
    + PageHeaderTools | Avatar +
    +
    +
    +
    +
    + +
    +
    + Section with default background +
    +
    +
    `; diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json index a0ee2fc4d8d..8f13480e65a 100644 --- a/packages/react-docs/package.json +++ b/packages/react-docs/package.json @@ -23,7 +23,7 @@ "test:a11y": "patternfly-a11y --config patternfly-a11y.config" }, "dependencies": { - "@patternfly/patternfly": "6.0.0-alpha.100", + "@patternfly/patternfly": "6.0.0-alpha.107", "@patternfly/react-charts": "^8.0.0-alpha.17", "@patternfly/react-code-editor": "^6.0.0-alpha.47", "@patternfly/react-core": "^6.0.0-alpha.47", diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json index c4b7487f91b..528aa895aea 100644 --- a/packages/react-icons/package.json +++ b/packages/react-icons/package.json @@ -33,7 +33,7 @@ "@fortawesome/free-brands-svg-icons": "^5.14.0", "@fortawesome/free-regular-svg-icons": "^5.14.0", "@fortawesome/free-solid-svg-icons": "^5.14.0", - "@patternfly/patternfly": "6.0.0-alpha.100", + "@patternfly/patternfly": "6.0.0-alpha.107", "fs-extra": "^11.1.1", "glob": "^7.1.2", "rimraf": "^2.6.2", diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json index 46196d6604b..538cf7e1b4a 100644 --- a/packages/react-styles/package.json +++ b/packages/react-styles/package.json @@ -19,7 +19,7 @@ "clean": "rimraf dist css" }, "devDependencies": { - "@patternfly/patternfly": "6.0.0-alpha.100", + "@patternfly/patternfly": "6.0.0-alpha.107", "camel-case": "^3.0.0", "css": "^2.2.3", "fs-extra": "^11.1.1", diff --git a/packages/react-tokens/package.json b/packages/react-tokens/package.json index 145f5b48b47..23b59b9eab8 100644 --- a/packages/react-tokens/package.json +++ b/packages/react-tokens/package.json @@ -29,7 +29,7 @@ "clean": "rimraf dist" }, "devDependencies": { - "@patternfly/patternfly": "6.0.0-alpha.100", + "@patternfly/patternfly": "6.0.0-alpha.107", "css": "^2.2.3", "fs-extra": "^11.1.1", "glob": "^7.1.2", diff --git a/packages/react-tokens/scripts/generateTokens.js b/packages/react-tokens/scripts/generateTokens.js index ef463eefd06..920b4438aab 100644 --- a/packages/react-tokens/scripts/generateTokens.js +++ b/packages/react-tokens/scripts/generateTokens.js @@ -48,6 +48,11 @@ const getLocalVarsMap = (cssFiles) => { const cssAst = parse(readFileSync(filePath, 'utf8')); getDeclarations(cssAst).forEach(({ property, value, parent }) => { + if (res[property]) { + // Accounts for multiple delcarations out of root scope. + // TODO: revamp CSS var mapping + return; + } if (property.startsWith(`--pf-${version}`)) { res[property] = { ...res[property], diff --git a/yarn.lock b/yarn.lock index 8c2abf8f7c7..f6f2ca51184 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3988,10 +3988,10 @@ puppeteer-cluster "^0.23.0" xmldoc "^1.1.2" -"@patternfly/patternfly@6.0.0-alpha.100": - version "6.0.0-alpha.100" - resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-6.0.0-alpha.100.tgz#0f659576554c68685a611f47a0db36aa5abb489d" - integrity sha512-d1Fz0q6wbiJev/Z85l1S+6Wl9h7+mgOWCz38l/COvz1Q3K5P7GhcNCam1goLUqQliEsUaciqMXLfq6bAR3jmng== +"@patternfly/patternfly@6.0.0-alpha.107": + version "6.0.0-alpha.107" + resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-6.0.0-alpha.107.tgz#cf4e4219c9d555c49e612a182812c49df1568dc6" + integrity sha512-gsF0u2RjncgvkIfCK1/UI+U92pS+81oujhnu8HBRiOdwVPxCV20/nWQnbyVQb08vuTBq28cGtWjm+UKKN86K3w== "@pkgjs/parseargs@^0.11.0": version "0.11.0" From b4899705874343a6a19ea2d4bc51998bfe0ac76b Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Wed, 27 Mar 2024 15:52:10 -0400 Subject: [PATCH 2/7] update layouts with core bump --- .../src/layouts/Bullseye/examples/Bullseye.md | 6 +- .../layouts/Bullseye/examples/bullseye.css | 5 +- .../src/layouts/Flex/examples/Flex.md | 2 +- .../src/layouts/Flex/examples/flex.css | 7 +-- .../src/layouts/Gallery/examples/Gallery.md | 16 +++--- .../src/layouts/Gallery/examples/gallery.css | 9 ++- .../src/layouts/Grid/examples/Grid.md | 55 ++++++++++--------- .../src/layouts/Grid/examples/grid.css | 5 +- .../src/layouts/Level/examples/Level.md | 9 ++- .../src/layouts/Level/examples/level.css | 7 +-- .../src/layouts/Split/examples/Split.md | 12 ++-- .../src/layouts/Split/examples/split.css | 5 +- .../src/layouts/Stack/examples/Stack.md | 9 ++- .../src/layouts/Stack/examples/stack.css | 7 +-- 14 files changed, 82 insertions(+), 72 deletions(-) diff --git a/packages/react-core/src/layouts/Bullseye/examples/Bullseye.md b/packages/react-core/src/layouts/Bullseye/examples/Bullseye.md index afd0bb33ecd..c96b5ac14c6 100644 --- a/packages/react-core/src/layouts/Bullseye/examples/Bullseye.md +++ b/packages/react-core/src/layouts/Bullseye/examples/Bullseye.md @@ -1,6 +1,6 @@ --- id: Bullseye -cssPrefix: pf-v5-l-bullseye +cssPrefix: pf-v6-l-bullseye section: layouts propComponents: ['Bullseye'] --- @@ -8,12 +8,14 @@ propComponents: ['Bullseye'] import './bullseye.css'; ## Examples + ### Basic + ```js import React from 'react'; import { Bullseye } from '@patternfly/react-core';
    Bullseye ◎ layout
    -     +; ``` diff --git a/packages/react-core/src/layouts/Bullseye/examples/bullseye.css b/packages/react-core/src/layouts/Bullseye/examples/bullseye.css index f6be2975a08..84c7364bb04 100644 --- a/packages/react-core/src/layouts/Bullseye/examples/bullseye.css +++ b/packages/react-core/src/layouts/Bullseye/examples/bullseye.css @@ -1,6 +1,5 @@ .ws-react-l-bullseye .pf-v6-l-bullseye, .ws-react-l-bullseye .pf-v6-l-bullseye > div { - padding: 1rem; - border-width: 2px; - border-style: dashed; + padding: var(--pf-t--global--spacer--md); + border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default); } diff --git a/packages/react-core/src/layouts/Flex/examples/Flex.md b/packages/react-core/src/layouts/Flex/examples/Flex.md index 78cff1f8046..2e9351aff3b 100644 --- a/packages/react-core/src/layouts/Flex/examples/Flex.md +++ b/packages/react-core/src/layouts/Flex/examples/Flex.md @@ -1,6 +1,6 @@ --- id: Flex -cssPrefix: pf-v5-l-flex +cssPrefix: pf-v6-l-flex section: layouts propComponents: ['Flex', 'FlexItem'] --- diff --git a/packages/react-core/src/layouts/Flex/examples/flex.css b/packages/react-core/src/layouts/Flex/examples/flex.css index 50a884f65c7..5f4f42d5980 100644 --- a/packages/react-core/src/layouts/Flex/examples/flex.css +++ b/packages/react-core/src/layouts/Flex/examples/flex.css @@ -1,10 +1,9 @@ .ws-react-l-flex .pf-v6-l-flex { - padding: 1rem; + padding: var(--pf-t--global--spacer--md); } .ws-react-l-flex .pf-v6-l-flex > div, .ws-react-l-flex .example-border { - border-style: dashed; - border-width: 2px; - padding: 1rem; + padding: var(--pf-t--global--spacer--md); + border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default); } diff --git a/packages/react-core/src/layouts/Gallery/examples/Gallery.md b/packages/react-core/src/layouts/Gallery/examples/Gallery.md index 0a368c9a9f3..0ea04561a56 100644 --- a/packages/react-core/src/layouts/Gallery/examples/Gallery.md +++ b/packages/react-core/src/layouts/Gallery/examples/Gallery.md @@ -1,6 +1,6 @@ --- id: Gallery -cssPrefix: pf-v5-l-gallery +cssPrefix: pf-v6-l-gallery section: layouts propComponents: ['Gallery', 'GalleryItem'] --- @@ -129,11 +129,11 @@ import { Gallery, GalleryItem } from '@patternfly/react-core'; import React from 'react'; import { Gallery, GalleryItem } from '@patternfly/react-core'; - - Gallery item - Gallery item - Gallery item - Gallery item - Gallery item - + + Gallery item + Gallery item + Gallery item + Gallery item + Gallery item +; ``` diff --git a/packages/react-core/src/layouts/Gallery/examples/gallery.css b/packages/react-core/src/layouts/Gallery/examples/gallery.css index 47bb917afcd..188759dd1b3 100644 --- a/packages/react-core/src/layouts/Gallery/examples/gallery.css +++ b/packages/react-core/src/layouts/Gallery/examples/gallery.css @@ -1,9 +1,8 @@ .ws-react-l-gallery .pf-v6-l-gallery { - padding: 1rem; - } + padding: var(--pf-t--global--spacer--md); +} .ws-react-l-gallery .pf-v6-l-gallery > div { - padding: 1rem; - border-width: 2px; - border-style: dashed; + padding: var(--pf-t--global--spacer--md); + border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default); } diff --git a/packages/react-core/src/layouts/Grid/examples/Grid.md b/packages/react-core/src/layouts/Grid/examples/Grid.md index 15b0ba78c42..e5047fa754a 100644 --- a/packages/react-core/src/layouts/Grid/examples/Grid.md +++ b/packages/react-core/src/layouts/Grid/examples/Grid.md @@ -1,13 +1,16 @@ --- id: Grid -cssPrefix: pf-v5-l-grid +cssPrefix: pf-v6-l-grid section: layouts propComponents: ['Grid', 'GridItem'] --- + import './grid.css'; ## Examples + ### Basic + ```js import React from 'react'; import { Grid, GridItem } from '@patternfly/react-core'; @@ -29,10 +32,11 @@ import { Grid, GridItem } from '@patternfly/react-core'; span = 2 span = 4 span = 4 - +; ``` ### With gutters + ```js import React from 'react'; import { Grid, GridItem } from '@patternfly/react-core'; @@ -54,10 +58,11 @@ import { Grid, GridItem } from '@patternfly/react-core'; span = 2 span = 4 span = 4 - +; ``` ### With overrides + ```js import React from 'react'; import { Grid, GridItem } from '@patternfly/react-core'; @@ -77,7 +82,7 @@ import { Grid, GridItem } from '@patternfly/react-core'; Grid Item Grid Item Grid Item - +; ``` ## Ordering @@ -89,10 +94,10 @@ import React from 'react'; import { Grid, GridItem } from '@patternfly/react-core'; - Item A + Item A Item B - Item C - + Item C +; ``` ### Responsive ordering @@ -102,10 +107,10 @@ import React from 'react'; import { Grid, GridItem } from '@patternfly/react-core'; - Item A + Item A Item B - Item C - + Item C +; ``` ### Grouped ordering @@ -115,19 +120,19 @@ import React from 'react'; import { Grid, GridItem } from '@patternfly/react-core'; - - Set 1, Item A - Set 1, Item B + + Set 1, Item A + Set 1, Item B Set 1, Item C - Set 1, Item D + Set 1, Item D - Set 2, Item A - Set 2, Item B + Set 2, Item A + Set 2, Item B Set 2, Item C - Set 2, Item D + Set 2, Item D - +; ``` ### Alternative components @@ -136,11 +141,11 @@ import { Grid, GridItem } from '@patternfly/react-core'; import React from 'react'; import { Grid, GridItem } from '@patternfly/react-core'; - - Grid item - Grid item - Grid item - Grid item - Grid item - + + Grid item + Grid item + Grid item + Grid item + Grid item +; ``` diff --git a/packages/react-core/src/layouts/Grid/examples/grid.css b/packages/react-core/src/layouts/Grid/examples/grid.css index a5eed7f1752..e681c9a312c 100644 --- a/packages/react-core/src/layouts/Grid/examples/grid.css +++ b/packages/react-core/src/layouts/Grid/examples/grid.css @@ -1,7 +1,6 @@ .ws-react-l-grid > .pf-v6-l-grid, .ws-react-l-grid > .pf-v6-l-grid > .pf-v6-l-grid__item { min-height: 75px; - padding: 1rem; - border-width: 2px; - border-style: dashed; + padding: var(--pf-t--global--spacer--md); + border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default); } diff --git a/packages/react-core/src/layouts/Level/examples/Level.md b/packages/react-core/src/layouts/Level/examples/Level.md index 53da0609785..b5b659b620f 100644 --- a/packages/react-core/src/layouts/Level/examples/Level.md +++ b/packages/react-core/src/layouts/Level/examples/Level.md @@ -1,6 +1,6 @@ --- id: Level -cssPrefix: pf-v5-l-level +cssPrefix: pf-v6-l-level section: layouts propComponents: ['Level', 'LevelItem'] --- @@ -8,7 +8,9 @@ propComponents: ['Level', 'LevelItem'] import './level.css'; ## Examples + ### Basic + ```js import React from 'react'; import { Level, LevelItem } from '@patternfly/react-core'; @@ -17,10 +19,11 @@ import { Level, LevelItem } from '@patternfly/react-core'; Level Item Level Item Level Item - +; ``` ### With gutters + ```js import React from 'react'; import { Level, LevelItem } from '@patternfly/react-core'; @@ -29,5 +32,5 @@ import { Level, LevelItem } from '@patternfly/react-core'; Level Item Level Item Level Item - +; ``` diff --git a/packages/react-core/src/layouts/Level/examples/level.css b/packages/react-core/src/layouts/Level/examples/level.css index 5a0b4b530b2..b903ad16481 100644 --- a/packages/react-core/src/layouts/Level/examples/level.css +++ b/packages/react-core/src/layouts/Level/examples/level.css @@ -1,5 +1,5 @@ .ws-react-l-level { - padding: 9px; + padding: var(--pf-t--global--spacer--sm); } .ws-react-l-level .pf-v6-l-level { @@ -8,7 +8,6 @@ .ws-react-l-level .pf-v6-l-level, .ws-react-l-level .pf-v6-l-level > div { - padding: 9px; - border-width: 2px; - border-style: dashed; + padding: var(--pf-t--global--spacer--sm); + border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default); } diff --git a/packages/react-core/src/layouts/Split/examples/Split.md b/packages/react-core/src/layouts/Split/examples/Split.md index 1a87e7f5273..0830f3a985b 100644 --- a/packages/react-core/src/layouts/Split/examples/Split.md +++ b/packages/react-core/src/layouts/Split/examples/Split.md @@ -1,6 +1,6 @@ --- id: Split -cssPrefix: pf-v5-l-split +cssPrefix: pf-v6-l-split section: layouts propComponents: ['Split', 'SplitItem'] --- @@ -8,7 +8,9 @@ propComponents: ['Split', 'SplitItem'] import './split.css'; ## Examples + ### Basic + ```js import React from 'react'; import { Split, SplitItem } from '@patternfly/react-core'; @@ -17,10 +19,11 @@ import { Split, SplitItem } from '@patternfly/react-core'; content pf-m-fill content - +; ``` ### With gutter + ```js import React from 'react'; import { Split, SplitItem } from '@patternfly/react-core'; @@ -29,10 +32,11 @@ import { Split, SplitItem } from '@patternfly/react-core'; content pf-m-fill content - +; ``` ### Wrappable + ```js import React from 'react'; import { Split, SplitItem } from '@patternfly/react-core'; @@ -52,5 +56,5 @@ import { Split, SplitItem } from '@patternfly/react-core'; content content content - +; ``` diff --git a/packages/react-core/src/layouts/Split/examples/split.css b/packages/react-core/src/layouts/Split/examples/split.css index 4f6ca175cd5..893750c93d9 100644 --- a/packages/react-core/src/layouts/Split/examples/split.css +++ b/packages/react-core/src/layouts/Split/examples/split.css @@ -1,6 +1,5 @@ .ws-react-l-split .pf-v6-l-split, .ws-react-l-split .pf-v6-l-split > .pf-v6-l-split__item { - padding: 1rem; - border-width: 2px; - border-style: dashed; + padding: var(--pf-t--global--spacer--md); + border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default); } diff --git a/packages/react-core/src/layouts/Stack/examples/Stack.md b/packages/react-core/src/layouts/Stack/examples/Stack.md index 52a8ad40dce..5569e4d4ef5 100644 --- a/packages/react-core/src/layouts/Stack/examples/Stack.md +++ b/packages/react-core/src/layouts/Stack/examples/Stack.md @@ -1,6 +1,6 @@ --- id: Stack -cssPrefix: pf-v5-l-stack +cssPrefix: pf-v6-l-stack section: layouts propComponents: ['Stack', 'StackItem'] --- @@ -8,7 +8,9 @@ propComponents: ['Stack', 'StackItem'] import './stack.css'; ## Examples + ### Basic + ```js import React from 'react'; import { Stack, StackItem } from '@patternfly/react-core'; @@ -17,10 +19,11 @@ import { Stack, StackItem } from '@patternfly/react-core'; content pf-m-fill content - +; ``` ### With gutter + ```js import React from 'react'; import { Stack, StackItem } from '@patternfly/react-core'; @@ -29,5 +32,5 @@ import { Stack, StackItem } from '@patternfly/react-core'; content pf-m-fill content - +; ``` diff --git a/packages/react-core/src/layouts/Stack/examples/stack.css b/packages/react-core/src/layouts/Stack/examples/stack.css index 2c3d9c0ef5e..d0d491ab74b 100644 --- a/packages/react-core/src/layouts/Stack/examples/stack.css +++ b/packages/react-core/src/layouts/Stack/examples/stack.css @@ -10,7 +10,6 @@ .ws-react-l-stack .pf-v6-l-stack, .ws-react-l-stack .pf-v6-l-stack > .pf-v6-l-stack__item { - padding: 1rem; - border-width: 2px; - border-style: dashed; -} + padding: var(--pf-t--global--spacer--md); + border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default); +} \ No newline at end of file From 92da014955dfa278a6fd192a675067f66dd4d33e Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Wed, 27 Mar 2024 16:12:40 -0400 Subject: [PATCH 3/7] fix integration --- .../cypress/integration/jumplinks.spec.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/react-integration/cypress/integration/jumplinks.spec.ts b/packages/react-integration/cypress/integration/jumplinks.spec.ts index 8fa27369b56..efb24d900ed 100644 --- a/packages/react-integration/cypress/integration/jumplinks.spec.ts +++ b/packages/react-integration/cypress/integration/jumplinks.spec.ts @@ -4,13 +4,15 @@ describe('Jump Link Demo Test', () => { }); it('Should jump on click', () => { - cy.get('#ts-demo-app-page-id').then(el => { + cy.get('#ts-demo-app-page-id').then((el) => { const firstScroll = el.scrollTop(); expect(firstScroll).to.eq(0); }); - cy.get('#heading-2').click(); - cy.get('#ts-demo-app-page-id').then(el => { - expect(el.scrollTop()).to.not.eq(0); - }); + cy.get('#heading-3').click(); + cy.get('#ts-demo-app-page-id') + .parent() + .then((el) => { + expect(el.scrollTop()).to.not.eq(0); + }); }); }); From f3f59d029ece78caa5815dc7758ff8a95e144538 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Wed, 27 Mar 2024 16:15:25 -0400 Subject: [PATCH 4/7] move tabindex --- packages/react-core/src/components/Page/Page.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/react-core/src/components/Page/Page.tsx b/packages/react-core/src/components/Page/Page.tsx index 2e1c75aa142..205f0773055 100644 --- a/packages/react-core/src/components/Page/Page.tsx +++ b/packages/react-core/src/components/Page/Page.tsx @@ -295,13 +295,12 @@ class Page extends React.Component { const Component: keyof JSX.IntrinsicElements = mainComponent; const main = ( -
    +
    {group} From 30e2431697ebc63a6a42e3998332eba351eb9184 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Wed, 27 Mar 2024 16:22:50 -0400 Subject: [PATCH 5/7] update snap --- .../__snapshots__/Page.test.tsx.snap | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap index f23341e3d6c..0a837456420 100644 --- a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap +++ b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap @@ -34,10 +34,10 @@ exports[`Page Check dark page against snapshot 1`] = `
    Date: Wed, 27 Mar 2024 16:28:35 -0400 Subject: [PATCH 6/7] move tabindex back --- packages/react-core/src/components/Page/Page.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Page/Page.tsx b/packages/react-core/src/components/Page/Page.tsx index 205f0773055..2e1c75aa142 100644 --- a/packages/react-core/src/components/Page/Page.tsx +++ b/packages/react-core/src/components/Page/Page.tsx @@ -295,12 +295,13 @@ class Page extends React.Component { const Component: keyof JSX.IntrinsicElements = mainComponent; const main = ( -
    +
    {group} From f64f67aa0299dc8bfaabddb5f49b9681fee0f426 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Wed, 27 Mar 2024 16:31:04 -0400 Subject: [PATCH 7/7] reup snaps --- .../__snapshots__/Page.test.tsx.snap | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap index 0a837456420..f23341e3d6c 100644 --- a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap +++ b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap @@ -34,10 +34,10 @@ exports[`Page Check dark page against snapshot 1`] = `