fix(website): make reference selector label transparent only in placeholder state#6482
fix(website): make reference selector label transparent only in placeholder state#6482Copilot wants to merge 5 commits into
Conversation
corneliusroemer
force-pushed
the
copilot/fix-multi-ref-selector-bg
branch
from
cc71093 to
3f4dec8
Compare
|
@copilot as I said, don't use transparent on the label once it's moved up from placeholder position to above the text field as it needs to cover the outline. If possible, match the background color to the element behind - maybe it works to just not set your own background and it will be inherited? If that's not possible use white for that position. The transparent background for placeholder position works well though. |
Implemented in commit |
…e selector fields Agent-Logs-Url: https://github.com/loculus-project/loculus/sessions/33de4b38-0a73-4382-8eff-d9c0fe896295 Co-authored-by: corneliusroemer <25161793+corneliusroemer@users.noreply.github.com>
Agent-Logs-Url: https://github.com/loculus-project/loculus/sessions/33de4b38-0a73-4382-8eff-d9c0fe896295 Co-authored-by: corneliusroemer <25161793+corneliusroemer@users.noreply.github.com>
Agent-Logs-Url: https://github.com/loculus-project/loculus/sessions/7d2b8a07-dd6a-44da-bd63-3d0493768f9e Co-authored-by: corneliusroemer <25161793+corneliusroemer@users.noreply.github.com>
…ent container background Agent-Logs-Url: https://github.com/loculus-project/loculus/sessions/80e0b6ea-a7d4-474b-aceb-05f7e1ffed43 Co-authored-by: corneliusroemer <25161793+corneliusroemer@users.noreply.github.com>
…ch single-line Agent-Logs-Url: https://github.com/loculus-project/loculus/sessions/80e0b6ea-a7d4-474b-aceb-05f7e1ffed43 Co-authored-by: corneliusroemer <25161793+corneliusroemer@users.noreply.github.com>
corneliusroemer
force-pushed
the
copilot/fix-multi-ref-selector-bg
branch
from
6ac0e9a to
6381b07
Compare
|
Tested and works |
There was a problem hiding this comment.
Pull request overview
Updates the search-page TextField label styling so the label background can become transparent when the input is in its placeholder (empty) state, aligning the floating-label visuals with the intended design.
Changes:
- Override Flowbite
FloatingLabellabel classes to usepeer-placeholder-shown:!bg-transparentand!bg-inherit. - Adjust the multiline (textarea) label classes to use
!bg-inheritand placeholder-shown transparency. - Add a unit test asserting the placeholder-related label classes are present.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
website/src/components/SearchPage/fields/TextField.tsx |
Adds/adjusts floating-label background utilities for both input (Flowbite) and textarea variants. |
website/src/components/SearchPage/fields/TextField.spec.tsx |
Adds a test asserting label class utilities related to placeholder transparency. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| className={`absolute text-sm text-gray-500 dark:text-gray-400 pointer-events-none ${ | ||
| isTransitionEnabled ? 'duration-300' : '' | ||
| } transform -translate-y-3 scale-75 top-1 z-10 origin-[0] bg-white dark:bg-gray-900 px-2 peer-focus:px-2 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-1 peer-focus:scale-75 peer-focus:-translate-y-3 start-1 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto`} | ||
| } transform -translate-y-3 scale-75 top-1 z-10 origin-[0] !bg-inherit px-2 peer-focus:px-2 peer-focus:!bg-inherit peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:!bg-transparent peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-1 peer-focus:scale-75 peer-focus:-translate-y-3 start-1 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto`} |
| it('applies transparent background classes to label in placeholder state', () => { | ||
| render(<TextField label='Test Field' />); | ||
|
|
||
| const label = screen.getByText('Test Field'); | ||
| expect(label).toHaveClass('peer-placeholder-shown:!bg-transparent'); |
| expect(label).toHaveClass('peer-placeholder-shown:!bg-transparent'); | ||
| expect(label).toHaveClass('!bg-inherit'); | ||
| }); | ||
|
|
Before:
After:
🚀 Preview: https://copilot-fix-multi-ref-sel.loculus.org