@patternfly/react-core 6.0.0-alpha.7 → 6.0.0-alpha.8

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.6","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.7","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.6","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.7","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.6","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.7","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.7",
+  "version": "6.0.0-alpha.8",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.5",
-    "@patternfly/react-styles": "^6.0.0-alpha.5",
-    "@patternfly/react-tokens": "^6.0.0-alpha.5",
+    "@patternfly/react-icons": "^6.0.0-alpha.6",
+    "@patternfly/react-styles": "^6.0.0-alpha.6",
+    "@patternfly/react-tokens": "^6.0.0-alpha.6",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.38",
+    "@patternfly/patternfly": "6.0.0-alpha.49",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -72,5 +72,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "e9117354af65f496fe3166e6faea7b8721f08b62"
+  "gitHead": "5aae45c06fbd78c00fc09de587cb833b9a7d077d"
 }

package/src/components/Button/Button.tsx

@@ -94,6 +94,8 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   children = null,
   className = '',
   component = 'button',
+  // TODO: Update  eslint ignore when issue #9907 is resolved
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   isActive = false,
   isBlock = false,
   isDisabled = false,
@@ -155,7 +157,8 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
         isBlock && styles.modifiers.block,
         isDisabled && styles.modifiers.disabled,
         isAriaDisabled && styles.modifiers.ariaDisabled,
-        isActive && styles.modifiers.active,
+        // TODO: Update when issue #9907 is resolved
+        // isActive && styles.modifiers.active,
         isInline && variant === ButtonVariant.link && styles.modifiers.inline,
         isDanger && (variant === ButtonVariant.secondary || variant === ButtonVariant.link) && styles.modifiers.danger,
         isLoading !== null && variant !== ButtonVariant.plain && styles.modifiers.progress,

package/src/components/Button/__tests__/Button.test.tsx

@@ -55,7 +55,8 @@ test('Renders with class pf-m-block when isBlock = true', () => {
   expect(screen.getByRole('button')).toHaveClass('pf-m-block');
 });
 
-test('Renders with class pf-m-active when isActive = true', () => {
+// TODO:  Reenable or remove with issue #9907
+xtest('Renders with class pf-m-active when isActive = true', () => {
   render(<Button isActive>Active Button</Button>);
   expect(screen.getByRole('button')).toHaveClass('pf-m-active');
 });

package/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`Renders basic button 1`] = `
     aria-disabled="false"
     aria-label="basic button"
     class="pf-v5-c-button pf-m-primary"
-    data-ouia-component-id="OUIA-Generated-Button-primary-27"
+    data-ouia-component-id="OUIA-Generated-Button-primary-26"
     data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"

package/src/components/Masthead/__tests__/__snapshots__/Masthead.test.tsx.snap

@@ -63,7 +63,7 @@ exports[`Masthead verify inline display breakpoints 1`] = `
 exports[`Masthead verify inset2xl inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-2xl pf-m-inset-2xl-on-sm pf-m-inset-2xl-on-md pf-m-inset-2xl-on-lg pf-m-inset-2xl-on-xl pf-m-inset-2xl-on-2xl"
+    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-2xl"
   >
     test
   </header>
@@ -83,7 +83,7 @@ exports[`Masthead verify inset3xl inset breakpoints 1`] = `
 exports[`Masthead verify insetLg inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-lg pf-m-inset-lg-on-sm pf-m-inset-lg-on-md pf-m-inset-lg-on-lg pf-m-inset-lg-on-xl pf-m-inset-lg-on-2xl"
+    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-lg"
   >
     test
   </header>
@@ -93,7 +93,7 @@ exports[`Masthead verify insetLg inset breakpoints 1`] = `
 exports[`Masthead verify insetMd inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-md pf-m-inset-md-on-sm pf-m-inset-md-on-md pf-m-inset-md-on-lg pf-m-inset-md-on-xl pf-m-inset-md-on-2xl"
+    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-md"
   >
     test
   </header>
@@ -103,7 +103,7 @@ exports[`Masthead verify insetMd inset breakpoints 1`] = `
 exports[`Masthead verify insetNone inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-none pf-m-inset-none-on-sm pf-m-inset-none-on-md pf-m-inset-none-on-lg pf-m-inset-none-on-xl pf-m-inset-none-on-2xl"
+    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-none"
   >
     test
   </header>
@@ -113,7 +113,7 @@ exports[`Masthead verify insetNone inset breakpoints 1`] = `
 exports[`Masthead verify insetSm inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-sm pf-m-inset-sm-on-sm pf-m-inset-sm-on-md pf-m-inset-sm-on-lg pf-m-inset-sm-on-xl pf-m-inset-sm-on-2xl"
+    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-sm"
   >
     test
   </header>
@@ -123,7 +123,7 @@ exports[`Masthead verify insetSm inset breakpoints 1`] = `
 exports[`Masthead verify insetXl inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-xl pf-m-inset-xl-on-sm pf-m-inset-xl-on-md pf-m-inset-xl-on-lg pf-m-inset-xl-on-xl pf-m-inset-xl-on-2xl"
+    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-xl"
   >
     test
   </header>

package/src/components/Tabs/TabContent.tsx

@@ -27,10 +27,10 @@ export interface TabContentProps extends Omit<React.HTMLProps<HTMLElement>, 'ref
   ouiaSafe?: boolean;
 }
 
-const variantStyle = {
-  default: '',
-  light300: styles.modifiers.light_300
-};
+// TODO: Update with issue #9909
+// const variantStyle = {
+//   default: ''
+// };
 
 const TabContentBase: React.FunctionComponent<TabContentProps> = ({
   id,
@@ -60,10 +60,11 @@ const TabContentBase: React.FunctionComponent<TabContentProps> = ({
           <section
             ref={innerRef}
             hidden={children ? null : child.props.eventKey !== activeKey}
+            // TODO: Update "variant" with issue #9909
             className={
               children
-                ? css(styles.tabContent, className, variantStyle[variant])
-                : css(styles.tabContent, child.props.className, variantStyle[variant])
+                ? css(styles.tabContent, className, variant)
+                : css(styles.tabContent, child.props.className, variant)
             }
             id={children ? id : `pf-tab-section-${child.props.eventKey}-${id}`}
             aria-label={ariaLabel}

package/src/components/Tabs/Tabs.tsx

@@ -38,7 +38,7 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
   /** Additional classes added to the tabs */
   className?: string;
   /** Tabs background color variant */
-  variant?: 'default' | 'light300';
+  variant?: 'default';
   /** The index of the active tab */
   activeKey?: number | string;
   /** The index of the default active tab. Set this for uncontrolled Tabs */

package/src/components/Tabs/__tests__/Generated/__snapshots__/TabContent.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`TabContent should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <section
     aria-label="string"
-    class="pf-v5-c-tab-content string"
+    class="pf-v5-c-tab-content string default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     id="string"

package/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap

@@ -81,7 +81,7 @@ exports[`should render accessible tabs 1`] = `
   </nav>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -92,7 +92,7 @@ exports[`should render accessible tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -104,7 +104,7 @@ exports[`should render accessible tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -227,7 +227,7 @@ exports[`should render box tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -238,7 +238,7 @@ exports[`should render box tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -250,7 +250,7 @@ exports[`should render box tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -262,7 +262,7 @@ exports[`should render box tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-3-tab4"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -355,7 +355,7 @@ exports[`should render box tabs of light variant 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-v5-c-tab-content pf-m-light-300"
+    class="pf-v5-c-tab-content light300"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -366,7 +366,7 @@ exports[`should render box tabs of light variant 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-v5-c-tab-content pf-m-light-300"
+    class="pf-v5-c-tab-content light300"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -378,7 +378,7 @@ exports[`should render box tabs of light variant 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-v5-c-tab-content pf-m-light-300"
+    class="pf-v5-c-tab-content light300"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -544,7 +544,7 @@ exports[`should render expandable vertical tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -555,7 +555,7 @@ exports[`should render expandable vertical tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -567,7 +567,7 @@ exports[`should render expandable vertical tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -579,7 +579,7 @@ exports[`should render expandable vertical tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-3-tab4"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -672,7 +672,7 @@ exports[`should render filled tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -683,7 +683,7 @@ exports[`should render filled tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -695,7 +695,7 @@ exports[`should render filled tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -788,7 +788,7 @@ exports[`should render secondary tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-primarieTabs"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-primarieTabs"
@@ -873,7 +873,7 @@ exports[`should render secondary tabs 1`] = `
     </div>
     <section
       aria-labelledby="pf-tab-10-secondary tab1"
-      class="pf-v5-c-tab-content"
+      class="pf-v5-c-tab-content default"
       data-ouia-component-type="PF5/TabContent"
       data-ouia-safe="true"
       hidden=""
@@ -885,7 +885,7 @@ exports[`should render secondary tabs 1`] = `
     </section>
     <section
       aria-labelledby="pf-tab-11-secondary tab2"
-      class="pf-v5-c-tab-content"
+      class="pf-v5-c-tab-content default"
       data-ouia-component-type="PF5/TabContent"
       data-ouia-safe="true"
       hidden=""
@@ -897,7 +897,7 @@ exports[`should render secondary tabs 1`] = `
     </section>
     <section
       aria-labelledby="pf-tab-12-secondary tab3"
-      class="pf-v5-c-tab-content"
+      class="pf-v5-c-tab-content default"
       data-ouia-component-type="PF5/TabContent"
       data-ouia-safe="true"
       hidden=""
@@ -910,7 +910,7 @@ exports[`should render secondary tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -922,7 +922,7 @@ exports[`should render secondary tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1045,7 +1045,7 @@ exports[`should render simple tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -1056,7 +1056,7 @@ exports[`should render simple tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1068,7 +1068,7 @@ exports[`should render simple tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1080,7 +1080,7 @@ exports[`should render simple tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-3-tab4"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1173,7 +1173,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-one-tab1"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1185,7 +1185,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-two-tab2"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1197,7 +1197,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-three-tab3"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1290,7 +1290,7 @@ exports[`should render tabs with no bottom border 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -1301,7 +1301,7 @@ exports[`should render tabs with no bottom border 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1313,7 +1313,7 @@ exports[`should render tabs with no bottom border 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1407,7 +1407,7 @@ exports[`should render tabs with separate content 1`] = `
   <div>
     <section
       aria-label="Tab item 1"
-      class="pf-v5-c-tab-content"
+      class="pf-v5-c-tab-content default"
       data-ouia-component-type="PF5/TabContent"
       data-ouia-safe="true"
       id="refTab1Section"
@@ -1418,7 +1418,7 @@ exports[`should render tabs with separate content 1`] = `
     </section>
     <section
       aria-label="Tab item 2"
-      class="pf-v5-c-tab-content"
+      class="pf-v5-c-tab-content default"
       data-ouia-component-type="PF5/TabContent"
       data-ouia-safe="true"
       hidden=""
@@ -1434,7 +1434,7 @@ exports[`should render tabs with separate content 1`] = `
     </section>
     <section
       aria-label="Tab item 3"
-      class="pf-v5-c-tab-content"
+      class="pf-v5-c-tab-content default"
       data-ouia-component-type="PF5/TabContent"
       data-ouia-safe="true"
       hidden=""
@@ -1561,7 +1561,7 @@ exports[`should render uncontrolled tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -1572,7 +1572,7 @@ exports[`should render uncontrolled tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1584,7 +1584,7 @@ exports[`should render uncontrolled tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1596,7 +1596,7 @@ exports[`should render uncontrolled tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-3-tab4"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1719,7 +1719,7 @@ exports[`should render vertical tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -1730,7 +1730,7 @@ exports[`should render vertical tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1742,7 +1742,7 @@ exports[`should render vertical tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1754,7 +1754,7 @@ exports[`should render vertical tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-3-tab4"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""

package/src/components/Tabs/examples/TabsBoxLight.tsx

@@ -24,7 +24,8 @@ export const TabsBoxLight: React.FunctionComponent = () => {
       <Tabs
         activeKey={activeTabKey}
         onSelect={handleTabClick}
-        variant={isTabsLightScheme ? 'light300' : 'default'}
+        // TODO: Update variant value when "isTabsLightScheme" with issue #9909
+        variant={isTabsLightScheme ? 'default' : 'default'}
         isBox
         aria-label="Tabs in the box light variation example"
         role="region"