feat(CullingInfo): add culling info component #568

InsaneZein · 2025-01-23T14:29:08Z

For RHCLOUD-33371. This adds the culling info component

patternfly-build · 2025-01-23T14:31:05Z

Preview: https://react-component-groups-pr-component-groups-568.surge.sh

A11y report: https://react-component-groups-pr-component-groups-568-a11y.surge.sh

nicolethoen · 2025-01-27T19:14:43Z

packages/module/src/CullingInfo/CullingInfo.tsx

+
+const useStyles = createUseStyles({
+  inventoryCullingWarning: {
+    color: 'var(--pf-v6-global--warning-color--200)',


In general, we should avoid using tokens which end with a number - those are called base tokens. Instead we should always be using semantic tokens which will adjust automatically in dark theme and be more context aware.

In this case, I believe the correct variable is --pf-t--global--icon--color--status--warning--default

And for the danger variant, it should be --pf-t--global--icon--color--status--danger--default

if those colors look incorrect, we could consult @kaylachumley for different tokens

I replaced them with semantic tokens

fhlavac · 2025-01-28T15:06:22Z

it looks we are missing some spacing between the icon and the text

fhlavac · 2025-01-28T15:07:02Z

@InsaneZein can you please add some examples showing different color variants of the component? (similar to screens in the JIRA). Ideally dynamically derived from the current date so they look always the same

...y-docs/content/extensions/component-groups/examples/CullingInfo/CullingInfoCustomExample.tsx

packages/module/src/CullingInfo/CullingInfoUtils.ts

packages/module/src/CullingInfo/CullingInfo.tsx

InsaneZein · 2025-01-28T22:35:22Z

@fhlavac fixed coloring and added example for both warning and danger versions

nicolethoen · 2025-01-29T01:15:24Z

packages/module/src/CullingInfo/CullingInfo.tsx

+  return (
+    <React.Fragment>
+      <Tooltip {...props} content={msg} position="bottom">
+        <span


From an accessibility perspective, tooltips need to be placed on interactable elements, such as links or buttons in order for them to able to be accessed by keyboard and screen readers.

Could these components be placed in a plain button, rather than a span?

<Button variant="plain" aria-label="Action" icon={<TimesIcon />} />

Can these buttons be inside a span or div? Or would that still get in the way of screen readers?

The button could be anywhere! The key is just that there needs to be an element which can take browser focus and has some sort of affordance which cues the user that there is more information available if they interact with this icon.

nicolethoen · 2025-01-29T01:16:23Z

packages/module/src/CullingInfo/CullingInfo.tsx

+    marginRight: 'var(--pf-t--global--spacer--sm)'
+  },
+  messageFont: {
+    fontWeight: 'var(--pf-t--global--font--weight--200)',


rather than a base font weight token, let's use the semantic token --pf-t--global--font--weight--body--bold

fhlavac · 2025-01-30T13:23:59Z

@edonehoo when you have time, can you please check the docs updates and overall wording? Thank you

nicolethoen · 2025-01-30T22:30:31Z

packages/module/src/CullingInfo/CullingInfo.tsx

+        >
+          {isError && <ExclamationCircleIcon />}
+          {isWarn && <ExclamationTriangleIcon />}
+          {children}


The first example is still not screen reader accessible - and it may be true that the button needs to replace the span - or the Tooltip needs to be placed on the button within the span.

you can see that the first example is screen reader inaccessible in the video below. you can also see how the tooltip is not being triggered by the screenreader since I think the tooltip needs to be placed on the button itself rather than the span outside the button.

i recommend testing the examples by tabbing through them as a sanity check - if they are keyboard accessible, it's much more likely that it'll be screen reader accessible.

oops I forgot to add the buttons to the tooltip version of the CullingInfo. I was able to tab through them after the fix.

edonehoo · 2025-02-03T15:31:57Z

...dule/patternfly-docs/content/extensions/component-groups/examples/CullingInfo/CullingInfo.md

+subsection: Status and state indicators
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Culling information


Suggested change

id: Culling information

id: Status timestamp

Previously, (via this Miro), we considered renaming "culling info" to be "status timestamp" for easier understanding. I don't see a timestamp in the examples, though, so maybe the design has changed. Do we still want to do that?

Another option could be "Stale warning", "Expiration warning", "Stale data warning"

I'm not able to access the Miro link, but there isn't a timestamp. It is either a warning/danger tooltip or a warning/danger icon with a custom message. Is there a naming option you would prefer?

Okay, let's go with "stale data warning" if that sounds okay with you? I also don't mind sticking with "culling" if that's more accurate, but if so I would suggest "culling warning" instead of "culling information"

edonehoo · 2025-02-03T15:35:43Z

...dule/patternfly-docs/content/extensions/component-groups/examples/CullingInfo/CullingInfo.md

+
+import CullingInformation from '@patternfly/react-component-groups/dist/dynamic/CullingInfo';
+
+A **culling information** component displays a warning for when an object will become culled or stale. It can display this as a tooltip or text. 


Suggested change

A **culling information** component displays a warning for when an object will become culled or stale. It can display this as a tooltip or text.

A **culling information** component displays a warning status when an object is stale and planned for removal. Additional warning details can be displayed a tooltip or text label.

if we change the component name, update here as well

edonehoo · 2025-02-03T15:40:51Z

...dule/patternfly-docs/content/extensions/component-groups/examples/CullingInfo/CullingInfo.md

+
+### Basic culling information
+
+A basic culling information example


Suggested change

A basic culling information example

A basic culling information component displays a warning icon with additional details in a tooltip, including a timeline for data removal.

edonehoo · 2025-02-03T15:41:54Z

...dule/patternfly-docs/content/extensions/component-groups/examples/CullingInfo/CullingInfo.md

+
+### Culling information with customized props
+
+For further customization, you can choose to render the tooltip as a message beside the icon instead. And you can utilize all properties of the [Tooltip component](/components/tooltip), with the exception of `content`.


Suggested change

For further customization, you can choose to render the tooltip as a message beside the icon instead. And you can utilize all properties of the [Tooltip component](/components/tooltip), with the exception of `content`.

Instead of sharing details in a tooltip, you can place a short message beside the icon instead. You can still utilize all properties of the PatternFly [tooltip component](/components/tooltip), with the exception of `content`.

edonehoo · 2025-02-03T15:42:21Z

...y-docs/content/extensions/component-groups/examples/CullingInfo/CullingInfoCustomExample.tsx

+          currDate={new Date()}
+          culled={new Date('Fri Feb 07 2024')}
+          staleWarning={new Date('Mon Feb 03 2024')}
+          render={() => (<React.Fragment>This is an error message. Item is past due</React.Fragment>)}>


Suggested change

render={() => (<React.Fragment>This is an error message. Item is past due</React.Fragment>)}>

render={() => (<React.Fragment>This is an error message where the item is overdue</React.Fragment>)}>

* trying some things * some suggestions

…rding

InsaneZein · 2025-02-11T21:54:32Z

@edonehoo @nicolethoen I've renamed CullingInfo to StaleDataWarning

edonehoo

a couple of places to update capitalization, but other than that this looks good!

edonehoo · 2025-02-12T21:31:04Z

...rnfly-docs/content/extensions/component-groups/examples/StaleDataWarning/StaleDataWarning.md

+subsection: Status and state indicators
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Stale Data Warning


Suggested change

id: Stale Data Warning

id: Stale data warning

edonehoo · 2025-02-12T21:31:21Z

...rnfly-docs/content/extensions/component-groups/examples/StaleDataWarning/StaleDataWarning.md

+
+import StaleDataWarning from '@patternfly/react-component-groups/dist/dynamic/StaleDataWarning';
+
+A **Stale Data Warning** component displays a warning status when an object is stale and planned for removal. Additional warning details can be displayed as a tooltip or text label. 


Suggested change

A **Stale Data Warning** component displays a warning status when an object is stale and planned for removal. Additional warning details can be displayed as a tooltip or text label.

A **stale data warning** component displays a warning status when an object is stale and planned for removal. Additional warning details can be displayed as a tooltip or text label.

edonehoo · 2025-02-12T21:31:44Z

...rnfly-docs/content/extensions/component-groups/examples/StaleDataWarning/StaleDataWarning.md

+
+### Stale data warning with customized props
+
+Instead of sharing details in a tooltip, you can place a short message beside the icon. You can still utilize all properties of the [Tooltip component](/components/tooltip), with the exception of `content`.


Suggested change

Instead of sharing details in a tooltip, you can place a short message beside the icon. You can still utilize all properties of the [Tooltip component](/components/tooltip), with the exception of `content`.

Instead of sharing details in a tooltip, you can place a short message beside the icon. You can still utilize all properties of the [tooltip component](/components/tooltip), with the exception of `content`.

nicolethoen · 2025-02-14T15:38:41Z

I'll rereview this once surge starts working for me again... 😞

nicolethoen

This looks great! thanks for working through all the feedback! 🍕 🎈

github-actions · 2025-02-14T19:12:30Z

🎉 This PR is included in version 6.2.0-prerelease.5 🎉

The release is available on:

Your semantic-release bot 📦🚀

feat(CullingInfo): add culling info component

9656851

InsaneZein requested review from fhlavac and nicolethoen January 27, 2025 14:27

nicolethoen requested changes Jan 27, 2025

View reviewed changes

fhlavac reviewed Jan 28, 2025

View reviewed changes

...y-docs/content/extensions/component-groups/examples/CullingInfo/CullingInfoCustomExample.tsx Outdated Show resolved Hide resolved

fhlavac reviewed Jan 28, 2025

View reviewed changes

packages/module/src/CullingInfo/CullingInfoUtils.ts Outdated Show resolved Hide resolved

fhlavac reviewed Jan 28, 2025

View reviewed changes

packages/module/src/CullingInfo/CullingInfo.tsx Outdated Show resolved Hide resolved

fix: use semantic tokens, fix styling, delete cullingInfoUtils

be6dad8

nicolethoen reviewed Jan 29, 2025

View reviewed changes

fhlavac requested a review from edonehoo January 30, 2025 13:23

fix: fix font semantic token; put Icon in a Button

20247da

nicolethoen reviewed Jan 30, 2025

View reviewed changes

InsaneZein added 2 commits January 30, 2025 16:56

fix: put tooltip icon in a button

dd1de82

chore: cleanup styling

86b71fd

edonehoo reviewed Feb 3, 2025

View reviewed changes

InsaneZein and others added 4 commits February 6, 2025 14:03

fix: attempt accessibility fix

9bdb4aa

Culling info suggestions (#606)

fdf0487

* trying some things * some suggestions

fix(StaleDataWarning): rename CullingInfo to StaleDataWarning; fix wo…

9d6bf62

…rding

fix: package-lock

d5ee24d

edonehoo requested changes Feb 12, 2025

View reviewed changes

chore: fix capitalization

fa0a227

edonehoo approved these changes Feb 14, 2025

View reviewed changes

dlabaj approved these changes Feb 14, 2025

View reviewed changes

nicolethoen approved these changes Feb 14, 2025

View reviewed changes

nicolethoen merged commit 07c541c into main Feb 14, 2025
6 checks passed

github-actions bot added the released on @prerelease label Feb 14, 2025

InsaneZein deleted the add-culling-info branch February 14, 2025 22:08

github-actions bot mentioned this pull request Apr 21, 2025

The automated release is failing 🚨 #692

Closed


		import CullingInformation from '@patternfly/react-component-groups/dist/dynamic/CullingInfo';

		A culling information component displays a warning for when an object will become culled or stale. It can display this as a tooltip or text.


		### Basic culling information

		A basic culling information example

	A basic culling information example
	A basic culling information component displays a warning icon with additional details in a tooltip, including a timeline for data removal.


		### Culling information with customized props

		For further customization, you can choose to render the tooltip as a message beside the icon instead. And you can utilize all properties of the [Tooltip component](/components/tooltip), with the exception of `content`.

	For further customization, you can choose to render the tooltip as a message beside the icon instead. And you can utilize all properties of the [Tooltip component](/components/tooltip), with the exception of `content`.
	Instead of sharing details in a tooltip, you can place a short message beside the icon instead. You can still utilize all properties of the PatternFly [tooltip component](/components/tooltip), with the exception of `content`.

	render={() => (<React.Fragment>This is an error message. Item is past due</React.Fragment>)}>
	render={() => (<React.Fragment>This is an error message where the item is overdue</React.Fragment>)}>


		import StaleDataWarning from '@patternfly/react-component-groups/dist/dynamic/StaleDataWarning';

		A Stale Data Warning component displays a warning status when an object is stale and planned for removal. Additional warning details can be displayed as a tooltip or text label.


		### Stale data warning with customized props

		Instead of sharing details in a tooltip, you can place a short message beside the icon. You can still utilize all properties of the [Tooltip component](/components/tooltip), with the exception of `content`.

feat(CullingInfo): add culling info component #568

feat(CullingInfo): add culling info component #568

Uh oh!

Conversation

InsaneZein commented Jan 23, 2025

Uh oh!

patternfly-build commented Jan 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

fhlavac commented Jan 28, 2025

Uh oh!

fhlavac commented Jan 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

InsaneZein commented Jan 28, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

fhlavac commented Jan 30, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

InsaneZein commented Feb 11, 2025

Uh oh!

edonehoo left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nicolethoen commented Feb 14, 2025

Uh oh!

nicolethoen left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented Feb 14, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

patternfly-build commented Jan 23, 2025 •

edited

Loading

fhlavac commented Jan 28, 2025 •

edited

Loading