Color selector component has a full color range if color is required

app/coffee/utils.coffee

@@ -242,7 +242,7 @@ patch = (oldImmutable, newImmutable) ->
 DEFAULT_COLOR_LIST = [
     '#fce94f', '#edd400', '#c4a000', '#8ae234', '#73d216', '#4e9a06', '#d3d7cf',
     '#fcaf3e', '#f57900', '#ce5c00', '#729fcf', '#3465a4', '#204a87', '#888a85',
-    '#ad7fa8', '#75507b', '#5c3566', '#ef2929', '#cc0000', '#a40000'
+    '#ad7fa8', '#75507b', '#5c3566', '#ef2929', '#cc0000', '#a40000', '#222222'
 ]
 
 getRandomDefaultColor = () ->

app/modules/components/color-selector/color-selector.controller.coffee

@@ -24,13 +24,18 @@ getDefaulColorList = taiga.getDefaulColorList
 class ColorSelectorController
     constructor: () ->
         @.colorList = getDefaulColorList()
+        @.checkIsColorRequired()
         @.displayColorList = false
 
+    checkIsColorRequired: () ->
+        if !@.isColorRequired
+            @.colorList = _.dropRight(@.colorList);
+
     setColor: (color) ->
         @.color = @.initColor
 
     resetColor: () ->
-        if @.isRequired and not @.color
+        if @.isColorRequired and not @.color
             @.color = @.initColor
 
     toggleColorList: () ->
@@ -45,7 +50,7 @@ class ColorSelectorController
     onKeyDown: (event) ->
         if event.which == 13 # ENTER
             event.stopPropagation()
-            if @.color or not @.isRequired
+            if @.color or not @.isColorRequired
                 @.onSelectDropdownColor(@.color)
 
 

app/modules/components/color-selector/color-selector.controller.spec.coffee

@@ -36,6 +36,12 @@ describe "ColorSelector", ->
         inject ($controller) ->
             controller = $controller
 
+    it.only "require Color on Selector", () ->
+        colorSelectorCtrl = controller "ColorSelectorCtrl"
+        colorSelectorCtrl.colorList = ["#000000", "#123123"]
+        colorSelectorCtrl.isColorRequired = false
+        colorSelectorCtrl.checkIsColorRequired()
+        expect(colorSelectorCtrl.colorList).to.be.eql(["#000000"])
 
     it "display Color Selector", () ->
         colorSelectorCtrl = controller "ColorSelectorCtrl"

app/modules/components/color-selector/color-selector.directive.coffee

@@ -53,7 +53,7 @@ ColorSelectorDirective = ($timeout) ->
         controller: "ColorSelectorCtrl",
         controllerAs: "vm",
         bindToController: {
-            isRequired: "=",
+            isColorRequired: "=",
             onSelectColor: "&",
             initColor: "="
         },

app/modules/components/color-selector/color-selector.jade

@@ -13,7 +13,7 @@
                 ng-click="vm.onSelectDropdownColor(color)"
             )
             li.empty-color(
-                ng-if="!vm.isRequired"
+                ng-if="!vm.isColorRequired"
                 ng-click="vm.onSelectDropdownColor(null)"
             )
         .custom-color-selector

app/modules/epics/create-epic/create-epic.jade

@@ -9,7 +9,7 @@ tg-lightbox-close
             .color-selector
                 fieldset
                     tg-color-selector(
-                        is-required="true"
+                        is-color-required="true"
                         init-color="vm.newEpic.color"
                         on-select-color="vm.selectColor(color)"
                     )

app/partials/epic/epic-detail.jade

@@ -20,7 +20,7 @@ div.wrapper(
 
                 .detail-header-container.epic-header-container(ng-class="{blocked: epic.is_blocked}")
                     tg-color-selector.color-selector(
-                        is-required="true"
+                        is-color-required="true"
                         init-color="epic.color"
                         on-select-color="ctrl.onSelectColor(color)"
                     )