Skip to:

  1. Skip to Jira Navigation
  2. Skip to Side Navigation
  3. Skip to Main Content

UX Changes to Expand/Collapse Search and Filter pane

Description

Based on FOLIO Community feedback, we want to change UX of expanding and collapsing the search and filter pane.

See: https://xd.adobe.com/view/494a567b-1576-49cd-4fd8-f32a0dd41c6e-3f7b/screen/218d6d56-bdc9-4504-ae1a-a1c73eb62605/d/?fullscreen

Requirement

  • Move the expand/collapse Search & Filter pane icon to the Search & Filter pane

    • Replace the current icon with a sideways carat pointing left

    • Ensure that when the user hovers over the sideways carat that it displays the following information - Collapse Search & filter pane

  • When user collapses Search and Filter pane

    • Then display a sideways carat pointing right (replacing current icon) on the results list pane

    • Ensure that when the user hovers over the sideways carat that it displays the following information - Expand Search & filter pane

Environment

None

Potential Workaround

None

relates to

Checklist

hide

TestRail: Results

Activity

Show:

Rasmus Wølk September 13, 2019 at 3:42 PM

Sorry for the late answer.

It looks like it's live on snapshot but it's not all apps that are using it currently. Only apps that still use the <SearchAndSort>.

The components are exported so other modules can import and use the expand/collapse buttons.

Khalilah Gambrell September 4, 2019 at 3:02 PM

, the User Story states a PR has been merged but I do not see this update on snapshot. Should I?

Rasmus Wølk July 26, 2019 at 3:11 PM

Hi

I would not recommend using the title-attribute because it's not meant to be used as an accessibility feature. Here's a small article on the subject:
https://silktide.com/blog/2013/i-thought-title-text-improved-accessibility-i-was-wrong

In fact, we have previously had a ticket for removing title-attributes in stripes-components:
https://folio-org.atlassian.net/browse/STCOM-296

I have done a spike on a potential <Tooltip>-component that could be used for this purpose but we haven't decided on anything regarding this yet:
https://folio-org.atlassian.net/browse/STCOM-544

Ryan Berger July 24, 2019 at 2:19 PM

I recommend updating the project of this ticket to stripes-smart-components.

As for how to implement the tooltip, I recommend using the title-attribute as it will both provide the tooltip and will be read by screenreaders as a label: https://webaim.org/techniques/forms/advanced#title

Khalilah Gambrell July 23, 2019 at 10:03 PM

, I defer to or for a recommendation. I just know we need to provide this info as I outlined in the story.

Done

Details

Assignee

Reporter

Labels

Priority

Sprint

Development Team

Stripes Force

TestRail: Cases

Open TestRail: Cases

TestRail: Runs

Open TestRail: Runs
Created June 28, 2019 at 2:53 PM
Updated September 13, 2019 at 3:42 PM
Resolved September 4, 2019 at 7:42 PM
TestRail: Cases
TestRail: Runs