@patternfly/react-core 6.3.0-prerelease.19 → 6.3.0-prerelease.20

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.3.0-prerelease.18","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.3.0-prerelease.19","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.3.0-prerelease.18","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.3.0-prerelease.19","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.3.0-prerelease.18","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.3.0-prerelease.19","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.3.0-prerelease.19",
+  "version": "6.3.0-prerelease.20",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.3.0-prerelease.4",
-    "@patternfly/react-styles": "^6.3.0-prerelease.4",
-    "@patternfly/react-tokens": "^6.3.0-prerelease.4",
+    "@patternfly/react-icons": "^6.3.0-prerelease.5",
+    "@patternfly/react-styles": "^6.3.0-prerelease.5",
+    "@patternfly/react-tokens": "^6.3.0-prerelease.5",
     "focus-trap": "7.6.4",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.3.0-prerelease.24",
+    "@patternfly/patternfly": "6.3.0-prerelease.26",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.0"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "e53720b71b9d2fc075e476f5f1b3a5f7b7c3055c"
+  "gitHead": "9e7c8ba6afb5ad01cbac427089f8f9032e523628"
 }

package/src/components/Card/examples/Card.md

@@ -131,7 +131,7 @@ You must avoid rendering any other interactive content within the `<Card>` when
 
 ### Single selectable
 
-When a group of single selectable cards are related, you must pass the same `name` property to each card's `selectableActions` property.
+When a group of single selectable cards are related, you must pass the same `name` property to each card's `selectableActions` property. For more guidance on selectable cards with hidden input, see our [cards as tiles examples](#cards-as-tiles).
 
 ```ts file='./CardSingleSelectable.tsx'
 

package/src/components/Card/examples/CardSelectable.tsx

@@ -5,7 +5,8 @@ export const SelectableCard: React.FunctionComponent = () => {
   const [isChecked1, setIsChecked1] = useState(false);
   const [isChecked2, setIsChecked2] = useState(false);
   const [isChecked3, setIsChecked3] = useState(false);
-  const [isSecondary, setIsSecondary] = useState<boolean>(false);
+  const [isSecondary, setIsSecondary] = useState(false);
+  const [displayCheckbox, setDisplayCheckbox] = useState(false);
 
   const id1 = 'selectable-card-input-1';
   const id2 = 'selectable-card-input-2';
@@ -31,6 +32,10 @@ export const SelectableCard: React.FunctionComponent = () => {
     setIsSecondary(checked);
   };
 
+  const toggleHide = (checked: boolean) => {
+    setDisplayCheckbox(checked);
+  };
+
   return (
     <>
       <Checkbox
@@ -40,68 +45,76 @@ export const SelectableCard: React.FunctionComponent = () => {
         id="toggle-variant-selectable"
         name="toggle-variant"
       />
-      <div style={{ marginTop: '15px' }}>
-        <Gallery hasGutter>
-          <Card
-            id="selectable-card-example-1"
-            isSelectable
-            isSelected={isChecked1}
-            variant={isSecondary ? 'secondary' : 'default'}
+      <Checkbox
+        label="Hide checkbox"
+        isChecked={displayCheckbox}
+        onChange={(_event, checked) => toggleHide(checked)}
+        id="selectable-toggle-hide-checkbox"
+        name="toggle-hide"
+      />
+      <Gallery hasGutter style={{ marginTop: '15px' }}>
+        <Card
+          id="selectable-card-example-1"
+          isSelectable
+          isSelected={isChecked1}
+          variant={isSecondary ? 'secondary' : 'default'}
+        >
+          <CardHeader
+            selectableActions={{
+              selectableActionId: id1,
+              selectableActionAriaLabelledby: 'selectable-card-example-1',
+              name: id1,
+              onChange,
+              hasNoOffset: true,
+              isHidden: displayCheckbox
+            }}
           >
-            <CardHeader
-              selectableActions={{
-                selectableActionId: id1,
-                selectableActionAriaLabelledby: 'selectable-card-example-1',
-                name: id1,
-                onChange,
-                hasNoOffset: true
-              }}
-            >
-              <CardTitle>First card</CardTitle>
-            </CardHeader>
-            <CardBody>This card is selectable.</CardBody>
-          </Card>
-          <Card
-            id="selectable-card-example-2"
-            isSelectable
-            isSelected={isChecked2}
-            variant={isSecondary ? 'secondary' : 'default'}
+            <CardTitle>First card</CardTitle>
+          </CardHeader>
+          <CardBody>This card is selectable.</CardBody>
+        </Card>
+        <Card
+          id="selectable-card-example-2"
+          isSelectable
+          isSelected={isChecked2}
+          variant={isSecondary ? 'secondary' : 'default'}
+        >
+          <CardHeader
+            selectableActions={{
+              selectableActionId: id2,
+              selectableActionAriaLabelledby: 'selectable-card-example-2',
+              name: id2,
+              onChange,
+              hasNoOffset: true,
+              isHidden: displayCheckbox
+            }}
           >
-            <CardHeader
-              selectableActions={{
-                selectableActionId: id2,
-                selectableActionAriaLabelledby: 'selectable-card-example-2',
-                name: id2,
-                onChange,
-                hasNoOffset: true
-              }}
-            >
-              <CardTitle>Second card</CardTitle>
-            </CardHeader>
-            <CardBody>This card is selectable.</CardBody>
-          </Card>
-          <Card
-            id="selectable-card-example-3"
-            isSelectable
-            isDisabled
-            isSelected={isChecked3}
-            variant={isSecondary ? 'secondary' : 'default'}
+            <CardTitle>Second card</CardTitle>
+          </CardHeader>
+          <CardBody>This card is selectable.</CardBody>
+        </Card>
+        <Card
+          id="selectable-card-example-3"
+          isSelectable
+          isDisabled
+          isSelected={isChecked3}
+          variant={isSecondary ? 'secondary' : 'default'}
+        >
+          <CardHeader
+            selectableActions={{
+              selectableActionId: id3,
+              selectableActionAriaLabelledby: 'selectable-card-example-3',
+              name: id3,
+              onChange,
+              hasNoOffset: true,
+              isHidden: displayCheckbox
+            }}
           >
-            <CardHeader
-              selectableActions={{
-                selectableActionId: id3,
-                selectableActionAriaLabelledby: 'selectable-card-example-3',
-                name: id3,
-                onChange,
-                hasNoOffset: true
-              }}
-            >
-              <CardTitle>Third card</CardTitle>
-            </CardHeader>
-            <CardBody>This card is selectable but disabled.</CardBody>
-          </Card>
-        </Gallery>
-      </div>
+            <CardTitle>Third card</CardTitle>
+          </CardHeader>
+          <CardBody>This card is selectable but disabled.</CardBody>
+        </Card>
+      </Gallery>
     </>
   );
 };

package/src/components/Card/examples/CardSingleSelectable.tsx

@@ -1,63 +1,80 @@
 import { useState } from 'react';
-import { Card, CardHeader, CardTitle, CardBody, Gallery } from '@patternfly/react-core';
+import { Card, CardHeader, CardTitle, CardBody, Gallery, Checkbox } from '@patternfly/react-core';
 
 export const SingleSelectableCard: React.FunctionComponent = () => {
   const [isChecked, setIsChecked] = useState('');
   const id1 = 'single-selectable-card-input-1';
   const id2 = 'single-selectable-card-input-2';
   const id3 = 'single-selectable-card-input-3';
+  const [displayRadioButton, setDisplayRadioButton] = useState(false);
 
   const onChange = (event: React.FormEvent<HTMLInputElement>) => {
     setIsChecked(event.currentTarget.id);
   };
 
+  const toggleHide = (checked: boolean) => {
+    setDisplayRadioButton(checked);
+  };
+
   return (
-    <Gallery hasGutter>
-      <Card id="single-selectable-card-example-1" isSelectable isSelected={isChecked === id1}>
-        <CardHeader
-          selectableActions={{
-            selectableActionId: id1,
-            selectableActionAriaLabelledby: 'single-selectable-card-example-1',
-            name: 'single-selectable-card-example',
-            variant: 'single',
-            onChange,
-            hasNoOffset: true
-          }}
-        >
-          <CardTitle>First card</CardTitle>
-        </CardHeader>
-        <CardBody>This card is single selectable.</CardBody>
-      </Card>
-      <Card id="single-selectable-card-example-2" isSelectable isSelected={isChecked === id2}>
-        <CardHeader
-          selectableActions={{
-            selectableActionId: id2,
-            selectableActionAriaLabelledby: 'single-selectable-card-example-2',
-            name: 'single-selectable-card-example',
-            variant: 'single',
-            onChange,
-            hasNoOffset: true
-          }}
-        >
-          <CardTitle>Second card</CardTitle>
-        </CardHeader>
-        <CardBody>This card is single selectable.</CardBody>
-      </Card>
-      <Card id="single-selectable-card-example-3" isSelectable isDisabled isSelected={isChecked === id3}>
-        <CardHeader
-          selectableActions={{
-            selectableActionId: id3,
-            selectableActionAriaLabelledby: 'single-selectable-card-example-3',
-            name: 'single-selectable-card-example',
-            variant: 'single',
-            onChange,
-            hasNoOffset: true
-          }}
-        >
-          <CardTitle>Third card</CardTitle>
-        </CardHeader>
-        <CardBody>This card is single selectable but disabled.</CardBody>
-      </Card>
-    </Gallery>
+    <>
+      <Checkbox
+        label="Hide radio button"
+        isChecked={displayRadioButton}
+        onChange={(_event, checked) => toggleHide(checked)}
+        id="single-select-toggle-hide-radio-button"
+        name="toggle-hide"
+      />
+      <Gallery hasGutter style={{ marginTop: '15px' }}>
+        <Card id="single-selectable-card-example-1" isSelectable isSelected={isChecked === id1}>
+          <CardHeader
+            selectableActions={{
+              selectableActionId: id1,
+              selectableActionAriaLabelledby: 'single-selectable-card-example-1',
+              name: 'single-selectable-card-example',
+              variant: 'single',
+              onChange,
+              hasNoOffset: true,
+              isHidden: displayRadioButton
+            }}
+          >
+            <CardTitle>First card</CardTitle>
+          </CardHeader>
+          <CardBody>This card is single selectable.</CardBody>
+        </Card>
+        <Card id="single-selectable-card-example-2" isSelectable isSelected={isChecked === id2}>
+          <CardHeader
+            selectableActions={{
+              selectableActionId: id2,
+              selectableActionAriaLabelledby: 'single-selectable-card-example-2',
+              name: 'single-selectable-card-example',
+              variant: 'single',
+              onChange,
+              hasNoOffset: true,
+              isHidden: displayRadioButton
+            }}
+          >
+            <CardTitle>Second card</CardTitle>
+          </CardHeader>
+          <CardBody>This card is single selectable.</CardBody>
+        </Card>
+        <Card id="single-selectable-card-example-3" isSelectable isDisabled isSelected={isChecked === id3}>
+          <CardHeader
+            selectableActions={{
+              selectableActionId: id3,
+              selectableActionAriaLabelledby: 'single-selectable-card-example-3',
+              name: 'single-selectable-card-example',
+              variant: 'single',
+              onChange,
+              hasNoOffset: true,
+              isHidden: displayRadioButton
+            }}
+          >
+            <CardTitle>Third card</CardTitle>
+          </CardHeader>
+          <CardBody>This card is single selectable but disabled.</CardBody>
+        </Card>
+      </Gallery>
+    </>
   );
 };