-
Notifications
You must be signed in to change notification settings - Fork 21
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
feat(tailwind): first version of RefInput to show REF as radiogroup and REF_ARRAY as checkboxgroup #4585
Conversation
…-emx2 into feat/tailwind_refinput
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm curious to see how this component overlaps/interacts with the listbox component. I think the data flows are similar. I have a few suggestions, but some of my comments might be beyond this PR and be specific to the TW implementation overall.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
While clicking around on the preview server I noticed two things for the ref-input:
- The clear all button causes the component to flash while updating.
- Doing several interactions with it in quick succession causes performance issues. It causes a spike in CPU usages and even makes my mouse lagg.
Do you know how to prevent? It is because the options are re-rendered. |
I suppose this is because of that options are retrieved from server and that involves an await? Do you have recommendations how to counter this? |
@@ -44,6 +44,12 @@ const SIZE_MAPPING = { | |||
medium: "h-14 px-7.5 text-heading-xl gap-4", | |||
large: "h-18 px-8.75 text-heading-xl gap-5", | |||
}; | |||
const ICON_SIZE_MAPPING = { | |||
tiny: 12, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
there is no way tailwind takes care of this?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, I think it's possible to add them to css/tailwind files. We would also need to refactor this component as there a lot of the javascript could be replaced by simpler tw classes. It would be good to do it in the next PR.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Leave it for now and fix in another PR
@@ -0,0 +1,28 @@ | |||
<script setup lang="ts"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
how to call this component? And I notice the css doesn't work on all themes properly. Need help there.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is really great. Some of my comments might be better as follow up PRs, but there are some missing tailwind classes (e.g., search input border, text colours, etc.).
@@ -44,6 +44,12 @@ const SIZE_MAPPING = { | |||
medium: "h-14 px-7.5 text-heading-xl gap-4", | |||
large: "h-18 px-8.75 text-heading-xl gap-5", | |||
}; | |||
const ICON_SIZE_MAPPING = { | |||
tiny: 12, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, I think it's possible to add them to css/tailwind files. We would also need to refactor this component as there a lot of the javascript could be replaced by simpler tw classes. It would be good to do it in the next PR.
</Button> | ||
</div> | ||
<div class="flex flex-wrap gap-2 mb-2"> | ||
<ButtonText |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The text color that is used in the ButtonText component is yellow. This should probably be text-blue-500
. We should probably assign it to a tw class so that we can use it everywhere, e.g., *-button-text
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed. added the class text-color-button-text
<InputLabel :for="`search-for-${id}`" class="sr-only"> | ||
search in {{ columnName }} | ||
</InputLabel> | ||
<InputSearch |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In the pet store form example, the search does not display and there is some content shifting. Maybe the v-if
logic needs to be adjusted?
class="flex flex-wrap gap-2 mb-2" | ||
v-if="isArray ? selection.length : selection" | ||
> | ||
<Button |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There is a lot of content shifting with the filters. I'm not quite sure how to solve this. Maybe we need to wrap this in an expandable section?
/> | ||
</template> | ||
<template v-if="!hasNoResults"> | ||
<InputCheckboxGroup |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Some tw classes are missing here or are overwritten somewhere. The checkbox border does not appear.
In the form story, select the complex example and scroll to the "Resources" field in the population chapter.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There is also some strange scroll behaviour that occurs after clicking the checkbox. In the "resources" field, if you click on "testCohort3", the view is shifted down the page. This is probably due to some content shift and focus is placed somewhere else. It's probably an issue with the form component or maybe the "values" section in the right sidebar.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This only happens when the sidebar is open. 🤷
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
To investigate in a further PR
@deselect="deselect" | ||
:inverted="inverted" | ||
/> | ||
<ButtonText |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should we limit the number of visible options or put this into a scrollable area? In the complex form example, I continuously click the "load 10 more" button. The number of visible options becomes quite long and there is content shift. It might be better to place this in a scrollable area to prevent forms from growing in size. I might also make the search visible by default in this case.
type="search" | ||
:value="modelValue" | ||
@input="(event) => handleInput((event.target as HTMLInputElement).value)" | ||
class="w-full pr-4 font-sans text-black bg-white outline-none rounded-search-input h-10 ring-red-500 pl-10 shadow-search-input focus:shadow-search-input hover:shadow-search-input" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The border is missing in the default theme. I think it's caused by the inverted property. Perhaps we can remove this.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hmm, this isn't as straightforward as I thought. This component seems to be styled for specific search pages or use cases. Changing the styles in the component would affect the instances where it is used. Not sure if we want to change it here. It tried to override the styles in the ref component with [&>div>input]:border-gray-600
, but the inverted prop seems to block this. Either we create variants of the search input component or style these in their context.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Will fix in another PR
updateSearch(""); //reset | ||
} | ||
|
||
function loadMore() { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This causes content shifting or flickering. I would expect the load more to retrieve n records after the current set. It should append them to the current list rather than rebuilding the list of options.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fix in another PR
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
As mentioned above, the tw border classes is missing here or overwritten by the inverted prop.
|
What are the main changes you did
How to test