Skip to content

Commit

Permalink
add styling updates from main
Browse files Browse the repository at this point in the history
  • Loading branch information
@jenny-s51
jenny-s51 committed Oct 12, 2023
1 parent a1d8710 commit 1c557d5
Show file tree
Hide file tree
Showing 10 changed files with 99 additions and 84 deletions.
40 changes: 21 additions & 19 deletions packages/react-core/src/demos/examples/Card/CardAggregateStatus.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable camelcase */
import * as React from 'react';
import {
Card,
Expand All @@ -15,6 +16,10 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-
import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
import TimesCircleIcon from '@patternfly/react-icons/dist/js/icons/times-circle-icon';
import global_success_color_100 from '@patternfly/react-tokens/dist/esm/global_success_color_100';
import global_warning_color_100 from '@patternfly/react-tokens/dist/esm/global_warning_color_100';
import global_danger_color_100 from '@patternfly/react-tokens/dist/esm/global_danger_color_100';
import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';

interface ContentType {
icon?: React.ReactNode;
Expand All @@ -41,7 +46,7 @@ const cardData: CardData = {
title: '5 Clusters',
content: [
{
icon: <CheckCircleIcon color="var(--pf-v5-global--success-color--100)" />
icon: <CheckCircleIcon color={global_success_color_100.var} />
}
],
layout: 'icon'
Expand All @@ -50,7 +55,7 @@ const cardData: CardData = {
title: '15 Clusters',
content: [
{
icon: <ExclamationTriangleIcon color="var(--pf-v5-global--warning-color--100)" />
icon: <ExclamationTriangleIcon color={global_warning_color_100.var} />
}
],
layout: 'icon'
Expand All @@ -59,7 +64,7 @@ const cardData: CardData = {
title: '3 Clusters',
content: [
{
icon: <TimesCircleIcon color="var(--pf-v5-global--danger-color--100)" />
icon: <TimesCircleIcon color={global_danger_color_100.var} />
}
],
layout: 'icon'
Expand All @@ -70,11 +75,11 @@ const cardData: CardData = {
title: '10 Hosts',
content: [
{
icon: <ExclamationCircleIcon color="var(--pf-v5-global--success-color--100)" />,
icon: <ExclamationCircleIcon color={global_success_color_100.var} />,
count: 2
},
{
icon: <ExclamationTriangleIcon color="var(--pf-v5-global--warning-color--100)" />,
icon: <ExclamationTriangleIcon color={global_warning_color_100.var} />,
count: 1
}
],
Expand All @@ -84,11 +89,11 @@ const cardData: CardData = {
title: '50 Hosts',
content: [
{
icon: <CheckCircleIcon color="var(--pf-v5-global--success-color--100)" />,
icon: <CheckCircleIcon color={global_success_color_100.var} />,
count: 5
},
{
icon: <TimesCircleIcon color="var(--pf-v5-global--danger-color--100)" />,
icon: <TimesCircleIcon color={global_danger_color_100.var} />,
count: 12
}
],
Expand All @@ -98,11 +103,11 @@ const cardData: CardData = {
title: '12 Hosts',
content: [
{
icon: <ExclamationTriangleIcon color="var(--pf-v5-global--warning-color--100)" />,
icon: <ExclamationTriangleIcon color={global_warning_color_100.var} />,
count: 3
},
{
icon: <TimesCircleIcon color="var(--pf-v5-global--danger-color--100)" />,
icon: <TimesCircleIcon color={global_danger_color_100.var} />,
count: 7
}
],
Expand All @@ -114,12 +119,12 @@ const cardData: CardData = {
title: '13 Hosts',
content: [
{
icon: <TimesCircleIcon color="var(--pf-v5-global--danger-color--100)" />,
icon: <TimesCircleIcon color={global_danger_color_100.var} />,
status: '2 errors',
subtitle: 'subtitle'
},
{
icon: <ExclamationTriangleIcon color="var(--pf-v5-global--warning-color--100)" />,
icon: <ExclamationTriangleIcon color={global_warning_color_100.var} />,
status: '1 warning',
subtitle: 'subtitle'
}
Expand All @@ -130,12 +135,12 @@ const cardData: CardData = {
title: '3 Hosts',
content: [
{
icon: <CheckCircleIcon color="var(--pf-v5-global--success-color--100)" />,
icon: <CheckCircleIcon color={global_success_color_100.var} />,
status: '2 successes',
subtitle: 'subtitle'
},
{
icon: <ExclamationTriangleIcon color="var(--pf-v5-global--warning-color--100)" />,
icon: <ExclamationTriangleIcon color={global_warning_color_100.var} />,
status: '3 warnings',
subtitle: 'subtitle'
}
Expand All @@ -146,12 +151,12 @@ const cardData: CardData = {
title: '50 Hosts',
content: [
{
icon: <ExclamationTriangleIcon color="var(--pf-v5-global--warning-color--100)" />,
icon: <ExclamationTriangleIcon color={global_warning_color_100.var} />,
status: '7 warnings',
subtitle: 'subtitle'
},
{
icon: <TimesCircleIcon color="var(--pf-v5-global--danger-color--100)" />,
icon: <TimesCircleIcon color={global_danger_color_100.var} />,
status: '1 error',
subtitle: 'subtitle'
}
Expand Down Expand Up @@ -221,10 +226,7 @@ export const CardAggregateStatus: React.FunctionComponent = () => {
}
return (
<GridItem key={groupIndex}>
<Gallery
hasGutter
style={{ '--pf-v5-l-gallery--GridTemplateColumns--min': galleryWidth } as React.CSSProperties}
>
<Gallery hasGutter style={{ [l_gallery_GridTemplateColumns_min.name]: galleryWidth } as any}>
{cardData[cardGroup].map(({ title, content, layout }, cardIndex: number) => (
<Card
style={{ textAlign: cardAlign } as React.CSSProperties}
Expand Down
4 changes: 3 additions & 1 deletion packages/react-core/src/demos/examples/Card/CardDetails.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable camelcase */
import React from 'react';
import {
Card,
Expand All @@ -12,9 +13,10 @@ import {
DescriptionListDescription,
Divider
} from '@patternfly/react-core';
import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';

export const CardDetailsDemo: React.FunctionComponent = () => (
<Gallery hasGutter style={{ '--pf-v5-l-gallery--GridTemplateColumns--min': '260px' } as React.CSSProperties}>
<Gallery hasGutter style={{ [l_gallery_GridTemplateColumns_min.name]: '260px' }}>
<Card>
<CardTitle>
<Title headingLevel="h4" size="xl">
Expand Down
25 changes: 13 additions & 12 deletions packages/react-core/src/demos/examples/Card/CardEventsView.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable camelcase */
import React from 'react';
import {
Card,
Expand All @@ -22,6 +23,9 @@ import {
} from '@patternfly/react-core';
import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
import flex from '@patternfly/react-styles/css/utilities/Flex/flex';
import text from '@patternfly/react-styles/css/utilities/Text/text';
import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';

export const CardEventsView: React.FunctionComponent = () => {
const [isOpen, setIsOpen] = React.useState(false);
Expand Down Expand Up @@ -57,12 +61,9 @@ export const CardEventsView: React.FunctionComponent = () => {
<code>baseline</code> alignment.
<br />
<br />
<Gallery hasGutter style={{ '--pf-v5-l-gallery--GridTemplateColumns--min': '360px' } as React.CSSProperties}>
<Gallery hasGutter style={{ [l_gallery_GridTemplateColumns_min.name]: '360px' }}>
<Card id="card-events-view-example">
<CardHeader
className="pf-v5-u-align-items-flex-start"
actions={{ actions: headerActions, hasNoOffset: true }}
>
<CardHeader className={flex.alignItemsFlexStart} actions={{ actions: headerActions, hasNoOffset: true }}>
<CardTitle>
<Title headingLevel="h4" size="xl" style={{ paddingTop: '3px' }}>
Events
Expand All @@ -75,7 +76,7 @@ export const CardEventsView: React.FunctionComponent = () => {
<DescriptionListTerm>
<Flex flexWrap={{ default: 'nowrap' }}>
<FlexItem>
<ExclamationCircleIcon className="pf-v5-u-danger-color-100" aria-hidden="true" />
<ExclamationCircleIcon className={text.dangerColor_100} aria-hidden="true" />
</FlexItem>
<FlexItem>
<span>Readiness probe failed</span>
Expand All @@ -87,14 +88,14 @@ export const CardEventsView: React.FunctionComponent = () => {
connection refused
</DescriptionListDescription>
<DescriptionListDescription>
<time className="pf-v5-u-color-200 pf-v5-u-font-size-sm">Jun 17, 11:02 am</time>
<time className={`${text.color_200} ${text.fontSizeSm}`}>Jun 17, 11:02 am</time>
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>
<Flex flexWrap={{ default: 'nowrap' }}>
<FlexItem>
<CheckCircleIcon className="pf-v5-u-success-color-100" aria-hidden="true" />
<CheckCircleIcon className={text.successColor_100} aria-hidden="true" />
</FlexItem>
<FlexItem>
<span>Successful assignment</span>
Expand All @@ -105,7 +106,7 @@ export const CardEventsView: React.FunctionComponent = () => {
Successfully assigned default/example to ip-10-0-130-149.ec2.internal
</DescriptionListDescription>
<DescriptionListDescription>
<time className="pf-v5-u-color-200 pf-v5-u-font-size-sm">Jun 17, 11:13 am</time>
<time className={`${text.color_200} ${text.fontSizeSm}`}>Jun 17, 11:13 am</time>
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
Expand All @@ -121,14 +122,14 @@ export const CardEventsView: React.FunctionComponent = () => {
</DescriptionListTerm>
<DescriptionListDescription>Pulling image "openshift/hello-openshift"</DescriptionListDescription>
<DescriptionListDescription>
<time className="pf-v5-u-color-200 pf-v5-u-font-size-sm">Jun 17, 10:59 am</time>
<time className={`${text.color_200} ${text.fontSizeSm}`}>Jun 17, 10:59 am</time>
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>
<Flex flexWrap={{ default: 'nowrap' }}>
<FlexItem>
<CheckCircleIcon className="pf-v5-u-success-color-100" aria-hidden="true" />
<CheckCircleIcon className={text.successColor_100} aria-hidden="true" />
</FlexItem>
<FlexItem>
<span>Created container</span>
Expand All @@ -137,7 +138,7 @@ export const CardEventsView: React.FunctionComponent = () => {
</DescriptionListTerm>
<DescriptionListDescription>Created container hello-openshift</DescriptionListDescription>
<DescriptionListDescription>
<time className="pf-v5-u-color-200 pf-v5-u-font-size-sm">Jun 17, 10:45 am</time>
<time className={`${text.color_200} ${text.fontSizeSm}`}>Jun 17, 10:45 am</time>
</DescriptionListDescription>
</DescriptionListGroup>
</DescriptionList>
Expand Down
19 changes: 10 additions & 9 deletions packages/react-core/src/demos/examples/Card/CardLogView.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable camelcase */
import React from 'react';
import {
Card,
Expand All @@ -18,6 +19,9 @@ import {
MenuToggle,
MenuToggleElement
} from '@patternfly/react-core';
import text from '@patternfly/react-styles/css/utilities/Text/text';
import flex from '@patternfly/react-styles/css/utilities/Flex/flex';
import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';

export const CardLogView: React.FunctionComponent = () => {
const [isOpen, setIsOpen] = React.useState(false);
Expand Down Expand Up @@ -57,12 +61,9 @@ export const CardLogView: React.FunctionComponent = () => {
<code>baseline</code> alignment.
<br />
<br />
<Gallery hasGutter style={{ '--pf-v5-l-gallery--GridTemplateColumns--min': '360px' } as React.CSSProperties}>
<Gallery hasGutter style={{ [l_gallery_GridTemplateColumns_min.name]: '360px' } as React.CSSProperties}>
<Card id="card-log-view-example">
<CardHeader
className="pf-v5-u-align-items-flex-start"
actions={{ actions: headerActions, hasNoOffset: true }}
>
<CardHeader className={flex.alignItemsFlexStart} actions={{ actions: headerActions, hasNoOffset: true }}>
<CardTitle>
<Title headingLevel="h4" size="xl" style={{ paddingTop: '3px' }}>
Activity
Expand All @@ -78,7 +79,7 @@ export const CardLogView: React.FunctionComponent = () => {
connection refused
</DescriptionListDescription>
<DescriptionListDescription>
<time className="pf-v5-u-color-200 pf-v5-u-font-size-sm">Jun 17, 11:02 am</time>
<time className={`${text.color_200} ${text.fontSizeSm}`}>Jun 17, 11:02 am</time>
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
Expand All @@ -87,21 +88,21 @@ export const CardLogView: React.FunctionComponent = () => {
Successfully assigned default/example to ip-10-0-130-149.ec2.internal
</DescriptionListDescription>
<DescriptionListDescription>
<time className="pf-v5-u-color-200 pf-v5-u-font-size-sm">Jun 17, 11:13 am</time>
<time className={`${text.color_200} ${text.fontSizeSm}`}>Jun 17, 11:13 am</time>
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>Pulling image</DescriptionListTerm>
<DescriptionListDescription>Pulling image "openshift/hello-openshift"</DescriptionListDescription>
<DescriptionListDescription>
<time className="pf-v5-u-color-200 pf-v5-u-font-size-sm">Jun 17, 10:59 am</time>
<time className={`${text.color_200} ${text.fontSizeSm}`}>Jun 17, 10:59 am</time>
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>Created container</DescriptionListTerm>
<DescriptionListDescription>Created container hello-openshift</DescriptionListDescription>
<DescriptionListDescription>
<time className="pf-v5-u-color-200 pf-v5-u-font-size-sm">Jun 17, 10:45 am</time>
<time className={`${text.color_200} ${text.fontSizeSm}`}>Jun 17, 10:45 am</time>
</DescriptionListDescription>
</DescriptionListGroup>
</DescriptionList>
Expand Down
Loading

0 comments on commit 1c557d5

Please sign in to comment.