Breadcrumb overflow menu icon misaligned

[rhythm55]

Detailed description

Describe in detail the issue you're having.

Breadcrumb oveflow menu icon is not aligned correctly with other breadcrumb items

Is this a feature request (new component, new icon), a bug, or a general issue? styling issue

Is this issue related to a specific component? Breadcrumb

What did you expect to happen? What happened instead? What would you like to see changed? Correct alignment

What browser are you working in? Chrome/firefox

What version of the Carbon Design System are you using? "carbon-components-angular": "^4.72.2"

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Steps to reproduce the issue

1. check overflow menu icon for breadcrumb

Additional information

[nipun005]

Hi @rhythm55 , Can you please provide the screenshot of the expected behaviour? Do we need to display Breadcrumb overflow icon at end or Do you just want to change the view of Breadcrumb overflow icon display from vertical to horizontal?? Please provide some more details and assign it to me, I will fix and raise PR.

[rhythm55]

Hi @rhythm55 , Can you please provide the screenshot of the expected behaviour? Do we need to display Breadcrumb overflow icon at end or Do you just want to change the view of Breadcrumb overflow icon display from vertical to horizontal?? Please provide some more details and assign it to me, I will fix and raise PR.

@nipun005 expected is it should be vertically aligned with other breadcrumb items

[abiramcodes]

Hello @Akshat55 , I am able to fix the vertical align issue in the storybook : https://angular.carbondesignsystem.com/?path=/story/components-breadcrumb--model .

However, there are no css/scss files in this repository for any components., could you please help me / navigate on how to contribute for this issue ?

Before (changing the css in dev tools) :

After (changing the css in dev tools) :

I would be really happy to contribute : )

[Akshat55]

We use @carbon/styles for styling our component, so we try to avoid making direct style changes in our component. Instead, we take a look at react implementation to see what the difference in our classes are.

https://react.carbondesignsystem.com/?path=/story/components-breadcrumb--breadcrumb-with-overflow-menu

[abiramcodes]

It seems like, in the react part, overflow menu icon is aligned horizontally. Should we follow the same ? or can I make changes in the @carbon/styles and make a pull request ?

[Akshat55]

That would be awesome @abiramcodes! You should be able to achieve the same visual as React with the following steps:

1. Update the icon to be horizontal. You can pass the name of the icon via cdsIcon directive. I believe it should be: cdsIcon="overflow-menu--horizontal" (Or without out the --horizontal).
2. You should wrap the icon in the new cds-icon-button component and pass in the following additional classes:

   cds--btn--icon-only cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--primary

Let me know if I can assign this issue to you, I can suggest/makes changes via your PR as you progress if you'd like as well!

[abiramcodes]

Yes @Akshat55 , Please assign this issue on my name. I would like to work on it also glad to get your suggestions as well

[Akshat55]

Hi, how's the bug fix coming along, @abiramcodes? Need any assistance?

[abiramcodes]

Hey @Akshat55 , I have been sick for the past two weeks. I have started working on the fix, will update you sooner. Thanks for your patience!!

[abiramcodes]

Hi @Akshat55 , I tried doing what you suggested, I am currently left with the below attached image