feat(kselect): misc fixes [khcp-4146] (#692)

- Fix `width` prop handling to ensure selected item, input, and dropdown are the same size - Add support for `%` for `width` props - Add `enableFilter` prop to control filter support on `KSelect` input
Kong · Jul 15, 2022 · a5b3b5b · a5b3b5b
1 parent 9ec7f69
commit a5b3b5b
Show file tree

Hide file tree

Showing 12 changed files with 196 additions and 82 deletions.
diff --git a/docs/components/menu.md b/docs/components/menu.md
@@ -72,12 +72,12 @@ function getMenuItems(count) {
 
 ### width
 
-You can pass a `width` string for menu. By default the `width` is `284px`.
+You can pass a `width` string for menu. Currently we support numbers (will be converted to `px`), `auto`, and percentages for width. By default the `width` is `284px`.
 
 <KMenu :items="getMenuItems(3)" width="735" />
 
 ```vue
-<KMenu :items="getMenuItems(3)" width="735" /> 
+<KMenu :items="getMenuItems(3)" width="735" />
 ```
 
 ## KMenuItem
@@ -97,11 +97,11 @@ You can pass a `width` string for menu. By default the `width` is `284px`.
 ```vue
   <KMenuItem
     :item="{
-      title: 'some title', 
+      title: 'some title',
       description: 'some description'
     }"
     :expandable="true"
-    type="string" 
+    type="string"
   />
 ```
 
@@ -111,7 +111,7 @@ You can pass a `width` string for menu. By default the `width` is `284px`.
 - `itemBody` - the body content for the menu item
 
 ```vue
-<KMenuItem>       
+<KMenuItem>
   <template v-slot:itemTitle>
     Custom Title!
   </template>
@@ -177,9 +177,9 @@ This should be used instead of the `items` property.
     </KMenuItem>
 
     <KMenuItem type="divider" />
-    
-    <KMenuItem :expandable="true" 
-      :item="customItem" 
+
+    <KMenuItem :expandable="true"
+      :item="customItem"
       type="string"
      />
     <KMenuItem :expandable="true" last-menu-item>

diff --git a/docs/components/popover.md b/docs/components/popover.md
@@ -285,7 +285,7 @@ Use fixed positioning of the popover to avoid content being clipped by parental
 
 ### width
 
-The width of the popover body - by default it is 200px.
+The width of the popover body - by default it is `200px`. Currently we support numbers (will be converted to `px`), `auto`, and percentages for width.
 
 <KPop title="Cool header" width="300">
   <KButton>button</KButton>

diff --git a/docs/components/select.md b/docs/components/select.md
@@ -255,7 +255,11 @@ export default {
 ### width
 
 You can pass a `width` string for dropdown. By default the `width` is `200px`. This is the width
-of the input, dropdown, and selected item.
+of the input, dropdown, and selected item. Currently we support numbers (will be converted to `px`), `auto`, and percentages for width.
+
+:::tip Note
+Because we are controlling the widths of multiple elements, we recommend using this prop to control the width instead of explicitly adding classes or styles to the `KSelect` component.
+:::
 
 <div>
   <KSelect width="250" :items="[{
@@ -285,6 +289,57 @@ of the input, dropdown, and selected item.
 
 Use fixed positioning of the popover to avoid content being clipped by parental boundaries - defaults to `false`. See [`KPop` docs](popover.html#positionfixed) for more information.
 
+### enableFiltering
+
+Use this prop to control whether or not the `KSelect` component with an `appearance` prop set to a value of `select` or `dropdown` allows filtering. By default, filtering is enabled for `dropdown` appearance and is disabled for `select` appearance. `button` style `appearance` does not have filter support because it is a button.
+
+<div>
+  <KSelect :items="[{
+      label: 'test',
+      value: 'test'
+    }, {
+      label: 'Test 1',
+      value: 'test1'
+    }]"
+    :enable-filtering="false"
+    class="mb-2"
+  />
+
+  <KSelect :items="[{
+      label: 'test',
+      value: 'test'
+    }, {
+      label: 'Test 1',
+      value: 'test1'
+    }]"
+    appearance="select"
+    :enable-filtering="true"
+  />
+</div>
+
+```html
+<KSelect :items="[{
+    label: 'test',
+    value: 'test'
+  }, {
+    label: 'Test 1',
+    value: 'test1'
+  }]"
+  :enable-filtering="false"
+/>
+
+<KSelect :items="[{
+    label: 'test',
+    value: 'test'
+  }, {
+    label: 'Test 1',
+    value: 'test1'
+  }]"
+  appearance="select"
+  :enable-filtering="true"
+/>
+```
+
 ### filterFunc
 
 Use this prop to override the default filter function if you want to do something like filter on an attribute other than `label`. Your filter function
@@ -347,7 +402,7 @@ You can pass any input attribute and it will get properly bound to the element.
 You can use the `item-template` slot to customize the look and feel of your items. Use slots to gain access to the `item` data.
 
 <div>
-  <KSelect :items="myItems" width="500" :filterFunc="customFilter">
+  <KSelect :items="myItems" width="100%" :filterFunc="customFilter">
     <template v-slot:item-template="{ item }">
       <div class="select-item-label">{{ item.label }}</div>
       <div class="select-item-desc">{{ item.description }}</div>
@@ -356,7 +411,7 @@ You can use the `item-template` slot to customize the look and feel of your item
 </div>
 
 ```html
-<KSelect :items="myItems" width="500" :filterFunc="customFilter">
+<KSelect :items="myItems" width="100%" :filterFunc="customFilter">
   <template v-slot:item-template="{ item }">
     <div class="select-item-label">{{item.label}}</div>
     <div class="select-item-desc">{{item.description}}</div>
@@ -440,12 +495,12 @@ export default {
 </script>
 
 <style lang="scss">
-  .select-item-label {
-    color: blue;
-    font-weight: bold;
-  }
+.select-item-label {
+  color: blue;
+  font-weight: bold;
+}
 
-  .select-item-desc {
-    color: red;
-  }
+.select-item-desc {
+  color: red;
+}
 </style>
diff --git a/packages/KCatalog/__snapshots__/KCatalog.spec.js.snap b/packages/KCatalog/__snapshots__/KCatalog.spec.js.snap
@@ -133,7 +133,7 @@ exports[`KCatalog general can change card sizes - large 1`] = `
 </svg>
 </span></button>
         </div>
-        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 200px; max-width: 350px; display: none;" name="fade">
+        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 0px; max-width: 0px; display: none;" name="fade">
           <!---->
           <div class="k-popover-content">
             <ul class="k-select-list ma-0 pa-0">
@@ -299,7 +299,7 @@ exports[`KCatalog general can change card sizes - small 1`] = `
 </svg>
 </span></button>
         </div>
-        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 200px; max-width: 350px; display: none;" name="fade">
+        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 0px; max-width: 0px; display: none;" name="fade">
           <!---->
           <div class="k-popover-content">
             <ul class="k-select-list ma-0 pa-0">
@@ -385,7 +385,7 @@ exports[`KCatalog general can disable truncation 1`] = `
 </svg>
 </span></button>
         </div>
-        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 200px; max-width: 350px; display: none;" name="fade">
+        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 0px; max-width: 0px; display: none;" name="fade">
           <!---->
           <div class="k-popover-content">
             <ul class="k-select-list ma-0 pa-0">
@@ -471,7 +471,7 @@ exports[`KCatalog general handles truncation 1`] = `
 </svg>
 </span></button>
         </div>
-        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 200px; max-width: 350px; display: none;" name="fade">
+        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 0px; max-width: 0px; display: none;" name="fade">
           <!---->
           <div class="k-popover-content">
             <ul class="k-select-list ma-0 pa-0">
@@ -537,7 +537,7 @@ exports[`KCatalog general matches snapshot 1`] = `
 </svg>
 </span></button>
         </div>
-        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 200px; max-width: 350px; display: none;" name="fade">
+        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 0px; max-width: 0px; display: none;" name="fade">
           <!---->
           <div class="k-popover-content">
             <ul class="k-select-list ma-0 pa-0">
@@ -705,7 +705,7 @@ exports[`KCatalog general renders proper cards when using props 1`] = `
 </svg>
 </span></button>
         </div>
-        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 200px; max-width: 350px; display: none;" name="fade">
+        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 0px; max-width: 0px; display: none;" name="fade">
           <!---->
           <div class="k-popover-content">
             <ul class="k-select-list ma-0 pa-0">
@@ -785,7 +785,7 @@ exports[`KCatalog general renders slots when passed 1`] = `
 </svg>
 </span></button>
         </div>
-        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 200px; max-width: 350px; display: none;" name="fade">
+        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 0px; max-width: 0px; display: none;" name="fade">
           <!---->
           <div class="k-popover-content">
             <ul class="k-select-list ma-0 pa-0">
@@ -867,7 +867,7 @@ exports[`KCatalog general renders slotted cards when passed 1`] = `
 </svg>
 </span></button>
         </div>
-        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 200px; max-width: 350px; display: none;" name="fade">
+        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 0px; max-width: 0px; display: none;" name="fade">
           <!---->
           <div class="k-popover-content">
             <ul class="k-select-list ma-0 pa-0">
@@ -933,7 +933,7 @@ exports[`KCatalog states displays a loading skeletion when the "isLoading" prop
 </svg>
 </span></button>
         </div>
-        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 200px; max-width: 350px; display: none;" name="fade">
+        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 0px; max-width: 0px; display: none;" name="fade">
           <!---->
           <div class="k-popover-content">
             <ul class="k-select-list ma-0 pa-0">

diff --git a/packages/KMenu/KMenu.vue b/packages/KMenu/KMenu.vue
@@ -4,17 +4,16 @@
     class="k-menu">
     <slot name="body">
       <div>
-        <template v-for="(item,index) in items">
-          <KMenuItem
-            :item="item"
-            :expandable="item.expandable"
-            :key="item.key"
-            :type="item.type"
-            :last-menu-item="index === items.length-1"
-            :test-mode="testMode"
-            :class="{ 'last-menu-item': index === items.length-1 }"
-          />
-        </template>
+        <KMenuItem
+          v-for="(item,index) in items"
+          :item="item"
+          :expandable="item.expandable"
+          :key="item.key"
+          :type="item.type"
+          :last-menu-item="index === items.length-1"
+          :test-mode="testMode"
+          :class="{ 'last-menu-item': index === items.length-1 }"
+        />
       </div>
     </slot>
     <div
@@ -63,7 +62,7 @@ export default {
   computed: {
     widthStyle: function () {
       return {
-        width: this.width === 'auto' ? this.width : this.width + 'px'
+        width: this.width === 'auto' || this.width.endsWith('%') || this.width.endsWith('px') ? this.width : this.width + 'px'
       }
     },
 

diff --git a/packages/KPagination/__snapshots__/KPagination.spec.js.snap b/packages/KPagination/__snapshots__/KPagination.spec.js.snap
@@ -41,7 +41,7 @@ exports[`KPagination correctly renders props 1`] = `
 </svg>
 </span></button>
   </div>
-  <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 200px; max-width: 350px; display: none;" name="fade">
+  <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 0px; max-width: 0px; display: none;" name="fade">
     <!---->
     <div class="k-popover-content">
       <ul class="k-select-list ma-0 pa-0">
@@ -116,7 +116,7 @@ exports[`KPagination matches snapshot 1`] = `
 </svg>
 </span></button>
   </div>
-  <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 200px; max-width: 350px; display: none;" name="fade">
+  <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 0px; max-width: 0px; display: none;" name="fade">
     <!---->
     <div class="k-popover-content">
       <ul class="k-select-list ma-0 pa-0">

diff --git a/packages/KPop/KPop.vue b/packages/KPop/KPop.vue
@@ -24,7 +24,7 @@
           ref="popper"
           :id="popoverId"
           :style="popoverStyle"
-          :class="[popoverClasses, {'hide-caret': hideCaret }, { 'pb-0': $scopedSlots.actions }]"
+          :class="popoverClassObj"
           role="region"
           class="k-popover">
           <div
@@ -60,7 +60,7 @@
         ref="popper"
         :id="popoverId"
         :style="popoverStyle"
-        :class="[popoverClasses, {'hide-caret': hideCaret }, { 'pb-0': $scopedSlots.actions }]"
+        :class="popoverClassObj"
         role="region"
         class="k-popover">
         <div
@@ -265,9 +265,12 @@ export default {
   computed: {
     popoverStyle: function () {
       return {
-        width: this.width === 'auto' ? this.width : this.width + 'px',
-        'max-width': this.maxWidth === 'auto' ? this.maxWidth : this.maxWidth + 'px'
+        width: this.width === 'auto' || this.width.endsWith('%') || this.width.endsWith('px') ? this.width : this.width + 'px',
+        'max-width': this.maxWidth === 'auto' || this.maxWidth.endsWith('%') || this.maxWidth.endsWith('px') ? this.maxWidth : this.maxWidth + 'px'
       }
+    },
+    popoverClassObj: function () {
+      return [this.popoverClasses, { 'hide-caret': this.hideCaret }, { 'pb-0': this.$slots.actions }]
     }
   },
 

diff --git a/packages/KSelect/KSelect.spec.js b/packages/KSelect/KSelect.spec.js
@@ -55,7 +55,7 @@ describe('KSelect', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('renders with correct px width', () => {
+  it('renders with correct px width', async () => {
     const width = 350
 
     const wrapper = mount(KSelect, {
@@ -70,10 +70,10 @@ describe('KSelect', () => {
       }
     })
     const selectedItem = wrapper.find('.k-select')
-    const popover = wrapper.find('.k-select-popover')
+
+    await wrapper.vm.$nextTick()
 
     expect(selectedItem.element.style['width']).toEqual(width + 'px')
-    expect(popover.element.style['width']).toEqual(width + 'px') // 10 pixels less with spacing
   })
 
   it('renders with correct label', () => {