Problem/Motivation

In alpha1 the normal button state looks like that:
project browser filters component in a collapsed state
while in the active state the button looks like that:
project browser filters component in an expanded state
so there are two problems imho. in the current implementation the state is solely communicated via the orientation of the icon and not via the background color of the button like in the Drupal design system Figma file. By rotating the icon based on the state the actual meaning of the icon is inverted alongside. That might be confusing cuz currently the icon communicates broaden search results for the non-active state and narrow/filtered search results for the active state. The correct orientation for the filter icon semantically would be the one in the active state screenshot - meaning to narrow down/filter the results from top to bottom.

Proposed resolution

  • I wouldn't rotate the icon on state change and keep it in the orientation shown in the active.png
  • For state change use the background color used for active(pressed) normal/default buttons in the Drupal design system Figma file

Remaining tasks

  • ✅ File an issue about this project
  • ☐ Manual Testing
  • ☐ Code Review
  • ☐ Accessibility Review
  • ☐ Automated tests needed/written?
Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

rkoller created an issue. See original summary.

rkoller’s picture

Issue summary: View changes
libbna’s picture

Assigned: Unassigned » libbna

Hi @rkoller. I will try to work on this. If possible can you please share the link for Drupal design system Figma file so that I can change the background color. Thanks.

rkoller’s picture

apologies for the late reply am in the course of migrating and setting up a new computer so a few notifications slipped through. the link to the Drupal Design system is this one: https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/💧-Drupal-Design-system?node-id=553%3A0 (the drop down button page could be found at the top the second from left - the section about states)

libbna’s picture

Thanks @rkoller. I will soon start working on this.

libbna’s picture

Status: Active » Needs review
sharayurajput’s picture

its working properly as per mentioned in proposed resolution and also background color is changing so LGTM

Munavijayalakshmi’s picture

Assigned: libbna » Munavijayalakshmi
Status: Needs review » Needs work
Munavijayalakshmi’s picture

StatusFileSize
new266.54 KB
new293.45 KB

check console tabs.

Munavijayalakshmi’s picture

StatusFileSize
new807 bytes

added patch as per Proposed resolution in description.

Munavijayalakshmi’s picture

Version: 1.0.0-alpha1 » 1.0.x-dev
Assigned: Munavijayalakshmi » Unassigned
Status: Needs work » Needs review
libbna’s picture

Status: Needs review » Needs work

@Munavijayalakshmi we don't need to change the background of the of an image, we have to change the the bg color of a button as given in figma design.

Marking the status to needs work.

libbna’s picture

Status: Needs work » Needs review
libbna’s picture

StatusFileSize
new43.77 KB
new43.73 KB

adding screenshots also.

rkoller’s picture

thank you for working on it! but it is odd. I successfully applied the patch to my drupal 9.5 install with project_browser dev even though the merge request shows a merge error. I've also checked the source afterwards that the rotation transform gets removed and the background-colour gets changed. so the changes got applied.
but somehow I've done two or three drush cr as well as cleared the caches in safari, firefox and edge but everything looks like no changes have been applied. therefor I am unable to confirm that everything is working as expected. ( I guess it might have to do with mutagen in my local environment - haven't had any problems with that on my old computer so far - will report back as soon as I figured out the root cause)

rkoller’s picture

@libbna and others, one question. I think I figured out the possible issue why the changes haven't shown up on my end described in #16. is it possible that I have to manually trigger a svelte compile when reviewing patches for project browser? cuz I've noticed the changes in the search.svelte file are in place and get properly applied but in the browser they dont show up. looks like sveltejs/public/build/bundle.css doesn't reflect those yet. am not a developer and never worked with svelte on my own in the context of the issue queue therefor the probably basic question.

libbna’s picture

@rkoller yes there might be a chance that the changes doesn't get reflected so for that what you can do is:

  1. go to project /project_browser/sveltejs
  2. run yarn install
  3. and then run yarn run build
  4. clear the cache using drush cr
  5. and then reload the site, you will see the changes.
narendrar’s picture

Status: Needs review » Reviewed & tested by the community

MR looks good to me. Tested manually and colour of button changes on filter open.

rkoller’s picture

Status: Reviewed & tested by the community » Needs work
StatusFileSize
new33.26 KB

ahhhhhh thanks a lot @libbna! now I am able to see the changes after building.

about the changes now that I am able to see things in the browser. the icon doesn't rotate anymore and the color of the active state looks correct and good. thank you!

one detail about the iconography. for scanability I personally prefer to prepend the icon to the text that way a sighted user relying on a visual queue instead of reading is able to simply scan the icon and is able to skip the reading. But in the current state the user has to scan the text anyway first before reaching the icon. I've taken another look at the button anatomy in the drupal design system and my suggestion is in line with the guidelines there as well. meaning the icon is first and the text afterwards:

button anatomy from the drupal design system.

The only detail I am not sure if it is intended to have an icon for a none primary button?!

another detail is related to the following issue (https://www.drupal.org/project/project_browser/issues/3293909) we've discussed in yesterdays a11y office hour (see the talking point "mike - project browser patch" - the first of the two). Currently the icon has an alt attribute but it is missing a tooltip. Because the visible text for the button shows only "Filter" but it is basically the advanced filter and that could be reflected in the tooltip like it is already in the alt text. Only constraint and consensus in yesterdays meeting the text for the alt attribute and the tooltip shouldn't be identical. But guess if the other issue came to a final conclusion it could be adjusted to that?

I'll set the status back to needs work due to the icon position.

libbna’s picture

Status: Needs work » Needs review

@rkoller I didn't get about alt attribute and tooltip think but I have changed the position of an icon. Marking it needs review for the icon position.

chrisfromredfin’s picture

Status: Needs review » Needs work
Issue tags: +Needs rebase
libbna’s picture

Assigned: Unassigned » libbna
libbna’s picture

Assigned: libbna » Unassigned

I tried to rebase it but facing some issues so un-assigning myself so that others can work on it.

lucasbaralm’s picture

Assigned: Unassigned » lucasbaralm

i will try to work and rebase this.

lucasbaralm’s picture

Assigned: lucasbaralm » Unassigned

I did the rebase, there is still a need to resolve the Custom Commands Failed error, I will unasign myself so that someone else can work on it.

tim.plunkett made their first commit to this issue’s fork.

tim.plunkett’s picture

Status: Needs work » Needs review
Issue tags: -Needs rebase

Fixed the rebase (multiple nested merge commits there?) and it should be fine now

chrisfromredfin’s picture

Status: Needs review » Reviewed & tested by the community

This is a noticeable improvement. Manually tested and reviewed!

fjgarlin made their first commit to this issue’s fork.

fjgarlin’s picture

I just rebased this issue again with the latest changes.

fjgarlin’s picture

Also tested via drupalpod so will commit it.

  • fjgarlin committed a08421a on 1.0.x authored by Libbna
    Issue #3293929 by Libbna, tim.plunkett, Munavijayalakshmi, fjgarlin,...
fjgarlin’s picture

Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.