@patternfly/react-core 6.0.0-alpha.47 → 6.0.0-alpha.49

package/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>
   <div>Bullseye ◎ layout</div>
-</Bullseye>
+</Bullseye>;
 ```

package/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);
 }

package/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']
 ---

package/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);
 }

package/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 component='ul'>
-  <GalleryItem component='li'>Gallery item</GalleryItem>
-  <GalleryItem component='li'>Gallery item</GalleryItem>
-  <GalleryItem component='li'>Gallery item</GalleryItem>
-  <GalleryItem component='li'>Gallery item</GalleryItem>
-  <GalleryItem component='li'>Gallery item</GalleryItem>
-</Gallery>
+<Gallery component="ul">
+  <GalleryItem component="li">Gallery item</GalleryItem>
+  <GalleryItem component="li">Gallery item</GalleryItem>
+  <GalleryItem component="li">Gallery item</GalleryItem>
+  <GalleryItem component="li">Gallery item</GalleryItem>
+  <GalleryItem component="li">Gallery item</GalleryItem>
+</Gallery>;
 ```

package/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);
 }

package/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';
   <GridItem span={2}>span = 2</GridItem>
   <GridItem span={4}>span = 4</GridItem>
   <GridItem span={4}>span = 4</GridItem>
-</Grid>
+</Grid>;
 ```
 
 ### 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';
   <GridItem span={2}>span = 2</GridItem>
   <GridItem span={4}>span = 4</GridItem>
   <GridItem span={4}>span = 4</GridItem>
-</Grid>
+</Grid>;
 ```
 
 ### 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';
   <GridItem>Grid Item</GridItem>
   <GridItem>Grid Item</GridItem>
   <GridItem>Grid Item</GridItem>
-</Grid>
+</Grid>;
 ```
 
 ## Ordering
@@ -89,10 +94,10 @@ import React from 'react';
 import { Grid, GridItem } from '@patternfly/react-core';
 
 <Grid hasGutter span={3}>
-  <GridItem order={{default: "2"}}>Item A</GridItem>
+  <GridItem order={{ default: '2' }}>Item A</GridItem>
   <GridItem>Item B</GridItem>
-  <GridItem order={{default: "-1"}}>Item C</GridItem>
-</Grid>
+  <GridItem order={{ default: '-1' }}>Item C</GridItem>
+</Grid>;
 ```
 
 ### Responsive ordering
@@ -102,10 +107,10 @@ import React from 'react';
 import { Grid, GridItem } from '@patternfly/react-core';
 
 <Grid hasGutter span={3}>
-  <GridItem order={{lg: "2"}}>Item A</GridItem>
+  <GridItem order={{ lg: '2' }}>Item A</GridItem>
   <GridItem>Item B</GridItem>
-  <GridItem order={{default: "-1", md: "1"}}>Item C</GridItem>
-</Grid>
+  <GridItem order={{ default: '-1', md: '1' }}>Item C</GridItem>
+</Grid>;
 ```
 
 ### Grouped ordering
@@ -115,19 +120,19 @@ import React from 'react';
 import { Grid, GridItem } from '@patternfly/react-core';
 
 <Grid hasGutter span={12}>
-  <Grid hasGutter span={6} order={{default: "2"}}>
-    <GridItem order={{default: "3"}}>Set 1, Item A</GridItem>
-    <GridItem order={{default: "1"}}>Set 1, Item B</GridItem>
+  <Grid hasGutter span={6} order={{ default: '2' }}>
+    <GridItem order={{ default: '3' }}>Set 1, Item A</GridItem>
+    <GridItem order={{ default: '1' }}>Set 1, Item B</GridItem>
     <GridItem>Set 1, Item C</GridItem>
-    <GridItem order={{default: "2"}}>Set 1, Item D</GridItem>
+    <GridItem order={{ default: '2' }}>Set 1, Item D</GridItem>
   </Grid>
   <Grid hasGutter span={6}>
-    <GridItem order={{default: "2"}}>Set 2, Item A</GridItem>
-    <GridItem order={{default: "1"}}>Set 2, Item B</GridItem>
+    <GridItem order={{ default: '2' }}>Set 2, Item A</GridItem>
+    <GridItem order={{ default: '1' }}>Set 2, Item B</GridItem>
     <GridItem>Set 2, Item C</GridItem>
-    <GridItem order={{default: "2"}}>Set 2, Item D</GridItem>
+    <GridItem order={{ default: '2' }}>Set 2, Item D</GridItem>
   </Grid>
-</Grid>
+</Grid>;
 ```
 
 ### 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 component='ul'>
-  <GridItem component='li'>Grid item</GridItem>
-  <GridItem component='li'>Grid item</GridItem>
-  <GridItem component='li'>Grid item</GridItem>
-  <GridItem component='li'>Grid item</GridItem>
-  <GridItem component='li'>Grid item</GridItem>
-</Grid>
+<Grid component="ul">
+  <GridItem component="li">Grid item</GridItem>
+  <GridItem component="li">Grid item</GridItem>
+  <GridItem component="li">Grid item</GridItem>
+  <GridItem component="li">Grid item</GridItem>
+  <GridItem component="li">Grid item</GridItem>
+</Grid>;
 ```

package/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);
 }

package/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';
   <LevelItem>Level Item</LevelItem>
   <LevelItem>Level Item</LevelItem>
   <LevelItem>Level Item</LevelItem>
-</Level>
+</Level>;
 ```
 
 ### 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';
   <LevelItem>Level Item</LevelItem>
   <LevelItem>Level Item</LevelItem>
   <LevelItem>Level Item</LevelItem>
-</Level>
+</Level>;
 ```

package/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);
 }

package/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';
   <SplitItem>content</SplitItem>
   <SplitItem isFilled>pf-m-fill</SplitItem>
   <SplitItem>content</SplitItem>
-</Split>
+</Split>;
 ```
 
 ### 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';
   <SplitItem>content</SplitItem>
   <SplitItem isFilled>pf-m-fill</SplitItem>
   <SplitItem>content</SplitItem>
-</Split>
+</Split>;
 ```
 
 ### Wrappable
+
 ```js
 import React from 'react';
 import { Split, SplitItem } from '@patternfly/react-core';
@@ -52,5 +56,5 @@ import { Split, SplitItem } from '@patternfly/react-core';
   <SplitItem>content</SplitItem>
   <SplitItem>content</SplitItem>
   <SplitItem>content</SplitItem>
-</Split>
+</Split>;
 ```

package/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);
 }

package/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';
   <StackItem>content</StackItem>
   <StackItem isFilled>pf-m-fill</StackItem>
   <StackItem>content</StackItem>
-</Stack>
+</Stack>;
 ```
 
 ### 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';
   <StackItem>content</StackItem>
   <StackItem isFilled>pf-m-fill</StackItem>
   <StackItem>content</StackItem>
-</Stack>
+</Stack>;
 ```

package/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);
+}