-
Notifications
You must be signed in to change notification settings - Fork 0
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
Dropdown, DatePicker, CheckboxText Components #133
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The Dropdown menu and DatePicker look great and I know those can be tricky to get right! The keyboard scroll works really well too :D I also appreciate the organization of the shared ErrorText and adding labels to the inputs components. I'm going to merge in these changes tomorrow/over the weekend at the same time as merging in other tickets to resolve merge conflicts at the same time!
web/components/atoms/Dropdown.tsx
Outdated
onChange?: (value: Option) => void; | ||
} | ||
|
||
const arrow = ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Move the arrow to /components/Icons
so it can be more easily reused!
web/components/atoms/Dropdown.tsx
Outdated
onChange={onChange} | ||
placeholder={placeholder} | ||
placeholderClassName={`!text-medium-gray`} | ||
controlClassName={`!flex !items-center !justify-between !w-full !mt-2 !py-2.5 !px-2 !rounded ${disabled ? "!bg-light-gray" : "!bg-secondary-background"} !text-black ${error ? "!border-[#FF3939]" : "!border-light-gray"}`} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use text-primary-text
instead of text-black
in case we change the text shade throughout the codebase
@@ -24,6 +24,7 @@ | |||
"open-graph": "^0.2.6", | |||
"react": "17.0.2", | |||
"react-dom": "^17.0.2", | |||
"react-dropdown": "^1.11.0", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
"react-datepicker" wasn't added 😅 If you run npm i react-datepicker
again it'll add it to the package though
What does this Pull Request change?
Adds the last necessary components and utilities from #122
Important Changes
Dropdown
component based onreact-dropdown
DatePicker
component based onreact-datepicker
CheckboxText
componentkeyboardScroll
helper for keeping input elements in focus on mobile