Skip to content

chore(miscellaneous): update demo flags from js to ts #12197

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nicolethoen merged 4 commits into from
Jan 8, 2026
+501 −492
Merged

chore(miscellaneous): update demo flags from js to ts #12197

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5eea04c
chore(miscellaneous): update demo flags from js to ts
Mash707 Jan 6, 2026
6e04514
chore(miscellaneous): update demo flags from js to ts
Mash707 Jan 6, 2026
55eced2
added types
Mash707 Jan 8, 2026
bbcd321
added spacing
Mash707 Jan 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
141 changes: 2 additions & 139 deletions packages/react-core/src/demos/Banner.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,148 +11,11 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard

### Basic sticky banner

```js isFullscreen
import { Fragment } from 'react';
import { Banner, Card, CardBody, Flex, Gallery, GalleryItem, PageSection, Content } from '@patternfly/react-core';

import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
import { css } from '@patternfly/react-styles';
import display from '@patternfly/react-styles/css/utilities/Display/display';

class BannerDemo extends React.Component {
render() {
const banner = (
<Banner isSticky>
<Flex
justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
flexWrap={{ default: 'nowrap' }}
>
<div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
<div className={css(display.displayNone, display.displayBlockOnLg)}>
This message is sticky to the top of the page.
</div>
<div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
<div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
</Flex>
</Banner>
);
return (
<Fragment>
<DashboardWrapper banner={banner} breadcrumb={null}>
<PageSection aria-labelledby="main-title">
<Content>
<h1 id="main-title">Main title</h1>
<p>
Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
of it’s relative line height of 1.5.
</p>
</Content>
</PageSection>
<PageSection aria-label='Cards gallery'>
<Gallery hasGutter>
{Array.from({ length: 30 }).map((_value, index) => (
<GalleryItem key={index}>
<Card key={index}>
<CardBody>This is a card</CardBody>
</Card>
</GalleryItem>
))}
</Gallery>
</PageSection>
</DashboardWrapper>
</Fragment>
);
}
}
```ts file="examples/Banner/BannerBasicSticky.tsx" isFullscreen
```

### Top and bottom banner

```js isFullscreen
import { Fragment } from 'react';
import {
Banner,
Card,
CardBody,
Flex,
FlexItem,
Gallery,
GalleryItem,
PageSection,
Content
} from '@patternfly/react-core';
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
import { css } from '@patternfly/react-styles';
import display from '@patternfly/react-styles/css/utilities/Display/display';
```ts file="examples/Banner/BannerTopBottom.tsx" isFullscreen

class BannerDemo extends React.Component {
render() {
return (
<Fragment>
<Flex
direction={{ default: 'column' }}
flexWrap={{ default: 'nowrap' }}
spaceItems={{ default: 'spaceItemsNone' }}
style={{ height: '100%' }}
>
<FlexItem>
<Banner isSticky>
<Flex
justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
flexWrap={{ default: 'nowrap' }}
>
<div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
<div className={css(display.displayNone, display.displayBlockOnLg)}>
This message is sticky to the top of the page.
</div>
<div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
<div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
</Flex>
</Banner>
</FlexItem>
<FlexItem grow={{ default: 'grow' }} style={{ minHeight: 0 }}>
<DashboardWrapper breadcrumb={null}>
<PageSection aria-labelledby="main-title">
<Content>
<h1 id='main-title'>Main title</h1>
<p>
Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because{' '}
<br />
of it’s relative line height of 1.5.
</p>
</Content>
</PageSection>
<PageSection aria-label='Cards gallery'>
<Gallery hasGutter>
{Array.from({ length: 30 }).map((_value, index) => (
<GalleryItem key={index}>
<Card key={index}>
<CardBody>This is a card</CardBody>
</Card>
</GalleryItem>
))}
</Gallery>
</PageSection>
</DashboardWrapper>
</FlexItem>
<FlexItem>
<Banner isSticky>
<Flex
justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
flexWrap={{ default: 'nowrap' }}
>
<div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
<div className={css(display.displayNone, display.displayBlockOnLg)}>
This message is sticky to the bottom of the page.
</div>
<div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
<div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
</Flex>
</Banner>
</FlexItem>
</Flex>
</Fragment>
);
}
}
```
88 changes: 2 additions & 86 deletions packages/react-core/src/demos/DateTimePicker.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,96 +14,12 @@ In this demo, learn how to use a [CalendarMonth](/components/date-and-time/calen

### Date and time picker

```ts file="./examples/DateTimePicker/DateTimePicker.tsx"
```ts file="examples/DateTimePicker/DateTimePicker.tsx"

```

### Date and time range picker

```js
import { useState } from 'react';
import { Flex, FlexItem, InputGroup, InputGroupItem, DatePicker, isValidDate, TimePicker, yyyyMMddFormat, updateDateTime } from '@patternfly/react-core';

DateTimeRangePicker = () => {
const [from, setFrom] = useState();
const [to, setTo] = useState();

const toValidator = (date) => {
return isValidDate(from) && yyyyMMddFormat(date) >= yyyyMMddFormat(from)
? ''
: 'The "to" date must be after the "from" date';
};

const onFromDateChange = (_event, inputDate, newFromDate) => {
if (isValidDate(from) && isValidDate(newFromDate) && inputDate === yyyyMMddFormat(newFromDate)) {
newFromDate.setHours(from.getHours());
newFromDate.setMinutes(from.getMinutes());
}
if (isValidDate(newFromDate) && inputDate === yyyyMMddFormat(newFromDate)) {
setFrom(new Date(newFromDate));
}
};

const onFromTimeChange = (_event, time, hour, minute) => {
if (isValidDate(from)) {
const updatedFromDate = new Date(from);
updatedFromDate.setHours(hour);
updatedFromDate.setMinutes(minute);
setFrom(updatedFromDate);
}
};

const onToDateChange = (_event, inputDate, newToDate) => {
if (isValidDate(to) && isValidDate(newToDate) && inputDate === yyyyMMddFormat(newToDate)) {
newToDate.setHours(to.getHours());
newToDate.setMinutes(to.getMinutes());
}
if (isValidDate(newToDate) && inputDate === yyyyMMddFormat(newToDate)) {
setTo(newToDate);
}
};

const onToTimeChange = (_event, time, hour, minute) => {
if (isValidDate(to)) {
const updatedToDate = new Date(to);
updatedToDate.setHours(hour);
updatedToDate.setMinutes(minute);
setTo(updatedToDate);
}
};
```ts file="examples/DateTimePicker/DateTimeRangePicker.tsx"

return (
<Flex direction={{ default: 'column', lg: 'row' }}>
<FlexItem>
<InputGroup>
<InputGroupItem>
<DatePicker onChange={onFromDateChange} aria-label="Start date" placeholder="YYYY-MM-DD" />
</InputGroupItem>
<InputGroupItem>
<TimePicker aria-label="Start time" style={{ width: '150px' }} onChange={onFromTimeChange} />
</InputGroupItem>
</InputGroup>
</FlexItem>
<FlexItem>to</FlexItem>
<FlexItem>
<InputGroup>
<InputGroupItem>
<DatePicker
value={isValidDate(to) ? yyyyMMddFormat(to) : to}
onChange={onToDateChange}
isDisabled={!isValidDate(from)}
rangeStart={from}
validators={[toValidator]}
aria-label="End date"
placeholder="YYYY-MM-DD"
/>
</InputGroupItem>
<InputGroupItem>
<TimePicker style={{ width: '150px' }} onChange={onToTimeChange} isDisabled={!isValidDate(from)} />
</InputGroupItem>
</InputGroup>
</FlexItem>
</Flex>
);
}
```
131 changes: 2 additions & 129 deletions packages/react-core/src/demos/JumpLinks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,134 +21,7 @@ JumpLinks has a scrollspy built-in to make your implementation easier. When impl

This demo expands on the previous to show the JumpLinks in a vertical layout with subsections. It scrolls the [Page](/components/page)'s `mainContainerId` with an `offset` calculated based on the height of the masthead and the nav list when it appears above the content. The headings are given a tab index to allow the jump links to focus on them.

```js isFullscreen
import { useEffect, useState } from 'react';
import {
PageSection,
JumpLinks,
JumpLinksItem,
JumpLinksList,
PageGroup,
Sidebar,
SidebarContent,
SidebarPanel,
Switch,
Title,
Content,
getResizeObserver
} from '@patternfly/react-core';
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/masthead';

ScrollspyH2 = () => {
const headings = [1, 2, 3, 4, 5];

const [isVertical, setIsVertical] = useState(true);
const [offsetHeight, setOffsetHeight] = useState(10);
const offsetForPadding = 10;
let masthead;

// Update offset based on the masthead and jump links nav heights.
useEffect(() => {
masthead = document.getElementsByClassName(mastheadStyles.masthead)[0];

if (isVertical) {
setOffsetHeight(masthead.offsetHeight + offsetForPadding);
} else {
// Append jump links nav height to the masthead height when value exists.
const jumpLinksHeaderHeight = document.getElementsByClassName('pf-m-sticky')[0].offsetHeight;
jumpLinksHeaderHeight && setOffsetHeight(masthead.offsetHeight + jumpLinksHeaderHeight + offsetForPadding);
}


}, [isVertical]);

getResizeObserver(
document.getElementsByClassName(mastheadStyles.masthead)[0],
() => {
if (isVertical) {
setOffsetHeight(masthead.offsetHeight + offsetForPadding);
} else {
// Append jump links nav height to the masthead height when value exists.
const jumpLinksHeaderHeight = document.getElementsByClassName('pf-m-sticky')[0].offsetHeight;
jumpLinksHeaderHeight && setOffsetHeight(masthead.offsetHeight + jumpLinksHeaderHeight + offsetForPadding);
}
},
true
);

return (
<DashboardWrapper breadcrumb={null} mainContainerId="scrollable-element">
<PageSection aria-labelledby='main-title'>
<Title headingLevel="h1" size="2xl" id='main-title'>
Main title
</Title>
<Switch
id="is-vertical"
label="Vertical jump links"
isChecked={isVertical}
onChange={(_event, check) => setIsVertical(check)}
/>
</PageSection>
<PageSection padding={{ default: 'noPadding' }} >
<Sidebar hasGutter orientation={!isVertical && 'stack'}>
<SidebarPanel variant="sticky">
<PageSection aria-label='Jump links navigation'>
<JumpLinks
isVertical={isVertical}
isCentered={!isVertical}
label="Jump to section"
scrollableSelector=".pf-v6-c-page__main-container"
offset={offsetHeight}
expandable={{ default: isVertical ? 'expandable' : 'nonExpandable', md: 'nonExpandable' }}
isExpanded
>
{headings.map(i => (
<JumpLinksItem key={i} href={`#heading-${i}`}>
{`Heading ${i}`}
<JumpLinksList></JumpLinksList>
</JumpLinksItem>
))}
</JumpLinks>
</PageSection>
</SidebarPanel>
<SidebarContent hasNoBackground>
<PageSection aria-label='Main content'>
<Content>
{headings.map(i => (
<div key={i} style={{ maxWidth: '800px', marginBottom: '32px' }}>
<h2 id={`heading-${i}`} tabIndex={-1}>
{`Heading ${i}`}
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.
</p>
<br />
<p>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
maiores alias consequatur aut perferendis doloribus asperiores repellat.
</p>
</div>
))}
</Content>
</PageSection>
</SidebarContent>
</Sidebar>
</PageSection>
</DashboardWrapper>
);
};
```ts file="examples/JumpLinks/JumpLinksScrollspy.tsx" isFullscreen
```

### With drawer
Expand All @@ -157,5 +30,5 @@ This demo shows how jump links can be used in combination with a drawer.

This demo uses a `scrollableRef` prop on the JumpLinks component, which is a React ref to the `DrawerContent` component.

```js isFullscreen file="./examples/JumpLinks/JumpLinksWithDrawer.js"
```ts file="examples/JumpLinks/JumpLinksWithDrawer.tsx" isFullscreen
```
Loading
Loading