feat: Information highlight #2961
Conversation
| }, | ||
| }; | ||
|
|
||
| export interface IconProps extends SystemIconProps { |
There was a problem hiding this comment.
I'd probably put this at the top of the file instead of dividing iconStyles and defaultIcons, but I don't know canvas' conventions on where exports should go. I suspect not in the middle though :)
There was a problem hiding this comment.
I moved it to the bottom since there was another export there 😅 but if both should go to the top thats an easy move
There was a problem hiding this comment.
We usually like to keep our "exports"/interfaces at the top.
|
|
||
| # Canvas Kit Information Highlight | ||
|
|
||
| A layout that will seperate out text or other information to make it more prominent to the user | ||
|
|
||
| View the [documentation for Information Highlight](https://workday.github.io/canvas-kit/?path=/docs/information-highlight-react) | ||
| on Storybook. | ||
|
|
||
| [> Workday Design Reference: Information Highlight](https://design.workday.com/components/) |
There was a problem hiding this comment.
| # Canvas Kit Information Highlight | |
| A layout that will seperate out text or other information to make it more prominent to the user | |
| View the [documentation for Information Highlight](https://workday.github.io/canvas-kit/?path=/docs/information-highlight-react) | |
| on Storybook. | |
| [> Workday Design Reference: Information Highlight](https://design.workday.com/components/) | |
| # Canvas Kit Preview Information Highlight | |
| View the [documentation for Information Highlight](https://workday.github.io/canvas-kit/?path=/docs/preview-information-highlight--docs) | |
| on Storybook. |
| @@ -0,0 +1,77 @@ | |||
| import * as React from 'react'; | |||
There was a problem hiding this comment.
I would move this into a file named InformationHighlight within the lib folder.
| export type Variant = 'emphasis' | 'caution' | 'attention'; | ||
| export type Variant = 'informational' | 'caution' | 'attention'; |
There was a problem hiding this comment.
Just curious, was this meant to be done in updating those variants?
There was a problem hiding this comment.
Also, I know this just one hook but, we can put this hook into a folder named hooks
There was a problem hiding this comment.
originally i think i did it in case there was going to be high/low emphasis options for info highlight, so it wouldnt become confusing to read. I didnt change it back, but in the specs there are emphases so i guess it worked out
| @@ -0,0 +1,28 @@ | |||
| import * as React from 'react'; | |||
There was a problem hiding this comment.
So for this, a link is the right file name for this. We should not be having a traditional button within this. It uses a ExternalHyperlink in the design and in the previous component.
| gridColumn: '2', | ||
| justifySelf: 'start', | ||
| color: `${cssVar(base.blackPepper400)} !important`, | ||
| fontWeight: 500, // should use system.fontWeight.bold |
There was a problem hiding this comment.
This should be updated to the comment provided
|
|
||
| describe('InformationHighlight', () => { | ||
| it('should render on a server without crashing', () => { | ||
| const ssrRender = () => renderToString(<InformationHighlight></InformationHighlight>); |
There was a problem hiding this comment.
This should show text within similar to a basic example.
Workday/canvas-kit
|
||||||||||||||||||||||||||||||||||||||||
| Project |
Workday/canvas-kit
|
| Branch Review |
information-higlight
|
| Run status |
|
| Run duration | 03m 52s |
| Commit |
|
| Committer | niftea |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
24
|
Pending
|
24
|
Skipped
|
0
|
Passing
|
1092
|
| View all changes introduced in this branch ↗︎ | |
UI Coverage
21.73%
|
|
|---|---|
|
Untested elements
|
1644
|
|
Tested elements
|
454
|
Accessibility
99.17%
|
|
|---|---|
|
Failed rules
|
5 critical
5 serious
0 moderate
2 minor
|
|
Failed elements
|
182
|
| @@ -0,0 +1,80 @@ | |||
|
|
|||
There was a problem hiding this comment.
This will have to be updated to match our new mdx setup.
I would reference what is now in master to match that file setup. It will be a mdx file and a stories file.
If you have any questions, don't hesitate to ask!
|
unfortunately this branch was casualty of a bad rebase, so this PR is being scraped #3015 new pr with updated specs! it only has three variants and two emphases, but fully customizable icons |
Summary
Fixes: #1175
Resolves the need for an information highlight component. Moves the existing Information Highlight out of modules/docs and into modules/react-preview.
updates the existing design of information highlight to match the most recent specs. This includes changes to increase contrast between the icon and the background and changing the link component to be a button.
Release Category
Components
Checklist
ready for reviewhas been added to PRFor the Reviewer
Where Should the Reviewer Start?
/modules/react-preview/information-highlight/index.tsx
Areas for Feedback? (optional)
This is one of my first times using typescript. I would love additional feedback on information-highlight/lib/Icons.tsx, there is conditional logic at the very end of the file for is a color or accent color is input for the icon and I am unsure if that was the best way to go about it.
Screenshots or GIFs (if applicable)
Screenshots taken directly from story book component made in these changes. There are 3 prebuilt variant options: Attention, Caution, and Informational. These components have a default color scheme and icon
the user is also able to customize their information highlight
It is also possible to have components without any icon, or with just one component.
right now none of the full implementation options have no icon present, but if the reviewers feel that would be good to have I can make the updates to have a few more examples without icons
Attached photo is the testing component of the story book showing all the possible combinations of components for the prebuilt variants
Thank You Gif (optional)