Skip to content

Fix missing input class styling from FieldBase component#859

Merged
blesildaramirez merged 4 commits into
pkp:mainfrom
blesildaramirez:fix-missing-input-class-from-fieldbase
Apr 14, 2026
Merged

Fix missing input class styling from FieldBase component#859
blesildaramirez merged 4 commits into
pkp:mainfrom
blesildaramirez:fix-missing-input-class-from-fieldbase

Conversation

@blesildaramirez
Copy link
Copy Markdown
Contributor

No description provided.

:id="autosuggestContainerId"
ref="values"
class="pkpAutosuggest__inputWrapper pkpFormField__input"
class="flex h-auto flex-wrap items-center rounded-[2px] border border-light bg-secondary px-4 py-1 text-lg-normal hover:border-dark"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Not sure whats the good approach here. Duplicating the input/wrapper styling here does not feel as good fit, especially with these bespoke values (2px, inset_-3px...).

Ultimately any more complex styling which is being repeated we probably should not duplicate. But we also don't want to using classes from others components.

Which basically leaves us with option to abstract that styling to separate component, which here feels like overkill.

I think the answer will arise when working on the next gen form fields, with composition api and tailwindcss. Maybe it will make sense to create set of classes that could be reused across the form elements. Or maybe just adding some primitives (like new shadow class).

So unless you have better idea, lets just add comment as reminder that this is to be cleaned up on the next gen form refactor.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Hi Jarda, thanks for your inputs. Yes, in my earlier commits I tried to make a shared less file for the class to avoid duplication, but it still didn't resolve the issue as it turns out to have bigger css scope to make it work.
As this was only problematic in this section and only in Storybook, I decided to just duplicate the classes here, but you're right that we should make a note for future clean up. Added that now, merging this.

@blesildaramirez blesildaramirez force-pushed the fix-missing-input-class-from-fieldbase branch from acf9cc3 to 69914d3 Compare April 14, 2026 15:32
@blesildaramirez blesildaramirez merged commit b5e148c into pkp:main Apr 14, 2026
3 of 5 checks passed
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