Skip to content

docs:(panel):v6 design guidelines image updates #4652

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
andrew-ronaldson merged 3 commits into from
Jun 16, 2025
Merged

docs:(panel):v6 design guidelines image updates #4652

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b0fa385
docs:(panel):v6 design guidelines image updates
kaylachumley Jun 12, 2025
21ec4bc
docs:(panel):v6 design guidelines image updates
kaylachumley Jun 13, 2025
a67c1c0
Merge branch 'main' into iss4562
andrew-ronaldson Jun 16, 2025
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
7 changes: 7 additions & 0 deletions .../patternfly-docs/content/design-guidelines/components/panel/img/basic-panel.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed .../patternfly-docs/content/design-guidelines/components/panel/img/basic_panel.jpg
View file
Open in desktop
Binary file not shown.
Binary file removed .../patternfly-docs/content/design-guidelines/components/panel/img/basic_panel.png
View file
Open in desktop
Binary file not shown.
59 changes: 59 additions & 0 deletions ...patternfly-docs/content/design-guidelines/components/panel/img/search-panel.svg
View file
Open in desktop
Copy link
Copy Markdown
Contributor

@bekah-stephens bekah-stephens Jun 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is the dropdown supposed to span all the way to the edge of the -> button? (it does in the old screenshot, so just wanted to check)

Copy link
Copy Markdown
Collaborator Author

@kaylachumley kaylachumley Jun 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bekah-stephens good catch - It doesn't extend to the button in the advanced search react demo but it does in the plain react examples. I'll make an issue to update the react demo and update this image

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed ...patternfly-docs/content/design-guidelines/components/panel/img/search_panel.jpg
View file
Open in desktop
Binary file not shown.
Binary file removed ...patternfly-docs/content/design-guidelines/components/panel/img/search_panel.png
View file
Open in desktop
Binary file not shown.
11 changes: 8 additions & 3 deletions ...tation-site/patternfly-docs/content/design-guidelines/components/panel/panel.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ id: Panel
section: components
---

import '../components.css';

## Usage
Panels are commonly used:
- To provide more content structure through the UI.
Expand All @@ -11,7 +13,10 @@ Panels are commonly used:
### Examples

The panel is used as a content block with a header, body, and footer.<br/>
<img src="./img/basic_panel.jpg" alt="A basic panel with a header, body and footer" width="600" /><br/>
<div class="ws-docs-content-img">![A basic panel with a header, body and footer.](./img/basic-panel.svg)</div><br/>

The panel is used as a dropdown menu for <a href="https://www.patternfly.org/components/search-input/react-demos#composable-advanced-search">advanced search input</a>.<br/>

The panel is used a dropdown menu for <a href="https://v4-archive.patternfly.org/v4/components/search-input/react-demos/#composable-advanced-search">advanced search input</a>.<br/>
<img src="./img/search_panel.jpg" alt="The panel is used a dropdown menu for advanced search input" width="600" />
<div class="ws-docs-content-img">
![A panel being used as a dropdown menu for advanced search input.](./img/search-panel.svg)
</div>