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

Dropdown, DatePicker, CheckboxText Components #133

Merged
merged 12 commits into from
Sep 15, 2024
Merged

Conversation

tsar-boomba
Copy link
Contributor

What does this Pull Request change?

Adds the last necessary components and utilities from #122

Important Changes

  • Add Dropdown component based on react-dropdown
  • Add DatePicker component based on react-datepicker
  • Add skeleton for CheckboxText component
  • Add keyboardScroll helper for keeping input elements in focus on mobile

Copy link
Contributor

@parkerra parkerra left a 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!

onChange?: (value: Option) => void;
}

const arrow = (
Copy link
Contributor

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!

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"}`}
Copy link
Contributor

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",
Copy link
Contributor

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

@tsar-boomba tsar-boomba merged commit 1f6c8d8 into main Sep 15, 2024
0 of 5 checks passed
@tsar-boomba tsar-boomba deleted the 122-isaiah-components branch September 15, 2024 23:05
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.

2 participants