From cc5cf04230b7bd9b176ec94fa35eb6d22c3d66d8 Mon Sep 17 00:00:00 2001
From: adamviktora <viktora.adam@gmail.com>
Date: Tue, 30 Apr 2024 15:25:26 +0200
Subject: [PATCH 1/2] docs(Checkbox): add examples of reversed and label wraps

---
 .../src/components/Checkbox/examples/Checkbox.md   | 14 ++++++++++++++
 .../Checkbox/examples/CheckboxLabelWraps.tsx       | 11 +++++++++++
 .../Checkbox/examples/CheckboxReversed.tsx         |  6 ++++++
 .../src/components/Radio/examples/Radio.md         | 11 +++++++++++
 4 files changed, 42 insertions(+)
 create mode 100644 packages/react-core/src/components/Checkbox/examples/CheckboxLabelWraps.tsx
 create mode 100644 packages/react-core/src/components/Checkbox/examples/CheckboxReversed.tsx

diff --git a/packages/react-core/src/components/Checkbox/examples/Checkbox.md b/packages/react-core/src/components/Checkbox/examples/Checkbox.md
index ec4499f7693..cc0884a00b6 100644
--- a/packages/react-core/src/components/Checkbox/examples/Checkbox.md
+++ b/packages/react-core/src/components/Checkbox/examples/Checkbox.md
@@ -20,6 +20,20 @@ propComponents: ['Checkbox']
 
 ```
 
+### Reversed
+
+```ts file="./CheckboxReversed.tsx"
+
+```
+
+### Label wraps
+
+When the input is wrapped in a label, larger area can be clicked to check the box, including the space between the checkbox and its description.
+
+```ts file="./CheckboxLabelWraps.tsx"
+
+```
+
 ### Disabled
 
 ```ts file='./CheckboxDisabled.tsx'
diff --git a/packages/react-core/src/components/Checkbox/examples/CheckboxLabelWraps.tsx b/packages/react-core/src/components/Checkbox/examples/CheckboxLabelWraps.tsx
new file mode 100644
index 00000000000..256d9de82b7
--- /dev/null
+++ b/packages/react-core/src/components/Checkbox/examples/CheckboxLabelWraps.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Checkbox } from '@patternfly/react-core';
+
+export const CheckboxLabelWraps: React.FunctionComponent = () => (
+  <Checkbox
+    isLabelWrapped
+    label="Label wraps input example"
+    id="checkbox-label-wraps-input"
+    name="checkbox-label-wraps-input"
+  />
+);
diff --git a/packages/react-core/src/components/Checkbox/examples/CheckboxReversed.tsx b/packages/react-core/src/components/Checkbox/examples/CheckboxReversed.tsx
new file mode 100644
index 00000000000..58b301be18b
--- /dev/null
+++ b/packages/react-core/src/components/Checkbox/examples/CheckboxReversed.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Checkbox } from '@patternfly/react-core';
+
+export const CheckboxReversed: React.FunctionComponent = () => (
+  <Checkbox isLabelBeforeButton label="Reversed checkbox example" id="checkbox-reversed" name="checkbox-reversed" />
+);
diff --git a/packages/react-core/src/components/Radio/examples/Radio.md b/packages/react-core/src/components/Radio/examples/Radio.md
index 638ec396540..57c5a43d953 100644
--- a/packages/react-core/src/components/Radio/examples/Radio.md
+++ b/packages/react-core/src/components/Radio/examples/Radio.md
@@ -12,44 +12,55 @@ ouia: true
 ### Controlled
 
 ```ts file="./RadioControlled.tsx"
+
 ```
 
 ### Uncontrolled
 
 ```ts file="./RadioUncontrolled.tsx"
+
 ```
 
 ### Reversed
 
 ```ts file="./RadioReversed.tsx"
+
 ```
 
 ### Label wraps
 
+When the input is wrapped in a label, larger area can be clicked to check the radio, including the space between the radio and its description.
+
 ```ts file="./RadioLabelWraps.tsx"
+
 ```
 
 ### Disabled
 
 ```ts file="./RadioDisabled.tsx"
+
 ```
 
 ### With description
 
 ```ts file="./RadioWithDescription.tsx"
+
 ```
 
 ### With body
 
 ```ts file="./RadioWithBody.tsx"
+
 ```
 
 ### With description and body
 
 ```ts file="./RadioWithDescriptionAndBody.tsx"
+
 ```
 
 ### Standalone input
 
 ```ts file="./RadioStandaloneInput.tsx"
+
 ```

From f3083ea64b21098affdaf11c9519d86e7f5702d9 Mon Sep 17 00:00:00 2001
From: adamviktora <viktora.adam@gmail.com>
Date: Fri, 10 May 2024 11:14:09 +0200
Subject: [PATCH 2/2] docs(Checkbox/Radio): update example description

---
 .../react-core/src/components/Checkbox/examples/Checkbox.md     | 2 +-
 packages/react-core/src/components/Radio/examples/Radio.md      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-core/src/components/Checkbox/examples/Checkbox.md b/packages/react-core/src/components/Checkbox/examples/Checkbox.md
index cc0884a00b6..2d52497d450 100644
--- a/packages/react-core/src/components/Checkbox/examples/Checkbox.md
+++ b/packages/react-core/src/components/Checkbox/examples/Checkbox.md
@@ -28,7 +28,7 @@ propComponents: ['Checkbox']
 
 ### Label wraps
 
-When the input is wrapped in a label, larger area can be clicked to check the box, including the space between the checkbox and its description.
+You can expand the clickable area of a checkbox so that it spans wider than the checkbox label by adding the `isLabelWrapped` property. This allows users to select a checkbox by clicking the checkbox itself, the label, or the area between the checkbox and the label.
 
 ```ts file="./CheckboxLabelWraps.tsx"
 
diff --git a/packages/react-core/src/components/Radio/examples/Radio.md b/packages/react-core/src/components/Radio/examples/Radio.md
index 57c5a43d953..54eb726e610 100644
--- a/packages/react-core/src/components/Radio/examples/Radio.md
+++ b/packages/react-core/src/components/Radio/examples/Radio.md
@@ -29,7 +29,7 @@ ouia: true
 
 ### Label wraps
 
-When the input is wrapped in a label, larger area can be clicked to check the radio, including the space between the radio and its description.
+You can expand the clickable area of a radio so that it spans wider than the radio label by adding the `isLabelWrapped` property. This allows users to select a radio by clicking the radio itself, the label, or the area between the radio and the label.
 
 ```ts file="./RadioLabelWraps.tsx"