@patternfly/react-core 4.265.0 → 4.265.2

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core';
+
+export const TabsBoxLight: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const [isTabsLightScheme, setIsTabsLightScheme] = React.useState<boolean>(true);
+  // Toggle currently active tab
+  const handleTabClick = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  const toggleScheme = (checked: boolean) => {
+    setIsTabsLightScheme(checked);
+  };
+
+  const tooltip = (
+    <Tooltip content="Aria-disabled tabs are like disabled tabs, but focusable. Allows for tooltip support." />
+  );
+  return (
+    <div>
+      <Tabs
+        activeKey={activeTabKey}
+        onSelect={handleTabClick}
+        variant={isTabsLightScheme ? 'light300' : 'default'}
+        isBox
+        aria-label="Tabs in the box light variation example"
+        role="region"
+      >
+        <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} aria-label="Box light variation content - users">
+          Users
+        </Tab>
+        <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>
+          Containers
+        </Tab>
+        <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>}>
+          Database
+        </Tab>
+        <Tab eventKey={3} title={<TabTitleText>Disabled</TabTitleText>} isDisabled>
+          Disabled
+        </Tab>
+        <Tab eventKey={4} title={<TabTitleText>ARIA Disabled</TabTitleText>} isAriaDisabled>
+          ARIA Disabled
+        </Tab>
+        <Tab eventKey={5} title={<TabTitleText>ARIA Disabled (Tooltip)</TabTitleText>} isAriaDisabled tooltip={tooltip}>
+          ARIA Disabled (Tooltip)
+        </Tab>
+      </Tabs>
+      <div style={{ marginTop: '20px' }}>
+        <Checkbox
+          label="Tabs light variation"
+          isChecked={isTabsLightScheme}
+          onChange={toggleScheme}
+          aria-label="show light scheme variation checkbox"
+          id="toggle-scheme"
+          name="toggle-scheme"
+        />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
+
+export const TabsChildrenMounting: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  // Toggle currently active tab
+  const handleTabClick = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  return (
+    <Tabs
+      mountOnEnter
+      activeKey={activeTabKey}
+      onSelect={handleTabClick}
+      aria-label="Tabs in the children mounting on click example"
+      role="region"
+    >
+      <Tab eventKey={0} title={<TabTitleText>Tab item 1</TabTitleText>} aria-label="Tab 1">
+        Tab 1 section
+      </Tab>
+      <Tab eventKey={1} title={<TabTitleText>Tab item 2</TabTitleText>} aria-label="Tab 2">
+        Tab 2 section
+      </Tab>
+      <Tab eventKey={2} title={<TabTitleText>Tab item 3</TabTitleText>} aria-label="Tab 3">
+        Tab 3 section
+      </Tab>
+    </Tabs>
+  );
+};

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Tabs, Tab, TabTitleText, TabContent, TabContentBody } from '@patternfly/react-core';
+
+export const TabContentWithBodyPadding: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  // Toggle currently active tab
+  const handleTabClick = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  const contentRef1 = React.createRef<HTMLElement>();
+  const contentRef2 = React.createRef<HTMLElement>();
+  const contentRef3 = React.createRef<HTMLElement>();
+
+  return (
+    <React.Fragment>
+      <Tabs
+        activeKey={activeTabKey}
+        onSelect={handleTabClick}
+        aria-label="Tabs in the body and padding example"
+        role="region"
+      >
+        <Tab
+          eventKey={0}
+          title={<TabTitleText>Tab item 1</TabTitleText>}
+          tabContentId="tab1SectionBodyPadding"
+          tabContentRef={contentRef1}
+        />
+        <Tab
+          eventKey={1}
+          title={<TabTitleText>Tab item 2</TabTitleText>}
+          tabContentId="tab2SectionBodyPadding"
+          tabContentRef={contentRef2}
+        />
+        <Tab
+          eventKey={2}
+          title={<TabTitleText>Tab item 3</TabTitleText>}
+          tabContentId="tab3SectionBodyPadding"
+          tabContentRef={contentRef3}
+        />
+      </Tabs>
+      <div>
+        <TabContent eventKey={0} id="tab1SectionBodyPadding" ref={contentRef1}>
+          <TabContentBody hasPadding> Tab 1 section with body and padding </TabContentBody>
+        </TabContent>
+        <TabContent eventKey={1} id="tab2SectionBodyPadding" ref={contentRef2} hidden>
+          <TabContentBody hasPadding> Tab 2 section with body and padding </TabContentBody>
+        </TabContent>
+        <TabContent eventKey={2} id="tab3SectionBodyPadding" ref={contentRef3} hidden>
+          <TabContentBody hasPadding> Tab 3 section with body and padding </TabContentBody>
+        </TabContent>
+      </div>
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core';
+
+export const TabsDefault: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const [isBox, setIsBox] = React.useState<boolean>(false);
+  // Toggle currently active tab
+  const handleTabClick = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  const toggleBox = (checked: boolean) => {
+    setIsBox(checked);
+  };
+
+  const tooltip = (
+    <Tooltip content="Aria-disabled tabs are like disabled tabs, but focusable. Allows for tooltip support." />
+  );
+  return (
+    <div>
+      <Tabs
+        activeKey={activeTabKey}
+        onSelect={handleTabClick}
+        isBox={isBox}
+        aria-label="Tabs in the default example"
+        role="region"
+      >
+        <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} aria-label="Default content - users">
+          Users
+        </Tab>
+        <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>
+          Containers
+        </Tab>
+        <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>}>
+          Database
+        </Tab>
+        <Tab eventKey={3} title={<TabTitleText>Disabled</TabTitleText>} isDisabled>
+          Disabled
+        </Tab>
+        <Tab eventKey={4} title={<TabTitleText>ARIA Disabled</TabTitleText>} isAriaDisabled>
+          ARIA Disabled
+        </Tab>
+        <Tab tooltip={tooltip} eventKey={5} title={<TabTitleText>ARIA Disabled (Tooltip)</TabTitleText>} isAriaDisabled>
+          ARIA Disabled (Tooltip)
+        </Tab>
+      </Tabs>
+      <div style={{ marginTop: '20px' }}>
+        <Checkbox
+          label="isBox"
+          isChecked={isBox}
+          onChange={toggleBox}
+          aria-label="show box variation checkbox"
+          id="toggle-box-default"
+          name="toggle-box-default"
+        />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core';
+
+export const TabsDefaultOverflow: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const [isBox, setIsBox] = React.useState<boolean>(false);
+  // Toggle currently active tab
+  const handleTabClick = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  const toggleBox = (checked: boolean) => {
+    setIsBox(checked);
+  };
+
+  return (
+    <div>
+      <Tabs
+        activeKey={activeTabKey}
+        onSelect={handleTabClick}
+        isBox={isBox}
+        aria-label="Tabs in the default overflow example"
+        role="region"
+      >
+        <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} aria-label="Default overflow content users">
+          Users
+        </Tab>
+        <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>
+          Containers
+        </Tab>
+        <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>}>
+          Database
+        </Tab>
+        <Tab eventKey={3} title={<TabTitleText>Server</TabTitleText>}>
+          Server
+        </Tab>
+        <Tab eventKey={4} title={<TabTitleText>System</TabTitleText>}>
+          System
+        </Tab>
+        <Tab eventKey={6} title={<TabTitleText>Network</TabTitleText>}>
+          Network
+        </Tab>
+        <Tab eventKey={7} title={<TabTitleText>Tab item 7</TabTitleText>}>
+          Tab 7 section
+        </Tab>
+        <Tab eventKey={8} title={<TabTitleText>Tab item 8</TabTitleText>}>
+          Tab 8 section
+        </Tab>
+        <Tab eventKey={9} title={<TabTitleText>Tab item 9</TabTitleText>}>
+          Tab 9 section
+        </Tab>
+        <Tab eventKey={10} title={<TabTitleText>Tab item 10</TabTitleText>}>
+          Tab 10 section
+        </Tab>
+        <Tab eventKey={11} title={<TabTitleText>Tab item 11</TabTitleText>}>
+          Tab 11 section
+        </Tab>
+      </Tabs>
+      <div style={{ marginTop: '20px' }}>
+        <Checkbox
+          label="isBox"
+          isChecked={isBox}
+          onChange={toggleBox}
+          aria-label="show box variation checkbox on overflow"
+          id="toggle-box-overflow"
+          name="toggle-box-overflow"
+        />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core';
+
+export const TabsFilled: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const [isBox, setIsBox] = React.useState<boolean>(false);
+  // Toggle currently active tab
+  const handleTabClick = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  const toggleBox = (checked: boolean) => {
+    setIsBox(checked);
+  };
+
+  return (
+    <div>
+      <Tabs
+        isFilled
+        activeKey={activeTabKey}
+        onSelect={handleTabClick}
+        isBox={isBox}
+        aria-label="Tabs in the filled example"
+        role="region"
+      >
+        <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} aria-label="Tabs filled example content users">
+          Users
+        </Tab>
+        <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>
+          Containers
+        </Tab>
+        <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>}>
+          Database
+        </Tab>
+      </Tabs>
+      <div style={{ marginTop: '20px' }}>
+        <Checkbox
+          label="isBox"
+          isChecked={isBox}
+          onChange={toggleBox}
+          aria-label="show box variation checkbox with filled tabs"
+          id="toggle-box-filled"
+          name="toggle-box-filled"
+        />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Tabs, Tab, TabTitleText, TabTitleIcon, Checkbox } from '@patternfly/react-core';
+import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon';
+import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon';
+import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';
+
+export const TabsFilledWithIcons: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const [isBox, setIsBox] = React.useState<boolean>(false);
+  // Toggle currently active tab
+  const handleTabClick = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  const toggleBox = (checked: boolean) => {
+    setIsBox(checked);
+  };
+
+  return (
+    <div>
+      <Tabs
+        isFilled
+        activeKey={activeTabKey}
+        onSelect={handleTabClick}
+        isBox={isBox}
+        aria-label="Tabs in the filled with icons example"
+        role="region"
+      >
+        <Tab
+          eventKey={0}
+          title={
+            <>
+              <TabTitleIcon>
+                <UsersIcon />
+              </TabTitleIcon>{' '}
+              <TabTitleText>Users</TabTitleText>{' '}
+            </>
+          }
+          aria-label="filled tabs with icons content users"
+        >
+          Users
+        </Tab>
+        <Tab
+          eventKey={1}
+          title={
+            <>
+              <TabTitleIcon>
+                <BoxIcon />
+              </TabTitleIcon>{' '}
+              <TabTitleText>Containers</TabTitleText>{' '}
+            </>
+          }
+        >
+          Containers
+        </Tab>
+        <Tab
+          eventKey={2}
+          title={
+            <>
+              <TabTitleIcon>
+                <DatabaseIcon />
+              </TabTitleIcon>{' '}
+              <TabTitleText>Database</TabTitleText>{' '}
+            </>
+          }
+        >
+          Database
+        </Tab>
+      </Tabs>
+      <div style={{ marginTop: '20px' }}>
+        <Checkbox
+          label="isBox"
+          isChecked={isBox}
+          onChange={toggleBox}
+          aria-label="show box variation checkbox with filled icon tabs"
+          id="toggle-box-filled-icon"
+          name="toggle-box-filled-icon"
+        />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,108 @@
+import React from 'react';
+import { Tabs, Tab, TabTitleText, TabTitleIcon } from '@patternfly/react-core';
+import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon';
+import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon';
+import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';
+import ServerIcon from '@patternfly/react-icons/dist/esm/icons/server-icon';
+import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';
+import ProjectDiagramIcon from '@patternfly/react-icons/dist/esm/icons/project-diagram-icon';
+
+export const TabsIconAndText: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  // Toggle currently active tab
+  const handleTabClick = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  return (
+    <Tabs
+      activeKey={activeTabKey}
+      onSelect={handleTabClick}
+      aria-label="Tabs in the icons and text example"
+      role="region"
+    >
+      <Tab
+        eventKey={0}
+        title={
+          <>
+            <TabTitleIcon>
+              <UsersIcon />
+            </TabTitleIcon>{' '}
+            <TabTitleText>Users</TabTitleText>{' '}
+          </>
+        }
+        aria-label="icons and text content"
+      >
+        Users
+      </Tab>
+      <Tab
+        eventKey={1}
+        title={
+          <>
+            <TabTitleIcon>
+              <BoxIcon />
+            </TabTitleIcon>{' '}
+            <TabTitleText>Containers</TabTitleText>{' '}
+          </>
+        }
+      >
+        Containers
+      </Tab>
+      <Tab
+        eventKey={2}
+        title={
+          <>
+            <TabTitleIcon>
+              <DatabaseIcon />
+            </TabTitleIcon>{' '}
+            <TabTitleText>Database</TabTitleText>{' '}
+          </>
+        }
+      >
+        Database
+      </Tab>
+      <Tab
+        eventKey={3}
+        title={
+          <>
+            <TabTitleIcon>
+              <ServerIcon />
+            </TabTitleIcon>{' '}
+            <TabTitleText>Server</TabTitleText>{' '}
+          </>
+        }
+      >
+        Server
+      </Tab>
+      <Tab
+        eventKey={4}
+        title={
+          <>
+            <TabTitleIcon>
+              <LaptopIcon />
+            </TabTitleIcon>{' '}
+            <TabTitleText>System</TabTitleText>{' '}
+          </>
+        }
+      >
+        System
+      </Tab>
+      <Tab
+        eventKey={6}
+        title={
+          <>
+            <TabTitleIcon>
+              <ProjectDiagramIcon />
+            </TabTitleIcon>{' '}
+            <TabTitleText>Network</TabTitleText>{' '}
+          </>
+        }
+      >
+        Network
+      </Tab>
+    </Tabs>
+  );
+};

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core';
+
+export const TabsInset: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const [isBox, setIsBox] = React.useState<boolean>(false);
+  // Toggle currently active tab
+  const handleTabClick = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  const toggleBox = (checked: boolean) => {
+    setIsBox(checked);
+  };
+
+  return (
+    <div>
+      <Tabs
+        activeKey={activeTabKey}
+        onSelect={handleTabClick}
+        inset={{
+          default: 'insetNone',
+          md: 'insetSm',
+          xl: 'insetLg',
+          '2xl': 'inset2xl'
+        }}
+        isBox={isBox}
+        aria-label="Tabs in the inset example"
+        role="region"
+      >
+        <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} aria-label="Inset example content users">
+          Users
+        </Tab>
+        <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>
+          Containers
+        </Tab>
+        <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>}>
+          Database
+        </Tab>
+        <Tab eventKey={3} title={<TabTitleText>Server</TabTitleText>}>
+          Server
+        </Tab>
+        <Tab eventKey={4} title={<TabTitleText>System</TabTitleText>}>
+          System
+        </Tab>
+        <Tab eventKey={6} title={<TabTitleText>Network</TabTitleText>}>
+          Network
+        </Tab>
+      </Tabs>
+      <div style={{ marginTop: '20px' }}>
+        <Checkbox
+          label="isBox"
+          isChecked={isBox}
+          onChange={toggleBox}
+          aria-label="show box variation checkbox with inset"
+          id="toggle-box-inset"
+          name="toggle-box-inset"
+        />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Tabs, Tab, TabsComponent, TabTitleText } from '@patternfly/react-core';
+
+export const TabsNav: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  // Toggle currently active tab
+  const handleTabClick = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey(tabIndex);
+  };
+  return (
+    <Tabs
+      activeKey={activeTabKey}
+      onSelect={handleTabClick}
+      component={TabsComponent.nav}
+      aria-label="Tabs in the nav element example"
+    >
+      <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} href="#users" aria-label="Nav element content users">
+        Users
+      </Tab>
+      <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>} href="#containers">
+        Containers
+      </Tab>
+      <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>} href="#database">
+        Database
+      </Tab>
+      <Tab eventKey={3} title={<TabTitleText>Disabled</TabTitleText>} isDisabled href="#disabled">
+        Disabled
+      </Tab>
+      <Tab eventKey={4} title={<TabTitleText>ARIA Disabled</TabTitleText>} isAriaDisabled href="#aria-disabled">
+        ARIA Disabled
+      </Tab>
+      <Tab eventKey={6} title={<TabTitleText>Network</TabTitleText>} href="#network">
+        Network
+      </Tab>
+    </Tabs>
+  );
+};