HPE Directory Browser

Context

HPE Design System is new and it is ramping up really fast to fit the use cases of the entire organization. We were encouraged to collaborate with the design system team to maintain consistency across the Ezmeral team and organization.

Need for Directory Browser

In our team, we ran into a use case where a user needs to browse an external directory path (eg. browsing through third-party repositories). When we looked into the HPE design system we did not have a component to do so. We had a 'File input' component that pops a finder or file browser window on their local machine but there was no way to specify a path to browse and select a file from external repositories. So, we concluded on designing a directory browser component from scratch and implementing it for internal use.

Team Collaboration

Defining component needs

I paired up with UX Lead to define the basic functionality and navigation pattern. We defined the component as

A directory browser is a component that allows users to navigate through a series of folders to find and select a folder
  • The user should be able to browse through and select a folder path
  • The user should not be able to select anything else other than a folder
  • The user should be prompted to select a folder before confirming to select

Looking into patterns in the places we frequently use

We looked for inspiration on how to handle navigations for browsing through directories. Below are component states and patterns we found in Google Drive and GitHub

Anatomy

I used a medium size 'Modal' as a base (reusing components is preferred) and altered the content to house the directory browser elements. The component has 3 parts

Responsiveness

The modal is based on the Ez Medium size modal (768 * 633). Responsiveness is inherited from the Modal component to fit other screen sizes.

Accessibility Considerations

Keyboard
To make a selection - Use the 'Enter' Key
To step into a folder - Use the Right arrow Key
To hover/navigate - Use the Up, and Down arrow keys

Mouse
Selection highlights with green background
To step into a folder - Double click
To step into a folder - A single click

Result

  • This component is implemented in the Ezmeral component Library (storybook) and is currently used.
  • The component is distributed globally because of its need across HPE organizations.

Learnings

  • Observing patterns across products we use everyday
  • Collaborating and sketching out the possible states and use cases a component could have
  • Keeping in mind to leverage existing components to promote reusability