fixed layout issues

patternfly · May 6, 2024 · 2834643 · 2834643
1 parent 32ba75e
commit 2834643
Showing 1 changed file with 22 additions and 18 deletions.
diff --git a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import {
-  Button,
   DescriptionList,
   DescriptionListTerm,
   DescriptionListGroup,
@@ -13,7 +12,9 @@ import {
   TextContent,
   Text,
   Title,
-  Divider
+  Divider,
+  Flex,
+  FlexItem
 } from '@patternfly/react-core';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
@@ -32,44 +33,47 @@ export const DescriptionListBasic: React.FunctionComponent = () => (
           <Title headingLevel="h2" size="lg">
             Details
           </Title>
-          <Divider />
         </CardHeader>
+        <Divider />
         <CardBody>
-          <DescriptionList isFillColumns columnModifier={{ default: '2Col', lg: '3Col' }}>
+          <DescriptionList isAutoFit>
             <DescriptionListGroup>
               <DescriptionListTerm>Name</DescriptionListTerm>
               <DescriptionListDescription>mary-test</DescriptionListDescription>
             </DescriptionListGroup>
             <DescriptionListGroup>
-              <DescriptionListTerm>Network Policies</DescriptionListTerm>
+              <DescriptionListTerm>Status</DescriptionListTerm>
               <DescriptionListDescription>
-                <a href="#">Network Policies</a>
+                <Flex>
+                  <FlexItem spacer={{ lg: 'spacerSm' }}>
+                    <CheckCircleIcon color="green" />
+                  </FlexItem>
+                  <FlexItem>Active</FlexItem>
+                </Flex>
               </DescriptionListDescription>
             </DescriptionListGroup>
             <DescriptionListGroup>
-              <DescriptionListTerm>Status</DescriptionListTerm>
+              <DescriptionListTerm>Default pull secret</DescriptionListTerm>
+              <DescriptionListDescription>Not configured</DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+              <DescriptionListTerm>Tolerations</DescriptionListTerm>
+              <DescriptionListDescription>6 Tolerations</DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+              <DescriptionListTerm>Network Policies</DescriptionListTerm>
               <DescriptionListDescription>
-                <Button variant="link" isInline icon={<CheckCircleIcon color="green" />}>
-                  Active
-                </Button>
+                <a href="#">Network Policies</a>
               </DescriptionListDescription>
             </DescriptionListGroup>
             <DescriptionListGroup>
               <DescriptionListTerm>Display name</DescriptionListTerm>
               <DescriptionListDescription>mary</DescriptionListDescription>
             </DescriptionListGroup>
-            <DescriptionListGroup>
-              <DescriptionListTerm>Default pull secret</DescriptionListTerm>
-              <DescriptionListDescription>Not configured</DescriptionListDescription>
-            </DescriptionListGroup>
             <DescriptionListGroup>
               <DescriptionListTerm>Requester</DescriptionListTerm>
               <DescriptionListDescription>kube:admin</DescriptionListDescription>
             </DescriptionListGroup>
-            <DescriptionListGroup>
-              <DescriptionListTerm>Tolerations</DescriptionListTerm>
-              <DescriptionListDescription>6 Tolerations</DescriptionListDescription>
-            </DescriptionListGroup>
             <DescriptionListGroup>
               <DescriptionListTerm>Created at:</DescriptionListTerm>
               <DescriptionListDescription>3 minutes ago</DescriptionListDescription>