Hide colors from icon picker (#13079)

* Ensure border is set so it doesn't jump on selection

* Allow to hide color from icon picker

* Use CSS grid instead to fill icons and with minimum width

* Remove odd flex size

* Set minimum to 60px instead

src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less

@@ -1,18 +1,18 @@
 .umb-iconpicker {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+    gap: 0.25rem;
     margin: 0;
 }
 
 .umb-iconpicker-item {
     display: flex;
     flex-direction: row;
-    flex: 0 0 14.28%;
     justify-content: center;
     align-items: center;
     margin-bottom: 0;
     overflow: hidden;
+    border: 1px solid transparent;
 }
 
 .umb-iconpicker-item button {
@@ -41,7 +41,7 @@
 
 .umb-iconpicker-item.-selected {
     background: @gray-10;
-    border: solid 1px @ui-active;
+    border-color: @ui-active;
     border-radius: @baseBorderRadius;
     box-sizing: border-box;
 }

src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.controller.js

@@ -65,21 +65,19 @@ function IconPickerController($scope, localizationService, iconHelper) {
                         vm.loading = false;
                     });
             });
-
+        
         // set a default color if nothing is passed in
         vm.color = $scope.model.color ? findColor($scope.model.color) : vm.colors.find(x => x.default);
 
-
         // if an icon is passed in - preselect it
         vm.icon = $scope.model.icon ? $scope.model.icon : undefined;
     }
 
     function setTitle() {
         if (!$scope.model.title) {
-            localizationService.localize("defaultdialogs_selectIcon")
-                .then(function(data){
-                    $scope.model.title = data;
-                });
+            localizationService.localize("defaultdialogs_selectIcon").then(data => {
+                $scope.model.title = data;
+            });
         }
     }
 

src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html

@@ -28,7 +28,7 @@
                     </umb-search-filter>
                 </div>
 
-                <div class="umb-control-group mt3">
+                <div class="umb-control-group mt3" ng-if="model.hideColors !== true">
                     <umb-color-swatches
                         use-color-class="true"
                         colors="vm.colors"