feat(drawer): add no-glass panel variant, test (#12125)

* feat(drawer): add no-glass panel variant, test

* chore: fix docs, test

* chore: add beta to hasNoGlass

Author: mcoker

packages/react-core/package.json

@@ -54,7 +54,7 @@
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.5.0-prerelease.14",
+    "@patternfly/patternfly": "6.5.0-prerelease.19",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.0"

packages/react-core/src/components/Drawer/DrawerPanelContent.tsx

@@ -35,6 +35,8 @@ export interface DrawerPanelContentProps extends Omit<React.HTMLProps<HTMLDivEle
   hasNoBorder?: boolean;
   /** Flag indicating that the drawer panel should be resizable. */
   isResizable?: boolean;
+  /** @beta Flag indicating that the drawer panel should disable glass styles. This prop is intended to work with isPill drawers. */
+  hasNoGlass?: boolean;
   /** Callback for resize end. */
   onResize?: (event: MouseEvent | TouchEvent | React.KeyboardEvent, width: number, id: string) => void;
   /** The minimum size of a drawer. */
@@ -68,6 +70,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   children,
   hasNoBorder = false,
   isResizable = false,
+  hasNoGlass = false,
   onResize,
   minSize,
   defaultSize,
@@ -364,6 +367,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
             className={css(
               styles.drawerPanel,
               isResizable && styles.modifiers.resizable,
+              hasNoGlass && styles.modifiers.noGlass,
               hasNoBorder && styles.modifiers.noBorder,
               formatBreakpointMods(widths, styles),
               colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,

packages/react-core/src/components/Drawer/__tests__/DrawerPanelContent.test.tsx

@@ -158,3 +158,13 @@ test('Style prop overrides boundaryCssVars', () => {
     '--pf-v6-c-drawer__panel--md--FlexBasis--max': '500px'
   });
 });
+
+test(`Renders with class ${styles.modifiers.noGlass} when isPill is true`, () => {
+  render(
+    <Drawer isExpanded isPill>
+      <DrawerPanelContent hasNoGlass>Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByText('Drawer panel content')).toHaveClass(styles.modifiers.noGlass);
+});

packages/react-docs/package.json

@@ -23,7 +23,7 @@
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config"
   },
   "dependencies": {
-    "@patternfly/patternfly": "6.5.0-prerelease.14",
+    "@patternfly/patternfly": "6.5.0-prerelease.19",
     "@patternfly/react-charts": "workspace:^",
     "@patternfly/react-code-editor": "workspace:^",
     "@patternfly/react-core": "workspace:^",

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.14",
+    "@patternfly/patternfly": "6.5.0-prerelease.19",
     "fs-extra": "^11.3.0",
     "tslib": "^2.8.1"
   },

packages/react-styles/package.json

@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.5.0-prerelease.14",
+    "@patternfly/patternfly": "6.5.0-prerelease.19",
     "change-case": "^5.4.4",
     "fs-extra": "^11.3.0"
   },

packages/react-tokens/package.json

@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@adobe/css-tools": "^4.4.4",
-    "@patternfly/patternfly": "6.5.0-prerelease.14",
+    "@patternfly/patternfly": "6.5.0-prerelease.19",
     "fs-extra": "^11.3.0"
   }
 }

yarn.lock

@@ -4516,10 +4516,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@patternfly/patternfly@npm:6.5.0-prerelease.14":
-  version: 6.5.0-prerelease.14
-  resolution: "@patternfly/patternfly@npm:6.5.0-prerelease.14"
-  checksum: 10c0/d2bca43a2b4c98767b81dc5569eb5960866c9e7b757276b69aa8eacc06414723e3a58b434c7f1b46e416fe02474dbc333707e6c6a82ca05201900458d74ca548
+"@patternfly/patternfly@npm:6.5.0-prerelease.19":
+  version: 6.5.0-prerelease.19
+  resolution: "@patternfly/patternfly@npm:6.5.0-prerelease.19"
+  checksum: 10c0/581e18b078e146ad72553f8fb1177ffe84e7bfbeb5920f8e7ce7da22dd9c9334fee850cf7e8fe274a8dee72a9b1608aad5cbcc5679b52275970e2801669f56ab
   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.14"
+    "@patternfly/patternfly": "npm:6.5.0-prerelease.19"
     "@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.14"
+    "@patternfly/patternfly": "npm:6.5.0-prerelease.19"
     "@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.14"
+    "@patternfly/patternfly": "npm:6.5.0-prerelease.19"
     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.14"
+    "@patternfly/patternfly": "npm:6.5.0-prerelease.19"
     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.14"
+    "@patternfly/patternfly": "npm:6.5.0-prerelease.19"
     fs-extra: "npm:^11.3.0"
   languageName: unknown
   linkType: soft