feat(HierarchicalMenu): add css class for link of selected menu item (#3646)

Author: dhayab

packages/react-instantsearch-dom/src/components/HierarchicalMenu.js

@@ -39,7 +39,7 @@ class HierarchicalMenu extends Component {
 
     return (
       <Link
-        className={cx('link')}
+        className={cx('link', item.isRefined && 'link--selected')}
         onClick={() => refine(item.value)}
         href={createURL(item.value)}
       >

packages/react-instantsearch-dom/src/components/__tests__/HierarchicalMenu.js

@@ -23,7 +23,7 @@ describe('HierarchicalMenu', () => {
                 { value: 'white2', label: 'white2', count: 4 },
               ],
             },
-            { value: 'black', count: 20, label: 'black' },
+            { value: 'black', isRefined: true, count: 20, label: 'black' },
             { value: 'blue', count: 30, label: 'blue' },
           ]}
           limit={2}

packages/react-instantsearch-dom/src/components/__tests__/__snapshots__/HierarchicalMenu.js.snap

@@ -195,10 +195,10 @@ exports[`HierarchicalMenu default hierarchical menu 1`] = `
       </ul>
     </li>
     <li
-      className="ais-HierarchicalMenu-item"
+      className="ais-HierarchicalMenu-item ais-HierarchicalMenu-item--selected"
     >
       <a
-        className="ais-HierarchicalMenu-link"
+        className="ais-HierarchicalMenu-link ais-HierarchicalMenu-link--selected"
         href="#"
         onClick={[Function]}
       >

packages/react-instantsearch-dom/src/widgets/HierarchicalMenu.js

@@ -62,6 +62,7 @@ import HierarchicalMenu from '../components/HierarchicalMenu';
  * @themeKey ais-HierarchicalMenu-item--selected - the selected menu list item
  * @themeKey ais-HierarchicalMenu-item--parent - the menu list item containing children
  * @themeKey ais-HierarchicalMenu-link - the clickable menu element
+ * @themeKey ais-HierarchicalMenu-link--selected - the clickable element of a selected menu list item
  * @themeKey ais-HierarchicalMenu-label - the label of each item
  * @themeKey ais-HierarchicalMenu-count - the count of values for each item
  * @themeKey ais-HierarchicalMenu-showMore - the button used to display more categories

packages/react-instantsearch-hooks-web/src/ui/HierarchicalMenu.tsx

@@ -40,6 +40,10 @@ type HierarchicalMenuClassNames = {
    * Class names to apply to each link element
    */
   link: string;
+  /**
+   * Class names to apply to the link of each selected item
+   */
+  selectedItemLink: string;
   /**
    * Class names to apply to the label of an item element
    */
@@ -101,7 +105,15 @@ function HierarchicalList({
           )}
         >
           <a
-            className={cx('ais-HierarchicalMenu-link', classNames.link)}
+            className={cx(
+              'ais-HierarchicalMenu-link',
+              classNames.link,
+              item.isRefined &&
+                cx(
+                  'ais-HierarchicalMenu-link--selected',
+                  classNames.selectedItemLink
+                )
+            )}
             href={createURL(item.value)}
             onClick={(event) => {
               if (isModifierClick(event)) {

packages/react-instantsearch-hooks-web/src/ui/__tests__/HierarchicalMenu.test.tsx

@@ -72,7 +72,7 @@ describe('HierarchicalMenu', () => {
               class="ais-HierarchicalMenu-item ais-HierarchicalMenu-item--parent ais-HierarchicalMenu-item--selected"
             >
               <a
-                class="ais-HierarchicalMenu-link"
+                class="ais-HierarchicalMenu-link ais-HierarchicalMenu-link--selected"
                 href="#Apple"
               >
                 <span
@@ -183,7 +183,7 @@ describe('HierarchicalMenu', () => {
                 class="ais-HierarchicalMenu-item ais-HierarchicalMenu-item--parent ais-HierarchicalMenu-item--selected"
               >
                 <a
-                  class="ais-HierarchicalMenu-link"
+                  class="ais-HierarchicalMenu-link ais-HierarchicalMenu-link--selected"
                   href="#Apple"
                 >
                   <span
@@ -300,6 +300,7 @@ describe('HierarchicalMenu', () => {
         selectedItem: 'SELECTEDITEM',
         parentItem: 'PARENTITEM',
         link: 'LINK',
+        selectedItemLink: 'SELECTEDITEMLINK',
         label: 'LABEL',
         count: 'COUNT',
         showMore: 'SHOWMORE',
@@ -320,7 +321,7 @@ describe('HierarchicalMenu', () => {
               class="ais-HierarchicalMenu-item ITEM ais-HierarchicalMenu-item--parent PARENTITEM ais-HierarchicalMenu-item--selected SELECTEDITEM"
             >
               <a
-                class="ais-HierarchicalMenu-link LINK"
+                class="ais-HierarchicalMenu-link LINK ais-HierarchicalMenu-link--selected SELECTEDITEMLINK"
                 href="#Apple"
               >
                 <span