Indigo: Add Updates for Navdrawer, Navbar, and Switch

[simeonoff]

Closes #

• [x] Bottom Navigation
• [x] Navbar
• [x] Navigation Drawer
• [x] Switch

Additional information (check all that apply):

• [ ] Bug fix
• [ ] New functionality
• [ ] Documentation
• [x] Demos
• [ ] CI/CD

Checklist:

• [ ] All relevant tags have been applied to this PR
• [ ] This PR includes unit tests covering all the new code (test guidelines)
• [ ] This PR includes API docs for newly added methods/properties (api docs guidelines)
• [ ] This PR includes feature/README.MD updates for the feature docs
• [ ] This PR includes general feature table updates in the root README.MD
• [ ] This PR includes CHANGELOG.MD updates for newly added functionality
• [ ] This PR contains breaking changes
• [ ] This PR includes ng update migrations for the breaking changes (migrations guidelines)
• [ ] This PR includes behavioral changes and the feature specification has been updated with them

[andiesm813]

NAVIGATION Hey guys! i made 2 last minute updates to 2 components here:

1. Changed the color of the header in the nav drawer dark mode.
2. Added a missing top stroke in the bottom navigation (something i realized while working on Tabs).

[sbayreva]

Navbar

1. The font style should be Heading 5
2. The sample with the action icons:

• The action icons should be 16px which is medium size icon in Indigo theme. Each of these medium icons should be within a 28px container. The space between the action icons should be 8px.

3. The sample with the icon buttons:

• The icon buttons should be in medium size (28px) and the space between each button should be 8px.

4. The the navigation icons should be 16px which is medium size icon in Indigo theme and should be within a 28px container.
5. Elevation 4 should be added to the whole component.

[imincheva]

Bottom Navigation

• Elevation should be 0 in both light and dark mode.
• There shouldn't be opacity on the disabled items. The colors also need to be updated: grays.900 20% opacity in light mode and white 20% in dark mode.
• In dark mode the color of the selected icon should be primary.200
• The stroke Andie mentioned is still missing. It should be 1px solid grays.300 in light mode and 1px solid grays.100 in dark mode

Edit:

• When an item moves from inactive to active state, the label shouldn't change its position, only the icon should go up with 2px (meaning the gap will grow from 4px to 6px)

[AnjiManova]

Navigation Drawer

Dark Theme:

• Header color should be white 60% not grays.700

Edit: The comment is implemented @andiesm813 validate it and set it to done if everything is ok

[desig9stein]

@sbayreva pull latest changes and test again

[desig9stein]

@imincheva

• In dark mode the color of the selected icon should be primary.200

In the UI kit, the icon is 300 and the text is 200

[imincheva]

@imincheva

• In dark mode the color of the selected icon should be primary.200

In the UI kit, the icon is 300 and the text is 200

In the base component they're both 200. However, I see that in the main bottom navigation component the colors aren't updated, which is probably a Figma glitch, but we'll investigate the issue.

[didimmova]

Navigation Drawer

Dark Theme:

• Header color should be white 60% not grays.700

should be fixed now the theming version is updated

[imincheva]

Switch All looks good.

[sbayreva]

@sbayreva pull latest changes and test again

Everything looks good with the Navbar! @andiesm813 please, confirm if everything is all right with the Navbar. @andiesm813 please, take a look at the Navbar in light mode and the color of the buttons and the searchbar :

[andiesm813]

NAVIGATION DRAWER

The only thing i see pending to fix is the size of the "Overline" text style. I found an ERROR (caused by me!) in the indigo ui kit figma file. There is a difference between the actual style and what's written here. The style is the correct and what's written it's not.

The correct style for Overline is:

• Font size: 11px
• Line height: 15px
• Font weight: bold (that is currently correctly implemented).

[andiesm813]

NAVIGATION BAR

1. Sample with icon buttons: The icon buttons should be medium size (they still look small size).
2. Sample with icons: those icons look huge compared to the design. So does the left action icon (menu icon or back arrow)

The icons should look identical to the size of the icons when used as "icon button":

3. There should be NO elevation. This is a mistake in the Figma file. I honestly did NOT realize there was an elevation applied to the navbar, since i truly cannot see it on the design surface (i do see in the property panel, that it's applied, but i didnt realize it till now). I'm sorry you guys implemented that. I will update the figma design.

@sbayreva I saw what you meant about the navbar in light mode and the buttons. There's nothing i can do about it. If users can set the navbar to dark theme, while keeping the rest of the app light theme, that would be ideal. It's something we do a lot in apps in AB (mix light & dark themes, and lots of real life apps are designed like that).

[andiesm813]

BOTTOM NAVIGATION

All looks good to me. ✅

[andiesm813]

SWITCH

1. There should be no resting, hover or disabled elevation / shadows applied. I dont know if they are really showing (dont see them), but maybe they should be set to elevation-0 if they need to remain in the css.

2. The text looks vertically misaligned with the switch.... You can see the difference compared with the material theme.... i dont understand why this happens... maybe optical illusion?

3. Dark theme: The --track-on-hover-color should be primary-400. I know it's incorrect in the figma, but it's something i should have updated. I was waiting to update the Figma (per Irina's request). But it's something i will update soon. If you can fix it now it's ok. If not, i'll make a request afterwards.

[SisIvanova]

NAVIGATION DRAWER

The only thing i see pending to fix is the size of the "Overline" text style. I found an ERROR (caused by me!) in the indigo ui kit figma file. There is a difference between the actual style and what's written here. The style is the correct and what's written it's not.

The correct style for Overline is:

• Font size: 11px
• Line height: 15px
• Font weight: bold (that is currently correctly implemented).

@andiesm813 This problem is fixed here: https://github.com/IgniteUI/igniteui-theming/pull/255

[SisIvanova]

SWITCH

1. There should be no resting, hover or disabled elevation / shadows applied. I dont know if they are really showing (dont see them), but maybe they should be set to elevation-0 if they need to remain in the css.

2. The text looks vertically misaligned with the switch.... You can see the difference compared with the material theme.... i dont understand why this happens... maybe optical illusion?

3. Dark theme: The --track-on-hover-color should be primary-400. I know it's incorrect in the figma, but it's something i should have updated. I was waiting to update the Figma (per Irina's request). But it's something i will update soon. If you can fix it now it's ok. If not, i'll make a request afterwards.

@andiesm813

1. The elevations you are referring to are used only in the material theme. If you check the .igx-switch__composite-thumb element you will see box-shadow: none.

2. This may be related to your resolution or the way you scale the screen. Both the thumb and the text are aligned horizontally using "align-items: center".

4. The color is updated here: https://github.com/IgniteUI/igniteui-theming/pull/248/commits/8f45da4c12c304634245f1c0c479174e4e306340 but the change will be visible in this PR after a new version of the theming package is released.

[andiesm813]

SWITCH & NAV DRAWER They both look good to me! ✅✅

[andiesm813]

NAVIGATION BAR

1. Sample with icon buttons: The icon buttons should be medium size (they still look small size).
2. Sample with icons: those icons look huge compared to the design. So does the left action icon (menu icon or back arrow)

The icons should look identical to the size of the icons when used as "icon button":

3. There should be NO elevation. This is a mistake in the Figma file. I honestly did NOT realize there was an elevation applied to the navbar, since i truly cannot see it on the design surface (i do see in the property panel, that it's applied, but i didnt realize it till now). I'm sorry you guys implemented that. I will update the figma design.

@sbayreva I saw what you meant about the navbar in light mode and the buttons. There's nothing i can do about it. If users can set the navbar to dark theme, while keeping the rest of the app light theme, that would be ideal. It's something we do a lot in apps in AB (mix light & dark themes, and lots of real life apps are designed like that).

NAV BAR The only thing i see pending to fix is the elevation applied to the navbar, which i explained was an issue in the Figma, i hadnt noticed it had elevation. It's not supposed to have elevation. My mistake on Figma, which i fixed alreay ;)

[SisIvanova]

NAV BAR The only thing i see pending to fix is the elevation applied to the navbar, which i explained was an issue in the Figma, i hadnt noticed it had elevation. It's not supposed to have elevation. My mistake on Figma, which i fixed alreay ;)

@andiesm813 I believe the navbar has no elevation. The box-shadow property value is set to var(--shadow) and the shadow refers to elevation level 0.

[andiesm813]

NAV BAR The only thing i see pending to fix is the elevation applied to the navbar, which i explained was an issue in the Figma, i hadnt noticed it had elevation. It's not supposed to have elevation. My mistake on Figma, which i fixed alreay ;)

@andiesm813 I believe the navbar has no elevation. The box-shadow property value is set to var(--shadow) and the shadow refers to elevation level 0.

Great!! i trust the code then! (in the sample i was running i still see it, but if the code is fine, i'll consider it fixed). Thanks!!! Navbar ✅!