Summary: Harden the new Compass Layout component for responsiveness and theming. This includes complex behavior such as collapsing headers, collapsible sidebars (nubbins), and conditional rendering of regions (footer/toolbars) based on content availability and screen size.
Scope / Child Issues:
-
Cross-Theme QA: Ensure Compass Layout renders correctly in both Default and Unified themes.
-
remove the 'isCircle' modifiers from the buttons in the demos so that they get their border radii from the theme tokens.
-
Responsive Logic
-
Header: Implement logic for the Compass Header to collapse into a toolbar at smaller breakpoints.
-
Sidebar Toggles: Implement the sidebar toggle mechanism ("nubbin") for expanding/collapsing side panels.
-
Conditional Region Rendering: Ensure regions (e.g., Footer Toolbar) do not render DOM elements if they have no children/content.
-
Ensure pill/circle shaped buttons/menutoggles are being used in both default and unified themes in:
-
compass header/footer
-
compass sidebars
-
compass docked nav
-
Developer Demos: Create documentation/demos showing how to conditionally render controls in different regions based on React + Media Queries.
Jira Issue: PF-3180
Summary: Harden the new Compass Layout component for responsiveness and theming. This includes complex behavior such as collapsing headers, collapsible sidebars (nubbins), and conditional rendering of regions (footer/toolbars) based on content availability and screen size.
Scope / Child Issues:
Cross-Theme QA: Ensure Compass Layout renders correctly in both Default and Unified themes.
remove the 'isCircle' modifiers from the buttons in the demos so that they get their border radii from the theme tokens.
Responsive Logic
Header: Implement logic for the Compass Header to collapse into a toolbar at smaller breakpoints.
Sidebar Toggles: Implement the sidebar toggle mechanism ("nubbin") for expanding/collapsing side panels.
Conditional Region Rendering: Ensure regions (e.g., Footer Toolbar) do not render DOM elements if they have no children/content.
Ensure pill/circle shaped buttons/menutoggles are being used in both default and unified themes in:
compass header/footer
compass sidebars
compass docked nav
Developer Demos: Create documentation/demos showing how to conditionally render controls in different regions based on React + Media Queries.
Jira Issue: PF-3180