diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 67994713290..616cc76806d 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.11", + "@patternfly/patternfly": "6.5.0-prerelease.12", "case-anything": "^3.1.2", "css": "^3.0.0", "fs-extra": "^11.3.0" diff --git a/packages/react-core/src/components/Drawer/Drawer.tsx b/packages/react-core/src/components/Drawer/Drawer.tsx index c38effa6016..3470426a6b8 100644 --- a/packages/react-core/src/components/Drawer/Drawer.tsx +++ b/packages/react-core/src/components/Drawer/Drawer.tsx @@ -17,6 +17,8 @@ export interface DrawerProps extends React.HTMLProps { isExpanded?: boolean; /** Indicates if the content element and panel element are displayed side by side. */ isInline?: boolean; + /** @beta Indicates if the drawer will have pill styles */ + isPill?: boolean; /** Indicates if the drawer will always show both content and panel. */ isStatic?: boolean; /** Position of the drawer panel. left and right are deprecated, use start and end instead. */ @@ -50,6 +52,7 @@ export const Drawer: React.FunctionComponent = ({ children, isExpanded = false, isInline = false, + isPill = false, isStatic = false, position = 'end', onExpand = () => {}, @@ -65,6 +68,7 @@ export const Drawer: React.FunctionComponent = ({ styles.drawer, isExpanded && styles.modifiers.expanded, isInline && styles.modifiers.inline, + isPill && styles.modifiers.pill, isStatic && styles.modifiers.static, (position === 'left' || position === 'start') && styles.modifiers.panelLeft, position === 'bottom' && styles.modifiers.panelBottom, diff --git a/packages/react-core/src/components/Drawer/__tests__/Drawer.test.tsx b/packages/react-core/src/components/Drawer/__tests__/Drawer.test.tsx index a7b0d8a8708..14a0f2f6295 100644 --- a/packages/react-core/src/components/Drawer/__tests__/Drawer.test.tsx +++ b/packages/react-core/src/components/Drawer/__tests__/Drawer.test.tsx @@ -10,9 +10,10 @@ import { DrawerPanelContent, DrawerColorVariant } from '../'; -import { render } from '@testing-library/react'; +import { screen, render } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { KeyTypes } from '../../../helpers'; +import styles from '@patternfly/react-styles/css/components/Drawer/drawer'; jest.mock('../../../helpers/GenerateId/GenerateId'); @@ -162,3 +163,27 @@ test('Resizeable DrawerPanelContent can be wrapped in a context without causing expect(consoleError).not.toHaveBeenCalled(); }); + +test(`Renders with ${styles.modifiers.pill} class when specified`, () => { + const panelContent = ( + + + drawer-panel + + + + + drawer-panel + + ); + + render( + + + Drawer content text + + + ); + + expect(screen.getByTestId('drawer')).toHaveClass(styles.modifiers.pill); +}); diff --git a/packages/react-core/src/components/Drawer/examples/Drawer.md b/packages/react-core/src/components/Drawer/examples/Drawer.md index e9db8ac9e5b..d05192c35ec 100644 --- a/packages/react-core/src/components/Drawer/examples/Drawer.md +++ b/packages/react-core/src/components/Drawer/examples/Drawer.md @@ -17,6 +17,7 @@ propComponents: ] section: components --- + import { Fragment, useRef, useState } from 'react'; import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/accessibility'; @@ -143,3 +144,15 @@ To customize which element receives focus when the drawer panel expands, use the ```ts file="./DrawerFocusTrap.tsx" ``` + +### Pill + +```ts file="./DrawerBasicPill.tsx" + +``` + +### Pill inline + +```ts file="./DrawerPillInline.tsx" + +``` diff --git a/packages/react-core/src/components/Drawer/examples/DrawerBasicPill.tsx b/packages/react-core/src/components/Drawer/examples/DrawerBasicPill.tsx new file mode 100644 index 00000000000..dda20e8229c --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/DrawerBasicPill.tsx @@ -0,0 +1,57 @@ +import { Fragment, useRef, useState } from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerActions, + DrawerCloseButton, + Button +} from '@patternfly/react-core'; + +export const DrawerBasicPill: React.FunctionComponent = () => { + const [isExpanded, setIsExpanded] = useState(false); + const drawerRef = useRef(undefined); + + const onExpand = () => { + drawerRef.current && drawerRef.current.focus(); + }; + + const onClick = () => { + setIsExpanded(!isExpanded); + }; + + const onCloseClick = () => { + setIsExpanded(false); + }; + + const panelContent = ( + + + + Drawer panel header + + + + + + + ); + + const drawerContent = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; + + return ( + + + + + {drawerContent} + + + + ); +}; diff --git a/packages/react-core/src/components/Drawer/examples/DrawerPillInline.tsx b/packages/react-core/src/components/Drawer/examples/DrawerPillInline.tsx new file mode 100644 index 00000000000..2e3a42c2c81 --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/DrawerPillInline.tsx @@ -0,0 +1,57 @@ +import { Fragment, useRef, useState } from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerActions, + DrawerCloseButton, + Button +} from '@patternfly/react-core'; + +export const DrawerBasicPill: React.FunctionComponent = () => { + const [isExpanded, setIsExpanded] = useState(false); + const drawerRef = useRef(undefined); + + const onExpand = () => { + drawerRef.current && drawerRef.current.focus(); + }; + + const onClick = () => { + setIsExpanded(!isExpanded); + }; + + const onCloseClick = () => { + setIsExpanded(false); + }; + + const panelContent = ( + + + + Drawer panel header + + + + + + + ); + + const drawerContent = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; + + return ( + + + + + {drawerContent} + + + + ); +}; diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json index 1e347692da9..936da34ab46 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.11", + "@patternfly/patternfly": "6.5.0-prerelease.12", "@patternfly/react-charts": "workspace:^", "@patternfly/react-code-editor": "workspace:^", "@patternfly/react-core": "workspace:^", diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json index 635bdcb4fcb..255aedc3857 100644 --- a/packages/react-icons/package.json +++ b/packages/react-icons/package.json @@ -33,7 +33,7 @@ "@fortawesome/free-brands-svg-icons": "^5.15.4", "@fortawesome/free-regular-svg-icons": "^5.15.4", "@fortawesome/free-solid-svg-icons": "^5.15.4", - "@patternfly/patternfly": "6.5.0-prerelease.11", + "@patternfly/patternfly": "6.5.0-prerelease.12", "fs-extra": "^11.3.0", "tslib": "^2.8.1" }, diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json index 7e3f7a1cfeb..b993b05735d 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.11", + "@patternfly/patternfly": "6.5.0-prerelease.12", "change-case": "^5.4.4", "fs-extra": "^11.3.0" }, diff --git a/packages/react-tokens/package.json b/packages/react-tokens/package.json index f7d67bc5e54..b8fafeb47a9 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.11", + "@patternfly/patternfly": "6.5.0-prerelease.12", "fs-extra": "^11.3.0" } } diff --git a/yarn.lock b/yarn.lock index 71912cdbafa..909d4f77ea9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4516,10 +4516,10 @@ __metadata: languageName: node linkType: hard -"@patternfly/patternfly@npm:6.5.0-prerelease.11": - version: 6.5.0-prerelease.11 - resolution: "@patternfly/patternfly@npm:6.5.0-prerelease.11" - checksum: 10c0/2a65b577ea6ec57c1065856e7606333697948e6db53fca84e19df6ce130894f9a9feea479eff1a14525645961206d41a1bef8414e5ccbbbb85591a67b778d0e2 +"@patternfly/patternfly@npm:6.5.0-prerelease.12": + version: 6.5.0-prerelease.12 + resolution: "@patternfly/patternfly@npm:6.5.0-prerelease.12" + checksum: 10c0/a07d7ccbde0bdcdfa03877678ee73c741f1dc6774c0fe96db24e308f637e68035684bf3758e6acf3e2c51c46f27d320eff2189e85bfdeb0c9104dd18d33ae771 languageName: node linkType: hard @@ -4617,7 +4617,7 @@ __metadata: version: 0.0.0-use.local resolution: "@patternfly/react-core@workspace:packages/react-core" dependencies: - "@patternfly/patternfly": "npm:6.5.0-prerelease.11" + "@patternfly/patternfly": "npm:6.5.0-prerelease.12" "@patternfly/react-icons": "workspace:^" "@patternfly/react-styles": "workspace:^" "@patternfly/react-tokens": "workspace:^" @@ -4638,7 +4638,7 @@ __metadata: resolution: "@patternfly/react-docs@workspace:packages/react-docs" dependencies: "@patternfly/documentation-framework": "npm:^6.28.9" - "@patternfly/patternfly": "npm:6.5.0-prerelease.11" + "@patternfly/patternfly": "npm:6.5.0-prerelease.12" "@patternfly/patternfly-a11y": "npm:5.1.0" "@patternfly/react-charts": "workspace:^" "@patternfly/react-code-editor": "workspace:^" @@ -4678,7 +4678,7 @@ __metadata: "@fortawesome/free-brands-svg-icons": "npm:^5.15.4" "@fortawesome/free-regular-svg-icons": "npm:^5.15.4" "@fortawesome/free-solid-svg-icons": "npm:^5.15.4" - "@patternfly/patternfly": "npm:6.5.0-prerelease.11" + "@patternfly/patternfly": "npm:6.5.0-prerelease.12" fs-extra: "npm:^11.3.0" tslib: "npm:^2.8.1" peerDependencies: @@ -4763,7 +4763,7 @@ __metadata: version: 0.0.0-use.local resolution: "@patternfly/react-styles@workspace:packages/react-styles" dependencies: - "@patternfly/patternfly": "npm:6.5.0-prerelease.11" + "@patternfly/patternfly": "npm:6.5.0-prerelease.12" change-case: "npm:^5.4.4" fs-extra: "npm:^11.3.0" languageName: unknown @@ -4805,7 +4805,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.11" + "@patternfly/patternfly": "npm:6.5.0-prerelease.12" fs-extra: "npm:^11.3.0" languageName: unknown linkType: soft