Merge pull request #479 from upfluence/oc/DRA-2333

Added borderless attr for power select

Author: OwenCoogan

addon/components/o-s-s/power-select.hbs

@@ -1,5 +1,5 @@
 <div
-  class="upf-power-select fx-1 fx-col"
+  class="upf-power-select fx-1 fx-col {{if @borderless 'upf-power-select--borderless'}}"
   data-toggle="oss-dropdown"
   {{did-insert this.registerContainer}}
   {{did-insert (fn this.ensureBlockPresence (has-block "selected-item") (has-block "option-item"))}}

addon/components/o-s-s/power-select.stories.js

@@ -40,6 +40,16 @@ export default {
       },
       control: { type: 'boolean' }
     },
+    borderless: {
+      description: 'Hide the border around the dropdown component',
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: { summary: 'false' }
+      },
+      control: { type: 'boolean' }
+    },
     loadingMore: {
       description: 'Display loading more state in the list of items',
       table: {
@@ -123,6 +133,7 @@ const defaultArgs = {
   selectedItems: FAKE_SELECTED_ITEMS,
   loading: false,
   loadingMore: false,
+  borderless: false,
   placeholder: 'My placeholder',
   searchPlaceholder: 'My search placeholder',
   addressableAs: undefined,
@@ -135,7 +146,8 @@ const Template = (args) => ({
   template: hbs`
     <div style="display: flex; justify-content: center; background-color: white; border-radius: 4px">
       <OSS::PowerSelect class='padding-sm' @selectedItems={{this.selectedItems}} @items={{this.items}}
-                        @onSearch={{this.onSearch}} @onChange={{this.onChange}} @loading={{this.loading}}
+                        @onSearch={{this.onSearch}} @onChange={{this.onChange}} @loading={{this.loading}} 
+                        @borderless={{this.borderless}}
                         @loadingMore={{this.loadingMore}} @placeholder={{this.placeholder}} @searchPlaceholder={{this.searchPlaceholder}}
                         @onBottomReached={{this.onBottomReached}} @addressableAs={{this.addressableAs}}>
         <:selected-item as |selectedItem|>

addon/components/o-s-s/power-select.ts

@@ -18,6 +18,7 @@ interface OSSPowerSelectArgs extends BaseDropdownArgs {
   onChange: (item: any, operation: OperationType) => void;
   onSearch?: (keyword: string) => void;
   onBottomReached?: () => void;
+  borderless?: boolean;
 }
 
 const DEFAULT_PLACEHOLDER = 'Select an item';

app/styles/power-select.less

@@ -16,6 +16,35 @@
     }
   }
 
+  &--borderless {
+    .array-input-container {
+      border-color: transparent;
+      background-color: transparent;
+      &.active {
+        &:hover {
+          &:not(.array-input-container--disabled) {
+            background-color: var(--color-gray-100);
+            border: 1px solid var(--color-border-default);
+          }
+        }
+        &:not(.array-input-container--disabled) {
+          box-shadow: none;
+          background-color: var(--color-gray-100);
+          border: 1px solid var(--color-border-default);
+          transition-duration: 0ms;
+        }
+      }
+      &:hover {
+        &:not(.array-input-container--disabled) {
+          box-shadow: none;
+          border-color: transparent;
+          background-color: transparent;
+          transition-duration: 0ms;
+        }
+      }
+    }
+  }
+
   .upf-power-infinite-select-container {
     position: relative;
     height: 100%;

tests/integration/components/o-s-s/power-select-test.ts

@@ -39,6 +39,22 @@ module('Integration | Component | o-s-s/power-select', function (hooks) {
       assert.dom('.upf-power-select').hasAttribute('open');
     });
 
+    test('without a border when @borderless is true', async function (assert) {
+      await render(hbs`
+        <OSS::PowerSelect @selectedItems={{this.selectedItems}} @items={{this.items}}
+                          @onSearch={{this.onSearch}} @borderless={{true}}>
+          <:selected-item as |selectedItem|>
+            {{selectedItem}}
+          </:selected-item>
+          <:option-item as |item|>
+            {{item}}
+          </:option-item>
+        </OSS::PowerSelect>
+      `);
+
+      assert.dom('.upf-power-select').hasClass('upf-power-select--borderless');
+    });
+
     test('custom empty state is properly rendered', async function (assert) {
       await render(hbs`
         <OSS::PowerSelect @selectedItems={{this.selectedItems}} @items={{this.items}}