Merge branch 'next' into fix/fix-type-error-in-text-field-component

Author: 0x009922

.changeset/empty-scissors-rest.md

@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**fix**: (`SDropdown`) don't render label when it is absent, close #448

.changeset/olive-chicken-cry.md

@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**fix**: (`SSelectBase`) pass `z-index: 10` to the popper wrapper, fix #430

packages/ui/cypress/component/SSelect.spec.cy.ts renamed to packages/ui/cypress/component/Select.spec.cy.ts

@@ -1,6 +1,6 @@
 import { mount } from '@cypress/vue'
 import { config } from '@vue/test-utils'
-import { SSelect, SSelectBase, SSelectButton, SSelectInput, SDropdown, SelectSize } from '@/lib'
+import { SSelect, SSelectBase, SSelectButton, SSelectInput, SDropdown, SelectSize, STextField } from '@/lib'
 
 const SIZES = [SelectSize.Sm, SelectSize.Md, SelectSize.Lg, SelectSize.Xl]
 
@@ -14,6 +14,8 @@ after(() => {
   config.global.stubs = {}
 })
 
+const findBtnLabel = () => cy.get('.s-select-btn__label')
+
 it('Gallery - Dropdown', () => {
   mount({
     setup() {
@@ -276,3 +278,53 @@ it('SDropdown - show/hide by clicks', () => {
   cy.contains('Label').click()
   cy.contains('OPTION').should('not.be.visible')
 })
+
+it(`SDropdown - when value is selected and label is not provided, then label is not rendered`, () => {
+  mount({
+    setup() {
+      const showLabel = ref(true)
+      const label = computed(() => (showLabel.value ? 'Choice' : ''))
+      return {
+        options: [{ label: 'Pizza', value: 'pizza' }],
+        showLabel,
+        label,
+      }
+    },
+    template: `
+      <input v-model="showLabel" type="checkbox"> Show label
+
+      <SDropdown
+        v-bind="{ options, modelValue: 'pizza', label }"
+      />
+    `,
+  })
+
+  findBtnLabel().should('have.text', 'Choice:')
+  cy.get('input').click().should('not.be.checked')
+  findBtnLabel().should('not.exist')
+})
+
+it('SSelectDropdown overlaps STextField', () => {
+  mount({
+    components: { STextField },
+    setup() {
+      return {
+        options: [
+          { label: 'one', value: 1 },
+          { label: 'two', value: 2 },
+        ],
+      }
+    },
+    template: `
+      <div class="m-4 space-y-4">
+        <SDropdown label="I am top" v-bind="{ options }" />
+        <STextField placeholder="I am bottom" />
+      </div>
+    `,
+  })
+
+  cy.contains('I am top').click()
+  cy.contains('two')
+    // trying to click to ensure the element is not covered by anything
+    .click()
+})

packages/ui/etc/api/ui.api.md

@@ -235,7 +235,7 @@ export default /* @__PURE__ */ defineComponent({
         } else if (nodes.length === 1) {
           ;[popper] = nodes
         } else {
-          throw new Error('"popper" slot should return either nothing either the only 1 element')
+          throw new Error('"popper" slot should return either nothing or the only 1 element')
         }
       }
 

packages/ui/src/components/Popover/SPopover.ts

@@ -9,12 +9,12 @@ import { mergeProps } from 'vue'
 import { useWrappedTransitionVisibility } from './util'
 import { usePopoverApi } from './api'
 
-interface Props {
-  eager?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  eager: false,
+const props = defineProps({
+  eager: Boolean,
+  wrapperAttrs: {
+    type: Object,
+    default: null,
+  },
 })
 
 const api = usePopoverApi()
@@ -46,6 +46,7 @@ onScopeDispose(() => {
     v-if="wrapperIf"
     v-show="wrapperShow"
     ref="wrapper"
+    v-bind="wrapperAttrs"
   >
     <Transition
       v-bind="mergeProps($attrs, transitionProps)"

packages/ui/src/components/Popover/SPopoverWrappedTransition.vue

@@ -15,13 +15,22 @@ const props = defineProps<{
 }>()
 
 const buttonType = computed(() => (props.inline ? SelectButtonType.Inline : SelectButtonType.Default))
+
+const slots = useSlots()
+
+function isThereLabelSlot() {
+  return !!slots.label
+}
 </script>
 
 <template>
   <SSelectBase v-bind="{ ...$attrs, ...$props } as any">
     <template #control>
       <SSelectButton :type="buttonType">
-        <template #label="binding">
+        <template
+          v-if="isThereLabelSlot() || label"
+          #label="binding"
+        >
           <slot
             name="label"
             v-bind="binding"

packages/ui/src/components/Select/SDropdown.vue

@@ -97,6 +97,7 @@ provide(SELECT_API_KEY, api)
         <SPopoverWrappedTransition
           name="s-select-dropdown-transition"
           eager
+          :wrapper-attrs="{ 'class': 'z-10' }"
         >
           <slot name="dropdown" />
         </SPopoverWrappedTransition>

packages/ui/src/components/Select/SSelectBase.vue

@@ -39,6 +39,8 @@ function typography(): string {
       return 'sora-tpg-p4'
   }
 }
+
+const slots = useSlots()
 </script>
 
 <template>
@@ -55,7 +57,10 @@ function typography(): string {
     ]"
     @click="toggle"
   >
-    <span class="s-select-btn__label">
+    <span
+      v-if="!!slots.label || api.label"
+      class="s-select-btn__label"
+    >
       <slot
         name="label"
         v-bind="api"