chore(Checkbox): updated example CSS to use logical property (#9604)

* chore(Checkbox): updated example CSS to use logical property * Moved nested checkboxes to body prop * Removed import of deleted stylesheet
patternfly · Sep 19, 2023 · f6b0c5a · f6b0c5a
1 parent 1c70d68
commit f6b0c5a
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 21 deletions.
diff --git a/packages/react-core/src/components/Checkbox/examples/Checkbox.md b/packages/react-core/src/components/Checkbox/examples/Checkbox.md
@@ -6,46 +6,52 @@ cssPrefix: pf-v5-c-check
 propComponents: ['Checkbox']
 ---
 
-import './checkbox.css';
-
 ## Examples
 
 ### Controlled
 
 ```ts file='./CheckboxControlled.tsx'
+
 ```
 
 ### Uncontrolled
 
 ```ts file='./CheckboxUncontrolled.tsx'
+
 ```
 
 ### Disabled
 
 ```ts file='./CheckboxDisabled.tsx'
+
 ```
 
 ### Checkbox with description
 
 ```ts file='./CheckboxWithDescription.tsx'
+
 ```
 
 ### Checkbox with body
 
 ```ts file='./CheckboxWithBody.tsx'
+
 ```
 
 ### Checkbox with description and body
 
 ```ts file='./CheckboxWithDescriptionBody.tsx'
+
 ```
 
 ### Standalone input
 
 ```ts file='./CheckboxStandaloneInput.tsx'
+
 ```
 
 ### Required input
 
 ```ts file='./CheckboxRequired.tsx'
+
 ```
diff --git a/packages/react-core/src/components/Checkbox/examples/CheckboxControlled.tsx b/packages/react-core/src/components/Checkbox/examples/CheckboxControlled.tsx
@@ -49,22 +49,24 @@ export const CheckboxControlled: React.FunctionComponent = () => {
         onChange={handleChange}
         id="controlled-check-1"
         name="check1"
-      />
-      <Checkbox
-        className="nested"
-        label="Child CheckBox 1"
-        isChecked={isChecked2}
-        onChange={handleChange}
-        id="controlled-check-2"
-        name="check2"
-      />
-      <Checkbox
-        className="nested"
-        label="Child CheckBox 2"
-        isChecked={isChecked3}
-        onChange={handleChange}
-        id="controlled-check-3"
-        name="check3"
+        body={
+          <>
+            <Checkbox
+              label="Child CheckBox 1"
+              isChecked={isChecked2}
+              onChange={handleChange}
+              id="controlled-check-2"
+              name="check2"
+            />
+            <Checkbox
+              label="Child CheckBox 2"
+              isChecked={isChecked3}
+              onChange={handleChange}
+              id="controlled-check-3"
+              name="check3"
+            />
+          </>
+        }
       />
       <Checkbox
         label="Controlled CheckBox"

diff --git a/packages/react-core/src/components/Checkbox/examples/checkbox.css b/packages/react-core/src/components/Checkbox/examples/checkbox.css