search

predixdesignsystem / px-breadcrumbs

https://www.predix-ui.com/#/elements/px-breadcrumbs
Apache License 2.0
0 stars 2 forks source link

Bread crumb size calculation with wrong assumptions #25

Open SteniTK opened 5 years ago

SteniTK commented 5 years ago

Expected behavior

The breadcrumb should collapse when the size of breadcrumb is greater than the size of container.

Actual behavior

The breadcrumb does not collapse but text gets hidden/truncated.

Steps to reproduce the problem:

Resize the screen until the last item's text gets truncated. Ideally this truncation should not happen.

Environment (component version number, Browser (including version), operating system, hardware, etc):

  1. Component version number : 1.1.6
  2. Browser : Chrome v75.0.3770.142
  3. Operating System : macOS High Sierra v10.13.6

Screenshots (optional, but very helpful):

Before resizing screen : screenshot

After resizing screen : screenshot

Source of Bug

When calculating the width of the breadcrumb, assumptions are not matching the actual element as so :

Element Assumption in width calculation Actual element width (default)
Right arrow 15px (thinking it is small arrow because clickOnlyMode is false by default) 30px as large arrow
Down arrow 21px 26px(right margin of 5 px)

Location of code for bug

Right arrow assumption https://github.com/predixdesignsystem/px-breadcrumbs/blob/c7d688315d871f5fdb81f6ab2d4d7c15b8b8ad60/px-breadcrumbs.html#L259

Down arrow assumption https://github.com/predixdesignsystem/px-breadcrumbs/blob/c7d688315d871f5fdb81f6ab2d4d7c15b8b8ad60/px-breadcrumbs.html#L252

Workaround for current version

Using a style sheet, force the right arrow to be 15 px and the down arrow to be 21px