fix: Set highlighted class to Sidebar.Item.Icon (#433)

Author: tiagoevanp

packages/fuselage/src/components/Sidebar/Item.js

@@ -86,8 +86,16 @@ const Wrapper = ({ className, ...props }) => (
   />
 );
 
-const Icon = ({ children, ...props }) => (
-  <div className='rc-box rcx-box--full rcx-sidebar-item__icon' {...props}>
+const Icon = ({ highlighted, children, className, ...props }) => (
+  <div
+    className={[
+      'rc-box rcx-box--full rcx-sidebar-item__icon',
+      highlighted && 'rcx-sidebar-item__icon--highlighted',
+    ]
+      .filter(Boolean)
+      .join(' ')}
+    {...props}
+  >
     {children || <FuselageIcon size='x16' {...props} />}
   </div>
 );

packages/fuselage/src/components/Sidebar/styles.scss

@@ -146,6 +146,8 @@ $sidebar-item-color-selected: theme(
 
     &__icon {
       @include typography.use-with-truncated-text();
+      @include highlighted;
+
       display: flex;
       justify-content: center;