Merge pull request #365 from helloflask/fix-badge

Fix the badge classes in `render_nav_item` macro for Bootstrap 5

CHANGES.rst

@@ -1,6 +1,14 @@
 Changelog
 =========
 
+2.4.1
+-----
+
+Release date: -
+
+- Fix the badge classes in the ``render_nav_item`` macro for Bootstrap 5.
+- Add ``_badge_classes`` param to the ``render_nav_item`` macro to set badge classes.
+
 2.4.0
 -----
 

docs/macros.rst

@@ -25,11 +25,13 @@ Example
 API
 ~~~~
 
-.. py:function:: render_nav_item(endpoint, text, _badge='', _use_li=False, **kwargs)
+.. py:function:: render_nav_item(endpoint, text, _badge='', _use_li=False, _badge_classes='...', **kwargs)
 
     :param endpoint: The endpoint used to generate URL.
     :param text: The text that will displayed on the item.
     :param _badge: Badge text.
+    :param _badge_classes: Badge classes. For Bootstrap 4, the default value is ``badge badge-light``.
+                           For Bootstrap 5, the default value is ``badge text-bg-light``.
     :param _use_li: Default to generate ``<a></a>``, if set to ``True``, it will generate ``<li><a></a></li>``.
     :param kwargs: Additional keyword arguments pass to ``url_for()``.
 

flask_bootstrap/templates/base/nav.html

@@ -1,14 +1,3 @@
-{% macro render_nav_item(endpoint, text, _badge='', _use_li=False) %}
-    {% set active = True if request.endpoint and request.endpoint == endpoint else False %}
-    {% if _use_li %}<li class="nav-item">{% endif %}
-    <a class="{% if not _use_li %}nav-item {% endif %}nav-link{% if active %} active" aria-current="page{% endif %}"
-       href="{{ url_for(endpoint, **kwargs) }}">
-        {{ text }} {% if _badge %}<span class="badge badge-light">{{ _badge }}</span>{% endif %}
-    </a>
-    {% if _use_li %}</li>{% endif %}
-{% endmacro %}
-
-
 {% macro render_breadcrumb_item(endpoint, text) %}
     {% set active = True if request.endpoint and request.endpoint == endpoint else False %}
     <li class="breadcrumb-item{% if active %} active" aria-current="page{% endif %}">

flask_bootstrap/templates/bootstrap4/nav.html

@@ -1 +1,11 @@
 {% extends 'base/nav.html' %}
+
+{% macro render_nav_item(endpoint, text, _badge='', _use_li=False, _badge_classes='badge badge-light') %}
+    {% set active = True if request.endpoint and request.endpoint == endpoint else False %}
+    {% if _use_li %}<li class="nav-item">{% endif %}
+    <a class="{% if not _use_li %}nav-item {% endif %}nav-link{% if active %} active" aria-current="page{% endif %}"
+       href="{{ url_for(endpoint, **kwargs) }}">
+        {{ text }} {% if _badge %}<span class="{{ _badge_classes }}">{{ _badge }}</span>{% endif %}
+    </a>
+    {% if _use_li %}</li>{% endif %}
+{% endmacro %}

flask_bootstrap/templates/bootstrap5/nav.html

@@ -1 +1,11 @@
 {% extends 'base/nav.html' %}
+
+{% macro render_nav_item(endpoint, text, _badge='', _use_li=False, _badge_classes='badge text-bg-light') %}
+    {% set active = True if request.endpoint and request.endpoint == endpoint else False %}
+    {% if _use_li %}<li class="nav-item">{% endif %}
+    <a class="{% if not _use_li %}nav-item {% endif %}nav-link{% if active %} active" aria-current="page{% endif %}"
+       href="{{ url_for(endpoint, **kwargs) }}">
+        {{ text }} {% if _badge %}<span class="{{ _badge_classes }}">{{ _badge }}</span>{% endif %}
+    </a>
+    {% if _use_li %}</li>{% endif %}
+{% endmacro %}

tests/test_bootstrap5/test_render_nav_item.py

@@ -0,0 +1,37 @@
+from flask import render_template_string
+
+
+def test_render_nav_item(app, client):
+    @app.route('/hello')
+    def hello():
+        return 'Hello'
+
+    @app.route('/nav_item/4')
+    def test_bootstrap4():
+        return render_template_string('''
+                        {% from 'bootstrap4/nav.html' import render_nav_item %}
+                        {{ render_nav_item('hello', 'Hello Nav', _badge='beta') }}
+                        ''')
+
+    @app.route('/nav_item/5')
+    def test_bootstrap5():
+        return render_template_string('''
+                        {% from 'bootstrap5/nav.html' import render_nav_item %}
+                        {{ render_nav_item('hello', 'Hello Nav', _badge='beta', _use_li=True) }}
+                        ''')
+
+    response = client.get('/nav_item/4')
+    data = response.get_data(as_text=True)
+    assert 'href="/hello">' in data
+    assert 'span class="badge badge-light"' in data
+    assert 'beta' in data
+    assert '<li class="nav-item">' not in data
+    assert '</li>' not in data
+
+    response = client.get('/nav_item/5')
+    data = response.get_data(as_text=True)
+    assert 'href="/hello">' in data
+    assert 'span class="badge text-bg-light"' in data
+    assert 'beta' in data
+    assert '<li class="nav-item">' in data
+    assert '</li>' in data