✨ active state to NeoDropdown

[petersopko]

Thank you for your contribution to the KodaDot NFT gallery.

👇 _ Let's make a quick check before the contribution.

PR Type

• Bugfix
• Feature
• Refactoring

Context

• Closes Redesign Active states of button #4603
• Requires deployment <>

Before submitting pull request, please make sure:

• My contribution builds clean without any errors or warnings
• I've merged recent default branch -- main and I've no conflicts
• I've tried to respect high code quality standards
• I've didn't break any original functionality
• I've posted a screenshot of demonstrated change in this PR

Optional

• I've tested it at </bsx/collection>
• I've tested PR on mobile
• I've written unit tests 🧪
• I've found edge cases

Had issue bounty label?

• Fill up your KSM address: Payout

Community participation

• Are you at KodaDot Discord?

Screenshot 📸

• My fix has changed something on UI; a screenshot is best to understand changes for others.

KodaDot.-.Kusama.NFT.Market.Explorer._.Low.Carbon.NFTs.-.Google.Chrome.2023-01-05.19-58-24.mp4

[kodabot]

SUCCESS @petersopko PR for issue #4603 which is assigned to you. Please wait for review and don't hesitate to grab another issue in the meantime!

[netlify]

✅ Deploy Preview for koda-nuxt ready!

Name	Link
🔨 Latest commit	b49440f
🔍 Latest deploy log	https://app.netlify.com/sites/koda-nuxt/deploys/63b7d3ff1fb4c60009adaea0
😎 Deploy Preview	https://deploy-preview-4621--koda-nuxt.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[petersopko]

some context:

• oruga buttons don't have active states, ref https://oruga.io/components/button.html
• oruga dropdowns emit active-change events, ref https://oruga.io/components/dropdown.html (also have states, but related only to dropdown menu, button is separate)
• if we want to have NeoDropdowns which support active state, we'll have to merge o-button and o-dropdown, I'm not sure how many of those are we going to need and whether it is necessary
• maybe we can have NeoDropdownActive which supports this -> I can make it in this PR if that's what we want
• I've moved CSS to separate file, it was getting quite long
• some leftover CSS was removed

maybe I missed something, or I'm just wrong and there are better ways to do this, if so, please let me know and I'll adjust.

[preschian]

alternatives:

1. pass props to the slot instead of emit. so we don't need additional ref in the GalleryItemShareBtn component. changes:

// NeoDropdown.vue

<template>
  <o-dropdown
    aria-role="list"
    :position="position"
    :append-to-body="appendToBody"
    class="neo-dropdown">
    <template #trigger="{ active }">
      <slot :active="active && 'is-active'" />
    </template>
    <slot name="items" />
  </o-dropdown>
</template>

// GalleryItemShareBtn.vue

<NeoDropdown>
  <template #default="slotProps">
    <NeoButton
      label="Share"
      icon="share-square"
      :class="slotProps.active" />
  </template>

2. add additional classes on NeoDropdown when active. with this, the changes only on NeoDropdown. this one simpler

<template>
  <o-dropdown
    aria-role="list"
    :position="position"
    :append-to-body="appendToBody"
    class="neo-dropdown"
    :class="{ 'o-drop-active': isActive }"
    @active-change="isActive = $event">
    <template #trigger>
      <slot />
    </template>
    <slot name="items" />
  </o-dropdown>
</template>

<script lang="ts" setup>
import { ODropdown } from '@oruga-ui/oruga'

// ...

const isActive = ref(false)
</script>

<style lang="scss">
// ...

// example, override is-neo in here
.o-drop-active {
  .is-neo,
  .is-neo:hover {
    background-color: black;
    color: white;
  }
}
</style>

[preschian]

cc @roiLeo, maybe have another concern

[codeclimate]

Code Climate has analyzed commit b49440f and detected 0 issues on this pull request.

View more on Code Climate.

[petersopko]

2. add additional classes on NeoDropdown when active. with this, the changes only on NeoDropdown. this one simpler

<template>
  <o-dropdown
    aria-role="list"
    :position="position"
    :append-to-body="appendToBody"
    class="neo-dropdown"
    :class="{ 'o-drop-active': isActive }"
    @active-change="isActive = $event">
    <template #trigger>
      <slot />
    </template>
    <slot name="items" />
  </o-dropdown>
</template>

<script lang="ts" setup>
import { ODropdown } from '@oruga-ui/oruga'

// ...

const isActive = ref(false)
</script>

<style lang="scss">
// ...

// example, override is-neo in here
.o-drop-active {
  .is-neo,
  .is-neo:hover {
    background-color: black;
    color: white;
  }
}
</style>

Well, I've learned something new today 😆 went with the second option; let's see what @roiLeo will have to say

[roiLeo]

2. add additional classes on NeoDropdown when active. with this, the changes only on NeoDropdown. this one simpler

I'm fine with this solution as long as we don't change when dropdown is used without button (check NeoDropdown story)

it's still strange that we don't have active state for button while using bulma theme, might be good to open an issue on oruga repo.

[roiLeo]

✅ code lgtm

[yangwao]

it's still strange that we don't have active state for button while using bulma theme, might be good to open an issue on oruga repo.

yes please

[yangwao]

pay 30 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $30 @ 24.41 USD/KSM ~ 1.229 $KSM
🧗 FNyt7T1xdbhN7dagf7yGYCRJuE3R45VmTCE3tjzy1rKxa7y
🔗 0xadfb4fa179ddc3bb3f93533818e123747b054855b10bcf93312f9c29d18c97a0

🪅 Let’s grab another issue and get rewarded!
🪄 github.com/kodadot/nft-gallery/issues

[exezbcz]

the connect button has now dropshadow, that is the only issue i have with it :D

[petersopko]

the connect button has now dropshadow, that is the only issue i have with it :D

added again here, sorry

• 🐛 responsivity by width (not touch) #4624