Fix icons in form-elements.html (#2086)

.changeset/large-birds-teach.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix icons in `form-elements.html`

src/pages/_includes/ui/button-group.html

@@ -1,18 +1,18 @@
-{% assign items = include.items | split: ',' %}
+{% assign button-items = include.items | split: ',' %}
-{% assign icons = include.icons | split: ',' %}
+{% assign button-icons = include.icons | split: ',' %}
 
 {% assign id = include.id %}
 
 <div class="btn-group{% if include.vertical %}-vertical{% endif %}{% if include.fluid %} w-100{% endif %}"role="group">
 
-	{% for item in items %}
+	{% for item in button-items %}
 	{% if include.radio %}
 	<input type="radio" class="btn-check" name="btn-radio-{{ id }}" id="btn-radio-{{ id }}-{{ forloop.index }}" autocomplete="off"{% if forloop.index == 1 %} checked{% endif %}>
 	{% endif %}
 	<{% if include.radio %}label for="btn-radio-{{ id }}-{{ forloop.index }}"{% else %}button{% endif %} type="button" class="btn{% if forloop.index == 1 %}{% unless include.radio %} active{% endunless %}{% endif %}">{{ item }}</{% if include.radio %}label{% else %}button{% endif %}>
 	{% endfor %}
 
-	{% for icon in icons %}
+	{% for icon in button-icons %}
 	{% if include.radio %}
 	<input type="radio" class="btn-check" name="btn-radio-{{ id }}" id="btn-radio-{{ id }}-{{ forloop.index }}" autocomplete="off"{% if forloop.index == 1 %} checked{% endif %}>
 	{% endif %}

src/pages/_includes/ui/datepicker.html

@@ -1,16 +1,15 @@
 {% assign value = include.value | default: '2020-06-20' %}
 {% assign placeholder = include.placeholder | default: 'Select a date' %}
-{% assign id = include.id %}
 
-{% if id %}
+{% if include.id %}
 
 {% capture input %}
-<input class="form-control{% if include.class %} {{ include.class }}{% endif %}"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %} id="datepicker-{{ id }}" value="{{ value }}"/>
+<input class="form-control{% if include.class %} {{ include.class }}{% endif %}"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %} id="datepicker-{{ include.id }}" value="{{ value }}"/>
 {% endcapture %}
 
 
 {% if include.inline %}
-	<div class="datepicker-inline" id="datepicker-{{ id }}"></div>
+	<div class="datepicker-inline" id="datepicker-{{ include.id }}"></div>
 {% elsif include.layout == 'icon' %}
 	<div class="input-icon{% if include.class %} {{ include.class }}{% endif %}">
 		{{ input | replace: include.class, '' }}
@@ -33,8 +32,8 @@
 		window.tabler_datepicker = window.tabler_datepicker || {};
 		{% endif %}
 
-		window.Litepicker && ({% if environment == 'development' %}window.tabler_datepicker["datepicker-{{ id }}"] = {% endif %}new Litepicker({
+		window.Litepicker && ({% if environment == 'development' %}window.tabler_datepicker["datepicker-{{ include.id }}"] = {% endif %}new Litepicker({
-			element: document.getElementById('datepicker-{{ id }}'),
+			element: document.getElementById('datepicker-{{ include.id }}'),
 			buttonText: {
 				previousMonth: `{% capture icon %}{% include "ui/icon.html" icon="chevron-left" %}{% endcapture %}{{ icon | strip }}`,
 				nextMonth: `{% capture icon %}{% include "ui/icon.html" icon="chevron-right" %}{% endcapture %}{{ icon | strip }}`,

src/pages/tags.html

@@ -6,7 +6,7 @@ layout: default
 permalink: tags.html
 ---
 
-{% assign icons = "bold,italic,underline,copy,scissors,file-plus,file-minus,ghost,star,script,photo,dog,piano" | split: "," %}
+{% assign tag-icons = "bold,italic,underline,copy,scissors,file-plus,file-minus,ghost,star,script,photo,dog,piano" | split: "," %}
 
 <div class="row row-cards row-cols-1 row-cols-md-2 row-cols-lg-3">
 	<div class="col">
@@ -41,7 +41,7 @@ permalink: tags.html
 			<div class="card-body">
 				<h3 class="card-title">Tags with icon</h3>
 				<div class="tags-list">   
-					{% for icon in icons %}     
+					{% for icon in tag-icons %}     
 					{% include "ui/tag.html" text=icon icon=icon %}
 					{% endfor %}
 				</div>