Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Info Highlight Creation #3015

Open
wants to merge 14 commits into
base: prerelease/minor
Choose a base branch
from

Conversation

niftea
Copy link

@niftea niftea commented Oct 30, 2024

Summary

Fixes: #1175

Resolves: The need for an Information Highlight component. Moves the existing Information Highlight out of modules/docs and into modules/preview-react. Updates the existing design of Information Highlight to match the most recent specs and adding a high and low emphasis options.

Release Category

Components


Checklist

For the Reviewer

  • PR title is short and descriptive
  • PR summary describes the change (Fixes/Resolves linked correctly)
  • PR Release Notes describes additional information useful to call out in a release message or removed if not applicable
  • Breaking Changes provides useful information to upgrade to this code or removed if not applicable

Where Should the Reviewer Start?

/modules/react-preview/information-highlight/

Areas for Feedback? (optional)

  • Code
  • Documentation
  • Testing
  • Codemods

Testing Manually

yarn start to verify story book builds correctly, check out the new information highlight sections under preview, and testing preview

look at https://workday.github.io/canvas-kit/?path=/docs/tokens-tokens--docs in the local story book built by yarn start and verify the information highlight for tokens still builds and matches desired specs

Screenshots or GIFs (if applicable)

There are 6 style options for information highlight that come from a combination of two emphases and three variants. all six options have a colored side bar for the variant
Screenshot 2024-10-30 at 4 06 22 PM

High Emphasis Variants

Screenshot 2024-10-30 at 4 08 17 PM

Information Highlights also accept custom icons and properly tailor them for the variant and emphasis

Screenshot 2024-10-30 at 4 24 59 PM

They can also be built in a variety of ways with or without certain fields, the full extent of this can be seen in the visual testing

Screenshot 2024-10-30 at 4 28 42 PM

Thank You Gif (optional)

0bd211e1e4f1f5900cdb1b5f6ae02342

@niftea niftea mentioned this pull request Oct 30, 2024
10 tasks
@niftea niftea changed the title Info highlight creation feat: Info Highlight Creation Oct 30, 2024
@niftea niftea changed the base branch from master to prerelease/minor October 30, 2024 23:41
@josh-bagwell josh-bagwell changed the base branch from prerelease/minor to master November 4, 2024 18:45
@josh-bagwell josh-bagwell changed the base branch from master to prerelease/minor November 4, 2024 18:46
Arianna Malakis added 2 commits November 4, 2024 11:18
Copy link

cypress bot commented Nov 4, 2024

Workday/canvas-kit    Run #8142

Run Properties:  status check passed Passed #8142  •  git commit fb53e9130b ℹ️: Merge d2f4317a6cb46ac4dc6b3838c4a0b79bb49311ca into 66db2d01a33a6b91d0a3723c3af2...
Project Workday/canvas-kit
Branch Review info_highlight_creation
Run status status check passed Passed #8142
Run duration 02m 48s
Commit git commit fb53e9130b ℹ️: Merge d2f4317a6cb46ac4dc6b3838c4a0b79bb49311ca into 66db2d01a33a6b91d0a3723c3af2...
Committer niftea
View all properties for this run ↗︎

Test results
Tests that failed  Failures 0
Tests that were flaky  Flaky 1
Tests that did not run due to a developer annotating a test with .skip  Pending 21
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 923
View all changes introduced in this branch ↗︎
UI Coverage  21.37%
  Untested elements 1510  
  Tested elements 408  
Accessibility  99.15%
  Failed rules  6 critical   5 serious   0 moderate   2 minor
  Failed elements 162  

Arianna Malakis added 2 commits November 7, 2024 14:36
@josh-bagwell josh-bagwell marked this pull request as ready for review December 9, 2024 23:55
@josh-bagwell
Copy link
Contributor

Lets consolidate some of these examples:

  • Attention
  • Caution
  • Custom

These examples can be in one file, for example, AttentionLow and AttentionHigh can be consolidated to one file and export each if you wanted. This just cleans up the examples a bit.

@josh-bagwell
Copy link
Contributor

We will also need to add some more information to each example and when to use each. When should a user use low emphasis vs. high emphasis.

@williamjstanton
Copy link
Collaborator

This component is looking really good! Thanks for the contribution!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants