chore(miscellaneous): update demo and example flags from js to ts #12198
Conversation
|
Warning Rate limit exceeded@Mash707 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 6 minutes and 35 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (1)
WalkthroughDocumentation examples for Tabs and Gallery were migrated from inline markdown code blocks to external TypeScript TSX example files. New React demo components for Tabs (including nested secondary tabs) and multiple Gallery variants were added and referenced from the markdown. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related issues
Suggested reviewers
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
coderabbitai
bot
requested review from
lboehling,
mcoker,
nicolethoen and
thatblindgeye
Mash707
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 13
🤖 Fix all issues with AI Agents
In @packages/react-core/src/demos/examples/Tabs/TabsOpen.tsx:
- Line 107: The text node inside the DescriptionListDescription component
contains a typo with a double dot ("10..345.2.197"); update that string to a
valid IPv4 address by removing the extra dot and ensuring each octet is within
0–255 (e.g., change the content of DescriptionListDescription from
"10..345.2.197" to a corrected value such as "10.0.34.197" or whatever the
intended IP should be), or ask the author to confirm the correct IP if unsure.
- Around line 31-33: handleTabClick lacks parameter type annotations; update its
signature to declare the event and tab index types (e.g., change to const
handleTabClick = (event: React.SyntheticEvent, tabIndex: number) => {
setActiveTabKey(tabIndex); };), ensuring you import React types if not already
present and keep the event parameter name (or prefixed with _) if unused.
- Around line 1-27: The file declares the component as React.FunctionComponent
but never imports React; add a React import so the type annotation resolves
(e.g., import React from 'react' or import type { FunctionComponent } from
'react' and update the annotation), ensuring the symbol React.FunctionComponent
used on the TabsOpen component is defined.
In @packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx:
- Around line 32-39: The handlers handleTabClick and handleTabClickSecondary are
missing parameter type annotations; update both to include an event type (e.g.,
React.SyntheticEvent or React.MouseEvent<HTMLButtonElement | HTMLElement>) and a
typed tab key (e.g., tabIndex: number | string or React.Key) so TypeScript can
validate usages—keep the body as-is calling setActiveTabKey and
setActiveTabKeySecondary.
- Line 113: In the DescriptionListDescription node inside
TabsOpenWithSecondaryTabs (the string "10..345.2.197"), fix the typo by
replacing the malformed IP with a valid IPv4 address (e.g., "10.0.34.197") or
the intended correct value; update the literal in the DescriptionListDescription
element accordingly.
- Around line 1-27: The file declares the component as React.FunctionComponent
but never imports React, causing a compile error; fix by adding the React import
or switching to a locally imported type alias (e.g., import React, {
FunctionComponent } from 'react' or import { FunctionComponent as FC } from
'react' and use FC) so that the symbol React.FunctionComponent (or the chosen FC
alias) is defined for TabsOpenWithSecondaryTabs.
In
@packages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMaxWidths.tsx:
- Around line 1-3: The file is missing the React import required for the
React.FunctionComponent annotation; add an import for React (e.g. import * as
React from 'react' or import React from 'react') at the top of the file so the
GalleryAdjustingMaxWidths component's type (React.FunctionComponent) resolves
correctly.
In
@packages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMinMaxWidths.tsx:
- Around line 1-3: The component GalleryAdjustingMinMaxWidths uses the
React.FunctionComponent type but does not import React; add an import for React
(e.g., import React from 'react' or import * as React from 'react') at the top
of the file so the React.FunctionComponent annotation resolves, or alternatively
change the annotation to use the FC alias by importing { FC } from 'react' and
updating the component signature accordingly.
In
@packages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMinWidths.tsx:
- Around line 1-3: The component GalleryAdjustingMinWidths uses the React type
annotation React.FunctionComponent but React is not imported; add an import for
React (e.g., import React from 'react') at the top of the file so the type
React.FunctionComponent resolves, update any other Gallery examples similarly if
present, and ensure imports remain consistent with the project's JSX/runtime
configuration.
In
@packages/react-core/src/layouts/Gallery/examples/GalleryAlternativeComponents.tsx:
- Around line 5-9: The example in GalleryAlternativeComponents.tsx uses
inconsistent text casing: change the children of each GalleryItem from "Gallery
item" to "Gallery Item" to match other examples; update all occurrences in the
GalleryItem entries within this file so the label casing is standardized across
the Gallery examples.
- Around line 1-3: The file uses the React type annotation
React.FunctionComponent for GalleryAlternativeComponents but does not import
React; add an appropriate React import (e.g., import React from 'react' or
import * as React from 'react') at the top of the file so the type
React.FunctionComponent resolves correctly and the component compiles.
In @packages/react-core/src/layouts/Gallery/examples/GalleryBasic.tsx:
- Around line 1-3: The file uses the type React.FunctionComponent for
GalleryBasic but never imports React; add an import for React (e.g., `import
React from 'react'` or `import * as React from 'react'`) at the top of the file
so the React namespace is available for the type annotation on GalleryBasic.
In @packages/react-core/src/layouts/Gallery/examples/GalleryWithGutters.tsx:
- Around line 1-3: The file uses the React type annotation
React.FunctionComponent in the GalleryWithGutters component but omits importing
React; add an import for React (e.g., import * as React from 'react' or import
React from 'react') at the top so the React.FunctionComponent type resolves,
mirroring the fix applied in GalleryBasic.tsx and keeping existing imports
(Gallery, GalleryItem) intact.
🧹 Nitpick comments (1)
packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx (1)
53-139: Consider extracting shared content to reduce duplication.The
tabContentvariable (lines 53-139) is nearly identical to the same content inTabsOpen.tsx(lines 47-133). Consider extracting this into a shared component or constant to improve maintainability.This would make updates easier to maintain across both demos and align with the DRY principle.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
packages/react-core/src/demos/Tabs.mdpackages/react-core/src/demos/examples/Tabs/TabsOpen.tsxpackages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsxpackages/react-core/src/layouts/Gallery/examples/Gallery.mdpackages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMaxWidths.tsxpackages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMinMaxWidths.tsxpackages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMinWidths.tsxpackages/react-core/src/layouts/Gallery/examples/GalleryAlternativeComponents.tsxpackages/react-core/src/layouts/Gallery/examples/GalleryBasic.tsxpackages/react-core/src/layouts/Gallery/examples/GalleryWithGutters.tsx
🧰 Additional context used
🧬 Code graph analysis (7)
packages/react-core/src/layouts/Gallery/examples/GalleryBasic.tsx (1)
packages/react-core/src/layouts/Gallery/Gallery.tsx (1)
Gallery(34-72)
packages/react-core/src/layouts/Gallery/examples/GalleryAlternativeComponents.tsx (1)
packages/react-core/src/layouts/Gallery/Gallery.tsx (1)
Gallery(34-72)
packages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMinWidths.tsx (1)
packages/react-core/src/layouts/Gallery/Gallery.tsx (1)
Gallery(34-72)
packages/react-core/src/layouts/Gallery/examples/GalleryWithGutters.tsx (1)
packages/react-core/src/layouts/Gallery/Gallery.tsx (1)
Gallery(34-72)
packages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMaxWidths.tsx (1)
packages/react-core/src/layouts/Gallery/Gallery.tsx (1)
Gallery(34-72)
packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx (7)
packages/react-core/src/components/Tabs/Tabs.tsx (2)
handleTabClick(217-249)Tabs(678-678)packages/react-core/src/components/Breadcrumb/Breadcrumb.tsx (1)
Breadcrumb(19-42)packages/react-core/src/layouts/Flex/Flex.tsx (1)
Flex(487-545)packages/react-core/src/components/Title/Title.tsx (1)
Title(31-50)packages/react-core/src/components/DescriptionList/DescriptionListDescription.tsx (1)
DescriptionListDescription(11-19)packages/react-core/src/components/Tabs/Tab.tsx (1)
Tab(149-149)packages/react-core/src/components/Tabs/TabContent.tsx (1)
TabContent(89-91)
packages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMinMaxWidths.tsx (1)
packages/react-core/src/layouts/Gallery/Gallery.tsx (1)
Gallery(34-72)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Build
- GitHub Check: Build, test & deploy
🔇 Additional comments (7)
packages/react-core/src/layouts/Gallery/examples/Gallery.md (1)
15-43: LGTM! Documentation migration looks good.The migration from inline JavaScript code blocks to external TypeScript file references is clean and consistent across all Gallery examples.
packages/react-core/src/demos/Tabs.md (1)
24-56: LGTM! Documentation migration is consistent.The migration from inline code blocks to external TypeScript file references is properly applied across all Tabs demos with the appropriate
isFullscreenflag.packages/react-core/src/layouts/Gallery/examples/GalleryBasic.tsx (1)
4-13: LGTM! Clean Gallery example.The Gallery implementation correctly demonstrates the basic usage pattern with multiple items.
packages/react-core/src/layouts/Gallery/examples/GalleryWithGutters.tsx (1)
4-11: LGTM! Correct hasGutter demonstration.The
hasGutterprop is correctly applied to demonstrate Gallery spacing behavior.packages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMinMaxWidths.tsx (1)
4-24: LGTM! Responsive width configuration is correct.The combination of
minWidthsandmaxWidthsprops correctly demonstrates responsive Gallery behavior across breakpoints.packages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMinWidths.tsx (1)
4-21: LGTM! Progressive minWidths configuration is well-structured.The
minWidthsconfiguration correctly demonstrates responsive behavior with progressively larger minimum widths across breakpoints.packages/react-core/src/layouts/Gallery/examples/GalleryAlternativeComponents.tsx (1)
4-10: LGTM! Alternative component rendering works correctly.The use of
component="ul"andcomponent="li"props correctly demonstrates how to render Gallery with semantic HTML list elements.
packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx
Show resolved
Hide resolved
packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx
Outdated
Show resolved
Hide resolved
packages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMinWidths.tsx
Show resolved
Hide resolved
packages/react-core/src/layouts/Gallery/examples/GalleryAlternativeComponents.tsx
Show resolved
Hide resolved
packages/react-core/src/layouts/Gallery/examples/GalleryAlternativeComponents.tsx
Outdated
Show resolved
Hide resolved
|
Preview: https://pf-react-pr-12198.surge.sh A11y report: https://pf-react-pr-12198-a11y.surge.sh |
thatblindgeye
left a comment
thatblindgeye
left a comment
There was a problem hiding this comment.
This also overall lgtm, similar comment from your other PR that there's some typescripty updated CodeRabbit flagged that we should implement. The minor comments (which I think are more nitpicky but who am I to question our rabbit overlords) about example verbiage (IP address and use of lowercase vs uppercase "i") are up to you if you want to sneak update in. I won't block if you don't.
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Fix all issues with AI agents
In @packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx:
- Line 113: The demo contains a malformed IP string inside the
DescriptionListDescription element in TabsOpenWithSecondaryTabs (currently
"10..345.2.197"); replace it with a syntactically and numerically valid IPv4
address (e.g., "10.34.52.197") so the demo shows a correct data format; update
the string value in the DescriptionListDescription node accordingly.
- Around line 27-39: The state hooks activeTabKey/setActiveTabKey and
activeTabKeySecondary/setActiveTabKeySecondary are inferred as number but the
handlers handleTabClick and handleTabClickSecondary accept number | string; fix
by adding explicit generic type to the useState calls (useState<number |
string>(...)) for both activeTabKey and activeTabKeySecondary so the setter
signatures match the Tabs onSelect eventKey type.
In
@packages/react-core/src/layouts/Gallery/examples/GalleryAlternativeComponents.tsx:
- Line 1: The file declares the component type using React.FunctionComponent
(GalleryAlternativeComponents) but never imports React, causing a TS compile
error; add an import for React (e.g., import React from 'react' or import * as
React from 'react') at the top of the file so React.FunctionComponent resolves,
then ensure the import sits above the existing import of Gallery and
GalleryItem.
🧹 Nitpick comments (2)
packages/react-core/src/layouts/Gallery/examples/GalleryAlternativeComponents.tsx (1)
5-9: Consider reducing duplication (optional).The five identical
GalleryItemcomponents could be refactored usingArray.from()or similar for cleaner code. However, for a demo/example, the explicit approach is perfectly acceptable and may even be clearer for documentation purposes.♻️ Alternative implementation (if preferred)
export const GalleryAlternativeComponents: React.FunctionComponent = () => ( <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> + {Array.from({ length: 5 }, (_, i) => ( + <GalleryItem key={i} component="li">Gallery Item</GalleryItem> + ))} </Gallery> );packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx (1)
109-109: Consider using more descriptive placeholder content.The placeholder text
"stuff"for Tolerations and Annotations could be replaced with more realistic example values to better demonstrate the interface.💡 Suggested improvements
<DescriptionListGroup> <DescriptionListTerm>Tolerations</DescriptionListTerm> - <DescriptionListDescription>stuff</DescriptionListDescription> + <DescriptionListDescription>node.kubernetes.io/not-ready:NoExecute for 300s</DescriptionListDescription> </DescriptionListGroup><DescriptionListGroup> <DescriptionListTerm>Annotations</DescriptionListTerm> - <DescriptionListDescription>stuff</DescriptionListDescription> + <DescriptionListDescription>k8s.v1.cni.cncf.io/network-status: [{...}]</DescriptionListDescription> </DescriptionListGroup>Also applies to: 117-117
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/react-core/src/demos/examples/Tabs/TabsOpen.tsxpackages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsxpackages/react-core/src/layouts/Gallery/examples/GalleryAlternativeComponents.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/react-core/src/demos/examples/Tabs/TabsOpen.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Build
- GitHub Check: Build, test & deploy
🔇 Additional comments (1)
packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx (1)
141-227: LGTM! Well-structured nested tabs implementation.The component properly implements:
- Correct linkage between Tab
eventKey/tabContentIdand TabContentid/eventKeyprops- Appropriate hiding logic for all TabContent components
- Proper nesting of secondary tabs within the primary Details tab
- Good accessibility with descriptive
aria-labelattributes on all sectionsThe two-level tab structure provides a clear demonstration of PatternFly's nested tabs pattern.
| export const TabsOpenWithSecondaryTabs: React.FunctionComponent = () => { | ||
| const [activeTabKey, setActiveTabKey] = useState(0); | ||
| const [activeTabKeySecondary, setActiveTabKeySecondary] = useState(10); | ||
|
|
||
| // Toggle currently active tab | ||
| const handleTabClick = (_event: React.MouseEvent<HTMLElement>, tabIndex: number | string) => { | ||
| setActiveTabKey(tabIndex); | ||
| }; | ||
|
|
||
| // Toggle currently active secondary tab | ||
| const handleTabClickSecondary = (_event: React.MouseEvent<HTMLElement>, tabIndex: number | string) => { | ||
| setActiveTabKeySecondary(tabIndex); | ||
| }; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, verify the file exists and check its structure
ls -la packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx
wc -l packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsxRepository: patternfly/patternfly-react
Length of output: 271
🏁 Script executed:
# Read the relevant sections of the file to understand the context
head -50 packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsxRepository: patternfly/patternfly-react
Length of output: 1656
🏁 Script executed:
# Check if there's a tsconfig or if TypeScript is configured in the project
find packages/react-core -name "tsconfig.json" -o -name "tsconfig.*.json" | head -5Repository: patternfly/patternfly-react
Length of output: 142
🏁 Script executed:
# Check the TypeScript configuration
cat packages/react-core/tsconfig.json | head -40Repository: patternfly/patternfly-react
Length of output: 474
🏁 Script executed:
# Try to compile the specific file using the project's tsconfig
cd packages/react-core && npx tsc --noEmit src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx 2>&1 | head -50Repository: patternfly/patternfly-react
Length of output: 697
🏁 Script executed:
# Check if there are type definitions for Tabs component to understand the onSelect callback signature
find packages/react-core/src -name "*.d.ts" -o -name "*.tsx" | xargs grep -l "interface.*Tabs\|type.*Tabs" 2>/dev/null | head -3Repository: patternfly/patternfly-react
Length of output: 119
🏁 Script executed:
# Read the Tabs component to understand the onSelect callback signature
cat -n packages/react-core/src/components/Tabs/Tabs.tsx | grep -A 5 -B 5 "onSelect"Repository: patternfly/patternfly-react
Length of output: 2566
🏁 Script executed:
# Look for the Tabs component props interface/type
ast-grep --pattern $'interface TabsProps {
$$$
onSelect?: ($_: $_, tabIndex: $_) => $_
$$$
}'Repository: patternfly/patternfly-react
Length of output: 53
🏁 Script executed:
# Search for onSelect in the Tabs component more broadly
grep -n "onSelect" packages/react-core/src/components/Tabs/Tabs.tsx | head -20Repository: patternfly/patternfly-react
Length of output: 407
🏁 Script executed:
# Now find TabProps to understand what eventKey type is
grep -n "eventKey" packages/react-core/src/components/Tabs/Tabs.tsx | head -15Repository: patternfly/patternfly-react
Length of output: 877
🏁 Script executed:
# Check Tab component to see how eventKey is defined
grep -n "eventKey" packages/react-core/src/components/Tabs/Tab.tsx | head -15Repository: patternfly/patternfly-react
Length of output: 656
🏁 Script executed:
# Read the Tab component props to confirm eventKey type
sed -n '1,100p' packages/react-core/src/components/Tabs/Tab.tsx | grep -A 10 "interface TabProps"Repository: patternfly/patternfly-react
Length of output: 671
🏁 Script executed:
# Check the actual eventKey values used in the demo file
grep -n "eventKey\|key=" packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx | head -30Repository: patternfly/patternfly-react
Length of output: 1422
🏁 Script executed:
# Try compiling with npm and TypeScript in the project
cd packages/react-core && npm list typescript 2>&1 | head -5Repository: patternfly/patternfly-react
Length of output: 137
🏁 Script executed:
# Check if there's a build script or test that would catch this
cd packages/react-core && cat package.json | grep -A 5 '"scripts"'Repository: patternfly/patternfly-react
Length of output: 461
🏁 Script executed:
# Let's check if the demo files are type-checked as part of the build
cd packages/react-core && grep -r "TabsOpenWithSecondaryTabs" . --include="*.json" --include="*.js" --include="*.ts" 2>/dev/null | grep -v node_modules | head -10Repository: patternfly/patternfly-react
Length of output: 53
Add explicit type to state hooks to match handler parameter types.
The event handlers accept tabIndex: number | string from the Tabs onSelect callback, but the state is initialized as useState(0), which TypeScript infers as type number. This creates a type mismatch when passing number | string to state setters expecting number.
While all tab eventKeys in this demo are numeric, add explicit type annotations to the useState calls for type safety:
const [activeTabKey, setActiveTabKey] = useState<number | string>(0);
const [activeTabKeySecondary, setActiveTabKeySecondary] = useState<number | string>(10);This aligns the state type with the handler parameters and the Tabs component's eventKey type signature.
🤖 Prompt for AI Agents
In @packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx
around lines 27 - 39, The state hooks activeTabKey/setActiveTabKey and
activeTabKeySecondary/setActiveTabKeySecondary are inferred as number but the
handlers handleTabClick and handleTabClickSecondary accept number | string; fix
by adding explicit generic type to the useState calls (useState<number |
string>(...)) for both activeTabKey and activeTabKeySecondary so the setter
signatures match the Tabs onSelect eventKey type.
| </DescriptionListGroup> | ||
| <DescriptionListGroup> | ||
| <DescriptionListTerm>Pod IP</DescriptionListTerm> | ||
| <DescriptionListDescription>10..345.2.197</DescriptionListDescription> |
There was a problem hiding this comment.
Fix the malformed IP address in demo content.
The IP address 10..345.2.197 contains a double period and an invalid octet (345 exceeds the valid range of 0-255). While this is demo code, it should demonstrate valid data formats.
🔧 Suggested fix
- <DescriptionListDescription>10..345.2.197</DescriptionListDescription>
+ <DescriptionListDescription>10.0.45.197</DescriptionListDescription>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <DescriptionListDescription>10..345.2.197</DescriptionListDescription> | |
| <DescriptionListDescription>10.0.45.197</DescriptionListDescription> |
🤖 Prompt for AI Agents
In @packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx at
line 113, The demo contains a malformed IP string inside the
DescriptionListDescription element in TabsOpenWithSecondaryTabs (currently
"10..345.2.197"); replace it with a syntactically and numerically valid IPv4
address (e.g., "10.34.52.197") so the demo shows a correct data format; update
the string value in the DescriptionListDescription node accordingly.
packages/react-core/src/layouts/Gallery/examples/GalleryAlternativeComponents.tsx
Show resolved
Hide resolved
4 participants
Towards #11952
The following examples and demos are updated:
Summary by CodeRabbit
Documentation
New Features
✏️ Tip: You can customize this high-level summary in your review settings.