"icon" FUI CSS class is implied by icon component

demos/form-control/dropdown-plus.php

@@ -89,7 +89,7 @@
     Form\Control\Dropdown::class,
     'caption' => 'Using icon',
     'empty' => 'Choose an icon',
-    'values' => ['tag' => ['Tag', 'icon' => 'tag icon'], 'globe' => ['Globe', 'icon' => 'globe icon'], 'registered' => ['Registered', 'icon' => 'registered icon'], 'file' => ['File', 'icon' => 'file icon']],
+    'values' => ['tag' => ['Tag', 'icon' => 'tag'], 'globe' => ['Globe', 'icon' => 'globe'], 'registered' => ['Registered', 'icon' => 'registered'], 'file' => ['File', 'icon' => 'file']],
 ]);
 
 $form->addControl('multi', [

demos/form-control/input2.php

@@ -36,10 +36,10 @@
 
 $group = $form->addGroup('Dropdown');
 $values = [
-    'tag' => ['Tag', 'icon' => 'tag icon'],
-    'globe' => ['Globe', 'icon' => 'globe icon'],
-    'registered' => ['Registered', 'icon' => 'registered icon'],
-    'file' => ['File', 'icon' => 'file icon'],
+    'tag' => ['Tag', 'icon' => 'tag'],
+    'globe' => ['Globe', 'icon' => 'globe'],
+    'registered' => ['Registered', 'icon' => 'registered'],
+    'file' => ['File', 'icon' => 'file'],
 ];
 $group->addControl('d_norm', [Form\Control\Dropdown::class, 'values' => $values, 'width' => 'three'])->set('globe');
 $group->addControl('d_read', [Form\Control\Dropdown::class, 'values' => $values, 'readOnly' => true, 'width' => 'three'])->set('globe'); // allows to change value
@@ -185,10 +185,10 @@
 $group = $form->addGroup(['Dropdown', 'width' => 'three']);
 $d1 = $group->addControl('d1', new Form\Control\Dropdown([
     'values' => [
-        'tag' => ['Tag', 'icon' => 'tag icon'],
-        'globe' => ['Globe', 'icon' => 'globe icon'],
-        'registered' => ['Registered', 'icon' => 'registered icon'],
-        'file' => ['File', 'icon' => 'file icon'],
+        'tag' => ['Tag', 'icon' => 'tag'],
+        'globe' => ['Globe', 'icon' => 'globe'],
+        'registered' => ['Registered', 'icon' => 'registered'],
+        'file' => ['File', 'icon' => 'file'],
     ],
 ]));
 $d1->onChange('console.log("Dropdown changed")');

docs/form-control.rst

@@ -406,10 +406,10 @@ If not used with a model, you can define the Dropdown values in $values array. T
 You can also define an Icon right away::
 
     $dropdown->values = [
-        'tag' => ['Tag', 'icon' => 'tag icon'],
-        'globe' => ['Globe', 'icon' => 'globe icon'],
-        'registered' => ['Registered', 'icon' => 'registered icon'],
-        'file' => ['File', 'icon' => 'file icon'],
+        'tag' => ['Tag', 'icon' => 'tag'],
+        'globe' => ['Globe', 'icon' => 'globe'],
+        'registered' => ['Registered', 'icon' => 'registered'],
+        'file' => ['File', 'icon' => 'file'],
     ];
 
 If using $values property, you can also use the :php:meth:`Form::renderRowFunction()`, though there usually is no need for it.

docs/icon.rst

@@ -97,7 +97,7 @@ Composing offers you another way to deal with Group icons::
 
     $no_users = new \Atk4\Ui\View(['class.huge icons' => true, 'element' => 'i']);
     Icon::addTo($no_users, ['big red dont']);
-    Icon::addTo($no_users, ['black user icon']);
+    Icon::addTo($no_users, ['black user']);
 
     $app->add($no_users);
 

js/src/components/query-builder/fomantic-ui-group.component.vue

@@ -46,7 +46,7 @@
                     </div>
                 </div>
                 <div class="two wide right aligned column">
-                    <i v-if="depth > 1" class="atk-qb-remove" :class="labels.removeGroup" @click="remove"></i>
+                    <i v-if="depth > 1" class="atk-qb-remove" :class="labels.removeGroupClass" @click="remove"></i>
                 </div>
             </div>
         </div>

js/src/components/query-builder/fomantic-ui-rule.component.vue

@@ -77,7 +77,7 @@
                     </div>
                     <div class="right aligned three wide column">
                         <!-- Remove rule button -->
-                        <i :class="labels.removeRule" @click="remove" class="atk-qb-remove"></i>
+                        <i :class="labels.removeRuleClass" @click="remove" class="atk-qb-remove"></i>
                     </div>
                 </div>
             </div>

js/src/components/query-builder/query-builder.component.vue

@@ -58,9 +58,9 @@ export default {
                     { id: 'OR', label: 'Or' },
                 ],
                 addRule: 'Add Rule',
-                removeRule: 'small icon times',
+                removeRuleClass: 'small icon times',
                 addGroup: 'Add Group',
-                removeGroup: 'small icon times',
+                removeGroupClass: 'small icon times',
                 textInputPlaceholder: 'value',
                 spaceRule: 'fitted', // can be fitted, compact or padded.
                 hiddenOperator: ['is empty', 'is not empty'], // a list of operators that when select, will hide user input.

js/src/components/tree-item-selector/tree-item-selector.component.js

@@ -24,14 +24,14 @@ export default {
             nodes: this.item.nodes,
             icons: {
                 single: {
-                    on: 'circle icon',
-                    off: 'circle outline icon',
-                    indeterminate: 'dot circle outline icon',
+                    on: 'circle',
+                    off: 'circle outline',
+                    indeterminate: 'dot circle outline',
                 },
                 multiple: {
-                    on: 'check square outline icon',
-                    off: 'square outline icon',
-                    indeterminate: 'minus square outline icon',
+                    on: 'check square outline',
+                    off: 'square outline',
+                    indeterminate: 'minus square outline',
                 },
             },
         };
@@ -55,7 +55,7 @@ export default {
             return (this.nodes && this.nodes.length > 0);
         },
         toggleIcon: function () {
-            return this.isParent ? this.open ? 'caret down icon' : 'caret right icon' : null;
+            return this.isParent ? (this.open ? 'caret down' : 'caret right') + ' icon' : null;
         },
         state: function () {
             let state = 'off';
@@ -68,7 +68,7 @@ export default {
             return state;
         },
         getIcon: function () {
-            return this.icons[this.getRootData().options.mode][this.state];
+            return this.icons[this.getRootData().options.mode][this.state] + ' icon';
         },
     },
     methods: {

js/src/plugins/sidenav.plugin.js

@@ -90,7 +90,7 @@ export default class sidenav extends atkPlugin {
      * @param selector
      */
     setTogglerIcon(selector) {
-        this.toggler.find(selector).attr('class', this.isMenuOn() ? this.settings.icon.off : this.settings.icon.on);
+        this.toggler.find(selector).attr('class', (this.isMenuOn() ? this.settings.icon.off : this.settings.icon.on) + ' icon');
     }
 
     /**
@@ -123,7 +123,7 @@ sidenav.DEFAULTS = {
     firstItemSelector: 'a', // the selector for the first menu item in a group, where click will be trigger.
     icon: {
         selector: 'i',
-        on: 'icon caret right',
-        off: 'icon caret down',
+        on: 'caret right',
+        off: 'caret down',
     },
 };