This repository was archived by the owner on Jan 23, 2025. It is now read-only.
InlineAlert component#131
Merged
koorosh merged 2 commits intocockroachdb:masterfrom Oct 23, 2020
koorosh:alert-component
Merged
InlineAlert component#131koorosh merged 2 commits intocockroachdb:masterfrom koorosh:alert-component
koorosh merged 2 commits intocockroachdb:masterfrom
koorosh:alert-component
Conversation
nathanstilwell
suggested changes
Oct 22, 2020
Contributor
nathanstilwell
left a comment
There was a problem hiding this comment.
This looks great! I have one tiny change request, but everything else looks great. This is an exciting addition.
|
|
||
| wrapper.setProps({ size: "tiny" }); | ||
| expect(wrapper.prop("className")).toContain("size-tiny"); | ||
| wrapper.setProps({ size: "x-large" }); |
Contributor
There was a problem hiding this comment.
I appreciate the catch. I'm not sure why I added a tiny in here given that isn't a size we currently have. Would you mind re-ordering these from smallest to largest?
Contributor
Author
There was a problem hiding this comment.
What do you think about "dynamic" tests generation in this case? It might be easier to extend those test.
const iconSizes = ["small", ... "x-large"]
iconSizes.forEach(iconSize => {
test(`with ${iconSize} size`, () => { ... })
})
Contributor
Author
There was a problem hiding this comment.
@nathanstilwell , I've updated Icon tests (made more DRY)
Icon colors palette is extended with orange tint because it is one of functional colors in design system and needed for alerts to represent warning state.
InlineAlert component is one of basic components in Design System to provide users with feedback on a page. It's inline alert that doesn't disappear and has to be placed somewhere on a page.
nathanstilwell
approved these changes
Oct 23, 2020
Contributor
nathanstilwell
left a comment
There was a problem hiding this comment.
LGTM. Merging will publish a prerelease tag. I will manually publish a latest version.
|
|
||
| wrapper.setProps({ size: "tiny" }); | ||
| expect(wrapper.prop("className")).toContain("size-tiny"); | ||
| const iconSizes: Array<[IconSize, string]> = [ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
ui-components // InlineAlert
InlineAlert component is one of basic components in Design System to
provide users with feedback on a page. It doesn't disappear and has
to be placed somewhere on a page.
Checklist