Skip to content

V2 select fixes#4123

Merged
PeerRich merged 9 commits intomainfrom
feat/v2-select
Sep 5, 2022
Merged

V2 select fixes#4123
PeerRich merged 9 commits intomainfrom
feat/v2-select

Conversation

@alishaz-polymath
Copy link
Copy Markdown
Member

@alishaz-polymath alishaz-polymath commented Sep 2, 2022

What does this PR do?

V2 Select box changes

Fixes #4093

Loom

Environment: Staging(main branch) / Production

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • Chore (refactoring code, technical debt, workflow improvements)
  • 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

@vercel
Copy link
Copy Markdown

vercel bot commented Sep 2, 2022

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

Name Status Preview Updated
cal ✅ Ready (Inspect) Visit Preview Sep 5, 2022 at 3:30PM (UTC)

@alishaz-polymath alishaz-polymath marked this pull request as ready for review September 2, 2022 12:29
Copy link
Copy Markdown
Member Author

@alishaz-polymath alishaz-polymath left a comment

Choose a reason for hiding this comment

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

Self review added

Comment on lines +166 to +169
/* React Select V2 */
.cal-react-select-container .cal-react-select__control {
@apply bg-white min-h-[36px] h-[36px] text-sm leading-4 border-gray-300 hover:border-neutral-400 focus-within:ring-2 focus-within:ring-neutral-800 focus-within:border-0;
}
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

This would only come into the picture when we use V2 as the className prefix cal-react-select-container and cal-react-select is only added to the V2 select definition.

Comment on lines +31 to +35
className={classNames(
"cal-react-select-container block h-[36px] w-full min-w-0 flex-1 rounded-md text-sm ",
className
)}
classNamePrefix="cal-react-select"
Copy link
Copy Markdown
Member Author

@alishaz-polymath alishaz-polymath Sep 2, 2022

Choose a reason for hiding this comment

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

We add className prefixes cal-react-select-container and cal-react-select which allow us to target them and "apply" styling classes using tailwind

styles={{
option: (provided, state) => ({
...provided,
backgroundColor: state.isSelected ? "var(--brand-color)" : state.isFocused ? "#F3F4F6" : "",
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

For hover state of the options

@PeerRich
Copy link
Copy Markdown
Member

PeerRich commented Sep 2, 2022

great work! @alishaz-polymath 👏

Comment thread apps/web/styles/globals.css Outdated
@sean-brydon
Copy link
Copy Markdown
Member

Single NIT but looks awesome :) Nice job @alishaz-polymath

@PeerRich PeerRich enabled auto-merge (squash) September 2, 2022 12:57
@alishaz-polymath alishaz-polymath added the ♻️ autoupdate tells kodiak to keep this branch up-to-date label Sep 5, 2022
@alishaz-polymath alishaz-polymath self-assigned this Sep 5, 2022
@PeerRich PeerRich merged commit 0e63996 into main Sep 5, 2022
@PeerRich PeerRich deleted the feat/v2-select branch September 5, 2022 15:34
@PeerRich PeerRich added the core area: core, team members only label Jul 24, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

automerge ♻️ autoupdate tells kodiak to keep this branch up-to-date core area: core, team members only

Projects

No open projects
Status: Done

Development

Successfully merging this pull request may close these issues.

/event-types: too big font for Select

4 participants