add more spacing to icon

patternfly · Sep 25, 2024 · 1090cda · 1090cda
1 parent dc4b967
commit 1090cda
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 14 deletions.
diff --git a/packages/react-core/src/components/Card/examples/CardTile.tsx b/packages/react-core/src/components/Card/examples/CardTile.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Card, CardHeader, CardBody, Gallery } from '@patternfly/react-core';
+import { Card, CardHeader, CardBody, Gallery, Flex } from '@patternfly/react-core';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 
 export const CardTile: React.FunctionComponent = () => {
@@ -25,8 +25,10 @@ export const CardTile: React.FunctionComponent = () => {
             isHidden: true
           }}
         >
-          <PlusIcon />
-          <b>Tile header</b>
+          <Flex>
+            <PlusIcon />
+            <b>Tile header</b>
+          </Flex>
         </CardHeader>
         <CardBody>Tile content and description</CardBody>
       </Card>
@@ -41,8 +43,10 @@ export const CardTile: React.FunctionComponent = () => {
             isHidden: true
           }}
         >
-          <PlusIcon />
-          <b>Tile header</b>
+          <Flex>
+            <PlusIcon />
+            <b>Tile header</b>
+          </Flex>
         </CardHeader>
         <CardBody>Tile content and description</CardBody>
       </Card>
@@ -57,8 +61,10 @@ export const CardTile: React.FunctionComponent = () => {
             isHidden: true
           }}
         >
-          <PlusIcon />
-          <b>Tile header (disabled)</b>
+          <Flex>
+            <PlusIcon />
+            <b>Tile header (disabled)</b>
+          </Flex>
         </CardHeader>
         <CardBody>Tile content and description</CardBody>
       </Card>

diff --git a/packages/react-core/src/components/Card/examples/CardTileMulti.tsx b/packages/react-core/src/components/Card/examples/CardTileMulti.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Card, CardHeader, CardBody, Gallery } from '@patternfly/react-core';
+import { Card, CardHeader, CardBody, Gallery, Flex } from '@patternfly/react-core';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 
 export const CardTileMulti: React.FunctionComponent = () => {
@@ -38,8 +38,10 @@ export const CardTileMulti: React.FunctionComponent = () => {
             isHidden: true
           }}
         >
-          <PlusIcon />
-          <b>Tile header</b>
+          <Flex>
+            <PlusIcon />
+            <b>Tile header</b>
+          </Flex>
         </CardHeader>
         <CardBody>Tile content and description</CardBody>
       </Card>
@@ -53,8 +55,10 @@ export const CardTileMulti: React.FunctionComponent = () => {
             isHidden: true
           }}
         >
-          <PlusIcon />
-          <b>Tile header</b>
+          <Flex>
+            <PlusIcon />
+            <b>Tile header</b>
+          </Flex>
         </CardHeader>
         <CardBody>Tile content and description</CardBody>
       </Card>
@@ -68,8 +72,10 @@ export const CardTileMulti: React.FunctionComponent = () => {
             isHidden: true
           }}
         >
-          <PlusIcon />
-          <b>Tile header (disabled)</b>
+          <Flex>
+            <PlusIcon />
+            <b>Tile header (disabled)</b>
+          </Flex>
         </CardHeader>
         <CardBody>Tile content and description</CardBody>
       </Card>