pr feedback

patternfly · May 20, 2024 · 90b90a0 · 90b90a0
1 parent 4e8e343
commit 90b90a0
Show file tree

Hide file tree

Showing 10 changed files with 107 additions and 83 deletions.
diff --git a/packages/react-core/src/components/NotificationDrawer/NotificationDrawerHeader.tsx b/packages/react-core/src/components/NotificationDrawer/NotificationDrawerHeader.tsx
@@ -3,8 +3,6 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/NotificationDrawer/notification-drawer';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
-
-import { Text, TextVariants } from '../Text';
 import { Button, ButtonVariant } from '../Button';
 
 export interface NotificationDrawerHeaderProps extends React.HTMLProps<HTMLDivElement> {
@@ -38,9 +36,7 @@ export const NotificationDrawerHeader: React.FunctionComponent<NotificationDrawe
   ...props
 }: NotificationDrawerHeaderProps) => (
   <div {...props} className={css(styles.notificationDrawerHeader, className)}>
-    <Text component={TextVariants.h1} className={css(styles.notificationDrawerHeaderTitle)}>
-      {title}
-    </Text>
+    <h1 className={css(styles.notificationDrawerHeaderTitle)}>{title}</h1>
     {(customText !== undefined || count !== undefined) && (
       <span className={css(styles.notificationDrawerHeaderStatus)} aria-live="polite">
         {customText || `${count} ${unreadText}`}

diff --git a/...ponents/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerHeader.test.tsx.snap b/...ponents/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerHeader.test.tsx.snap
@@ -6,11 +6,7 @@ exports[`NotificationDrawerHeader drawer header with count applied 1`] = `
     class="pf-v6-c-notification-drawer__header"
   >
     <h1
-      class="pf-v6-c-content--h1 pf-v6-c-notification-drawer__header-title"
-      data-ouia-component-id="OUIA-Generated-Text-3"
-      data-ouia-component-type="PF6/Text"
-      data-ouia-safe="true"
-      data-pf-content="true"
+      class="pf-v6-c-notification-drawer__header-title"
     >
       Notifications
     </h1>
@@ -30,11 +26,7 @@ exports[`NotificationDrawerHeader drawer header with custom unread text applied
     class="pf-v6-c-notification-drawer__header"
   >
     <h1
-      class="pf-v6-c-content--h1 pf-v6-c-notification-drawer__header-title"
-      data-ouia-component-id="OUIA-Generated-Text-5"
-      data-ouia-component-type="PF6/Text"
-      data-ouia-safe="true"
-      data-pf-content="true"
+      class="pf-v6-c-notification-drawer__header-title"
     >
       Notifications
     </h1>
@@ -54,11 +46,7 @@ exports[`NotificationDrawerHeader drawer header with title applied 1`] = `
     class="pf-v6-c-notification-drawer__header"
   >
     <h1
-      class="pf-v6-c-content--h1 pf-v6-c-notification-drawer__header-title"
-      data-ouia-component-id="OUIA-Generated-Text-4"
-      data-ouia-component-type="PF6/Text"
-      data-ouia-safe="true"
-      data-pf-content="true"
+      class="pf-v6-c-notification-drawer__header-title"
     >
       Some Title
     </h1>
@@ -72,11 +60,7 @@ exports[`NotificationDrawerHeader renders with PatternFly Core styles 1`] = `
     class="pf-v6-c-notification-drawer__header"
   >
     <h1
-      class="pf-v6-c-content--h1 pf-v6-c-notification-drawer__header-title"
-      data-ouia-component-id="OUIA-Generated-Text-1"
-      data-ouia-component-type="PF6/Text"
-      data-ouia-safe="true"
-      data-pf-content="true"
+      class="pf-v6-c-notification-drawer__header-title"
     >
       Notifications
     </h1>

diff --git a/packages/react-core/src/components/Wizard/WizardToggle.tsx b/packages/react-core/src/components/Wizard/WizardToggle.tsx
@@ -31,8 +31,6 @@ export interface WizardToggleProps {
   isNavExpanded?: boolean;
   /** Callback to expand or collapse the dropdown navigation */
   toggleNavExpanded?: (event: React.MouseEvent<HTMLButtonElement> | KeyboardEvent) => void;
-  /** Used to determine the icon displayed next to content. Default has no icon. */
-  status?: 'default' | 'error';
 }
 
 export const WizardToggle = ({
@@ -42,13 +40,13 @@ export const WizardToggle = ({
   nav,
   isNavExpanded,
   toggleNavExpanded,
-  status = 'default',
   'aria-label': ariaLabel = 'Wizard toggle'
 }: WizardToggleProps) => {
   const isActiveSubStep = isWizardSubStep(activeStep);
   const parentStep = isActiveSubStep && steps.find((step) => step.id === activeStep.parentId);
   const nonSubSteps = steps.filter((step) => !isWizardSubStep(step));
   const wizardToggleIndex = nonSubSteps.indexOf(parentStep || activeStep) + 1;
+  const isActiveStepStatus = activeStep.status;
 
   const handleKeyClicks = React.useCallback(
     (event: KeyboardEvent): void => {
@@ -94,8 +92,8 @@ export const WizardToggle = ({
         aria-expanded={isNavExpanded}
       >
         <span className={css(styles.wizardToggleList)}>
-          <span className={css(styles.wizardToggleListItem, status === 'error' && styles.modifiers.danger)}>
-            {status === 'error' ? (
+          <span className={css(styles.wizardToggleListItem, isActiveStepStatus === 'error' && styles.modifiers.danger)}>
+            {isActiveStepStatus === 'error' ? (
               <span className={css(styles.wizardNavLinkStatusIcon)}>
                 <ExclamationCircleIcon />
               </span>

diff --git a/packages/react-core/src/demos/CardDemos.md b/packages/react-core/src/demos/CardDemos.md
@@ -16,9 +16,8 @@ import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_colo
 import chart_color_red_100 from '@patternfly/react-tokens/dist/esm/chart_color_red_100';
 import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
 import global_color_status_success_default from '@patternfly/react-tokens/dist/esm/global_color_status_success_default';
-import global_color_status_warning_default from '@patternfly/react-tokens/dist/esm/global_color_status_warning_default';
 import global_color_status_danger_default from '@patternfly/react-tokens/dist/esm/global_color_status_danger_default';
-import global_color_brand_200 from '@patternfly/react-tokens/dist/esm/global_color_brand_200';
+import global_text_color_subtle from '@patternfly/react-tokens/dist/esm/global_text_color_subtle';
 import flex from '@patternfly/react-styles/css/utilities/Flex/flex';
 import text from '@patternfly/react-styles/css/utilities/Text/text';
 import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';

diff --git a/packages/react-core/src/demos/examples/Card/CardAggregateStatus.tsx b/packages/react-core/src/demos/examples/Card/CardAggregateStatus.tsx
@@ -10,15 +10,13 @@ import {
   Gallery,
   Grid,
   GridItem,
-  Stack
+  Stack,
+  Icon
 } from '@patternfly/react-core';
 import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 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_color_status_success_default from '@patternfly/react-tokens/dist/esm/global_color_status_success_default';
-import global_color_status_warning_default from '@patternfly/react-tokens/dist/esm/global_color_status_warning_default';
-import global_color_status_danger_default from '@patternfly/react-tokens/dist/esm/global_color_status_danger_default';
 import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
 
 interface ContentType {
@@ -46,7 +44,11 @@ const cardData: CardData = {
       title: '5 Clusters',
       content: [
         {
-          icon: <CheckCircleIcon color={global_color_status_success_default.var} />
+          icon: (
+            <Icon status="success">
+              <CheckCircleIcon />
+            </Icon>
+          )
         }
       ],
       layout: 'icon'
@@ -55,7 +57,11 @@ const cardData: CardData = {
       title: '15 Clusters',
       content: [
         {
-          icon: <ExclamationTriangleIcon color={global_color_status_warning_default.var} />
+          icon: (
+            <Icon status="warning">
+              <ExclamationTriangleIcon />
+            </Icon>
+          )
         }
       ],
       layout: 'icon'
@@ -64,7 +70,11 @@ const cardData: CardData = {
       title: '3 Clusters',
       content: [
         {
-          icon: <TimesCircleIcon color={global_color_status_danger_default.var} />
+          icon: (
+            <Icon status="danger">
+              <TimesCircleIcon />
+            </Icon>
+          )
         }
       ],
       layout: 'icon'
@@ -75,11 +85,19 @@ const cardData: CardData = {
       title: '10 Hosts',
       content: [
         {
-          icon: <ExclamationCircleIcon color={global_color_status_success_default.var} />,
+          icon: (
+            <Icon status="success">
+              <ExclamationCircleIcon />
+            </Icon>
+          ),
           count: 2
         },
         {
-          icon: <ExclamationTriangleIcon color={global_color_status_warning_default.var} />,
+          icon: (
+            <Icon status="warning">
+              <ExclamationTriangleIcon />
+            </Icon>
+          ),
           count: 1
         }
       ],
@@ -89,11 +107,19 @@ const cardData: CardData = {
       title: '50 Hosts',
       content: [
         {
-          icon: <CheckCircleIcon color={global_color_status_success_default.var} />,
+          icon: (
+            <Icon status="success">
+              <CheckCircleIcon />
+            </Icon>
+          ),
           count: 5
         },
         {
-          icon: <TimesCircleIcon color={global_color_status_danger_default.var} />,
+          icon: (
+            <Icon status="success">
+              <TimesCircleIcon />
+            </Icon>
+          ),
           count: 12
         }
       ],
@@ -103,11 +129,19 @@ const cardData: CardData = {
       title: '12 Hosts',
       content: [
         {
-          icon: <ExclamationTriangleIcon color={global_color_status_warning_default.var} />,
+          icon: (
+            <Icon status="warning">
+              <ExclamationTriangleIcon />
+            </Icon>
+          ),
           count: 3
         },
         {
-          icon: <TimesCircleIcon color={global_color_status_danger_default.var} />,
+          icon: (
+            <Icon status="danger">
+              <TimesCircleIcon />
+            </Icon>
+          ),
           count: 7
         }
       ],
@@ -119,12 +153,20 @@ const cardData: CardData = {
       title: '13 Hosts',
       content: [
         {
-          icon: <TimesCircleIcon color={global_color_status_danger_default.var} />,
+          icon: (
+            <Icon status="danger">
+              <TimesCircleIcon />
+            </Icon>
+          ),
           status: '2 errors',
           subtitle: 'subtitle'
         },
         {
-          icon: <ExclamationTriangleIcon color={global_color_status_warning_default.var} />,
+          icon: (
+            <Icon status="warning">
+              <ExclamationTriangleIcon />
+            </Icon>
+          ),
           status: '1 warning',
           subtitle: 'subtitle'
         }
@@ -135,12 +177,20 @@ const cardData: CardData = {
       title: '3 Hosts',
       content: [
         {
-          icon: <CheckCircleIcon color={global_color_status_success_default.var} />,
+          icon: (
+            <Icon status="success">
+              <CheckCircleIcon />
+            </Icon>
+          ),
           status: '2 successes',
           subtitle: 'subtitle'
         },
         {
-          icon: <ExclamationTriangleIcon color={global_color_status_warning_default.var} />,
+          icon: (
+            <Icon status="warning">
+              <ExclamationTriangleIcon />
+            </Icon>
+          ),
           status: '3 warnings',
           subtitle: 'subtitle'
         }
@@ -151,12 +201,20 @@ const cardData: CardData = {
       title: '50 Hosts',
       content: [
         {
-          icon: <ExclamationTriangleIcon color={global_color_status_warning_default.var} />,
+          icon: (
+            <Icon status="warning">
+              <ExclamationTriangleIcon />
+            </Icon>
+          ),
           status: '7 warnings',
           subtitle: 'subtitle'
         },
         {
-          icon: <TimesCircleIcon color={global_color_status_danger_default.var} />,
+          icon: (
+            <Icon status="danger">
+              <TimesCircleIcon />
+            </Icon>
+          ),
           status: '1 error',
           subtitle: 'subtitle'
         }

diff --git a/packages/react-core/src/demos/examples/Card/CardStatus.tsx b/packages/react-core/src/demos/examples/Card/CardStatus.tsx
@@ -28,7 +28,7 @@ import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclama
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 import global_color_status_success_default from '@patternfly/react-tokens/dist/esm/global_color_status_success_default';
 import global_color_status_danger_default from '@patternfly/react-tokens/dist/esm/global_color_status_danger_default';
-import global_color_brand_200 from '@patternfly/react-tokens/dist/esm/global_color_brand_200';
+import global_text_color_subtle from '@patternfly/react-tokens/dist/esm/global_text_color_subtle';
 
 export const CardStatus: React.FunctionComponent = () => {
   const [drawerExpanded, setDrawerExpanded] = React.useState(false);
@@ -171,7 +171,7 @@ export const CardStatus: React.FunctionComponent = () => {
                 <a href="#">Operators</a>
               </FlexItem>
               <FlexItem>
-                <span style={{ color: global_color_brand_200.var }}>1 degraded</span>
+                <span style={{ color: global_text_color_subtle.var }}>1 degraded</span>
               </FlexItem>
             </Flex>
           </Flex>
@@ -186,7 +186,7 @@ export const CardStatus: React.FunctionComponent = () => {
                 <a href="#">Image Vulnerabilities</a>
               </FlexItem>
               <FlexItem>
-                <span style={{ color: global_color_brand_200.var }}>0 vulnerabilities</span>
+                <span style={{ color: global_text_color_subtle.var }}>0 vulnerabilities</span>
               </FlexItem>
             </Flex>
           </Flex>

diff --git a/packages/react-table/src/components/Table/examples/Table.md b/packages/react-table/src/components/Table/examples/Table.md
@@ -56,7 +56,7 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 import textStyles from '@patternfly/react-styles/css/utilities/Text/text';
-import global_background_color_200 from '@patternfly/react-tokens/dist/esm/global_background_color_200';
+import global_background_color_secondary_default from '@patternfly/react-tokens/dist/esm/global_background_color_secondary_default';
 
 ## Table examples
 

diff --git a/packages/react-table/src/components/Table/examples/TableMisc.tsx b/packages/react-table/src/components/Table/examples/TableMisc.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 /* eslint-disable camelcase */
-import global_background_color_200 from '@patternfly/react-tokens/dist/esm/global_background_color_200';
+import global_background_color_secondary_default from '@patternfly/react-tokens/dist/esm/global_background_color_secondary_default';
 
 interface Repository {
   name: string;
@@ -67,7 +67,7 @@ export const TableMisc: React.FunctionComponent = () => {
         {repositories.map((repo, rowIndex) => {
           const isOddRow = (rowIndex + 1) % 2;
           const customStyle = {
-            backgroundColor: global_background_color_200.var
+            backgroundColor: global_background_color_secondary_default.var
           };
           // Some arbitrary logic to demonstrate that cell styles can be based on anything
           const nameColSpan = repo.branches === null && repo.prs === null ? 3 : 1;