@patternfly/react-core 6.0.0-alpha.22 → 6.0.0-alpha.24

package/src/components/Tabs/examples/Tabs.md

@@ -36,15 +36,13 @@ Tabs can be styled as 'default' or 'boxed':
 ```ts file="./TabsDefault.tsx"
 ```
 
-### Boxed light tabs
+### Boxed secondary tabs
 
-To change the background color of boxed tabs, use the `variant` property. 
+To change the background color of boxed tabs or the tab content, use the `variant` property. 
 
-The following example passes `variant={isTabsLightScheme ? 'light300' : 'default'}` into the `<Tabs>` component to style the tabs with a lighter color.
+Toggle the tab color by selecting the 'Tabs secondary variant' checkbox in the following example.
 
-Toggle the tab color by selecting the 'Tabs light variation' checkbox in the following example.
-
-```ts file="./TabsBoxLight.tsx"
+```ts file="./TabsBoxSecondary.tsx"
 ```
 
 ### Vertical tabs
@@ -132,11 +130,11 @@ To add an icon to a tab, pass a `<TabTitleIcon>` component that contains the ico
 ```ts file="./TabsIconAndText.tsx"
 ```
 
-### Secondary tabs
+### Subtabs
 
-Use secondary tabs as "sub tabs" or within other components, like modals. Secondary tabs have less visually prominent styling. 
+Use subtabs within other components, like modals. Subtabs have less visually prominent styling. 
 
-To apply secondary styling to tabs, use the `isSecondary` property. 
+To apply subtab styling to tabs, use the `isSubtab` property. 
 
 ```ts file="./TabsSubtabs.tsx"
 ```
@@ -157,11 +155,11 @@ Nav tabs should use the `href` property to link the tab to the URL of another pa
 ```ts file="./TabsNav.tsx"
 ```
 
-### Secondary tabs linked to nav elements
+### Subtabs linked to nav elements
 
-Secondary tabs can also link to nav elements. 
+Subtabs can also link to nav elements. 
 
-```ts file="./TabsNavSecondary.tsx"
+```ts file="./TabsNavSubtab.tsx"
 ```
 
 ### With separate content

package/src/components/Tabs/examples/{TabsBoxLight.tsx → TabsBoxSecondary.tsx}

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core';
 
-export const TabsBoxLight: React.FunctionComponent = () => {
+export const TabsBoxSecondary: React.FunctionComponent = () => {
   const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
-  const [isTabsLightScheme, setIsTabsLightScheme] = React.useState<boolean>(true);
+  const [isTabsBoxSecondary, setIsTabsBoxSecondary] = React.useState<boolean>(true);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
@@ -13,7 +13,7 @@ export const TabsBoxLight: React.FunctionComponent = () => {
   };
 
   const toggleScheme = (checked: boolean) => {
-    setIsTabsLightScheme(checked);
+    setIsTabsBoxSecondary(checked);
   };
 
   const tooltip = (
@@ -24,8 +24,7 @@ export const TabsBoxLight: React.FunctionComponent = () => {
       <Tabs
         activeKey={activeTabKey}
         onSelect={handleTabClick}
-        // TODO: Update variant value when "isTabsLightScheme" with issue #9909
-        variant={isTabsLightScheme ? 'default' : 'default'}
+        variant={isTabsBoxSecondary ? 'secondary' : 'default'}
         isBox
         aria-label="Tabs in the box light variation example"
         role="region"
@@ -51,12 +50,11 @@ export const TabsBoxLight: React.FunctionComponent = () => {
       </Tabs>
       <div style={{ marginTop: '20px' }}>
         <Checkbox
-          label="Tabs light variation"
-          isChecked={isTabsLightScheme}
+          label="Tabs secondary variant"
+          isChecked={isTabsBoxSecondary}
           onChange={(_event, checked) => toggleScheme(checked)}
-          aria-label="show light scheme variation checkbox"
-          id="toggle-scheme"
-          name="toggle-scheme"
+          id="toggle-tabs-variant"
+          name="toggle-tabs-variant"
         />
       </div>
     </div>

package/src/components/Tabs/examples/{TabsNavSecondary.tsx → TabsNavSubtab.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Tabs, Tab, TabsComponent, TabTitleText } from '@patternfly/react-core';
 
-export const TabsNavSecondary: React.FunctionComponent = () => {
+export const TabsNavSubtab: React.FunctionComponent = () => {
   const [activeTabKey1, setActiveTabKey1] = React.useState<string | number>(0);
   const [activeTabKey2, setActiveTabKey2] = React.useState<string | number>(0);
 
@@ -31,7 +31,7 @@ export const TabsNavSecondary: React.FunctionComponent = () => {
       <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} href="#" aria-label="Subtabs with nav content users">
         <Tabs
           activeKey={activeTabKey2}
-          isSecondary
+          isSubtab
           onSelect={handleTabClickSecond}
           aria-label="Local secondary"
           component={TabsComponent.nav}

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

@@ -14,7 +14,7 @@ export const TabsSubtabs: React.FunctionComponent = () => {
     setActiveTabKey1(tabIndex);
   };
 
-  // Toggle currently active secondary tab
+  // Toggle currently active subtab
   const handleTabClickSecond = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
     tabIndex: string | number
@@ -37,35 +37,35 @@ export const TabsSubtabs: React.FunctionComponent = () => {
       >
         <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} aria-label="Tabs with subtabs content users">
           <Tabs
-            aria-label="secondary tabs for users"
+            aria-label="subtabs for users"
             role="region"
             activeKey={activeTabKey2}
-            isSecondary
+            isSubtab
             onSelect={handleTabClickSecond}
           >
-            <Tab eventKey={20} title={<TabTitleText>Secondary tab item 1</TabTitleText>}>
-              Secondary tab item 1 item section
+            <Tab eventKey={20} title={<TabTitleText>Subtab item 1</TabTitleText>}>
+              Subtab item 1 item section
             </Tab>
-            <Tab eventKey={21} title={<TabTitleText>Secondary tab item 2</TabTitleText>}>
-              Secondary tab item 2 section
+            <Tab eventKey={21} title={<TabTitleText>Subtab item 2</TabTitleText>}>
+              Subtab item 2 section
             </Tab>
-            <Tab eventKey={22} title={<TabTitleText>Secondary tab item 3</TabTitleText>}>
-              Secondary tab item 3 section
+            <Tab eventKey={22} title={<TabTitleText>Subtab item 3</TabTitleText>}>
+              Subtab item 3 section
             </Tab>
-            <Tab eventKey={23} title={<TabTitleText>Secondary tab item 4</TabTitleText>}>
-              Secondary tab item 4 section
+            <Tab eventKey={23} title={<TabTitleText>Subtab item 4</TabTitleText>}>
+              Subtab item 4 section
             </Tab>
-            <Tab eventKey={24} title={<TabTitleText>Secondary tab item 5</TabTitleText>}>
-              Secondary tab item 5 section
+            <Tab eventKey={24} title={<TabTitleText>Subtab item 5</TabTitleText>}>
+              Subtab item 5 section
             </Tab>
-            <Tab eventKey={25} title={<TabTitleText>Secondary tab item 6</TabTitleText>}>
-              Secondary tab item 6 section
+            <Tab eventKey={25} title={<TabTitleText>Subtab item 6</TabTitleText>}>
+              Subtab item 6 section
             </Tab>
-            <Tab eventKey={26} title={<TabTitleText>Secondary tab item 7</TabTitleText>}>
-              Secondary tab item 7 section
+            <Tab eventKey={26} title={<TabTitleText>Subtab item 7</TabTitleText>}>
+              Subtab item 7 section
             </Tab>
-            <Tab eventKey={27} title={<TabTitleText>Secondary tab item 8</TabTitleText>}>
-              Secondary tab item 8 section
+            <Tab eventKey={27} title={<TabTitleText>Subtab item 8</TabTitleText>}>
+              Subtab item 8 section
             </Tab>
           </Tabs>
         </Tab>
@@ -106,8 +106,8 @@ export const TabsSubtabs: React.FunctionComponent = () => {
           isChecked={isBox}
           onChange={(_event, checked) => toggleBox(checked)}
           aria-label="show box variation checkbox with sub tabs"
-          id="toggle-box-secondary"
-          name="toggle-box-secondary"
+          id="toggle-box-subtab"
+          name="toggle-box-subtab"
         />
       </div>
     </div>