@citizenplane/pimp 18.12.1 → 18.12.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "18.12.1",
+  "version": "18.12.3",
   "scripts": {
     "dev": "storybook dev -p 8081",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/components/CpMultiselect.vue

@@ -320,10 +320,6 @@ onMounted(() => overrideAlignOverlay())
 
 <style lang="scss">
 .cpMultiselect {
-  display: flex;
-  flex-direction: column;
-  gap: var(--cp-spacing-md);
-
   &:has(.cpMultiselect__input:disabled) {
     cursor: not-allowed;
   }
@@ -337,6 +333,7 @@ onMounted(() => overrideAlignOverlay())
     flex-shrink: 0;
     align-items: center;
     order: -1;
+    padding: var(--cp-spacing-xs);
 
     &:empty {
       display: none;
@@ -350,10 +347,10 @@ onMounted(() => overrideAlignOverlay())
     justify-content: space-between;
     padding: var(--cp-spacing-md);
     border-radius: var(--cp-radius-md);
+    background-color: var(--cp-background-primary);
     box-shadow:
       var(--cp-shadows-3xs-inset),
       0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
-    gap: var(--cp-spacing-md);
 
     &--sm {
       padding: var(--cp-spacing-sm);
@@ -430,6 +427,9 @@ onMounted(() => overrideAlignOverlay())
     display: flex;
     align-items: center;
     justify-content: center;
+    width: fn.px-to-rem(24);
+    height: fn.px-to-rem(24);
+    padding-right: var(--cp-spacing-sm);
 
     &:disabled {
       cursor: not-allowed;
@@ -448,6 +448,7 @@ onMounted(() => overrideAlignOverlay())
     background-color: transparent;
     font-size: var(--cp-text-size-sm);
     line-height: var(--cp-line-height-md);
+    padding-inline: var(--cp-spacing-md);
 
     &::placeholder {
       color: var(--cp-text-placeholder);

package/src/stories/CpMultiselect.stories.ts

@@ -88,13 +88,21 @@ export const Single: Story = {
     components: { CpMultiselect },
     setup() {
       const selectedSupplier = ref(null)
-      return { args, selectedSupplier }
+
+      const getOptionIataCode = (option?: { iata_code?: string | null; icao_code?: string | null }) => {
+        return option?.iata_code || option?.icao_code || undefined
+      }
+
+      return { args, selectedSupplier, getOptionIataCode }
     },
     template: `
       <div style="padding: 20px; width: 25rem;">
         <CpMultiselect v-model="selectedSupplier" v-bind="args">
           <template #prefix>
-            <cp-partner-badge type="supplier" size="sm" />
+            <div class="baseSelectAirline__prefix">
+              <partner-badge size="sm" type="airline" variant="soft" />
+              <cp-airline-logo :iata-code="getOptionIataCode(selectedSupplier)" size="20" />
+            </div>
           </template>
         </CpMultiselect>
       </div>
@@ -146,9 +154,6 @@ export const MultipleWithAsyncSearch: Story = {
     template: `
       <div style="padding: 20px; max-width: 25rem;">
         <CpMultiselect v-model="selectedAirlines" v-bind="args" :options="dynamicOptions" :is-loading="isLoading" @search="handleSearch">
-          <template #prefix>
-            <cp-partner-badge type="airline" size="sm" />
-          </template>
           <template #tag-leading-icon="{ option }">
             <cp-airline-logo :iata-code="option.iata_code" size="14" />
           </template>