fix(layouts): update example css & classnames (#12145)

nicolethoen · web-flow · commit 11fe19a02297 · 2025-12-11T08:28:14.000-05:00
diff --git a/packages/react-core/src/layouts/Bullseye/examples/bullseye.css b/packages/react-core/src/layouts/Bullseye/examples/bullseye.css
@@ -1,5 +1,5 @@
-.ws-react-l-bullseye .pf-v6-l-bullseye,
-.ws-react-l-bullseye .pf-v6-l-bullseye > div {
+.ws-react-f-bullseye .pf-v6-l-bullseye,
+.ws-react-f-bullseye .pf-v6-l-bullseye > div {
   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.css b/packages/react-core/src/layouts/Flex/examples/flex.css
@@ -1,9 +1,9 @@
-.ws-react-l-flex .pf-v6-l-flex {
+.ws-react-f-flex .pf-v6-l-flex {
   padding: var(--pf-t--global--spacer--md);
 }
 
-.ws-react-l-flex .pf-v6-l-flex > div,
-.ws-react-l-flex .example-border {
+.ws-react-f-flex .pf-v6-l-flex > div,
+.ws-react-f-flex .example-border {
   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.css b/packages/react-core/src/layouts/Gallery/examples/gallery.css
@@ -1,8 +1,8 @@
-.ws-react-l-gallery .pf-v6-l-gallery {
+.ws-react-f-gallery .pf-v6-l-gallery {
   padding: var(--pf-t--global--spacer--md);
 }
 
-.ws-react-l-gallery .pf-v6-l-gallery > div {
+.ws-react-f-gallery .pf-v6-l-gallery > div {
   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.css b/packages/react-core/src/layouts/Grid/examples/grid.css
@@ -1,5 +1,5 @@
-.ws-react-l-grid > .pf-v6-l-grid,
-.ws-react-l-grid > .pf-v6-l-grid > .pf-v6-l-grid__item {
+.ws-react-f-grid > .pf-v6-l-grid,
+.ws-react-f-grid > .pf-v6-l-grid > .pf-v6-l-grid__item {
   min-height: 75px;
   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.css b/packages/react-core/src/layouts/Level/examples/level.css
@@ -1,13 +1,13 @@
-.ws-react-l-level {
+.ws-react-f-level {
   padding: var(--pf-t--global--spacer--sm);
 }
 
-.ws-react-l-level .pf-v6-l-level {
+.ws-react-f-level .pf-v6-l-level {
   min-height: 160px;
 }
 
-.ws-react-l-level .pf-v6-l-level,
-.ws-react-l-level .pf-v6-l-level > div {
+.ws-react-f-level .pf-v6-l-level,
+.ws-react-f-level .pf-v6-l-level > div {
   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.css b/packages/react-core/src/layouts/Split/examples/split.css
@@ -1,5 +1,5 @@
-.ws-react-l-split .pf-v6-l-split,
-.ws-react-l-split .pf-v6-l-split > .pf-v6-l-split__item {
+.ws-react-f-split .pf-v6-l-split,
+.ws-react-f-split .pf-v6-l-split > .pf-v6-l-split__item {
   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.css b/packages/react-core/src/layouts/Stack/examples/stack.css
@@ -1,15 +1,15 @@
-.ws-react-l-stack {
+.ws-react-f-stack {
   min-height: 30em;
   display: flex;
   flex-direction: column;
 }
 
-.ws-react-l-stack > .pf-v6-l-stack {
+.ws-react-f-stack > .pf-v6-l-stack {
   flex-grow: 1;
 }
 
-.ws-react-l-stack .pf-v6-l-stack,
-.ws-react-l-stack .pf-v6-l-stack > .pf-v6-l-stack__item {
+.ws-react-f-stack .pf-v6-l-stack,
+.ws-react-f-stack .pf-v6-l-stack > .pf-v6-l-stack__item {
   padding: var(--pf-t--global--spacer--md);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`		`-.ws-react-l-bullseye .pf-v6-l-bullseye,`
`2`		`-.ws-react-l-bullseye .pf-v6-l-bullseye > div {`
	`1`	`+.ws-react-f-bullseye .pf-v6-l-bullseye,`
	`2`	`+.ws-react-f-bullseye .pf-v6-l-bullseye > div {`
`3`	`3`	`padding: var(--pf-t--global--spacer--md);`
`4`	`4`	`border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);`
`5`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,9 +1,9 @@`
`1`		`-.ws-react-l-flex .pf-v6-l-flex {`
	`1`	`+.ws-react-f-flex .pf-v6-l-flex {`
`2`	`2`	`padding: var(--pf-t--global--spacer--md);`
`3`	`3`	`}`
`4`	`4`
`5`		`-.ws-react-l-flex .pf-v6-l-flex > div,`
`6`		`-.ws-react-l-flex .example-border {`
	`5`	`+.ws-react-f-flex .pf-v6-l-flex > div,`
	`6`	`+.ws-react-f-flex .example-border {`
`7`	`7`	`padding: var(--pf-t--global--spacer--md);`
`8`	`8`	`border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);`
`9`	`9`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,8 @@`
`1`		`-.ws-react-l-gallery .pf-v6-l-gallery {`
	`1`	`+.ws-react-f-gallery .pf-v6-l-gallery {`
`2`	`2`	`padding: var(--pf-t--global--spacer--md);`
`3`	`3`	`}`
`4`	`4`
`5`		`-.ws-react-l-gallery .pf-v6-l-gallery > div {`
	`5`	`+.ws-react-f-gallery .pf-v6-l-gallery > div {`
`6`	`6`	`padding: var(--pf-t--global--spacer--md);`
`7`	`7`	`border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);`
`8`	`8`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,13 +1,13 @@`
`1`		`-.ws-react-l-level {`
	`1`	`+.ws-react-f-level {`
`2`	`2`	`padding: var(--pf-t--global--spacer--sm);`
`3`	`3`	`}`
`4`	`4`
`5`		`-.ws-react-l-level .pf-v6-l-level {`
	`5`	`+.ws-react-f-level .pf-v6-l-level {`
`6`	`6`	`min-height: 160px;`
`7`	`7`	`}`
`8`	`8`
`9`		`-.ws-react-l-level .pf-v6-l-level,`
`10`		`-.ws-react-l-level .pf-v6-l-level > div {`
	`9`	`+.ws-react-f-level .pf-v6-l-level,`
	`10`	`+.ws-react-f-level .pf-v6-l-level > div {`
`11`	`11`	`padding: var(--pf-t--global--spacer--sm);`
`12`	`12`	`border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);`
`13`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`		`-.ws-react-l-split .pf-v6-l-split,`
`2`		`-.ws-react-l-split .pf-v6-l-split > .pf-v6-l-split__item {`
	`1`	`+.ws-react-f-split .pf-v6-l-split,`
	`2`	`+.ws-react-f-split .pf-v6-l-split > .pf-v6-l-split__item {`
`3`	`3`	`padding: var(--pf-t--global--spacer--md);`
`4`	`4`	`border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);`
`5`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,15 +1,15 @@`
`1`		`-.ws-react-l-stack {`
	`1`	`+.ws-react-f-stack {`
`2`	`2`	`min-height: 30em;`
`3`	`3`	`display: flex;`
`4`	`4`	`flex-direction: column;`
`5`	`5`	`}`
`6`	`6`
`7`		`-.ws-react-l-stack > .pf-v6-l-stack {`
	`7`	`+.ws-react-f-stack > .pf-v6-l-stack {`
`8`	`8`	`flex-grow: 1;`
`9`	`9`	`}`
`10`	`10`
`11`		`-.ws-react-l-stack .pf-v6-l-stack,`
`12`		`-.ws-react-l-stack .pf-v6-l-stack > .pf-v6-l-stack__item {`
	`11`	`+.ws-react-f-stack .pf-v6-l-stack,`
	`12`	`+.ws-react-f-stack .pf-v6-l-stack > .pf-v6-l-stack__item {`
`13`	`13`	`padding: var(--pf-t--global--spacer--md);`
`14`	`14`	`border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);`
`15`	`15`	`}`