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

Select use placeholder #705

Merged
merged 4 commits into from
Feb 9, 2024
Merged

Conversation

AngelaZQ1
Copy link
Contributor

@AngelaZQ1 AngelaZQ1 commented Feb 7, 2024

Description

Closes #696

Use react-select's placeholder attribute which lets you set placeholder text that is gray instead of black. Replaced noValueOptionLabel with placeholder which also removes the default value option from the list.

Other minor changes:

  • Concentrations -> Concentration
  • Tweaked colors of select dropdown to match input box

Before:

Screen.Recording.2024-02-07.at.5.11.30.PM.mov

After:

Screen.Recording.2024-02-07.at.5.12.18.PM.mov

Type of change

Please tick the boxes that best match your changes.

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update
  • This requires a run of yarn install
  • This has migration changes and requires a run of yarn dev:migration:run

How Has This Been Tested?

Please describe how you tested this PR (both manually and with tests) Provide instructions so we can reproduce.

  • Test A
  • Test B

Checklist:

  • I have run the production builds in docker for the frontend/backend and ensure things run fine. Check README of repo on how to run if not sure.
  • I have performed a self-review of my own code
  • I have commented my code where needed
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • I've run the end to end tests
  • Any dependent changes have been merged and published in downstream modules

Copy link

vercel bot commented Feb 7, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
graduatenu-frontend-v2 ❌ Failed (Inspect) Feb 8, 2024 11:50pm

}),
dropdownIndicator: (baseStyles: any, state: { isFocused: any }) => ({
...baseStyles,
color: state.isFocused ? "#7586a0" : "#b4bbc8",
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Our custom styles dont seem to work with react-select's styling so I had to hard code these colors

@AngelaZQ1 AngelaZQ1 marked this pull request as draft February 7, 2024 22:13
@AngelaZQ1
Copy link
Contributor Author

@BrandonLim8890 im gonna implement disabling the button until all fields are filled out in #704 since I think it makes more sense there

@AngelaZQ1 AngelaZQ1 marked this pull request as ready for review February 8, 2024 18:48
}),
dropdownIndicator: (baseStyles: any, state: { isFocused: any }) => ({
...baseStyles,
color: state.isFocused ? "#7586a0" : "#b4bbc8",
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
color: state.isFocused ? "#7586a0" : "#b4bbc8",
color: state.isFocused ? `${neutral.main.300}` : "#b4bbc8",

Copy link
Contributor

@BrandonLim8890 BrandonLim8890 left a comment

Choose a reason for hiding this comment

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

LGTM!

@AngelaZQ1 AngelaZQ1 merged commit 8f2c16a into main Feb 9, 2024
6 of 7 checks passed
@AngelaZQ1 AngelaZQ1 deleted the angela/select-placeholder-and-disable-button branch February 9, 2024 16:44
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.

Select Component Always Showing Black Text Even When Not Filled
2 participants