pull in ai-guidelines#5022
Conversation
|
marked as ready for review just to generate preview. It should still be considered draft though |
|
/deploy-preview |
1 similar comment
|
/deploy-preview |
|
/deploy-preview |
1 similar comment
|
/deploy-preview |
|
I've deployed it myself, can review here |
andrew-ronaldson
left a comment
andrew-ronaldson
left a comment
There was a problem hiding this comment.
Can you remove the border-left styling on this figureelement. In this screenshot I made it a consistent 3px border width and a border-radius--md similar to our cards components.
thatblindgeye
left a comment
thatblindgeye
left a comment
There was a problem hiding this comment.
In addition to the below, do we intend to include any more verbiage from the design-language.md file? Not entirely sure what may not live elsewhere/is releveant, but the "Do not use unique colors or gradients to indicate AI features. " verbiage for example, I know we had to update in Chatbot to remove some gradient border from the message bar, so if that doesn't get mentioned anywhere else in the AI sections wondering if that (plus whatever else) is still relevant to include on this ai.md file
|
|
||
| ## Using AI icons in React | ||
|
|
||
| The following AI icons are available in the [@patternfly/react-icons](https://www.npmjs.com/package/@patternfly/react-icons) package. For detailed usage guidelines, see [Iconography](/ai/guidelines/iconography). |
There was a problem hiding this comment.
| The following AI icons are available in the [@patternfly/react-icons](https://www.npmjs.com/package/@patternfly/react-icons) package. For detailed usage guidelines, see [Iconography](/ai/guidelines/iconography). | |
| The following AI icons are available in the [@patternfly/react-icons](https://www.npmjs.com/package/@patternfly/react-icons) package. The example text labels should only be applied to interactive elements that contain these icons, such as buttons or menu toggles. For detailed usage guidelines, see [Iconography](/ai/guidelines/iconography). |
Just so users will know not to give the icon itself some accessible name. That, or using/tweaking the original text from the design-languages.md:
AI icons must also be paired with a button label or tooltip text that says "[ Action ] with AI" or "[ Action ] by AI" to ensure there are multiple indicators that AI is being used. You can adapt this text label between tenses as appropriate. For example, "Search with AI" or "Search results generated by AI."
There was a problem hiding this comment.
It's there at the top of this page https://ai-guidelines-legacy.surge.sh/ai/guidelines/transparency-notices
There was a problem hiding this comment.
The upstream iconography page says icons should be "paired with text" but the figcaption on the do example explicitly says "Icons can be used in non-interactive components, like tags or labels, and on buttons."
|
|
||
| | **Icon** | **React** | **Text label** | **Usage** | | ||
| | :---: | --- | --- | --- | | ||
| | <Icon size="lg"><RhUiAiExperienceIcon /></Icon> | RhUiAiExperienceIcon | | General AI identification, or when no other AI icon is appropriate. | |
There was a problem hiding this comment.
Could we suggest using "AI" as a text label, or providing some verbiage that the user should choose an appropriate text label for the context as part of the "Usage" column for these 2?
There was a problem hiding this comment.
I think the Iconography page already makes mention to pair with text like ''... with AI"
|
@thatblindgeye the color gradient is addressed here https://ai-guidelines-legacy.surge.sh/ai/guidelines/color |
|
lgtm! I have reviewed the AI style guide content that we are pulling in from project-felt/ai-guidelines. We are now consistent with RHDS (https://ux.redhat.com/ai-guidelines) which is part of our AC for the UIE 90 day delivery of KR #10 - https://redhat.atlassian.net/browse/UIESTRAT-19. |
|
The figure elements need a couple tweaks for glass mode. The generic figure elements should have border--width--regular and background global--background--color--primary--default There is still an issue where the images have white backgrounds while the figure has transparency but it is less noticeable. 
|
andrew-ronaldson
left a comment
andrew-ronaldson
left a comment
There was a problem hiding this comment.
Will need a follow up for the Felt images once that merges
6 participants
Pulls into the website the ai guidelines from https://github.com/project-felt/ai-guidelines/tree/main