feat(#295): adds overlay for rank initial state #354
Conversation
🦋 Changeset detectedLatest commit: af584a3 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
latin-panda
changed the title
|
@latin-panda I think the interaction is very clear and looks great! The only thing I'm not completely happy with on my end is the colour contrast between the error state and empty state. I contemplated the white opacity instead of the grey for the empty state, but was concerned it might still look interactive. This could be something we tweak later on, but here is a mockup of what I'm thinking!
|
|
We discussed as a team that we should make the overlay darker for the disabled state when there is an error (likely pretty rare, but we want to ensure the contrast is high enough). The white opacity isn't strong enough in the examples above and still looks interactive.
|
Prevents icons from shrinking on mobile view when text is too long
| @@ -101,58 +107,70 @@ const swapItems = (index: number, newPosition: number) => { | |||
| <template> | |||
| <ControlText :question="question" /> | |||
|
|
|||
| <VueDraggable | |||
There was a problem hiding this comment.
Anything inside the VueDraggable element is the same as before; I just moved it inside a rank-control-container. The structure is:
|- rank-control-container
|- rank overlay
|- VueDraggable
The rank overlay isn't inside VueDraggable because it's not good that it inherits "draggable" styles or events when it's not a draggable element.
| }, | ||
| set: (orderedValues) => { | ||
| touched.value = true; | ||
| props.question.setValues(orderedValues); | ||
| }, | ||
| }); | ||
|
|
||
| const getRankItems = () => props.question.currentState.valueOptions.map((option) => option.value); |
There was a problem hiding this comment.
The props.question.currentState.valueOptions contains the original order of the rank's items. The order doesn't get modified.
The ordered rank's items are assigned to value (props.question.currentState.value).
When the user taps on the Rank items button from the overlay, it takes the rank's items from props.question.currentState.valueOptions (original order) and sets it to value
| @@ -164,18 +182,25 @@ const swapItems = (index: number, newPosition: number) => { | |||
| @import 'primeflex/core/_variables.scss'; | |||
|
|
|||
| // Variable definition to root element | |||
| .rank-control { | |||
| .range-control-container { | |||
There was a problem hiding this comment.
This section defines CSS variables specific to this component, helping us identify patterns across question types that can later be extracted at a higher level for reuse. We'll get to this when adjusting the styles of Web Forms once PrimeVue is upgraded.
| @@ -205,6 +231,10 @@ const swapItems = (index: number, newPosition: number) => { | |||
| align-items: center; | |||
| gap: var(--rankSpacing); | |||
| } | |||
|
|
|||
| .rank-label svg { | |||
| flex-shrink: 0; | |||
There was a problem hiding this comment.
Prevents icons from shrinking when text is long and needs to wrap to the next line
|
@lognaturel This is ready for review whenever you have the chance. I’ve left some comments with background info—feel free to reach out with any questions. |
Closes #295
I have verified this PR works in these browsers (latest versions):
What else has been done to verify that this works as intended?
Testing evidence :
Initial state
Required state
Error and enabled state:
Error and disabled state:
Disabled state
Video: User experience
In the first half of the video, the rank question is not required for the form. Submitting the form without tapping the "Rank items" button leaves the question unanswered, and the form is submitted.
In the second half of the video, the rank question is required. Submitting the form without ranking will highlight the rank question in red and prevent submission. The user can then tap "Rank items", which sets the default order of items as the value for the question, and then the form can be submitted.
rank-overlay.mp4
Why is this the best possible solution? Were any other approaches considered?
The vue-draggable-plus library doesn't have this feature. So, building the overlay that reuses the existing button styling and logic to set rank's options.
How does this change affect users? Describe intentional changes to behavior and behavior that could have accidentally been affected by code changes. In other words, what are the regression risks?
Do we need any specific form for testing your changes? If so, please attach one.
No
What's changed