search

ASU / asu-unity-stack

ASU Unity Design System
https://unity.web.asu.edu/
Other
11 stars 8 forks source link

feat(app-webdir-ui): added alpha sort on web directory #1143

Closed davidornelas11 closed 11 months ago

davidornelas11 commented 1 year ago

Description

Alpha sort on web directory to allow for last initial sorting

When testing, you must change webdirectory story props to an api endpoint with the new alpha sort feature available. Also adding alphaFilter in the props as "true" will enable it

Links

Checklist

Browsers

mlsamuelson commented 1 year ago

@davidornelas11 I suspect this may be the issue with the two stories that don't honor the filter: https://github.com/ASUWebPlatforms/asu-isearch/pull/503#pullrequestreview-1590066411 Lack of support for the endpoint used in these cases. TBD

davidornelas11 commented 1 year ago

The reason for the string choice is because in the past we have had problems with boolean props coming through as strings and needing to be converted. If the prop will be coming in as a boolean then i can definitely change it

mlsamuelson commented 1 year ago

@davidornelas11 Did a design review with @imorale2 . She's thinking through the scrollbar... more to come on that. Discussion on how we were able to remove the scrollbar from Tabbed Panels may be instructive here: https://asudev.jira.com/browse/UDS-1355 but the constraints are different. Worth knowing, though.

Some feedback to address while waiting on further thoughts:

  1. We need the same whitespace below the alpha filter as we have above it.
  2. Let's make the font bold
  3. Focus on the filter shouldn't be the blue glow - it should be the black outline.
  4. While tabbing over the component, focus skips over the alpha filter, and it needs to be focusable without a click.
davidornelas11 commented 1 year ago

@davidornelas11 Did a design review with @imorale2 . She's thinking through the scrollbar... more to come on that. Discussion on how we were able to remove the scrollbar from Tabbed Panels may be instructive here: https://asudev.jira.com/browse/UDS-1355 but the constraints are different. Worth knowing, though.

Some feedback to address while waiting on further thoughts:

  1. We need the same whitespace below the alpha filter as we have above it.
  2. Let's make the font bold
  3. Focus on the filter shouldn't be the blue glow - it should be the black outline.
  4. While tabbing over the component, focus skips over the alpha filter, and it needs to be focusable without a click.

I added the formatting for the spacing and also added the same arrow as in tabbed panels. For accessibility, a user has to use the arrows to scroll through since if they needed to tab through, they would essentially be stuck in there until getting through Z

tbutterf commented 1 year ago

@davidornelas11 and @mlsamuelson Because the /api/v1/webdir-profiles/department API endpoint is a POST-only endpoint, it does not use the filters that are set up for the other endpoint. So, we needed to add the last_init parameter to the axios.post call. This enables the back-end changes I have made to work properly. So, I have added this in a new commit.

mlsamuelson commented 1 year ago

We got issues!

@davidornelas11 Build errors:

       /Users/mlsamuel/web/asu-unity-stack/packages/app-webdir-ui/src/helpers/Filter/index.js
         90:13  error  'trackArrowsEvent' is not defined  no-undef
         94:13  error  'trackArrowsEvent' is not defined  no-undef

@tbutterf I don't understand the issue you surfaced and the solution. Is this change backwards compatible for others?

@imorale2 Did you get back to Dave on the design concerns?