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

Input styling changes, Form component addition #216

Merged
merged 43 commits into from
Nov 20, 2020
Merged

Input styling changes, Form component addition #216

merged 43 commits into from
Nov 20, 2020

Conversation

kylesuss
Copy link
Contributor

@kylesuss kylesuss commented Oct 23, 2020

The Input element has new styling, per the designs here:

https://projects.invisionapp.com/d/main#/console/20597416/432876968/preview

In addition to that, I have added a "lightweight"Form component that does not make any assumptions about how you manage form state (values, onChange, etc.), though it does encode some UX patterns for how we handle error messages & validate form fields. The intent was to make this extremely flexible, but create a set of behaviors that we will want on form across our properties based on the design language. I added some example for how to manage state in the stories, but they are mostly meant for documentation/example purposes.

The API is backwards compatible, so I am setting this to a minor release.

PS this will be the first design system component I added w/ TypeScript so let me know what I can do to improve that 👍

@kylesuss kylesuss added the minor Increment the minor version when merged label Oct 23, 2020
@@ -80,14 +87,14 @@ export function Tooltip({
}) {
return (
<TooltipWrapper hasChrome={hasChrome} data-placement={placement} ref={tooltipRef} {...props}>
{hasChrome && <Arrow data-placement={placement} ref={arrowRef} {...arrowProps} />}
<Arrow isVisible={hasChrome} data-placement={placement} ref={arrowRef} {...arrowProps} />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for adding this one!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No prob -- did you run into this issue as well?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yea, while adding the search dropdown on the blog

Copy link
Collaborator

@winkerVSbecks winkerVSbecks left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure about that one typing but, other LGTM

src/components/Form.tsx Outdated Show resolved Hide resolved
@kylesuss
Copy link
Contributor Author

@ghengeveld I reworked this w/ the pattern we discussed on the call today. I think it ends up being more flexible, as you say. LMK what you think.

@ghengeveld ghengeveld assigned kylesuss and unassigned ghengeveld Nov 18, 2020
@ndelangen
Copy link
Member

👏

@kylesuss kylesuss merged commit db4dadc into master Nov 20, 2020
@kylesuss kylesuss deleted the forms branch November 20, 2020 17:01
@kylesuss
Copy link
Contributor Author

🚀 PR was released in v5.2.0 🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
minor Increment the minor version when merged released
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants