Fix Nav Item Icon to handle conditions for icon

[KatherineMuedas]

Screens

Fixes this bug #878

Breaking Changes

None

Runway Ticket URL

https://nitro.powerhrg.com/runway/backlog_items/LGA-201

How to test this

import React, { useState } from "react"
import { Nav } from '../../'
import NavItem from '../_item.jsx'

const WithIconsNav = () => {
  const [ showIcon, setShowIcon ] = useState(true)
  const [ currentIcon, setCurrentIcon ] = useState("")
  const handleDisplayCurrentIcon = (icon) => {
      setShowIcon(!showIcon)
      setCurrentIcon(icon)
    }

  return (
    <Nav
        link="#"
        title="Browse"
    >
      <NavItem
        iconRight={currentIcon}
        onClick={() => handleDisplayCurrentIcon(showIcon ? "angle-down" : "angle-right")}
        text="Other item"
      />

    </Nav>
  )
}

export default WithIconsNav

Checklist:

• DEPLOY Please add the Milano label when you are ready for a review
• SCREENSHOT Please add a screen shot or two
• SPECS Please cover your changes with specs
• CHANGELOG Please add an entry on [Unreleased] section to every functionality ADDED/CHANGED/DEPRECATED/REMOVED/FIXED

[KatherineMuedas]

To fix this issue, I had to wrap the icon with a div and also add a key to the div. A pretty similar fix was added previously to Buttons with icons #800. I am wondering if we should add the div and key to the icon component instead of only adding it to the nav item with icon file. If we do that all components that uses icons could benefit from it.

[gmfvpereira]

It looks good to me, but I'll let the final word with the UX team.