Merge pull request #8280 from infor-design/8218-colorpicker-datagrid

8218 - Fixed disabled color for colorpicker
infor-design · Dec 27, 2023 · 8b6c459 · 8b6c459
2 parents 2e3653c + 5720fd6
commit 8b6c459
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git a/app/views/components/datagrid/test-editable-colorpicker.html b/app/views/components/datagrid/test-editable-colorpicker.html
@@ -15,6 +15,7 @@
     // Some Sample Data
     data.push({ id: 1, productId: 2241202, productName: 'Different Compressor', comment: 'Some comments about the item', activity:  'Inspect and Repair', quantity: 2, price: 210.99, status: '', orderDate: new Date(2015, 7, 3), action: 'On Hold', ordered: true, setting: {optionOne: 'One', optionTwo: 'One'}, color: '#66A140'});
     data.push({ id: 2, productId: 2445204, productName: 'Another Compressor', comment: 'Some comments about the item', activity:  'Assemble Paint', quantity: 9, price: 210.99, status: 'OK', orderDate: new Date(2015, 3, 3), action: 'Action', ordered: true});
+    data.push({ id: 3, productId: 2241203, productName: 'Disabled Compressor', isRowDisabled: true, comment: 'Some comments about the item', activity:  'Inspect and Repair', quantity: 3, price: 213.99, status: 'OK', orderDate: new Date(2015, 3, 3), action: 'On Hold', ordered: true, setting: {optionOne: 'One', optionTwo: 'One'}, color: '#E66467'});
 
     //Define Columns for the Grid.
     columns.push({ id: 'productDesc', resizable: false, name: 'Product Desc', sortable: false, field: 'productName', formatter: Soho.Formatters.Hyperlink, width: 200});

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -24,6 +24,7 @@
 - `[Datagrid]` Fixed tab key navigation when using actionable mode when having editor. ([#8141](https://github.com/infor-design/enterprise/issues/8141))
 - `[Datagrid]` Fixed tab key navigation when using actionable mode when having formatter. ([#8245](https://github.com/infor-design/enterprise/issues/8245))
 - `[Datagrid]` Fixed invisible color on required icon in datagrid. ([#8260](https://github.com/infor-design/enterprise/issues/8260))
+- `[Datagrid]` Fixed disabled color for colorpicker. ([#8218](https://github.com/infor-design/enterprise/issues/8218))
 - `[Dropdown]` Fixed a bug where list is broken when empty icon is in the first option. ([#8105](https://github.com/infor-design/enterprise/issues/8105))
 - `[Message]` Fixed success icon alignment in message header. ([#8240](https://github.com/infor-design/enterprise/issues/8240))
 - `[Pager]` Fixed double call on update pager when using keydown. ([#8156](https://github.com/infor-design/enterprise/issues/8156))

diff --git a/src/components/datagrid/_datagrid.scss b/src/components/datagrid/_datagrid.scss
@@ -2309,7 +2309,8 @@ $datagrid-small-row-height: 25px;
       td {
         color: $disabled-color;
 
-        .trigger {
+        .trigger,
+        .trigger .colorpicker {
           color: $disabled-color;
         }
 
@@ -2552,10 +2553,6 @@ $datagrid-small-row-height: 25px;
           top: 4px;
         }
 
-        .trigger .icon {
-          top: 14px;
-        }
-
         .colorpicker {
           background-color: transparent;
           padding: 15px 10px 8px;
@@ -3279,7 +3276,6 @@ $datagrid-small-row-height: 25px;
 
       .colorpicker-container .icon {
         left: 3px;
-        top: 10px;
       }
 
       // Date Picker
@@ -4452,8 +4448,8 @@ td .btn-actions {
   }
 
   .colorpicker-container span.trigger {
-    width: 30px;
-    left: 100%;
+    width: 20px;
+    left: 95%;
   }
 
   span.trigger {
@@ -4546,6 +4542,11 @@ td .btn-actions {
         box-shadow: none;
       }
     }
+
+    .datagrid-cell-wrapper .colorpicker-container.is-open .trigger .icon {
+      background-color: transparent;
+      box-shadow: none;
+    }
   }
 }