Add gallery to the about page #366
Conversation
| includeSubsections={true} | ||
| hasGridText={true} | ||
| isFullWidth={false} | ||
| /> | ||
|
|
||
| **Note:** This extension replaces [`RedHatInsights/frontend-components`](https://github.com/RedHatInsights/frontend-components). If you previoulsy used `frontend-components`, you can refer to [this migration guide](https://github.com/patternfly/react-component-groups/blob/main/migration.md) to help you transition to `react-component-groups`. |
There was a problem hiding this comment.
| **Note:** This extension replaces [`RedHatInsights/frontend-components`](https://github.com/RedHatInsights/frontend-components). If you previoulsy used `frontend-components`, you can refer to [this migration guide](https://github.com/patternfly/react-component-groups/blob/main/migration.md) to help you transition to `react-component-groups`. | |
| **Note:** This extension replaces [`RedHatInsights/frontend-components`](https://github.com/RedHatInsights/frontend-components). If you previoulsy used `frontend-components`, you can refer to [this migration guide](https://github.com/patternfly/react-component-groups/blob/main/migration.md) to help you transition to `react-component-groups`. |
What do you think about moving this up to line 11 or so? Right below the note about the package location. Just to make sure it's easy to spot
| The creation and maintenance of this extension is a collaborative effort between the PatternFly and Red Hat Hybrid Cloud Console teams. All component groups receive accessibility and design reviews, and we are working to improve internationalization, add unit test coverage, and ensure that CSS overrides all correctly reference the PatternFly CSS API. | ||
| The creation and maintenance of this extension is a collaborative effort between the PatternFly and Red Hat Hybrid Cloud Console teams. All component groups receive accessibility and design reviews, and we are working to improve internationalization, add test coverage, and ensure that CSS overrides all correctly reference the PatternFly CSS API. | ||
|
|
||
| Below, you can see a gallery of categories representing the components: |
There was a problem hiding this comment.
| Below, you can see a gallery of categories representing the components: | |
| There are a few different functional categories of component groups: |
| <SectionGallery | ||
| section="Component groups" | ||
| galleryItemsData={galleryData} | ||
| placeholderText="Search component groups by name" |
There was a problem hiding this comment.
| placeholderText="Search component groups by name" | |
| placeholderText="Search component groups by name" |
maybe we can just remove the search bar for now, since there's not a lot to filter through? but if that's a lot of work, it's doing no harm by being there!
There was a problem hiding this comment.
@edonehoo the gallery component does not allow it yet. We may want to talk to @nicolethoen about the possibility of adding that configuration.
| @@ -0,0 +1,17 @@ | |||
| { | |||
| "content-containers": { | |||
| "summary": "Provide layout components to organize and display content in structured and flexible formats." | |||
There was a problem hiding this comment.
| "summary": "Provide layout components to organize and display content in structured and flexible formats." | |
| "summary": "Organize and display information in structured or flexible containers." |
| "summary": "Provide layout components to organize and display content in structured and flexible formats." | ||
| }, | ||
| "controls": { | ||
| "summary": "Include components that manage user interactions and input, enabling intuitive navigation and selection." |
There was a problem hiding this comment.
| "summary": "Include components that manage user interactions and input, enabling intuitive navigation and selection." | |
| "summary": "Enable more effective navigation and selection by providing users with options for interaction and input." |
| "summary": "Include components that manage user interactions and input, enabling intuitive navigation and selection." | ||
| }, | ||
| "error-communication": { | ||
| "summary": "Contain various error and alert states to communicate issues or restrictions." |
There was a problem hiding this comment.
| "summary": "Contain various error and alert states to communicate issues or restrictions." | |
| "summary": "Communicate issues or restrictions through error and alert states." |
| "summary": "Contain various error and alert states to communicate issues or restrictions." | ||
| }, | ||
| "helpers": { | ||
| "summary": "Offer utility components that enhance usability and provide additional guidance or information within the UI." |
There was a problem hiding this comment.
| "summary": "Offer utility components that enhance usability and provide additional guidance or information within the UI." | |
| "summary": "Provide users with utilities that enhance usability and provide additional guidance or information within the UI." |
| "summary": "Offer utility components that enhance usability and provide additional guidance or information within the UI." | ||
| }, | ||
| "status-and-state-indicators": { | ||
| "summary": "Visualize entity states, statuses, and loading indicators to inform users of system conditions or processes." |
There was a problem hiding this comment.
| "summary": "Visualize entity states, statuses, and loading indicators to inform users of system conditions or processes." | |
| "summary": "Inform users of system conditions or processes through visualizations of entity states, statuses, and loading indicators." |
|
@edonehoo your comments should be addressed, thank you! I also found a way of displaying also the components in the gallery. Just it does not seem to support displaying per category (just all components or none). @nicolethoen do you think it would be possible to improve the Section Gallery to accept also a subsection? We would like achieve something like this |
|
@fhlavac I'd say it's definitely possible to improve the Section Gallery, really in any way :) The code lives here: |
|
@nicolethoen thank you, sounds good. So @edonehoo are we good to merge this as a step 1? Or would you prefer to display all components without categories instead? I'll then open tickets to enhance SectionGallery and create galleries per category here. |
|
@fhlavac I think this is good to start with, because it provides definitions for the categories, which we don't do anywhere else. Meanwhile, the individual components all at least have docs for context. |
packages/module/patternfly-docs/content/extensions/component-groups/about-component-groups.md
Outdated
Show resolved
Hide resolved
…roups/about-component-groups.md Co-authored-by: Erin Donehoo <[email protected]>
|
🎉 This PR is included in version 6.0.0-prerelease.6 🎉 The release is available on: Your semantic-release bot 📦🚀 |
RHCLOUD-35173
closes #324
Added gallery to the "About" page
@edonehoo