search

IgniteUI / igniteui-webcomponents

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.
https://www.infragistics.com/products/ignite-ui-web-components
Other
120 stars 3 forks source link

refactor(navbar): update theme to more closely match angular #1290

Closed simeonoff closed 2 months ago

simeonoff commented 3 months ago

Closes #1291

gedinakova commented 3 months ago

@simeonoff This change seems to affect well the start slot but not the spacing between the buttons in the end slot: image

simeonoff commented 3 months ago

@simeonoff This change seems to affect well the start slot but not the spacing between the buttons in the end slot: image

Not what I saw when I implemented the changes. I will check again and come back to you, meanwhile, can you give me the html you used to create the layout?

gedinakova commented 3 months ago

Sure, I actually used the sample for Angular and set the theme to 'Bootstrap Light', and the navbar story for WC (just removed the input).

<igc-navbar style="height:30px">
      <igc-icon slot="start" name="home"></igc-icon>
      <h2>${content}</h2>
        <igc-icon name="search" slot="end"></igc-icon>
      <igc-icon slot="end" name="favorite"></igc-icon>
      <igc-dropdown slot="end">
        <igc-avatar
          slot="target"
          size="small"
          shape="circle"
          src="https://i.pravatar.cc/200"
          >MP</igc-avatar
        >
        <igc-dropdown-item>Settings</igc-dropdown-item>
        <igc-dropdown-item>Help</igc-dropdown-item>
        <igc-dropdown-item>Log Out</igc-dropdown-item>
      </igc-dropdown>
    </igc-navbar>
simeonoff commented 3 months ago

@simeonoff This change seems to affect well the start slot but not the spacing between the buttons in the end slot: image

@gedinakova I believe you are comparing apples to oranges here. The Angular sample uses Icon Buttons, that internally pads the icons within them. In the Web Components sample you are using simple icons, instead of icon buttons. I've updated the navbar story to use icon buttons instead of icons.