Skip to content

feat: add search-field component#276

Open
Mp4ct wants to merge 2 commits intomainfrom
feat/search-field
Open

feat: add search-field component#276
Mp4ct wants to merge 2 commits intomainfrom
feat/search-field

Conversation

@Mp4ct
Copy link
Collaborator

@Mp4ct Mp4ct commented Jul 11, 2024

No description provided.

@Mp4ct Mp4ct requested a review from Makisuo July 11, 2024 16:04
@changeset-bot
Copy link

changeset-bot bot commented Jul 11, 2024

🦋 Changeset detected

Latest commit: 2533021

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
Name Type
@pixelshades/styles Minor
@pixelshades/ui Minor
@pixelshades/auto-form Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Jul 11, 2024

Deploying pixelshades with  Cloudflare Pages  Cloudflare Pages

Latest commit: 2533021
Status: ✅  Deploy successful!
Preview URL: https://ca4ee153.pixelshadess.pages.dev
Branch Preview URL: https://feat-search-field.pixelshadess.pages.dev

View logs

Copy link
Collaborator

@Makisuo Makisuo left a comment

Choose a reason for hiding this comment

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

Whats the reasoning behind this components design?

Comment on lines +10 to +11
input: 'pl-[3.25rem] [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-cancel-button]:size-5 [&::-webkit-search-cancel-button]:bg-[url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NCIgaGVpZ2h0PSI0NCIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iIzAwMCIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICA8cGF0aCBkPSJNMTIgMTJtLTkgMGE5IDkgMCAxIDAgMTggMGE5IDkgMCAxIDAgLTE4IDAiIC8+CiAgPHBhdGggZD0iTTEwIDEwbDQgNG0wIC00bC00IDQiIC8+Cjwvc3ZnPg==")] [&::-webkit-search-cancel-button]:bg-contain',
icon: "absolute top-1/2 left-4 size-5 -translate-y-1/2 z-[60]",
Copy link
Collaborator

Choose a reason for hiding this comment

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

why is the embedded as a base64?

Comment on lines +10 to +11
input: 'pl-[3.25rem] [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-cancel-button]:size-5 [&::-webkit-search-cancel-button]:bg-[url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NCIgaGVpZ2h0PSI0NCIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iIzAwMCIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICA8cGF0aCBkPSJNMTIgMTJtLTkgMGE5IDkgMCAxIDAgMTggMGE5IDkgMCAxIDAgLTE4IDAiIC8+CiAgPHBhdGggZD0iTTEwIDEwbDQgNG0wIC00bC00IDQiIC8+Cjwvc3ZnPg==")] [&::-webkit-search-cancel-button]:bg-contain',
icon: "absolute top-1/2 left-4 size-5 -translate-y-1/2 z-[60]",
Copy link
Collaborator

Choose a reason for hiding this comment

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

z-60 is hacky and not wanted


export const searchFieldVariants = tv({
slots: {
input: 'pl-[3.25rem] [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-cancel-button]:size-5 [&::-webkit-search-cancel-button]:bg-[url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NCIgaGVpZ2h0PSI0NCIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iIzAwMCIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICA8cGF0aCBkPSJNMTIgMTJtLTkgMGE5IDkgMCAxIDAgMTggMGE5IDkgMCAxIDAgLTE4IDAiIC8+CiAgPHBhdGggZD0iTTEwIDEwbDQgNG0wIC00bC00IDQiIC8+Cjwvc3ZnPg==")] [&::-webkit-search-cancel-button]:bg-contain',
Copy link
Collaborator

Choose a reason for hiding this comment

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

Why this value? pl-[3.25rem]

Copy link
Collaborator

Choose a reason for hiding this comment

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

I did a complete rewrite of the docs, so sorry if you have to merge a bit here 😅

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