diff --git a/packages/react-core/package.json b/packages/react-core/package.json index dce5ad213c6..f5709f26fb1 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -54,7 +54,7 @@ "tslib": "^2.8.1" }, "devDependencies": { - "@patternfly/patternfly": "6.5.0-prerelease.71", + "@patternfly/patternfly": "6.5.0-prerelease.72", "case-anything": "^3.1.2", "css": "^3.0.0", "fs-extra": "^11.3.3" diff --git a/packages/react-core/src/components/Compass/CompassContent.tsx b/packages/react-core/src/components/Compass/CompassContent.tsx index 960c5e52a34..4397f1314d1 100644 --- a/packages/react-core/src/components/Compass/CompassContent.tsx +++ b/packages/react-core/src/components/Compass/CompassContent.tsx @@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Compass/compass'; import { css } from '@patternfly/react-styles'; export interface CompassContentProps extends React.HTMLProps { - /** Content of the main Compass area. Typically one or more CompassPanel components. */ + /** Content of the main Compass area. Typically one or more `Panel` components. */ children: React.ReactNode; /** Additional classes added to the CompassContent */ className?: string; diff --git a/packages/react-core/src/components/Compass/CompassMainHeader.tsx b/packages/react-core/src/components/Compass/CompassMainHeader.tsx index 9e52c8e172a..2351ca4bfa2 100644 --- a/packages/react-core/src/components/Compass/CompassMainHeader.tsx +++ b/packages/react-core/src/components/Compass/CompassMainHeader.tsx @@ -1,12 +1,12 @@ -import { CompassPanel, CompassPanelProps } from './CompassPanel'; import { CompassMainHeaderContent } from './CompassMainHeaderContent'; import { CompassMainHeaderTitle } from './CompassMainHeaderTitle'; import { CompassMainHeaderToolbar } from './CompassMainHeaderToolbar'; +import { Panel, PanelMain, PanelMainBody, PanelProps } from '../Panel'; import styles from '@patternfly/react-styles/css/components/Compass/compass'; import { css } from '@patternfly/react-styles'; /** The wrapper component for header content in the main Compass area. When building out a custom implementation, - * you should ensure any content within the main header is rendered inside a Compass panel and main header content wrappers. + * you should ensure any content within the main header is rendered inside a Panel, PanelMain, PanelMainBody stack and main header content wrappers. */ export interface CompassMainHeaderProps extends Omit, 'title'> { @@ -18,10 +18,10 @@ export interface CompassMainHeaderProps extends Omit; + compassPanelProps?: Omit; } export const CompassMainHeader: React.FunctionComponent = ({ @@ -34,12 +34,16 @@ export const CompassMainHeader: React.FunctionComponent }: CompassMainHeaderProps) => { const _content = title !== undefined || toolbar !== undefined ? ( - - - {title && {title}} - {toolbar && {toolbar}} - - + + + + + {title && {title}} + {toolbar && {toolbar}} + + + + ) : ( children ); diff --git a/packages/react-core/src/components/Compass/CompassMainHeaderContent.tsx b/packages/react-core/src/components/Compass/CompassMainHeaderContent.tsx index 590ecd25427..092936319ad 100644 --- a/packages/react-core/src/components/Compass/CompassMainHeaderContent.tsx +++ b/packages/react-core/src/components/Compass/CompassMainHeaderContent.tsx @@ -2,7 +2,7 @@ import styles from '@patternfly/react-styles/css/components/Compass/compass'; import { css } from '@patternfly/react-styles'; /** A wrapper component to be passed as custom content for the Compass main header. This should also be wrapped - * in a Compass panel component. + * in a `Panel` with `PanelMain` and `PanelMainBody`. */ export interface CompassMainHeaderContentProps extends React.HTMLProps { diff --git a/packages/react-core/src/components/Compass/CompassPanel.tsx b/packages/react-core/src/components/Compass/CompassPanel.tsx deleted file mode 100644 index d7b77843e77..00000000000 --- a/packages/react-core/src/components/Compass/CompassPanel.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import styles from '@patternfly/react-styles/css/components/Compass/compass'; -import { css } from '@patternfly/react-styles'; - -export interface CompassPanelProps extends React.HTMLProps { - /** Content of the panel. */ - children: React.ReactNode; - /** Additional classes added to the panel. */ - className?: string; - /** Indicates the panel should have a pill border radius */ - isPill?: boolean; - /** Indicates the panel should expand to fill the available height */ - isFullHeight?: boolean; - /** Indicates the panel should scroll its overflow */ - isScrollable?: boolean; - /** Indicates the panel should have no border */ - hasNoBorder?: boolean; - /** Indicates the panel should have no padding */ - hasNoPadding?: boolean; - /** Indicates the panel should have a "thinking" animation */ - isThinking?: boolean; -} - -export const CompassPanel: React.FunctionComponent = ({ - children, - className, - isPill, - hasNoBorder, - hasNoPadding, - isThinking, - isFullHeight, - isScrollable, - ...props -}: CompassPanelProps) => ( -
- {children} -
-); - -CompassPanel.displayName = 'CompassPanel'; diff --git a/packages/react-core/src/components/Compass/__tests__/CompassMainHeader.test.tsx b/packages/react-core/src/components/Compass/__tests__/CompassMainHeader.test.tsx index 1ef47f8c7bc..0133f5eaa04 100644 --- a/packages/react-core/src/components/Compass/__tests__/CompassMainHeader.test.tsx +++ b/packages/react-core/src/components/Compass/__tests__/CompassMainHeader.test.tsx @@ -1,6 +1,7 @@ import { render, screen } from '@testing-library/react'; import { CompassMainHeader } from '../CompassMainHeader'; import styles from '@patternfly/react-styles/css/components/Compass/compass'; +import panelStyles from '@patternfly/react-styles/css/components/Panel/panel'; test('Renders without children', () => { render( @@ -74,21 +75,21 @@ test('Renders children when neither title nor toolbar are provided', () => { expect(screen.getByText('Custom children content')).toBeVisible(); }); -test('Renders CompassPanel when title is passed', () => { +test('Renders Panel when title is passed', () => { render(); const panel = screen.getByTestId('test-id').firstChild; - expect(panel).toHaveClass(styles.compassPanel); + expect(panel).toHaveClass(panelStyles.panel); }); -test('Renders CompassPanel when toolbar is passed', () => { +test('Renders Panel when toolbar is passed', () => { render(); const panel = screen.getByTestId('test-id').firstChild; - expect(panel).toHaveClass(styles.compassPanel); + expect(panel).toHaveClass(panelStyles.panel); }); -test('Does not render CompassPanel when children are passed', () => { +test('Does not render Panel when children are passed', () => { render(
Children content
@@ -96,10 +97,10 @@ test('Does not render CompassPanel when children are passed', () => { ); const content = screen.getByTestId('test-id').firstChild; - expect(content).not.toHaveClass(styles.compassPanel); + expect(content).not.toHaveClass(panelStyles.panel); }); -test('Passes props to CompassPanel when title and compassPanelProps is passed', () => { +test('Passes props to Panel when title and compassPanelProps is passed', () => { render( ); @@ -108,7 +109,7 @@ test('Passes props to CompassPanel when title and compassPanelProps is passed', expect(panel).toHaveClass('panel-class'); }); -test('Passes props to CompassPanel when toolbar and compassPanelProps is passed', () => { +test('Passes props to Panel when toolbar and compassPanelProps is passed', () => { render( ); diff --git a/packages/react-core/src/components/Compass/__tests__/CompassPanel.test.tsx b/packages/react-core/src/components/Compass/__tests__/CompassPanel.test.tsx deleted file mode 100644 index 64a66961d61..00000000000 --- a/packages/react-core/src/components/Compass/__tests__/CompassPanel.test.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import { CompassPanel } from '../CompassPanel'; -import styles from '@patternfly/react-styles/css/components/Compass/compass'; - -test('Renders with children', () => { - render(Test content); - expect(screen.getByText('Test content')).toBeVisible(); -}); - -test('Renders with custom class name when className prop is provided', () => { - render(Test); - expect(screen.getByText('Test')).toHaveClass('custom-class'); -}); - -test(`Renders with default ${styles.compassPanel} class`, () => { - render(Test); - expect(screen.getByText('Test')).toHaveClass(styles.compassPanel); -}); - -test(`Renders with ${styles.modifiers.pill} when isPill is true`, () => { - render(Test); - expect(screen.getByText('Test')).toHaveClass(styles.modifiers.pill); -}); - -test(`Renders with ${styles.modifiers.noBorder} when hasNoBorder is true`, () => { - render(Test); - expect(screen.getByText('Test')).toHaveClass(styles.modifiers.noBorder); -}); - -test(`Renders with ${styles.modifiers.noPadding} when hasNoPadding is true`, () => { - render(Test); - expect(screen.getByText('Test')).toHaveClass(styles.modifiers.noPadding); -}); - -test('Renders with pf-v6-m-thinking when isThinking is true', () => { - render(Test); - expect(screen.getByText('Test')).toHaveClass('pf-v6-m-thinking'); -}); - -test(`Renders with ${styles.modifiers.fullHeight} when isFullHeight is true`, () => { - render(Test); - expect(screen.getByText('Test')).toHaveClass(styles.modifiers.fullHeight); -}); - -test(`Renders with ${styles.modifiers.scrollable} when isScrollable is true`, () => { - render(Test); - expect(screen.getByText('Test')).toHaveClass(styles.modifiers.scrollable); -}); - -test('Renders with multiple modifier classes when multiple props are true', () => { - render( - - Test - - ); - const panelElement = screen.getByText('Test'); - expect(panelElement).toHaveClass(styles.modifiers.pill); - expect(panelElement).toHaveClass(styles.modifiers.noBorder); - expect(panelElement).toHaveClass(styles.modifiers.noPadding); - expect(panelElement).toHaveClass('pf-v6-m-thinking'); - expect(panelElement).toHaveClass(styles.modifiers.fullHeight); - expect(panelElement).toHaveClass(styles.modifiers.scrollable); -}); - -test('Renders with additional props spread to the component', () => { - render(Test); - expect(screen.getByText('Test')).toHaveAccessibleName('Test label'); -}); - -test('Matches the snapshot with all modifiers', () => { - const { asFragment } = render( - -
Panel with all modifiers
-
- ); - expect(asFragment()).toMatchSnapshot(); -}); - -test('Matches the snapshot with no modifiers', () => { - const { asFragment } = render( - -
Basic panel
-
- ); - expect(asFragment()).toMatchSnapshot(); -}); diff --git a/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassMainHeader.test.tsx.snap b/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassMainHeader.test.tsx.snap index fe09fdd8fee..e674266cf33 100644 --- a/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassMainHeader.test.tsx.snap +++ b/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassMainHeader.test.tsx.snap @@ -6,23 +6,31 @@ exports[`Matches the snapshot with both title and toolbar 1`] = ` class="pf-v6-c-compass__main-header" >
-
- Title -
-
-
-
- Toolbar +
+
+
+ Title +
+
+
+
+ Toolbar +
+
diff --git a/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassPanel.test.tsx.snap b/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassPanel.test.tsx.snap deleted file mode 100644 index d9557da1c91..00000000000 --- a/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassPanel.test.tsx.snap +++ /dev/null @@ -1,25 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Matches the snapshot with all modifiers 1`] = ` - -
-
- Panel with all modifiers -
-
-
-`; - -exports[`Matches the snapshot with no modifiers 1`] = ` - -
-
- Basic panel -
-
-
-`; diff --git a/packages/react-core/src/components/Compass/examples/Compass.md b/packages/react-core/src/components/Compass/examples/Compass.md index a1f9d597df6..8684b5eeb0f 100644 --- a/packages/react-core/src/components/Compass/examples/Compass.md +++ b/packages/react-core/src/components/Compass/examples/Compass.md @@ -11,7 +11,6 @@ propComponents: 'CompassContent', 'CompassHero', 'CompassMainHeader', - 'CompassPanel', 'CompassMessageBar', 'CompassMainFooter' ] @@ -33,7 +32,7 @@ In a basic Compass layout, content can be passed to the following props to popul - `header`: Content rendered at the top of the page, typically including a `` component that divides the header into 3 areas, with a logo or brand, middle navigation, and profile. - `sidebarStart`: Content rendered at the horizontal start of the page (by default, the left side). -- `main`: Content rendered in the center of the page, typically including a `` or ``, along with a `` filled with 1 or more `` components. +- `main`: Content rendered in the center of the page, typically including a `` or ``, along with a `` filled with 1 or more `` components. - `sidebarEnd`: Content rendered at the horizontal end of the page (by default, the right side). - `footer`: Content rendered at the bottom of the page. @@ -67,10 +66,14 @@ When using the `children` property in the `` component, there ```noLive - - - {Your custom content goes here, which can include the and/or sub-components} - - + + + + + {Your custom content goes here, which can include the and/or sub-components} + + + + ``` diff --git a/packages/react-core/src/components/Compass/examples/CompassBasic.tsx b/packages/react-core/src/components/Compass/examples/CompassBasic.tsx index fd3cd1a57cb..d6ea4b184dd 100644 --- a/packages/react-core/src/components/Compass/examples/CompassBasic.tsx +++ b/packages/react-core/src/components/Compass/examples/CompassBasic.tsx @@ -4,7 +4,9 @@ import { CompassHero, CompassContent, CompassMainHeader, - CompassPanel, + Panel, + PanelMain, + PanelMainBody, CompassMainHeaderContent } from '@patternfly/react-core'; import './compass.css'; @@ -20,11 +22,15 @@ export const CompassBasic: React.FunctionComponent = () => { - - -
Content title
-
-
+ + + + +
Content title
+
+
+
+
Content
diff --git a/packages/react-core/src/components/Compass/examples/CompassDockLayout.tsx b/packages/react-core/src/components/Compass/examples/CompassDockLayout.tsx index 9d7357467c7..09cf87dc5f7 100644 --- a/packages/react-core/src/components/Compass/examples/CompassDockLayout.tsx +++ b/packages/react-core/src/components/Compass/examples/CompassDockLayout.tsx @@ -2,7 +2,9 @@ import { Compass, CompassContent, CompassMainHeader, - CompassPanel, + Panel, + PanelMain, + PanelMainBody, CompassMainHeaderContent } from '@patternfly/react-core'; import './compass.css'; @@ -12,11 +14,15 @@ export const CompassBasic: React.FunctionComponent = () => { const mainContent = ( - - -
Content title
-
-
+ + + + +
Content title
+
+
+
+
Content
diff --git a/packages/react-core/src/components/Compass/index.ts b/packages/react-core/src/components/Compass/index.ts index 7aef7c2e42e..497058dc247 100644 --- a/packages/react-core/src/components/Compass/index.ts +++ b/packages/react-core/src/components/Compass/index.ts @@ -12,4 +12,3 @@ export * from './CompassNavContent'; export * from './CompassNavHome'; export * from './CompassNavMain'; export * from './CompassNavSearch'; -export * from './CompassPanel'; diff --git a/packages/react-core/src/components/Panel/Panel.tsx b/packages/react-core/src/components/Panel/Panel.tsx index 31c82bd70c8..ded11636c72 100644 --- a/packages/react-core/src/components/Panel/Panel.tsx +++ b/packages/react-core/src/components/Panel/Panel.tsx @@ -12,6 +12,16 @@ export interface PanelProps extends React.HTMLProps { variant?: 'raised' | 'bordered' | 'secondary'; /** Flag to add scrollable styling to the panel */ isScrollable?: boolean; + /** @beta When used with a scrollable panel, sets the panel to auto height (scrollable-auto-height modifier) */ + isAutoHeight?: boolean; + /** @beta Flag to remove the panel's border */ + hasNoBorder?: boolean; + /** @beta Flag to make the panel fill the available height of its container */ + isFullHeight?: boolean; + /** @beta Modifies the panel to use glass styling when the glass theme is enabled */ + isGlass?: boolean; + /** @beta Uses pill (fully rounded) border radius for the panel */ + isPill?: boolean; /** @hide Forwarded ref */ innerRef?: React.Ref; } @@ -21,6 +31,11 @@ const PanelBase: React.FunctionComponent = ({ children, variant, isScrollable, + isAutoHeight, + hasNoBorder, + isFullHeight, + isGlass, + isPill, innerRef, ...props }: PanelProps) => ( @@ -29,6 +44,11 @@ const PanelBase: React.FunctionComponent = ({ styles.panel, variant && styles.modifiers[variant], isScrollable && styles.modifiers.scrollable, + isAutoHeight && styles.modifiers.scrollableAutoHeight, + hasNoBorder && styles.modifiers.noBorder, + isFullHeight && styles.modifiers.fullHeight, + isGlass && styles.modifiers.glass, + isPill && styles.modifiers.pill, className )} ref={innerRef} diff --git a/packages/react-core/src/components/Panel/__tests__/Panel.test.tsx b/packages/react-core/src/components/Panel/__tests__/Panel.test.tsx index e456c5de1cc..2d433da693e 100644 --- a/packages/react-core/src/components/Panel/__tests__/Panel.test.tsx +++ b/packages/react-core/src/components/Panel/__tests__/Panel.test.tsx @@ -1,4 +1,5 @@ import { createRef, useEffect, useState } from 'react'; +import '@testing-library/jest-dom'; import { render, screen } from '@testing-library/react'; import { Panel } from '../Panel'; import { PanelMain } from '../PanelMain'; @@ -55,6 +56,71 @@ test(`Renders with class name ${styles.modifiers.scrollable} when isScrollable i expect(screen.getByText('Test')).toHaveClass(styles.modifiers.scrollable); }); +test(`Renders with class name ${styles.modifiers.scrollableAutoHeight} when isAutoHeight is true`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.modifiers.scrollableAutoHeight); +}); + +test(`Does not add ${styles.modifiers.scrollableAutoHeight} when isAutoHeight is false or undefined`, () => { + const { rerender } = render(Test); + expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.scrollableAutoHeight); + + rerender(Test); + expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.scrollableAutoHeight); +}); + +test(`Renders with class name ${styles.modifiers.noBorder} when hasNoBorder is true`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.modifiers.noBorder); +}); + +test(`Does not add ${styles.modifiers.noBorder} when hasNoBorder is false or undefined`, () => { + const { rerender } = render(Test); + expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.noBorder); + + rerender(Test); + expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.noBorder); +}); + +test(`Renders with class name ${styles.modifiers.fullHeight} when isFullHeight is true`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.modifiers.fullHeight); +}); + +test(`Does not add ${styles.modifiers.fullHeight} when isFullHeight is false or undefined`, () => { + const { rerender } = render(Test); + expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.fullHeight); + + rerender(Test); + expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.fullHeight); +}); + +test(`Renders with class name ${styles.modifiers.glass} when isGlass is true`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.modifiers.glass); +}); + +test(`Does not add ${styles.modifiers.glass} when isGlass is false or undefined`, () => { + const { rerender } = render(Test); + expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.glass); + + rerender(Test); + expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.glass); +}); + +test(`Renders with class name ${styles.modifiers.pill} when isPill is true`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.modifiers.pill); +}); + +test(`Does not add ${styles.modifiers.pill} when isPill is false or undefined`, () => { + const { rerender } = render(Test); + expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.pill); + + rerender(Test); + expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.pill); +}); + test('Renders with ref', async () => { const user = userEvent.setup(); const panelRef: React.RefObject = createRef(); @@ -103,3 +169,58 @@ test('Matches the snapshot', () => { const { asFragment } = render(Test); expect(asFragment()).toMatchSnapshot(); }); + +test('Matches the snapshot with hasNoBorder', () => { + const { asFragment } = render( + + + Test + + + ); + expect(asFragment()).toMatchSnapshot(); +}); + +test('Matches the snapshot with isFullHeight', () => { + const { asFragment } = render( + + + Test + + + ); + expect(asFragment()).toMatchSnapshot(); +}); + +test('Matches the snapshot with isGlass', () => { + const { asFragment } = render( + + + Test + + + ); + expect(asFragment()).toMatchSnapshot(); +}); + +test('Matches the snapshot with isAutoHeight', () => { + const { asFragment } = render( + + + Test + + + ); + expect(asFragment()).toMatchSnapshot(); +}); + +test('Matches the snapshot with isPill', () => { + const { asFragment } = render( + + + Test + + + ); + expect(asFragment()).toMatchSnapshot(); +}); diff --git a/packages/react-core/src/components/Panel/__tests__/__snapshots__/Panel.test.tsx.snap b/packages/react-core/src/components/Panel/__tests__/__snapshots__/Panel.test.tsx.snap index 7944fdb3e52..da1cb9a373c 100644 --- a/packages/react-core/src/components/Panel/__tests__/__snapshots__/Panel.test.tsx.snap +++ b/packages/react-core/src/components/Panel/__tests__/__snapshots__/Panel.test.tsx.snap @@ -9,3 +9,93 @@ exports[`Matches the snapshot 1`] = `
`; + +exports[`Matches the snapshot with hasNoBorder 1`] = ` + +
+
+
+ Test +
+
+
+
+`; + +exports[`Matches the snapshot with isFullHeight 1`] = ` + +
+
+
+ Test +
+
+
+
+`; + +exports[`Matches the snapshot with isGlass 1`] = ` + +
+
+
+ Test +
+
+
+
+`; + +exports[`Matches the snapshot with isAutoHeight 1`] = ` + +
+
+
+ Test +
+
+
+
+`; + +exports[`Matches the snapshot with isPill 1`] = ` + +
+
+
+ Test +
+
+
+
+`; diff --git a/packages/react-core/src/components/Panel/examples/Panel.md b/packages/react-core/src/components/Panel/examples/Panel.md index ac1847c7723..890637d2246 100644 --- a/packages/react-core/src/components/Panel/examples/Panel.md +++ b/packages/react-core/src/components/Panel/examples/Panel.md @@ -46,13 +46,22 @@ propComponents: [Panel, PanelMain, PanelMainBody, PanelHeader, PanelFooter] ```ts file="PanelSecondaryVariant.tsx" ``` - ### Scrollable ```ts file="PanelScrollable.tsx" ``` +### Scrollable with auto height + +```ts file="PanelScrollableWithAutoHeight.tsx" +``` + ### Scrollable with header and footer ```ts file="PanelScrollableHeaderFooter.tsx" ``` + +### Pill + +```ts file="PanelPill.tsx" +``` diff --git a/packages/react-core/src/components/Panel/examples/PanelPill.tsx b/packages/react-core/src/components/Panel/examples/PanelPill.tsx new file mode 100644 index 00000000000..fc681896c32 --- /dev/null +++ b/packages/react-core/src/components/Panel/examples/PanelPill.tsx @@ -0,0 +1,9 @@ +import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core'; + +export const PanelPill: React.FunctionComponent = () => ( + + + Main content + + +); diff --git a/packages/react-core/src/components/Panel/examples/PanelScrollableWithAutoHeight.tsx b/packages/react-core/src/components/Panel/examples/PanelScrollableWithAutoHeight.tsx new file mode 100644 index 00000000000..b5dabc5fca5 --- /dev/null +++ b/packages/react-core/src/components/Panel/examples/PanelScrollableWithAutoHeight.tsx @@ -0,0 +1,37 @@ +import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core'; + +export const PanelScrollableWithAutoHeight: React.FunctionComponent = () => ( +
+ + + + Main content +
+
+ Main content +
+
+ Main content +
+
+ Main content +
+
+ Main content +
+
+ Main content +
+
+ Main content +
+
+ Main content +
+
+ Main content +
+
+
+
+); diff --git a/packages/react-core/src/demos/Compass/examples/CompassDemo.tsx b/packages/react-core/src/demos/Compass/examples/CompassDemo.tsx index e70a9b15873..952c0fda105 100644 --- a/packages/react-core/src/demos/Compass/examples/CompassDemo.tsx +++ b/packages/react-core/src/demos/Compass/examples/CompassDemo.tsx @@ -7,7 +7,9 @@ import { CompassHero, CompassContent, CompassMainHeader, - CompassPanel, + Panel, + PanelMain, + PanelMainBody, CompassMessageBar, CompassNavContent, CompassNavHome, @@ -38,96 +40,108 @@ export const CompassBasic: React.FunctionComponent = () => { const navContent = ( <> - - - console.log('Home')} /> - - setActiveTab(tabIndex as number)} - component={TabsComponent.nav} - aria-label="Compass navigation tabs" - > - Tab 1} - aria-label="Compass tab with subtabs" - /> - Tab 2} /> - Tab 3} /> - Disabled Tab 4} isDisabled /> - - - console.log('Search')} /> - - - - - - - setActiveSubtab(tabIndex as number)} - aria-label="Compass navigation subtabs" - > - -
Subtab 1
- - } - /> - Subtab 2} /> - Disabled Subtab 3} isDisabled /> -
-
-
-
-
+ + + + + console.log('Home')} /> + + setActiveTab(tabIndex as number)} + component={TabsComponent.nav} + aria-label="Compass navigation tabs" + > + Tab 1} + aria-label="Compass tab with subtabs" + /> + Tab 2} /> + Tab 3} /> + Disabled Tab 4} isDisabled /> + + + console.log('Search')} /> + + + + + + + + + + + setActiveSubtab(tabIndex as number)} + aria-label="Compass navigation subtabs" + > + +
Subtab 1
+ + } + /> + Subtab 2} /> + Disabled Subtab 3} isDisabled /> +
+
+
+
+
+
+
); const sidebarContent = ( - - - - - -
} nav={navContent} profile={
Profile
} />; @@ -139,16 +153,22 @@ export const CompassBasic: React.FunctionComponent = () => { Content title} /> - Content + + + Content + + ); const sidebarEndContent = sidebarContent; const footerContent = ( - - Message bar - + + + Message bar + + ); diff --git a/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx b/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx index 77f52467356..c2688f4b440 100644 --- a/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx +++ b/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx @@ -3,7 +3,9 @@ import { Compass, CompassContent, CompassMainHeader, - CompassPanel, + Panel, + PanelMain, + PanelMainBody, Title, NavItem, NavList, @@ -199,7 +201,11 @@ export const CompassDockDemo: React.FunctionComponent = () => { <> Content title} /> - Content + + + Content + + ); diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json index 08c39376282..65de1a29f75 100644 --- a/packages/react-docs/package.json +++ b/packages/react-docs/package.json @@ -23,7 +23,7 @@ "test:a11y": "patternfly-a11y --config patternfly-a11y.config" }, "dependencies": { - "@patternfly/patternfly": "6.5.0-prerelease.71", + "@patternfly/patternfly": "6.5.0-prerelease.72", "@patternfly/react-charts": "workspace:^", "@patternfly/react-code-editor": "workspace:^", "@patternfly/react-core": "workspace:^", diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json index 4635846f2c0..f017724de13 100644 --- a/packages/react-styles/package.json +++ b/packages/react-styles/package.json @@ -19,7 +19,7 @@ "clean": "rimraf dist css" }, "devDependencies": { - "@patternfly/patternfly": "6.5.0-prerelease.71", + "@patternfly/patternfly": "6.5.0-prerelease.72", "change-case": "^5.4.4", "fs-extra": "^11.3.3" }, diff --git a/packages/react-tokens/package.json b/packages/react-tokens/package.json index 2af341d4a93..c0f3f46dfc5 100644 --- a/packages/react-tokens/package.json +++ b/packages/react-tokens/package.json @@ -30,7 +30,7 @@ }, "devDependencies": { "@adobe/css-tools": "^4.4.4", - "@patternfly/patternfly": "6.5.0-prerelease.71", + "@patternfly/patternfly": "6.5.0-prerelease.72", "fs-extra": "^11.3.3" } } diff --git a/yarn.lock b/yarn.lock index a0cb75574c3..202af09e172 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5077,6 +5077,13 @@ __metadata: languageName: node linkType: hard +"@patternfly/patternfly@npm:6.5.0-prerelease.72": + version: 6.5.0-prerelease.72 + resolution: "@patternfly/patternfly@npm:6.5.0-prerelease.72" + checksum: 10c0/b8d92a11b287d06efad3f410eb356ad60cbbdac3fbcb1e58a99c792253f81e7fcf154f57b0e5a40fbb9d7361364dab02925ecf21db2877e643a23101b8b0745a + languageName: node + linkType: hard + "@patternfly/react-charts@workspace:^, @patternfly/react-charts@workspace:packages/react-charts": version: 0.0.0-use.local resolution: "@patternfly/react-charts@workspace:packages/react-charts" @@ -5171,7 +5178,7 @@ __metadata: version: 0.0.0-use.local resolution: "@patternfly/react-core@workspace:packages/react-core" dependencies: - "@patternfly/patternfly": "npm:6.5.0-prerelease.71" + "@patternfly/patternfly": "npm:6.5.0-prerelease.72" "@patternfly/react-icons": "workspace:^" "@patternfly/react-styles": "workspace:^" "@patternfly/react-tokens": "workspace:^" @@ -5192,7 +5199,7 @@ __metadata: resolution: "@patternfly/react-docs@workspace:packages/react-docs" dependencies: "@patternfly/documentation-framework": "npm:^6.36.8" - "@patternfly/patternfly": "npm:6.5.0-prerelease.71" + "@patternfly/patternfly": "npm:6.5.0-prerelease.72" "@patternfly/patternfly-a11y": "npm:5.1.0" "@patternfly/react-charts": "workspace:^" "@patternfly/react-code-editor": "workspace:^" @@ -5319,7 +5326,7 @@ __metadata: version: 0.0.0-use.local resolution: "@patternfly/react-styles@workspace:packages/react-styles" dependencies: - "@patternfly/patternfly": "npm:6.5.0-prerelease.71" + "@patternfly/patternfly": "npm:6.5.0-prerelease.72" change-case: "npm:^5.4.4" fs-extra: "npm:^11.3.3" languageName: unknown @@ -5361,7 +5368,7 @@ __metadata: resolution: "@patternfly/react-tokens@workspace:packages/react-tokens" dependencies: "@adobe/css-tools": "npm:^4.4.4" - "@patternfly/patternfly": "npm:6.5.0-prerelease.71" + "@patternfly/patternfly": "npm:6.5.0-prerelease.72" fs-extra: "npm:^11.3.3" languageName: unknown linkType: soft