Feature NeoSelect

[brano-hozza]

Thank you for your contribution to the KodaDot - One Stop Shop for Polkadot NFTs.

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

PR Type

• Bugfix
• Feature
• Refactoring

Context

• related Goodbye Buefy #5852
• Requires deployment <snek/rubick/worker>

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

Optional

• I've tested it at </ksm/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?

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	26c7163
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/649985a09d7f1a000846cf52
😎 Deploy Preview	https://deploy-preview-6200--koda-canary.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.

[reviewpad]

AI-Generated Summary: This pull request includes two patches:

1. The first patch adds basic CSS and transforms the CollectionSelect component to use the NeoSelect component. It also creates a new NeoSelect.scss file for styling purposes. A new translation key is added for the English locale file for the "select collection" and "select collection description" strings.
2. The second patch changes the icon to a normal icon in the NeoSelect.vue component, and adds "oruga" to the list of recognized words in the .vscode/settings.json file.

[vikiival]

Currently hacking @ ETHPrague 🥺

[brano-hozza]

Also I’ve noticed that I forgot to change other references to select component 😆 my Mac is dead so will fix later

[roiLeo]

any idea why test failing?

• error 500 on /series-insight
  

[prury]

So far:

• Missing the amount of NFTs i have inside a collection: (Create NFT page)

• Clicking at the arrow wont open the dropdown: (General)

I'm still checking it tho

[prury]

Not sure if its related, but only this deployed version is allowing me to select those other options no matter what network i'm in (its disabled for both beta an canary):

[brano-hozza]

@prury not sure about the extra options in balance input, but the problem with unclickable arrow is problem in oruga library as there is no handler for the custom icons

[roiLeo]

✅ code lgtm & wfm

the problem with unclickable arrow is problem in oruga library as there is no handler for the custom icons

I will be following oruga issue

[preschian]

is there any concern if we using mixins instead here? should be easier to migrate b-select, and the test should be ok

<script>
import { OSelect } from '@oruga-ui/oruga'

export default {
  mixins: [OSelect],
  computed: {
    rootClasses() {
        return [
          'neo-select',
            this.computedClass('rootClass', 'o-ctrl-sel'),
            { [this.computedClass('expandedClass', 'o-ctrl-sel--expanded')]: this.expanded },
        ]
    },
  },
}
</script>

<style lang="scss">
@import './NeoSelect.scss';
</style>

[preschian]

Clicking at the arrow wont open the dropdown: (General)

I don't have this issue with extending OSelect components

[roiLeo]

are selectClasses imported too?
I'm ok with that but will #6200 (comment) still work?

[roiLeo]

Clicking at the arrow wont open the dropdown: (General)

I don't have this issue with extending OSelect components

Check darkmode custom arrow

[brano-hozza]

But did u use custom arrow element? because their native arrow doesn't support dark mode

[brano-hozza]

Okay but still oruga select doesnt have options prop so you would need to manually add options everywhere, but my solution provides prop to set options with provided array and arrow from mixin doesnt work in dark mode

[preschian]

Okay but still oruga select doesnt have options prop so you would need to manually add options everywhere

yes, maybe this is Oruga principle to go that way https://github.com/oruga-ui/oruga/blob/develop/.github/CONTRIBUTING.md#2-lightweight-and-simple for now

arrow from mixin doesnt work in dark mode

you can add this CSS to fix the icon in dark mode. by using this, we can click the arrow to open the dropdown

.dark-mode .neo-select .o-sel-arrow {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cstyle%3Esvg%7Bfill:%23ffffff%7D%3C/style%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
}

.light-mode .neo-select .o-sel-arrow {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cstyle%3Esvg%7Bfill:%23000000%7D%3C/style%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
}

[brano-hozza]

Okay solution with arrow is nice, but the argument about oruga way of doing things… I dont know, I tried to reduce the boilerplate with my solution 😅

[preschian]

imo, if the component already exists on Oruga, just use their default behaviour first by extending their component. to make it easier, because our goal is to migrate from buefy to oruga first

if we want to introduce another behaviour or even a better solution. it's good, but we can do it after migration or put it in the other custom component. in this case, we can create separate PR and then create another component <NeoSelectOption /> with your solution

another example is that we still have b-navbar that doesnt have an oruga component. we can copy buefy implementation, or maybe create our own component

[roiLeo]

imo, if the component already exists on Oruga, just use their default behaviour first by extending their component. to make it easier, because our goal is to migrate from buefy to oruga first

Yes we first introduce breaking changes because we missed important wrapping class (#6197)
Let's first focus on migration and then we can improve some components.

another example is that we still have b-navbar that doesnt have an oruga component. we can copy buefy implementation, or maybe create our own component

https://github.com/oruga-ui/theme-bulma#buefy-users "Soon" ahah but I think custom Bulma navbar is the way.

[yangwao]

let's fix conflicts, probably wont' go to upcoming production release which is planned in today/tomorrow as I sense select on lot of places and has lot of cases.

[reviewpad]

Reviewpad Report

⚠️ Warnings

• Please link an issue to the pull request

[vikiival]

So what's the current state?

[roiLeo]

So what's the current state?

let it roll 🎢

[vikiival]

[codeclimate]

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

View more on Code Climate.

[brano-hozza]

@vikiival I will open a new PR with changes sugested by @preschian to use mixins. It would be much cleaner to find errors in this refactor as I need to rollback multiple changes. I can get to it later today or tommorow

[vikiival]

Understandable ^-^