HPE Directory Browser

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.

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.

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

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

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

Keeping in mind this directory browser can also contain files, I defined different variants the component would have.

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

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

• 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.

• 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

Similarly, I contributed HPE Data Toolbar and a Search Variant which is implemented and currently being used. We can talk more about these components, if you are interested.