Merge pull request #8378 from infor-design/8206-lookup-css

8206 - Added css setting for lookup
infor-design · Jan 25, 2024 · 1dbd221 · 1dbd221
2 parents 14656dd + 66464c1
commit 1dbd221
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 1 deletion.
diff --git a/app/views/components/lookup/test-custom-css.html b/app/views/components/lookup/test-custom-css.html
@@ -0,0 +1,74 @@
+<style>
+  .lookup-test h1 {
+    color: red;
+  }
+</style>
+<div class="row">
+  <div class="twelve columns">
+    <div class="field">
+      <label for="product-lookup" class="label required">Products</label>
+      <input id="product-lookup" data-init="false" data-validate="required" class="lookup" name="product-lookup" type="text"/>
+    </div>
+  </div>
+</div>
+
+<script>
+  var grid,
+    columns = [],
+    data = [];
+
+  // Some Sample Data
+  data.push({ id: 1, productId: 2142201, productName: 'Compressor', activity:  'Assemble Paint', quantity: 1, price: 210.99, status: 'OK', orderDate: new Date(2014, 12, 8), action: 'Action'});
+  data.push({ id: 2, productId: 2241202, productName: 'Different Compressor', activity:  'Inspect and Repair', quantity: 2, price: 210.99, status: '', orderDate: new Date(2015, 7, 3), action: 'On Hold'});
+  data.push({ id: 3, productId: 2342203, productName: 'Compressor', activity:  'Inspect and Repair', quantity: 1, price: 120.99, status: null, orderDate: new Date(2014, 6, 3), action: 'Action'});
+  data.push({ id: 4, productId: 2445204, productName: 'Another Compressor', activity:  'Assemble Paint', quantity: 3, price: 210.99, status: 'OK', orderDate: new Date(2015, 3, 3), action: 'Action'});
+  data.push({ id: 5, productId: 2542205, productName: 'I Love Compressors', activity:  'Inspect and Repair', quantity: 4, price: 210.99, status: 'OK', orderDate: new Date(2015, 5, 5), action: 'On Hold'});
+  data.push({ id: 5, productId: 2642205, productName: 'Air Compressors', activity:  'Inspect and Repair', quantity: 41, price: 120.99, status: 'OK', orderDate: new Date(2014, 6, 9), action: 'On Hold'});
+  data.push({ id: 6, productId: 2642206, productName: 'Some Compressor', activity:  'inspect and Repair', quantity: 41, price: 123.99, status: 'OK', orderDate: new Date(2014, 6, 9), action: 'On Hold'});
+  data.push({ id: 7, productId: 2642207, productName: "Someone's Compressor", activity:  "Inspect's and Repair's", quantity: 41, price: 123.99, status: 'OK', orderDate: new Date(2014, 6, 9), action: 'On Hold'});
+
+  //Define Columns for the Grid.
+  columns.push({ id: 'productId', name: 'Product Id', field: 'productId'});
+  columns.push({ id: 'productName', name: 'Product Name', field: 'productName', formatter: Soho.Formatters.Hyperlink});
+  columns.push({ id: 'activity', hidden: true, name: 'Activity', field: 'activity'});
+  columns.push({ id: 'quantity', filterType: 'text', name: 'Quantity', field: 'quantity'});
+  columns.push({ id: 'price', name: 'Price', field: 'price', formatter: Soho.Formatters.Decimal});
+
+  $('body').on('initialized', function () {
+    //Init and get the api for the grid
+    $('#product-lookup').lookup({
+      field: 'productId',
+      autoApply: true,
+      autoFocus: false,
+      modalSettings: {
+        fullsize: 'responsive',
+        breakpoint: 'phone-to-tablet'
+      },
+      cssClass: 'lookup-test',
+      options: {
+        columns: columns,
+        dataset: data,
+        selectable: 'single',
+        rowNavigation: true,
+        toolbar: {
+          results: true,
+          keywordFilter: true,
+          advancedFilter: false,
+          actions: false,
+          selectable: 'single',
+          filterable: true,
+          views: true,
+          rowHeight: false,
+          collapsibleFilter: false,
+          fullWidth: true
+        }
+      },
+      attributes: [
+        {
+          name: 'data-automation-id',
+          value: 'my-lookup'
+        }
+      ]
+    });
+  });
+</script>
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -8,6 +8,7 @@
 - `[Datagrid]` Added option to disable tooltip in columns. ([#8252](https://github.com/infor-design/enterprise/issues/8252))
 - `[Header]` Added an example configuration with both a hamburger and a back button. ([#8327](https://github.com/infor-design/enterprise/issues/8327))
 - `[Icons]` Added new icons which are more substantial in look. ([#8129](https://github.com/infor-design/enterprise/issues/8129))
+- `[Lookup]` Added css setting for lookup. ([#8206](https://github.com/infor-design/enterprise/issues/8206))
 
 ## v4.92.0 Fixes
 

diff --git a/src/components/lookup/lookup.js b/src/components/lookup/lookup.js
@@ -100,6 +100,7 @@ const LOOKUP_DEFAULTS = {
   tabbable: true,
   dblClickApply: false,
   allowDuplicates: false,
+  cssClass: null
 };
 
 function Lookup(element, settings) {
@@ -546,7 +547,7 @@ Lookup.prototype = {
       title: labelText,
       content,
       buttons,
-      cssClass: `lookup-modal${!hasKeywordSearch ? ' lookup-no-search' : ''}`,
+      cssClass: `lookup-modal${!hasKeywordSearch ? ' lookup-no-search' : ''} ${this.settings.cssClass ? this.settings.cssClass : ''}`,
       attributes: addSuffixToAttributes(this.settings.attributes, [], 'modal')
     };