Repository: couds/react-bulma-components (js)

Issue:
Same id is used in every dropdown-menu element
**Describe the bug**
When using the dropdown menu it adds a generic id. If an id is needed this must be unique!
`<Dropdown
          className="status-dropdown active"
          closeOnSelect={true}
          label="Active"
        >
          <Dropdown.Item renderAs="a" value="item">`

**To Reproduce**
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

**Expected behavior**
A clear and concise description of what you expected to happen.

**Screenshots**
If applicable, add screenshots to help explain your problem.

**Versions**
- `react-bulma-components:`:
- `bulma`:
- `react`:
- Browser: (e.g. Firefox version 67)

**Additional context**
Add any other context about the problem here.


Pull request:
Add menuId prop to allow passing of ID to dropdown menu
Added a new `menuId` prop to `<Dropdown>`. `Dropdown` will pass the ID to the underlying `<div class="dropdown-menu">`. This allows users to access the menu through the ID. By default, the ID is `"dropdown-menu"`.

Closes #373 

Cc @couds @smeknamn

Patch:
diff --git a/package-lock.json b/package-lock.json
index cab90a4..94fbcb2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "react-bulma-components",
-  "version": "4.0.7",
+  "version": "4.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
diff --git a/package.json b/package.json
index 9f029e7..a76ff45 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-bulma-components",
-  "version": "4.0.7",
+  "version": "4.1.0",
   "description": "React components for Bulma framework",
   "main": "./cjs/index.js",
   "types": "./src/index.d.ts",
diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js
index 064e647..87bcb50 100644
--- a/src/components/dropdown/dropdown.js
+++ b/src/components/dropdown/dropdown.js
@@ -22,6 +22,7 @@ const Dropdown = ({
   icon,
   domRef,
   disabled,
+  menuId,
   ...props
 }) => {
   const ref = useRef(domRef);
@@ -101,12 +102,17 @@ const Dropdown = ({
           });
         }}
       >
-        <Button disabled={disabled} color={color}>
+        <Button
+          disabled={disabled}
+          color={color}
+          aria-haspopup
+          aria-controls={menuId}
+        >
           <span>{current}</span>
           {icon}
         </Button>
       </div>
-      <div className="dropdown-menu" id="dropdown-menu" role="menu">
+      <div className="dropdown-menu" id={menuId} role="menu">
         <div className="dropdown-content">{childrenArray}</div>
       </div>
     </Element>
@@ -174,13 +180,15 @@ Dropdown.propTypes = {
    */
   icon: PropTypes.node,
   /**
-   * Additional CSS classes to pass to `<Dropdown />`.
-   * They will sit alongside pre-applied bulma classes.
+   * Specify the id of the menu component.
+   * Default is "dropdown-menu".
    */
+  menuId: PropTypes.string,
 };
 
 Dropdown.defaultProps = {
   closeOnSelect: true,
+  menuId: 'dropdown-menu',
 };
 
 export default Dropdown;
diff --git a/src/components/dropdown/index.d.ts b/src/components/dropdown/index.d.ts
index 11a12ef..b47f391 100644
--- a/src/components/dropdown/index.d.ts
+++ b/src/components/dropdown/index.d.ts
@@ -14,6 +14,7 @@ interface DropdownProps<T> {
   align?: 'right';
   icon?: React.ReactNode;
   disabled?: boolean;
+  menuId?: string;
 }
 
 interface DropdownItemProps<T> {
diff --git a/src/components/navbar/components/dropdown.js b/src/components/navbar/components/dropdown.js
index d5f7ffd..64600c7 100644
--- a/src/components/navbar/components/dropdown.js
+++ b/src/components/navbar/components/dropdown.js
@@ -36,7 +36,7 @@ NavbarDropdown.propTypes = {
 };
 
 NavbarDropdown.defaultProps = {
-  renderAs: 'span',
+  renderAs: 'div',
 };
 
 export default NavbarDropdown;
diff --git a/src/components/navbar/components/item.js b/src/components/navbar/components/item.js
index 005107b..e0efd73 100644
--- a/src/components/navbar/components/item.js
+++ b/src/components/navbar/components/item.js
@@ -21,7 +21,7 @@ const NavbarItem = ({
   });
 
   if (dropdown && renderAs === 'a') {
-    as = 'span';
+    as = 'div';
   }
   return (
     <Element
diff --git a/src/components/navbar/navbar.story.mdx b/src/components/navbar/navbar.story.mdx
index cbfa67e..e0b9a63 100644
--- a/src/components/navbar/navbar.story.mdx
+++ b/src/components/navbar/navbar.story.mdx
@@ -7,11 +7,17 @@ import CommonProps from '../../../.storybook/common-props';
 
 # Navbar
 
-A colored message block that can be used to emphasize content or used as a notification banner. Use `Message.Header`
-to create a header of the block, and `Message.Body` for the body of the block.
-
-The style of the message change depending if the Header is included or not, Play with the Controls in the canvas to
- see how this component behave with different props
+The navbar component is a responsive and versatile horizontal navigation bar with the following structure:
+
+- `<Navbar/>`: The main container
+  - `<Navbar.Brand/>` the **left side**, always visible, which usually contains the logo and optionally some links or icons
+    - `<Navbar.Burger/>` the **hamburger** icon, which toggles the navbar menu on touch devices
+  - `<Navbar.Menu/>` the **right side**, hidden on touch devices, visible on desktop
+  - `<Navbar.Container/>` a container for `navbar-start` or `navbar-end` (left or right)
+    - `<Navbar.Item>` each **single item** of the navbar, which can either be an a or a div
+      - `<Navbar.Link/>` a **link** as the sibling of a dropdown, with an arrow
+      - `<Navbar.Dropdown/>` the **dropdown menu**, which can include navbar items and dividers
+        - `<Navbar.Divider/>` a **horizontal line** to separate navbar items
 
 ## Props
 
@@ -79,4 +85,4 @@ An divider for items inside the `Navbar.Dropdown`
 
 ## Related
 
-- [Official documentation](https://bulma.io/documentation/components/navbar/)
\ No newline at end of file
+- [Official documentation](https://bulma.io/documentation/components/navbar/)


Test patch:
diff --git a/src/components/dropdown/__test__/dropdown.test.js b/src/components/dropdown/__test__/dropdown.test.js
index e105930..623ab0f 100644
--- a/src/components/dropdown/__test__/dropdown.test.js
+++ b/src/components/dropdown/__test__/dropdown.test.js
@@ -178,4 +178,12 @@ describe('Dropdown component', () => {
     );
     expect(component.find('span').text()).toEqual('Item');
   });
+  it('Should pass specified ID to the menu component', () => {
+    const component = shallow(
+      <Dropdown menuId="test-id">
+        <Dropdown.Item value="value">Item</Dropdown.Item>
+      </Dropdown>,
+    );
+    expect(component).toMatchSnapshot();
+  });
 });
diff --git a/src/components/navbar/__test__/__snapshots__/navbar.test.js.snap b/src/components/navbar/__test__/__snapshots__/navbar.test.js.snap
index 4735b55..be795ed 100644
--- a/src/components/navbar/__test__/__snapshots__/navbar.test.js.snap
+++ b/src/components/navbar/__test__/__snapshots__/navbar.test.js.snap
@@ -57,7 +57,7 @@ exports[`Navbar component Should have Navbar classname 1`] = `
     <div
       className="navbar-start"
     >
-      <span
+      <div
         className="navbar-item has-dropdown is-hoverable"
       >
         <span
@@ -65,7 +65,7 @@ exports[`Navbar component Should have Navbar classname 1`] = `
         >
           Docs
         </span>
-        <span
+        <div
           className="navbar-dropdown is-boxed"
         >
           <a
@@ -83,8 +83,8 @@ exports[`Navbar component Should have Navbar classname 1`] = `
           >
             Home
           </a>
-        </span>
-      </span>
+        </div>
+      </div>
     </div>
   </div>
 </nav>