@patternfly/react-core 6.5.0-prerelease.3 → 6.5.0-prerelease.31

package/src/demos/examples/Tabs/TabsOpen.tsx

@@ -0,0 +1,185 @@
+import { useState } from 'react';
+import {
+  PageSection,
+  PageBreadcrumb,
+  Breadcrumb,
+  BreadcrumbItem,
+  Tabs,
+  Tab,
+  TabContent,
+  TabContentBody,
+  TabTitleText,
+  Title,
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  DescriptionListDescription,
+  Label,
+  LabelGroup,
+  Flex,
+  FlexItem
+} from '@patternfly/react-core';
+import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
+import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+
+export const TabsOpen: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = useState(0);
+
+  // Toggle currently active tab
+  const handleTabClick = (_event: React.MouseEvent<HTMLElement>, tabIndex: number | string) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  const tabsBreadcrumb = (
+    <PageBreadcrumb isWidthLimited>
+      <Breadcrumb>
+        <BreadcrumbItem to="#">Overview</BreadcrumbItem>
+        <BreadcrumbItem to="#">Pods</BreadcrumbItem>
+        <BreadcrumbItem to="#" isActive>
+          Pod details{' '}
+        </BreadcrumbItem>
+      </Breadcrumb>
+    </PageBreadcrumb>
+  );
+
+  const tabContent = (
+    <Flex direction={{ default: 'column' }}>
+      <FlexItem spacer={{ default: 'spacerLg' }}>
+        <Title headingLevel="h2" size="lg" className={spacing.mtSm} id="open-tabs-example-tabs-list-details-title">
+          Pod details
+        </Title>
+      </FlexItem>
+      <FlexItem>
+        <DescriptionList columnModifier={{ lg: '2Col' }} aria-labelledby="open-tabs-example-tabs-list-details-title">
+          <DescriptionListGroup>
+            <DescriptionListTerm>Name</DescriptionListTerm>
+            <DescriptionListDescription>3scale-control-fccb6ddb9-phyqv9</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Status</DescriptionListTerm>
+            <DescriptionListDescription>
+              <Flex spacer={{ default: 'spacerLg' }}>
+                <FlexItem>
+                  <CheckCircleIcon />
+                </FlexItem>
+                <FlexItem>Running</FlexItem>
+              </Flex>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Namespace</DescriptionListTerm>
+            <DescriptionListDescription>
+              <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                <FlexItem>
+                  <Label color="teal">NS</Label>
+                </FlexItem>
+                <FlexItem>
+                  <a href="#">knative-serving-ingress</a>
+                </FlexItem>
+              </Flex>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Restart policy</DescriptionListTerm>
+            <DescriptionListDescription>Always restart</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Labels</DescriptionListTerm>
+            <DescriptionListDescription>
+              <LabelGroup>
+                <Label>app=3scale-gateway</Label>
+                <Label>pod-template-has=6747686899</Label>
+              </LabelGroup>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Active deadline seconds</DescriptionListTerm>
+            <DescriptionListDescription>Not configured</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Tolerations</DescriptionListTerm>
+            <DescriptionListDescription>stuff</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Pod IP</DescriptionListTerm>
+            <DescriptionListDescription>10.345.2.197</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Annotations</DescriptionListTerm>
+            <DescriptionListDescription>stuff</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Node</DescriptionListTerm>
+            <DescriptionListDescription>
+              <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                <FlexItem>
+                  <Label color="purple">N</Label>
+                </FlexItem>
+                <FlexItem>ip-10-0-233-118.us-east-2.computer.external</FlexItem>
+              </Flex>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Created at</DescriptionListTerm>
+            <DescriptionListDescription>
+              <time>Oct 15, 1:51 pm</time>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+        </DescriptionList>
+      </FlexItem>
+    </Flex>
+  );
+
+  return (
+    <DashboardWrapper hasNoBreadcrumb>
+      {tabsBreadcrumb}
+      <PageSection isWidthLimited aria-label="Pod header">
+        <Flex
+          spaceItems={{ default: 'spaceItemsMd' }}
+          alignItems={{ default: 'alignItemsFlexStart' }}
+          flexWrap={{ default: 'noWrap' }}
+        >
+          <FlexItem>
+            <Label color="blue">N</Label>
+          </FlexItem>
+          <FlexItem>
+            <Title headingLevel="h1" size="2xl">
+              3scale-control-fccb6ddb9-phyqv9
+            </Title>
+          </FlexItem>
+          <FlexItem flex={{ default: 'flexNone' }}>
+            <Label icon={<InfoCircleIcon />}>Running</Label>
+          </FlexItem>
+        </Flex>
+      </PageSection>
+      <PageSection type="tabs" isWidthLimited aria-label="Pod navigation tabs">
+        <Tabs activeKey={activeTabKey} onSelect={handleTabClick} usePageInsets id="open-tabs-example-tabs-list">
+          <Tab eventKey={0} title={<TabTitleText>Details</TabTitleText>} tabContentId={`tabContent${0}`} />
+          <Tab eventKey={1} title={<TabTitleText>YAML</TabTitleText>} tabContentId={`tabContent${1}`} />
+          <Tab eventKey={2} title={<TabTitleText>Environment</TabTitleText>} tabContentId={`tabContent${2}`} />
+          <Tab eventKey={3} title={<TabTitleText>Events</TabTitleText>} tabContentId={`tabContent${3}`} />
+          <Tab eventKey={4} title={<TabTitleText>Terminal</TabTitleText>} tabContentId={`tabContent${4}`} />
+        </Tabs>
+      </PageSection>
+      <PageSection isWidthLimited aria-label="Pod content">
+        <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
+          <TabContentBody>{tabContent}</TabContentBody>
+        </TabContent>
+        <TabContent key={1} eventKey={1} id={`tabContent${1}`} activeKey={activeTabKey} hidden={1 !== activeTabKey}>
+          <TabContentBody>YAML panel</TabContentBody>
+        </TabContent>
+        <TabContent key={2} eventKey={2} id={`tabContent${2}`} activeKey={activeTabKey} hidden={2 !== activeTabKey}>
+          <TabContentBody>Environment panel</TabContentBody>
+        </TabContent>
+        <TabContent key={3} eventKey={3} id={`tabContent${3}`} activeKey={activeTabKey} hidden={3 !== activeTabKey}>
+          <TabContentBody>Events panel</TabContentBody>
+        </TabContent>
+        <TabContent key={4} eventKey={4} id={`tabContent${4}`} activeKey={activeTabKey} hidden={4 !== activeTabKey}>
+          <TabContentBody>Terminal panel</TabContentBody>
+        </TabContent>
+      </PageSection>
+    </DashboardWrapper>
+  );
+};

package/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx

@@ -0,0 +1,228 @@
+import { useState } from 'react';
+import {
+  PageSection,
+  PageBreadcrumb,
+  Breadcrumb,
+  BreadcrumbItem,
+  Tabs,
+  Tab,
+  TabContent,
+  TabContentBody,
+  TabTitleText,
+  Title,
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  DescriptionListDescription,
+  Label,
+  LabelGroup,
+  Flex,
+  FlexItem
+} from '@patternfly/react-core';
+import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
+import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+
+export const TabsOpenWithSecondaryTabs: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = useState<number>(0);
+  const [activeTabKeySecondary, setActiveTabKeySecondary] = useState<number>(10);
+
+  // Toggle currently active tab
+  const handleTabClick = (_event: React.MouseEvent<HTMLElement>, tabIndex: number) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  // Toggle currently active secondary tab
+  const handleTabClickSecondary = (_event: React.MouseEvent<HTMLElement>, tabIndex: number) => {
+    setActiveTabKeySecondary(tabIndex);
+  };
+
+  const tabsBreadcrumb = (
+    <PageBreadcrumb isWidthLimited>
+      <Breadcrumb>
+        <BreadcrumbItem to="#">Overview</BreadcrumbItem>
+        <BreadcrumbItem to="#">Pods</BreadcrumbItem>
+        <BreadcrumbItem to="#" isActive>
+          Pod details{' '}
+        </BreadcrumbItem>
+      </Breadcrumb>
+    </PageBreadcrumb>
+  );
+
+  const tabContent = (
+    <Flex direction={{ default: 'column' }}>
+      <FlexItem spacer={{ default: 'spacerLg' }}>
+        <Title headingLevel="h2" size="lg" className={spacing.mtSm} id="open-tabs-example-tabs-list-details-title">
+          Pod details
+        </Title>
+      </FlexItem>
+      <FlexItem>
+        <DescriptionList columnModifier={{ lg: '2Col' }} aria-labelledby="open-tabs-example-tabs-list-details-title">
+          <DescriptionListGroup>
+            <DescriptionListTerm>Name</DescriptionListTerm>
+            <DescriptionListDescription>3scale-control-fccb6ddb9-phyqv9</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Status</DescriptionListTerm>
+            <DescriptionListDescription>
+              <Flex spacer={{ default: 'spacerLg' }}>
+                <FlexItem>
+                  <CheckCircleIcon />
+                </FlexItem>
+                <FlexItem>Running</FlexItem>
+              </Flex>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Namespace</DescriptionListTerm>
+            <DescriptionListDescription>
+              <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                <FlexItem>
+                  <Label color="teal">NS</Label>
+                </FlexItem>
+                <FlexItem>
+                  <a href="#">knative-serving-ingress</a>
+                </FlexItem>
+              </Flex>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Restart policy</DescriptionListTerm>
+            <DescriptionListDescription>Always restart</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Labels</DescriptionListTerm>
+            <DescriptionListDescription>
+              <LabelGroup>
+                <Label>app=3scale-gateway</Label>
+                <Label>pod-template-has=6747686899</Label>
+              </LabelGroup>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Active deadline seconds</DescriptionListTerm>
+            <DescriptionListDescription>Not configured</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Tolerations</DescriptionListTerm>
+            <DescriptionListDescription>stuff</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Pod IP</DescriptionListTerm>
+            <DescriptionListDescription>10.345.2.197</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Annotations</DescriptionListTerm>
+            <DescriptionListDescription>stuff</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Node</DescriptionListTerm>
+            <DescriptionListDescription>
+              <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                <FlexItem>
+                  <Label color="purple">N</Label>
+                </FlexItem>
+                <FlexItem>ip-10-0-233-118.us-east-2.computer.external</FlexItem>
+              </Flex>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Created at</DescriptionListTerm>
+            <DescriptionListDescription>
+              <time>Oct 15, 1:51 pm</time>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+        </DescriptionList>
+      </FlexItem>
+    </Flex>
+  );
+
+  return (
+    <DashboardWrapper hasNoBreadcrumb>
+      {tabsBreadcrumb}
+      <PageSection isWidthLimited aria-label="Pod header">
+        <Flex
+          spaceItems={{ default: 'spaceItemsMd' }}
+          alignItems={{ default: 'alignItemsFlexStart' }}
+          flexWrap={{ default: 'noWrap' }}
+        >
+          <FlexItem>
+            <Label color="blue">N</Label>
+          </FlexItem>
+          <FlexItem>
+            <Title headingLevel="h1" size="2xl">
+              3scale-control-fccb6ddb9-phyqv9
+            </Title>
+          </FlexItem>
+          <FlexItem flex={{ default: 'flexNone' }}>
+            <Label icon={<InfoCircleIcon />}>Running</Label>
+          </FlexItem>
+        </Flex>
+      </PageSection>
+      <PageSection type="tabs" isWidthLimited aria-label="Pod navigation tabs">
+        <Tabs activeKey={activeTabKey} onSelect={handleTabClick} usePageInsets id="open-tabs-example-tabs-list">
+          <Tab eventKey={0} title={<TabTitleText>Details</TabTitleText>} tabContentId={`tabContent${0}`} />
+          <Tab eventKey={1} title={<TabTitleText>YAML</TabTitleText>} tabContentId={`tabContent${1}`} />
+          <Tab eventKey={2} title={<TabTitleText>Environment</TabTitleText>} tabContentId={`tabContent${2}`} />
+          <Tab eventKey={3} title={<TabTitleText>Events</TabTitleText>} tabContentId={`tabContent${3}`} />
+          <Tab eventKey={4} title={<TabTitleText>Terminal</TabTitleText>} tabContentId={`tabContent${4}`} />
+        </Tabs>
+      </PageSection>
+      <PageSection isWidthLimited padding={{ default: 'noPadding' }} aria-label="Pod content">
+        <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
+          <TabContentBody>
+            <Tabs
+              isSecondary
+              activeKey={activeTabKeySecondary}
+              onSelect={handleTabClickSecondary}
+              usePageInsets
+              id="open-with-secondary-tabs-example-tabs-list-secondary"
+            >
+              <Tab
+                eventKey={10}
+                title={<TabTitleText>Pod information</TabTitleText>}
+                tabContentId={`tabContent${10}`}
+              />
+              <Tab
+                eventKey={11}
+                title={<TabTitleText>Editable aspects</TabTitleText>}
+                tabContentId={`tabContent${11}`}
+              />
+            </Tabs>
+            <TabContent
+              key={10}
+              eventKey={10}
+              id={`tabContent${10}`}
+              activeKey={activeTabKeySecondary}
+              hidden={10 !== activeTabKeySecondary}
+            >
+              <TabContentBody hasPadding>{tabContent}</TabContentBody>
+            </TabContent>
+            <TabContent
+              key={11}
+              eventKey={11}
+              id={`tabContent${11}`}
+              activeKey={activeTabKeySecondary}
+              hidden={11 !== activeTabKeySecondary}
+            >
+              <TabContentBody>Editable aspects</TabContentBody>
+            </TabContent>
+          </TabContentBody>
+        </TabContent>
+        <TabContent key={1} eventKey={1} id={`tabContent${1}`} activeKey={activeTabKey} hidden={1 !== activeTabKey}>
+          <TabContentBody>YAML panel</TabContentBody>
+        </TabContent>
+        <TabContent key={2} eventKey={2} id={`tabContent${2}`} activeKey={activeTabKey} hidden={2 !== activeTabKey}>
+          <TabContentBody>Environment panel</TabContentBody>
+        </TabContent>
+        <TabContent key={3} eventKey={3} id={`tabContent${3}`} activeKey={activeTabKey} hidden={3 !== activeTabKey}>
+          <TabContentBody>Events panel</TabContentBody>
+        </TabContent>
+        <TabContent key={4} eventKey={4} id={`tabContent${4}`} activeKey={activeTabKey} hidden={4 !== activeTabKey}>
+          <TabContentBody>Terminal panel</TabContentBody>
+        </TabContent>
+      </PageSection>
+    </DashboardWrapper>
+  );
+};

package/src/deprecated/components/Modal/examples/Modal.md

@@ -127,7 +127,7 @@ To guide users through a series of steps in a modal, you can add a [wizard](/com
 
 ### With dropdown
 
-To present a menu of actions or links to a user, you can add a [dropdown](/components/dropdown) to a modal. To allow the dropdown to visually break out of the modal container, set the `menuAppendTo` property to “parent”. Handle the modal’s closing behavior by listening to the `onEscapePress` callback on the `<Modal>` component. This allows the "escape" key to collapse the dropdown without closing the entire modal.
+To present a menu of actions or links to a user, you can add a [dropdown](/components/menus/dropdown) to a modal. To allow the dropdown to visually break out of the modal container, set the `menuAppendTo` property to “parent”. Handle the modal’s closing behavior by listening to the `onEscapePress` callback on the `<Modal>` component. This allows the "escape" key to collapse the dropdown without closing the entire modal.
 
 ```ts file="./ModalWithDropdown.tsx"
 
@@ -143,7 +143,7 @@ To help simplify and explain complex models, add a help [popover](/components/po
 
 ### With form
 
-To collect user input within a modal, you can add a [form](/components/form).
+To collect user input within a modal, you can add a [form](/components/forms/form).
 
 To submit the form from a button in the modal's footer (outside of the `<Form>`), set the button's `form` property equal to the form's id.
 

package/src/deprecated/components/Tile/examples/Tile.md

@@ -15,8 +15,6 @@ import './Tile.css';
 
 ## Examples
 
-Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the [Demo section](/components/tile/react-demos).
-
 ### Basic tile
 
 Basic tiles can appear in one of three states: a default state, selected state, and a disabled state. To change the state of a tile, use the properties `isSelected` and `isDisabled`.

package/src/helpers/OUIA/OUIA.md

@@ -1,6 +1,6 @@
 ---
 id: Open UI Automation
-section: developer-resources
+section: developer-guides
 ---
 import { Fragment } from 'react';
 
@@ -54,6 +54,7 @@ component.
 * [Card](/components/card)
 * [Checkbox](/components/forms/checkbox)
 * [Chip](/components/chip)
+* [Content](/components/content)
 * [Dropdown](/components/menus/dropdown)
 * [DropdownItem](/components/menus/dropdown)
 * [FormSelect](/components/forms/form-select)
@@ -68,7 +69,6 @@ component.
 * [Switch](/components/switch)
 * [TabContent](/components/tabs)
 * [Tabs](/components/tabs)
-* [Text](/components/text)
 * [TextInput](/components/forms/text-input)
 * [Title](/components/title)
 * [Toolbar](/components/toolbar)

package/src/layouts/Bullseye/examples/Bullseye.md

@@ -1,7 +1,8 @@
 ---
 id: Bullseye
 cssPrefix: pf-v6-l-bullseye
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 propComponents: ['Bullseye']
 ---
 

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

package/src/layouts/Flex/examples/Flex.md

@@ -1,7 +1,8 @@
 ---
 id: Flex
 cssPrefix: pf-v6-l-flex
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 propComponents: ['Flex', 'FlexItem']
 ---
 

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

package/src/layouts/Gallery/examples/Gallery.md

@@ -1,7 +1,8 @@
 ---
 id: Gallery
 cssPrefix: pf-v6-l-gallery
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 propComponents: ['Gallery', 'GalleryItem']
 ---
 
@@ -11,123 +12,32 @@ import './gallery.css';
 
 ### Basic
 
-```js
-import { Gallery, GalleryItem } from '@patternfly/react-core';
-
-<Gallery>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-</Gallery>;
+```ts file="GalleryBasic.tsx"
+
 ```
 
 ### With gutters
 
-```js
-import { Gallery, GalleryItem } from '@patternfly/react-core';
-
-<Gallery hasGutter>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-</Gallery>;
+```ts file="GalleryWithGutters.tsx"
 ```
 
 ### Adjusting min widths
 
-```js
-import { Gallery, GalleryItem } from '@patternfly/react-core';
-
-<Gallery
-  hasGutter
-  minWidths={{
-    md: '100px',
-    lg: '150px',
-    xl: '200px',
-    '2xl': '300px'
-  }}
->
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-</Gallery>;
+```ts file="GalleryAdjustingMinWidths.tsx"
+
 ```
 
 ### Adjusting max widths
 
-```js
-import { Gallery, GalleryItem } from '@patternfly/react-core';
-
-<Gallery
-  hasGutter
-  maxWidths={{
-    md: '280px',
-    lg: '320px',
-    '2xl': '400px'
-  }}
->
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-</Gallery>;
+```ts file="GalleryAdjustingMaxWidths.tsx"
 ```
 
 ### Adjusting min and max widths
 
-```js
-import { Gallery, GalleryItem } from '@patternfly/react-core';
-
-<Gallery
-  hasGutter
-  minWidths={{
-    default: '100%',
-    md: '100px',
-    xl: '300px'
-  }}
-  maxWidths={{
-    md: '200px',
-    xl: '1fr'
-  }}
->
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-</Gallery>;
+```ts file="GalleryAdjustingMinMaxWidths.tsx"
 ```
 
 ### Alternative components
 
-```js
-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>;
+```ts file="GalleryAlternativeComponents.tsx"
 ```

package/src/layouts/Gallery/examples/GalleryAdjustingMaxWidths.tsx

@@ -0,0 +1,21 @@
+import { Gallery, GalleryItem } from '@patternfly/react-core';
+
+export const GalleryAdjustingMaxWidths: React.FunctionComponent = () => (
+  <Gallery
+    hasGutter
+    maxWidths={{
+      md: '280px',
+      lg: '320px',
+      '2xl': '400px'
+    }}
+  >
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+  </Gallery>
+);