style(kselect): update for new UI [khcp-4158] (#693)

style(kselect): update for new UI [khcp-4158]
Kong · Jul 15, 2022 · 7e006b9 · 7e006b9
1 parent a5b3b5b
commit 7e006b9
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 25 deletions.
diff --git a/docs/components/select.md b/docs/components/select.md
@@ -1,5 +1,7 @@
 # Select
 
+<div v-if="hasMounted">
+
 **Select** - Dropdown/Select component
 <div>
   <KSelect label="Pick Something:" :items="[{
@@ -274,7 +276,7 @@ Because we are controlling the widths of multiple elements, we recommend using t
 </div>
 
 ```vue
-<KSelect width="100" :items="[{
+<KSelect width="250" :items="[{
     label: 'test',
     value: 'test',
     selected: true
@@ -358,7 +360,7 @@ KSelect works as regular inputs do using v-model for data binding:
 <Komponent :data="{myVal: 'test'}" v-slot="{ data }">
   <div>
     <KLabel>Value:</KLabel> {{ data.myVal }}
-    <KSelect width="100" v-model="data.myVal" :items="[{
+    <KSelect v-model="data.myVal" :items="[{
         label: 'test',
         value: 'test'
       }, {
@@ -373,7 +375,7 @@ KSelect works as regular inputs do using v-model for data binding:
 <Komponent :data="{myVal: 'test'}" v-slot="{ data }">
   <div>
     <KLabel>Value:</KLabel> {{ data.myVal }}
-    <KSelect width="100" v-model="data.myVal" :items="[{
+    <KSelect v-model="data.myVal" :items="[{
         label: 'test',
         value: 'test'
       }, {
@@ -401,6 +403,8 @@ 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.
 
+If you use the `.select-item-label` and `.select-item-desc` classes within the slot as shown in the example below, the dropdown items will inherit preconfigured styles for two-level select items which you're then free to customize.
+
 <div>
   <KSelect :items="myItems" width="100%" :filterFunc="customFilter">
     <template v-slot:item-template="{ item }">
@@ -456,6 +460,8 @@ export default {
 | `input` | `selectedItem` Object or null |
 | `change` | `selectedItem` Object or null |
 
+</div>
+
 <script>
 function getItems(count) {
   let myItems = []
@@ -472,6 +478,7 @@ function getItems(count) {
 export default {
   data() {
     return {
+      hasMounted: false,
       myItems: getItems(5),
       mySelect: '',
       items: [{
@@ -483,6 +490,9 @@ export default {
       }]
     }
   },
+  mounted() {
+    this.hasMounted = true
+  },
   methods: {
     handleItemSelect (item) {
       this.mySelect = item.label
@@ -493,14 +503,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-.select-item-label {
-  color: blue;
-  font-weight: bold;
-}
-
-.select-item-desc {
-  color: red;
-}
-</style>
diff --git a/packages/KSelect/KSelect.vue b/packages/KSelect/KSelect.vue
@@ -74,7 +74,7 @@
             role="listbox">
             <KIcon
               v-if="appearance === 'select'"
-              icon="chevronDown"
+              :icon="isToggled ? 'chevronUp' : 'chevronDown'"
               color="var(--grey-500)"
               size="15" />
             <KInput
@@ -104,6 +104,7 @@
                     <slot
                       :item="item"
                       name="item-template"
+                      class="select-item-label select-item-desc"
                     />
                   </template>
                 </KSelectItem>
@@ -399,7 +400,7 @@ export default {
 
     .selected-item-label {
       align-self: center;
-      font-size: var(--type-xs);
+      font-size: 14px;
       line-height: 16px;
     }
 
@@ -474,21 +475,21 @@ export default {
     border-radius: 0 0 4px 4px;
 
     &.k-select-pop-button {
-      --KPopPaddingY: var(--spacing-md);
-      --KPopPaddingX: var(--spacing-xxs);
+      --KPopPaddingY: var(--spacing-xs);
+      --KPopPaddingX: var(--spacing-xs);
       border-radius: 4px;
       border: 1px solid var(--blue-200);
     }
 
     &.k-select-pop-dropdown {
-      --KPopPaddingY: var(--spacing-md);
-      --KPopPaddingX: var(--spacing-xxs);
-      border: 1px solid var(--blue-200);
+      --KPopPaddingY: var(--spacing-xs);
+      --KPopPaddingX: var(--spacing-xs);
+      border: 1px solid var(--grey-300);
     }
 
     &.k-select-pop-select {
-      --KPopPaddingY: var(--spacing-md);
-      --KPopPaddingX: var(--spacing-xxs);
+      --KPopPaddingY: var(--spacing-xs);
+      --KPopPaddingX: var(--spacing-xs);
       border: 1px solid var(--black-10);
     }
 

diff --git a/packages/KSelect/KSelectItem.vue b/packages/KSelect/KSelectItem.vue
@@ -55,7 +55,7 @@ export default {
 @import '~@kongponents/styles/variables';
 
 .k-select-item {
-  margin-bottom: 6px;
+  margin-bottom: 4px;
   list-style: none !important;
 
   button {
@@ -81,6 +81,24 @@ export default {
     .k-select-item-label {
       width: auto;
       line-height: 16px;
+      color: var(--grey-600);
+      font-weight: 500;
+      font-size: 14px;
+      padding: 8px;
+      margin-bottom: 4px;
+
+      .select-item-label {
+        color: var(--grey-600);
+        font-weight: 600;
+        font-size: 14px;
+        margin-bottom: 4px;
+      }
+
+      .select-item-desc {
+        color: var(--grey-500);
+        font-weight: 400;
+        font-size: 14px;
+      }
     }
 
     .kong-icon:not(.selected-item-icon) {

diff --git a/packages/styles/forms/_inputs.scss b/packages/styles/forms/_inputs.scss
@@ -119,11 +119,13 @@
       }
     }
   }
+}
   /**
    * But KSelect still wants disabled/invalid styles applied
    * Note: this style-block MUST come AFTER the read-only block. Disabled state
    *  takes precedence over read-only state.
    */
+
   .k-input,
   .form-control {
     &:not([type="checkbox"]),
@@ -141,7 +143,6 @@
         box-shadow: none;
       }
     }
-  }
 
   &[type="search"] {
     padding-left: 36px;