search

infor-design / enterprise-ng

Angular wrappers for IDS Enterprise components
Apache License 2.0
57 stars 84 forks source link

NG: Breadcrumb component #700

Closed gushanson closed 4 years ago

gushanson commented 4 years ago

Is your feature request related to a problem? Please describe. The breadcrumb UI pattern is widely used and effectively gives the user an overview of where she is in a given navigation path. It also provides a simple way to navigate to previous states or pages. Today there are css classes in IDS that can be used to create breadcrumbs, but there is no component with clear examples and the current breadcrumb implementation is lacking two important features.

Describe the solution you'd like An extension of what exists in \src\app\datagrid\datagrid-toolbar.demo.ts

  1. A component such as <soho-breadcrumbs>
  2. Input similar to datagrid-toolbar.demo.ts
  3. Output which fires when a breadcrumb is clicked.
  4. Breadcrumbs should be truncated when they don't fit on the screen and the lowest level breadcrumb should always be visible. Today it's the first thing that disappears.
  5. It should be possible to view and click parts of the breadcrumbs that has been truncated, so the user can navigate to that state. One example of this is the file system navigation bar on most computer operating systems.

Describe alternatives you've considered Today we are using the existing classes to build breadcrumbs, like the example in \src\app\datagrid\datagrid-toolbar.demo.html

This implementation lacks what is stated above so each developer must create their own solution (including how breadcrumbs are being selected). Also the lack of an actual component makes it less probable that developers use the IDS solution, making the look inconsistent between apps.

EdwardCoyle commented 4 years ago

I broke out the "truncation" part of this into its own Enterprise issue (infor-design/enterprise#4091). I made an attempt at working this feature into the PR that adds the Enterprise-side Breadcrumb API (infor-design/enterprise#4092), but I think we really need to flesh out the design of this more -- some of the details regarding exactly what to do with extraneous breadcrumbs are not very straightforward.

jbrcna commented 4 years ago

QA Passed with observation v4.30.0rc0 https://4300-rc0-enterprise.demo.design.infor.com/components/breadcrumb/example-add-remove.html image Observation

Steps

  1. Create a new breadcrumb (set ID= test, set Content = test, leave Currently Activeunchecked)
  2. Create another breadcrumb (check Auto-generate IDs, check Auto-generate Content, leave Currently Activeunchecked)
  3. Create a breadcrumb (set ID= test, set Content = test, leave Currently Activeunchecked)
  4. Click the 3rd breadcrumb named test then click Make Currentbutton
  5. Notice that the 1st and 3rd breadcrumb becomes active

https://4300-rc0-enterprise.demo.design.infor.com/components/breadcrumb/example-from-settings.html https://4300-rc0-enterprise.demo.design.infor.com/components/breadcrumb/example-destroy-invoke.html https://4300-rc0-enterprise.demo.design.infor.com/components/breadcrumb/example-index.html https://4300-rc0-enterprise.demo.design.infor.com/patterns/navigation-breadcrumbs.html https://4300-rc0-enterprise.demo.design.infor.com/patterns/navigation-breadcrumbs-alternate.html

EdwardCoyle commented 4 years ago

@jbrcna thanks for checking on that. In a normal implementation it wouldn't be possible to set multiple of the same ID, but our testbed page here does allow it. Something we could fix but not necessarily a deal breaker.

EdwardCoyle commented 4 years ago

Re-opening this because the NG side is currently in the works in a separate PR.

CindyMercadoReyes commented 4 years ago

This issue is now resolved.